*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:;
    --tw-pan-y:;
    --tw-pinch-zoom:;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:;
    --tw-gradient-via-position:;
    --tw-gradient-to-position:;
    --tw-ordinal:;
    --tw-slashed-zero:;
    --tw-numeric-figure:;
    --tw-numeric-spacing:;
    --tw-numeric-fraction:;
    --tw-ring-inset:;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:;
    --tw-brightness:;
    --tw-contrast:;
    --tw-grayscale:;
    --tw-hue-rotate:;
    --tw-invert:;
    --tw-saturate:;
    --tw-sepia:;
    --tw-drop-shadow:;
    --tw-backdrop-blur:;
    --tw-backdrop-brightness:;
    --tw-backdrop-contrast:;
    --tw-backdrop-grayscale:;
    --tw-backdrop-hue-rotate:;
    --tw-backdrop-invert:;
    --tw-backdrop-opacity:;
    --tw-backdrop-saturate:;
    --tw-backdrop-sepia:;
    --tw-contain-size:;
    --tw-contain-layout:;
    --tw-contain-paint:;
    --tw-contain-style:;
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:;
    --tw-pan-y:;
    --tw-pinch-zoom:;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:;
    --tw-gradient-via-position:;
    --tw-gradient-to-position:;
    --tw-ordinal:;
    --tw-slashed-zero:;
    --tw-numeric-figure:;
    --tw-numeric-spacing:;
    --tw-numeric-fraction:;
    --tw-ring-inset:;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:;
    --tw-brightness:;
    --tw-contrast:;
    --tw-grayscale:;
    --tw-hue-rotate:;
    --tw-invert:;
    --tw-saturate:;
    --tw-sepia:;
    --tw-drop-shadow:;
    --tw-backdrop-blur:;
    --tw-backdrop-brightness:;
    --tw-backdrop-contrast:;
    --tw-backdrop-grayscale:;
    --tw-backdrop-hue-rotate:;
    --tw-backdrop-invert:;
    --tw-backdrop-opacity:;
    --tw-backdrop-saturate:;
    --tw-backdrop-sepia:;
    --tw-contain-size:;
    --tw-contain-layout:;
    --tw-contain-paint:;
    --tw-contain-style:;
}

/*
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
    box-sizing: border-box;
    /* 1 */
    border-width: 0;
    /* 2 */
    border-style: solid;
    /* 2 */
    border-color: #e5e7eb;
    /* 2 */
}

::before,
::after {
    --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
    line-height: 1.5;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
    -moz-tab-size: 4;
    /* 3 */
    -o-tab-size: 4;
    tab-size: 4;
    /* 3 */
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    /* 4 */
    font-feature-settings: normal;
    /* 5 */
    font-variation-settings: normal;
    /* 6 */
    -webkit-tap-highlight-color: transparent;
    /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
    margin: 0;
    /* 1 */
    line-height: inherit;
    /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
    height: 0;
    /* 1 */
    color: inherit;
    /* 2 */
    border-top-width: 1px;
    /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
    color: inherit;
    text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
    font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    /* 1 */
    font-feature-settings: normal;
    /* 2 */
    font-variation-settings: normal;
    /* 3 */
    font-size: 1em;
    /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
    font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
    text-indent: 0;
    /* 1 */
    border-color: inherit;
    /* 2 */
    border-collapse: collapse;
    /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    /* 1 */
    font-feature-settings: inherit;
    /* 1 */
    font-variation-settings: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
    font-weight: inherit;
    /* 1 */
    line-height: inherit;
    /* 1 */
    letter-spacing: inherit;
    /* 1 */
    color: inherit;
    /* 1 */
    margin: 0;
    /* 2 */
    padding: 0;
    /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
    text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
    -webkit-appearance: button;
    /* 1 */
    background-color: transparent;
    /* 2 */
    background-image: none;
    /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
    outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
    box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
    vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -2px;
    /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
    -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
    display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
    margin: 0;
}

fieldset {
    margin: 0;
    padding: 0;
}

legend {
    padding: 0;
}

ol,
ul,
menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
    padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
    resize: vertical;
}

    /*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

    input::-moz-placeholder, textarea::-moz-placeholder {
        opacity: 1;
        /* 1 */
        color: #9ca3af;
        /* 2 */
    }

    input::placeholder,
    textarea::placeholder {
        opacity: 1;
        /* 1 */
        color: #9ca3af;
        /* 2 */
    }

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
    cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
    cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block;
    /* 1 */
    vertical-align: middle;
    /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
    max-width: 100%;
    height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
    display: none;
}

html {
    scroll-behavior: smooth;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.pointer-events-none {
    pointer-events: none;
}

.pointer-events-auto {
    pointer-events: auto;
}

.visible {
    visibility: visible;
}

.invisible {
    visibility: hidden;
}

.collapse {
    visibility: collapse;
}

.static {
    position: static;
}

.fixed {
    position: fixed;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.sticky {
    position: sticky;
}

.inset-0 {
    inset: 0px;
}

.inset-\[-1px\] {
    inset: -1px;
}

.-bottom-\[400px\] {
    bottom: -400px;
}

.bottom-0 {
    bottom: 0px;
}

.bottom-\[1px\] {
    bottom: 1px;
}

.bottom-\[26px\] {
    bottom: 26px;
}

.left-0 {
    left: 0px;
}

.left-1\/2 {
    left: 50%;
}

.right-0 {
    right: 0px;
}

.right-3 {
    right: 0.75rem;
}

.right-\[-8px\] {
    right: -8px;
}

.right-\[3px\] {
    right: 3px;
}

.top-0 {
    top: 0px;
}

.top-1\/2 {
    top: 50%;
}

.top-2 {
    top: 0.5rem;
}

.top-3 {
    top: 0.75rem;
}

.top-\[-8px\] {
    top: -8px;
}

.top-\[0px\] {
    top: 0px;
}

.top-\[20px\] {
    top: 20px;
}

.top-\[4px\] {
    top: 4px;
}

.top-full {
    top: 100%;
}

.isolate {
    isolation: isolate;
}

.-z-\[1\] {
    z-index: -1;
}

.-z-\[2\] {
    z-index: -2;
}

.z-0 {
    z-index: 0;
}

.z-10 {
    z-index: 10;
}

.z-50 {
    z-index: 50;
}

.z-\[0\] {
    z-index: 0;
}

.z-\[1\] {
    z-index: 1;
}

.z-\[25\] {
    z-index: 25;
}

.z-\[2\] {
    z-index: 2;
}

.z-\[30\] {
    z-index: 30;
}

.z-\[3\] {
    z-index: 3;
}

.z-\[4\] {
    z-index: 4;
}

.z-\[99\] {
    z-index: 99;
}

.m-0 {
    margin: 0px;
}

.mx-\[10px\] {
    margin-left: 10px;
    margin-right: 10px;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.my-auto {
    margin-top: auto;
    margin-bottom: auto;
}

.mb-0 {
    margin-bottom: 0px;
}

.mb-10 {
    margin-bottom: 2.5rem;
}

.mb-\[-10px\] {
    margin-bottom: -10px;
}

.mb-\[10px\] {
    margin-bottom: 10px;
}

.mr-2 {
    margin-right: 0.5rem;
}

.mt-1 {
    margin-top: 0.25rem;
}

.mt-1\.5 {
    margin-top: 0.375rem;
}

.mt-10 {
    margin-top: 2.5rem;
}

.mt-16 {
    margin-top: 4rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-20 {
    margin-top: 5rem;
}

.mt-3 {
    margin-top: 0.75rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-6 {
    margin-top: 1.5rem;
}

.mt-\[10px\] {
    margin-top: 10px;
}

.mt-\[12px\] {
    margin-top: 12px;
}

.mt-\[15px\] {
    margin-top: 15px;
}

.mt-\[20px\] {
    margin-top: 20px;
}

.mt-\[30px\] {
    margin-top: 30px;
}

.mt-\[56px\] {
    margin-top: 56px;
}

.mt-\[60px\] {
    margin-top: 60px;
}

.mt-auto {
    margin-top: auto;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.inline {
    display: inline;
}

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.table {
    display: table;
}

.\!grid {
    display: grid !important;
}

.grid {
    display: grid;
}

.contents {
    display: contents;
}

.hidden {
    display: none;
}

.aspect-square {
    aspect-ratio: 1 / 1;
}

.h-11 {
    height: 2.75rem;
}

.h-14 {
    height: 3.5rem;
}

.h-2 {
    height: 0.5rem;
}

.h-20 {
    height: 5rem;
}

.h-3 {
    height: 0.75rem;
}

.h-4 {
    height: 1rem;
}

.h-5 {
    height: 1.25rem;
}

.h-6 {
    height: 1.5rem;
}

.h-\[101px\] {
    height: 101px;
}

.h-\[12px\] {
    height: 12px;
}

.h-\[150px\] {
    height: 150px;
}

.h-\[15px\] {
    height: 15px;
}

.h-\[18px\] {
    height: 18px;
}

.h-\[1px\] {
    height: 1px;
}

.h-\[20px\] {
    height: 20px;
}

.h-\[22px\] {
    height: 22px;
}

.h-\[25px\] {
    height: 25px;
}

.h-\[26px\] {
    height: 26px;
}

.h-\[27px\] {
    height: 27px;
}

.h-\[35px\] {
    height: 35px;
}

.h-\[36px\] {
    height: 36px;
}

.h-\[38px\] {
    height: 38px;
}

.h-\[48px\] {
    height: 48px;
}

.h-\[50px\] {
    height: 50px;
}

.h-\[55px\] {
    height: 55px;
}

.h-\[60px\] {
    height: 60px;
}

.h-\[65px\] {
    height: 65px;
}

.h-\[72px\] {
    height: 72px;
}

.h-\[80px\] {
    height: 80px;
}

.h-auto {
    height: auto;
}

.h-full {
    height: 100%;
}

.h-px {
    height: 1px;
}

.max-h-10 {
    max-height: 2.5rem;
}

.max-h-\[90vh\] {
    max-height: 90vh;
}

.max-h-full {
    max-height: 100%;
}

.min-h-0 {
    min-height: 0px;
}

.min-h-\[100px\] {
    min-height: 100px;
}

.min-h-\[116px\] {
    min-height: 116px;
}

.min-h-\[171px\] {
    min-height: 171px;
}

.min-h-\[200px\] {
    min-height: 200px;
}

.min-h-\[27px\] {
    min-height: 27px;
}

.min-h-\[296px\] {
    min-height: 296px;
}

.min-h-\[36px\] {
    min-height: 36px;
}

.min-h-\[50px\] {
    min-height: 50px;
}

.min-h-\[55px\] {
    min-height: 55px;
}

.min-h-\[60px\] {
    min-height: 60px;
}

.min-h-\[80px\] {
    min-height: 80px;
}

.min-h-full {
    min-height: 100%;
}

.min-h-screen {
    min-height: 100vh;
}

.w-20 {
    width: 5rem;
}

.w-4 {
    width: 1rem;
}

.w-5 {
    width: 1.25rem;
}

.w-6 {
    width: 1.5rem;
}

.w-\[100px\] {
    width: 100px;
}

.w-\[104px\] {
    width: 104px;
}

.w-\[120px\] {
    width: 120px;
}

.w-\[12px\] {
    width: 12px;
}

.w-\[15px\] {
    width: 15px;
}

.w-\[160px\] {
    width: 160px;
}

.w-\[18px\] {
    width: 18px;
}

.w-\[243px\] {
    width: 243px;
}

.w-\[26px\] {
    width: 26px;
}

.w-\[270px\] {
    width: 270px;
}

.w-\[35px\] {
    width: 35px;
}

.w-\[36px\] {
    width: 36px;
}

.w-\[400px\] {
    width: 400px;
}

.w-\[51px\] {
    width: 51px;
}

.w-\[56px\] {
    width: 56px;
}

.w-\[58px\] {
    width: 58px;
}

.w-\[60px\] {
    width: 60px;
}

.w-\[69px\] {
    width: 69px;
}

.w-\[70px\] {
    width: 70px;
}

.w-\[72px\] {
    width: 72px;
}

.w-\[90px\] {
    width: 90px;
}

.w-auto {
    width: auto;
}

.w-fit {
    width: -moz-fit-content;
    width: fit-content;
}

.w-full {
    width: 100%;
}

.w-px {
    width: 1px;
}

.min-w-0 {
    min-width: 0px;
}

.min-w-\[140px\] {
    min-width: 140px;
}

.min-w-\[280px\] {
    min-width: 280px;
}

.min-w-\[400px\] {
    min-width: 400px;
}

.min-w-\[550px\] {
    min-width: 550px;
}

.max-w-\[10rem\] {
    max-width: 10rem;
}

.max-w-\[1320px\] {
    max-width: 1320px;
}

.max-w-\[140px\] {
    max-width: 140px;
}

.max-w-\[215px\] {
    max-width: 215px;
}

.max-w-\[230px\] {
    max-width: 230px;
}

.max-w-\[300px\] {
    max-width: 300px;
}

.max-w-\[320px\] {
    max-width: 320px;
}

.max-w-\[400px\] {
    max-width: 400px;
}

.max-w-\[420px\] {
    max-width: 420px;
}

.max-w-\[430px\] {
    max-width: 430px;
}

.max-w-\[440px\] {
    max-width: 440px;
}

.max-w-\[460px\] {
    max-width: 460px;
}

.max-w-\[485px\] {
    max-width: 485px;
}

.max-w-\[500px\] {
    max-width: 500px;
}

.max-w-\[529px\] {
    max-width: 529px;
}

.max-w-\[60px\] {
    max-width: 60px;
}

.max-w-\[692px\] {
    max-width: 692px;
}

.max-w-\[700px\] {
    max-width: 700px;
}

.max-w-\[70px\] {
    max-width: 70px;
}

.max-w-\[756px\] {
    max-width: 756px;
}

.max-w-\[850px\] {
    max-width: 850px;
}

.max-w-\[85px\] {
    max-width: 85px;
}

.max-w-\[900px\] {
    max-width: 900px;
}

.max-w-full {
    max-width: 100%;
}

.max-w-none {
    max-width: none;
}

.flex-1 {
    flex: 1 1 0%;
}

.flex-shrink {
    flex-shrink: 1;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.shrink {
    flex-shrink: 1;
}

.shrink-0 {
    flex-shrink: 0;
}

.flex-grow {
    flex-grow: 1;
}

.grow {
    flex-grow: 1;
}

.table-fixed {
    table-layout: fixed;
}

.border-collapse {
    border-collapse: collapse;
}

.border-separate {
    border-collapse: separate;
}

.border-spacing-0 {
    --tw-border-spacing-x: 0px;
    --tw-border-spacing-y: 0px;
    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
}

.-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-\[calc\(50\%\+10px\)\] {
    --tw-translate-x: calc(calc(50% + 10px) * -1);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-not-allowed {
    cursor: not-allowed;
}

.cursor-pointer {
    cursor: pointer;
}

.resize {
    resize: both;
}

.list-disc {
    list-style-type: disc;
}

.list-none {
    list-style-type: none;
}

.appearance-none {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-\[0\.7fr_1\.3fr\] {
    grid-template-columns: 0.7fr 1.3fr;
}

.flex-row {
    flex-direction: row;
}

.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.content-center {
    align-content: center;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.items-center {
    align-items: center;
}

.items-baseline {
    align-items: baseline;
}

.items-stretch {
    align-items: stretch;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-0 {
    gap: 0px;
}

.gap-1 {
    gap: 0.25rem;
}

.gap-1\.5 {
    gap: 0.375rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-2\.5 {
    gap: 0.625rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-5 {
    gap: 1.25rem;
}

.gap-\[10px\] {
    gap: 10px;
}

.gap-\[15px\] {
    gap: 15px;
}

.gap-\[16px\] {
    gap: 16px;
}

.gap-\[20px\] {
    gap: 20px;
}

.gap-\[25px\] {
    gap: 25px;
}

.gap-\[2px\] {
    gap: 2px;
}

.gap-\[30px\] {
    gap: 30px;
}

.gap-\[3px\] {
    gap: 3px;
}

.gap-\[3rem\] {
    gap: 3rem;
}

.gap-\[5px\] {
    gap: 5px;
}

.gap-\[6px\] {
    gap: 6px;
}

.gap-x-1 {
    -moz-column-gap: 0.25rem;
    column-gap: 0.25rem;
}

.self-start {
    align-self: flex-start;
}

.self-end {
    align-self: flex-end;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-visible {
    overflow: visible;
}

.overflow-x-auto {
    overflow-x: auto;
}

.overflow-y-auto {
    overflow-y: auto;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-ellipsis {
    text-overflow: ellipsis;
}

.whitespace-nowrap {
    white-space: nowrap;
}

.break-words {
    overflow-wrap: break-word;
}

.rounded {
    border-radius: 0.25rem;
}

.rounded-\[10px\] {
    border-radius: 10px;
}

.rounded-\[11px\] {
    border-radius: 11px;
}

.rounded-\[15px\] {
    border-radius: 15px;
}

.rounded-\[20px\] {
    border-radius: 20px;
}

.rounded-\[25px\] {
    border-radius: 25px;
}

.rounded-\[2px\] {
    border-radius: 2px;
}

.rounded-\[4\.5px\] {
    border-radius: 4.5px;
}

.rounded-\[5\.623px\] {
    border-radius: 5.623px;
}

.rounded-\[5px\] {
    border-radius: 5px;
}

.rounded-\[6px\] {
    border-radius: 6px;
}

.rounded-\[8px\] {
    border-radius: 8px;
}

.rounded-\[999px\] {
    border-radius: 999px;
}

.rounded-\[99px\] {
    border-radius: 99px;
}

.rounded-\[inherit\] {
    border-radius: inherit;
}

.rounded-full {
    border-radius: 9999px;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.rounded-md {
    border-radius: 0.375rem;
}

.rounded-b-\[10px\] {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.rounded-t-\[10px\] {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.rounded-t-\[20px\] {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.rounded-t-\[30px\] {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.rounded-br-\[5px\] {
    border-bottom-right-radius: 5px;
}

.border {
    border-width: 1px;
}

.border-0 {
    border-width: 0px;
}

.border-2 {
    border-width: 2px;
}

.border-\[0\.562px\] {
    border-width: 0.562px;
}

.border-\[1\.125px\] {
    border-width: 1.125px;
}

.border-solid {
    border-style: solid;
}

.border-none {
    border-style: none;
}

.border-\[\#093f85\] {
    --tw-border-opacity: 1;
    border-color: rgb(9 63 133 / var(--tw-border-opacity, 1));
}

.border-\[\#0B4DA0\] {
    --tw-border-opacity: 1;
    border-color: rgb(11 77 160 / var(--tw-border-opacity, 1));
}

.border-\[\#243b53\] {
    --tw-border-opacity: 1;
    border-color: rgb(36 59 83 / var(--tw-border-opacity, 1));
}

.border-\[\#334e68\] {
    --tw-border-opacity: 1;
    border-color: rgb(51 78 104 / var(--tw-border-opacity, 1));
}

.border-\[\#434343\] {
    --tw-border-opacity: 1;
    border-color: rgb(67 67 67 / var(--tw-border-opacity, 1));
}

.border-\[\#685233\] {
    --tw-border-opacity: 1;
    border-color: rgb(104 82 51 / var(--tw-border-opacity, 1));
}

.border-\[\#9fb3c8\] {
    --tw-border-opacity: 1;
    border-color: rgb(159 179 200 / var(--tw-border-opacity, 1));
}

.border-\[\#facc15\] {
    --tw-border-opacity: 1;
    border-color: rgb(250 204 21 / var(--tw-border-opacity, 1));
}

.border-\[\#ffde2d\] {
    --tw-border-opacity: 1;
    border-color: rgb(255 222 45 / var(--tw-border-opacity, 1));
}

.border-gpPrimaryHover {
    --tw-border-opacity: 1;
    border-color: rgb(95 196 238 / var(--tw-border-opacity, 1));
}

.border-transparent {
    border-color: transparent;
}

.bg-\[\#020E1F\] {
    --tw-bg-opacity: 1;
    background-color: rgb(2 14 31 / var(--tw-bg-opacity, 1));
}

.bg-\[\#137FA9\] {
    --tw-bg-opacity: 1;
    background-color: rgb(19 127 169 / var(--tw-bg-opacity, 1));
}

.bg-\[\#171416\] {
    --tw-bg-opacity: 1;
    background-color: rgb(23 20 22 / var(--tw-bg-opacity, 1));
}

.bg-\[\#1CAEE7\] {
    --tw-bg-opacity: 1;
    background-color: rgb(28 174 231 / var(--tw-bg-opacity, 1));
}

.bg-\[\#2D2D2D\] {
    --tw-bg-opacity: 1;
    background-color: rgb(45 45 45 / var(--tw-bg-opacity, 1));
}

.bg-\[\#333333\] {
    --tw-bg-opacity: 1;
    background-color: rgb(51 51 51 / var(--tw-bg-opacity, 1));
}

.bg-\[\#333\] {
    --tw-bg-opacity: 1;
    background-color: rgb(51 51 51 / var(--tw-bg-opacity, 1));
}

.bg-\[\#334E68\] {
    --tw-bg-opacity: 1;
    background-color: rgb(51 78 104 / var(--tw-bg-opacity, 1));
}

.bg-\[\#5e22a7\] {
    --tw-bg-opacity: 1;
    background-color: rgb(94 34 167 / var(--tw-bg-opacity, 1));
}

.bg-\[\#facc15\] {
    --tw-bg-opacity: 1;
    background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
}

.bg-\[rgba\(231\2c 167\2c 28\2c 0\.06\)\] {
    background-color: rgba(231,167,28,0.06);
}

.bg-gpPrimary {
    --tw-bg-opacity: 1;
    background-color: rgb(28 174 231 / var(--tw-bg-opacity, 1));
}

.bg-transparent {
    background-color: transparent;
}

.bg-\[url\(\"\.\.\/images\/itemcode-game-head-bg\.webp\"\)\] {
    background-image: url("../images/itemcode-game-head-bg.webp");
}

.bg-\[url\(\'\.\.\/images\/serenade-bg-mobile\.jpg\'\)\] {
    background-image: url('../images/serenade-bg-mobile.jpg');
}

.bg-cover {
    background-size: cover;
}

.bg-left-top {
    background-position: left top;
}

.bg-no-repeat {
    background-repeat: no-repeat;
}

.object-contain {
    -o-object-fit: contain;
    object-fit: contain;
}

.object-cover {
    -o-object-fit: cover;
    object-fit: cover;
}

.p-0 {
    padding: 0px;
}

.p-1 {
    padding: 0.25rem;
}

.p-2 {
    padding: 0.5rem;
}

.p-3 {
    padding: 0.75rem;
}

.p-5 {
    padding: 1.25rem;
}

.p-8 {
    padding: 2rem;
}

.p-\[0_10px\] {
    padding: 0 10px;
}

.p-\[10px\] {
    padding: 10px;
}

.p-\[15px\] {
    padding: 15px;
}

.p-\[30px\] {
    padding: 30px;
}

.p-\[40px\] {
    padding: 40px;
}

.px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

.px-2\.5 {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.px-\[10px\] {
    padding-left: 10px;
    padding-right: 10px;
}

.px-\[14px\] {
    padding-left: 14px;
    padding-right: 14px;
}

.px-\[15px\] {
    padding-left: 15px;
    padding-right: 15px;
}

.px-\[16px\] {
    padding-left: 16px;
    padding-right: 16px;
}

.px-\[20px\] {
    padding-left: 20px;
    padding-right: 20px;
}

.px-\[24px\] {
    padding-left: 24px;
    padding-right: 24px;
}

.px-\[30px\] {
    padding-left: 30px;
    padding-right: 30px;
}

.px-\[60px\] {
    padding-left: 60px;
    padding-right: 60px;
}

.px-\[8px\] {
    padding-left: 8px;
    padding-right: 8px;
}

.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.py-\[10px\] {
    padding-top: 10px;
    padding-bottom: 10px;
}

.py-\[20px\] {
    padding-top: 20px;
    padding-bottom: 20px;
}

.py-\[26px\] {
    padding-top: 26px;
    padding-bottom: 26px;
}

.py-\[40px\] {
    padding-top: 40px;
    padding-bottom: 40px;
}

.py-\[5px\] {
    padding-top: 5px;
    padding-bottom: 5px;
}

.py-\[60px\] {
    padding-top: 60px;
    padding-bottom: 60px;
}

.pb-6 {
    padding-bottom: 1.5rem;
}

.pb-\[0px\] {
    padding-bottom: 0px;
}

.pb-\[30px\] {
    padding-bottom: 30px;
}

.pb-\[4px\] {
    padding-bottom: 4px;
}

.pl-0 {
    padding-left: 0px;
}

.pr-\[110px\] {
    padding-right: 110px;
}

.pt-10 {
    padding-top: 2.5rem;
}

.pt-2\.5 {
    padding-top: 0.625rem;
}

.pt-\[20px\] {
    padding-top: 20px;
}

.pt-\[32px\] {
    padding-top: 32px;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-\[10px\] {
    font-size: 10px;
}

.text-\[11px\] {
    font-size: 11px;
}

.text-\[12px\] {
    font-size: 12px;
}

.text-\[14px\] {
    font-size: 14px;
}

.text-\[16px\] {
    font-size: 16px;
}

.text-\[8px\] {
    font-size: 8px;
}

.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.font-bold {
    font-weight: 700;
}

.font-medium {
    font-weight: 500;
}

.font-normal {
    font-weight: 400;
}

.font-semibold {
    font-weight: 600;
}

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

.leading-\[1\.4\] {
    line-height: 1.4;
}

.leading-\[1\.6\] {
    line-height: 1.6;
}

.leading-\[12px\] {
    line-height: 12px;
}

.leading-\[18px\] {
    line-height: 18px;
}

.leading-\[22px\] {
    line-height: 22px;
}

.leading-\[8px\] {
    line-height: 8px;
}

.leading-normal {
    line-height: 1.5;
}

.leading-tight {
    line-height: 1.25;
}

.text-\[\#020e1f\] {
    --tw-text-opacity: 1;
    color: rgb(2 14 31 / var(--tw-text-opacity, 1));
}

.text-\[\#061221\] {
    --tw-text-opacity: 1;
    color: rgb(6 18 33 / var(--tw-text-opacity, 1));
}

.text-\[\#1CAEE7\] {
    --tw-text-opacity: 1;
    color: rgb(28 174 231 / var(--tw-text-opacity, 1));
}

.text-\[\#5fc4ee\] {
    --tw-text-opacity: 1;
    color: rgb(95 196 238 / var(--tw-text-opacity, 1));
}

.text-\[\#B273FF\] {
    --tw-text-opacity: 1;
    color: rgb(178 115 255 / var(--tw-text-opacity, 1));
}

.text-\[\#bcccdc\] {
    --tw-text-opacity: 1;
    color: rgb(188 204 220 / var(--tw-text-opacity, 1));
}

.text-\[\#facc15\] {
    --tw-text-opacity: 1;
    color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}

.text-\[\#fff\] {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-amber-400 {
    --tw-text-opacity: 1;
    color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}

.text-gpAlert {
    --tw-text-opacity: 1;
    color: rgb(255 56 60 / var(--tw-text-opacity, 1));
}

.text-gpPrimary {
    --tw-text-opacity: 1;
    color: rgb(28 174 231 / var(--tw-text-opacity, 1));
}

.text-gray-100 {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-white\/80 {
    color: rgb(255 255 255 / 0.8);
}

.underline {
    text-decoration-line: underline;
}

.overline {
    text-decoration-line: overline;
}

.no-underline {
    text-decoration-line: none;
}

.opacity-0 {
    opacity: 0;
}

.opacity-100 {
    opacity: 1;
}

.opacity-90 {
    opacity: 0.9;
}

.opacity-\[0\.33\] {
    opacity: 0.33;
}

.outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.outline {
    outline-style: solid;
}

.ring {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-2 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-cyan-400 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(34 211 238 / var(--tw-ring-opacity, 1));
}

.ring-offset-2 {
    --tw-ring-offset-width: 2px;
}

.ring-offset-\[\#190e0e\] {
    --tw-ring-offset-color: #190e0e;
}

.blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.brightness-100 {
    --tw-brightness: brightness(1);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow {
    --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.saturate-50 {
    --tw-saturate: saturate(.5);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.sepia {
    --tw-sepia: sepia(100%);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-filter {
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.duration-150 {
    transition-duration: 150ms;
}

.duration-200 {
    transition-duration: 200ms;
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/*body text font*/

body {
    font-family: "Google Sans", sans-serif;
}

/* Payment Success (scoped) */

.gp-shop__pay--success {
    width: 100%;
}

.gp-shop.gp-shop__pay--success {
    padding-top: 48px;
    padding-bottom: 72px;
}

.gp-shop__inner.gp-shop__pay--success {
    max-width: 1320px;
}

.gp-shop__pay--success .gp-pay-success {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* background:
    radial-gradient(72% 135% at 50% 108%, rgba(36, 115, 242, 0.7) 0%, rgba(36, 115, 242, 0) 68%),
    linear-gradient(180deg, rgba(32, 111, 224, 0.88) 0%, rgba(13, 72, 171, 0.9) 52%, rgba(9, 55, 134, 0.92) 100%);*/

.gp-shop__pay--success .gp-pay-success__hero {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 40px 55px 40px;
    border: 1px solid rgba(92, 200, 255, 0.28);
    background: radial-gradient(120% 180% at 50% 100%, rgba(29, 113, 213, 0.79) 0%, rgba(36, 115, 242, 0.1) 60%);
    box-shadow: 0 52px 64px rgba(0, 90, 204, 0.58);
    text-align: center;
}

    .gp-shop__pay--success .gp-pay-success__hero.gp-pay-fail {
        border: 1px solid rgba(255, 140, 140, 0.28);
        background: radial-gradient(120% 180% at 50% 100%, rgba(131, 22, 22, 0.79) 0%, rgba(131, 22, 22, 0.1) 60%);
    }

        .gp-shop__pay--success .gp-pay-success__hero.gp-pay-fail .gp-pay-success__title {
            color: #ff7474;
        }

        .gp-shop__pay--success .gp-pay-success__hero.gp-pay-fail .gp-pay-success__subtitle {
            color: #fff;
            line-height: 28px;
        }

        .gp-shop__pay--success .gp-pay-success__hero.gp-pay-fail .gp-pay-success__hero-btn--ghost {
            border-color: #fff;
            background: transparent;
            color: #fff;
        }

        .gp-shop__pay--success .gp-pay-success__hero.gp-pay-fail .gp-pay-success__hero-btn--primary {
            border-color: transparent;
            color: #020e1f;
            background: linear-gradient(113.838deg, #52ceff 5.7%, #1caee7 54.4%);
        }

.gp-pay-fail__caution {
    width: -moz-fit-content;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #8f3636;
    background: rgba(23, 23, 23, 0.53);
}

.gp-pay-fail__caution-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-pay-fail__caution-text {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: #fff;
    text-align: center;
}

.gp-pay-fail__caution-em {
    color: #ffde2d;
}

.gp-pay-fail__caution-link {
    color: #5fc4ee;
    text-decoration: underline;
}

.gp-shop__pay--success .gp-pay-success__hero.gp-pay-cancel .gp-pay-success__title {
    color: #febc2f;
}

.gp-shop__pay--success .gp-pay-success__hero.gp-pay-cancel .gp-pay-success__subtitle {
    color: #fff;
    line-height: 28px;
}

.gp-shop__pay--success .gp-pay-success__hero.gp-pay-cancel .gp-pay-success__hero-btn {
    max-width: 450px;
}

.gp-shop__pay--success .gp-pay-success__hero.gp-pay-cancel .gp-pay-success__hero-btn--primary {
    border-color: transparent;
    color: #020e1f;
    background: linear-gradient(113.838deg, #52ceff 5.7%, #1caee7 54.4%);
}

.gp-pay-cancel__support {
    margin: 20px 0 0;
    font-size: 16px;
    line-height: 24px;
    color: #fff;
    text-align: center;
}

.gp-pay-cancel__support-link {
    color: #5fc4ee;
    text-decoration: underline;
}

.gp-shop__pay--success .gp-pay-success__hero-confetti {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
}

.gp-shop__pay--success .gp-pay-success__hero-confetti-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece {
    transform-box: fill-box;
    transform-origin: center;
    animation: gp-confetti-fall var(--fall-duration, 1.6s) linear infinite;
    will-change: transform, opacity;
}

.gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece--a {
    --fall-duration: 1.25s;
    animation-delay: -0.12s;
}

.gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece--b {
    --fall-duration: 1.7s;
    animation-delay: -1.24s;
}

.gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece--c {
    --fall-duration: 1.9s;
    animation-delay: -0.52s;
}

.gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece--d {
    --fall-duration: 1.56s;
    animation-delay: -1.66s;
}

.gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece--e {
    --fall-duration: 1.34s;
    animation-delay: -0.41s;
}

.gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece--f {
    --fall-duration: 1.82s;
    animation-delay: -1.75s;
}

.gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece--g {
    --fall-duration: 1.44s;
    animation-delay: -0.96s;
}

.gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece--h {
    --fall-duration: 1.88s;
    animation-delay: -1.43s;
}

.gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece--i {
    --fall-duration: 1.62s;
    animation-delay: -0.67s;
}

.gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece--j {
    --fall-duration: 1.95s;
    animation-delay: -1.89s;
}

.gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece--k {
    --fall-duration: 1.58s;
    animation-delay: -0.28s;
}

.gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece--l {
    --fall-duration: 1.84s;
    animation-delay: -1.31s;
}

.gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece--m {
    --fall-duration: 1.38s;
    animation-delay: -1.02s;
}

.gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece--n {
    --fall-duration: 1.92s;
    animation-delay: -1.58s;
}

.gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece--o {
    --fall-duration: 1.48s;
    animation-delay: -0.73s;
}

.gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece--p {
    --fall-duration: 1.8s;
    animation-delay: -1.47s;
}

.gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece--q {
    --fall-duration: 1.66s;
    animation-delay: -0.89s;
}

.gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece--r {
    --fall-duration: 1.22s;
    animation-delay: -0.18s;
}

.gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece--s {
    --fall-duration: 1.76s;
    animation-delay: -1.36s;
}

.gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece--t {
    --fall-duration: 1.69s;
    animation-delay: -1.14s;
}

.gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece--u {
    --fall-duration: 1.52s;
    animation-delay: -1.27s;
}

@keyframes gp-crown-flare-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes gp-confetti-fall {
    0% {
        transform: translate3d(0, -16px, 0) rotate(0deg);
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    35% {
        transform: translate3d(14px, 72px, 0) rotate(170deg);
        opacity: 1;
    }

    70% {
        transform: translate3d(-18px, 148px, 0) rotate(290deg);
        opacity: 0.95;
    }

    100% {
        transform: translate3d(10px, 210px, 0) rotate(420deg);
        opacity: 0;
    }
}

.gp-shop__pay--success .gp-pay-success__hero-content {
    position: relative;
    z-index: 1;
}

.gp-shop__pay--success .gp-pay-success__icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 10px;
}

.gp-shop__pay--success .gp-pay-success__title {
    margin: 0;
    color: #f8fcff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.gp-shop__pay--success .gp-pay-success__subtitle {
    margin: 5px 0 0;
    color: rgba(226, 243, 255, 0.92);
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
}

.gp-shop__pay--success .gp-pay-success__hero-actions,
.gp-shop__pay--success .gp-pay-success__bottom-actions {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.gp-shop__pay--success .gp-pay-success__hero-actions {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.gp-shop__pay--success .gp-pay-success__hero-btn,
.gp-shop__pay--success .gp-pay-success__bottom-btn {
    width: 100%;
    max-width: 400px;
    min-height: 65px;
    border-radius: 10px;
    border: 1px solid #4cc7ff;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.gp-shop__pay--success .gp-pay-success__hero-btn--ghost,
.gp-shop__pay--success .gp-pay-success__bottom-btn--ghost {
    color: #d6f4ff;
    background: rgba(7, 20, 51, 0.36);
}

.gp-shop__pay--success .gp-pay-success__hero-btn--primary,
.gp-shop__pay--success .gp-pay-success__bottom-btn--primary {
    color: #071d33;
    background: linear-gradient(180deg, #61d6ff 0%, #2fc0ff 100%);
}

.gp-shop__pay--success .gp-pay-success__hero-btn:hover,
.gp-shop__pay--success .gp-pay-success__hero-btn:active,
.gp-shop__pay--success .gp-pay-success__bottom-btn:hover,
.gp-shop__pay--success .gp-pay-success__bottom-btn:active {
    filter: brightness(1.1);
}

.gp-shop__pay--success .gp-pay-success__summary,
.gp-shop__pay--success .gp-pay-success__recommend {
    border: 1px solid rgba(92, 200, 255, 0.3);
    border-radius: 8px;
    background: rgba(14, 19, 28, 0.84);
}

.gp-shop__pay--success .gp-pay-success__recommend {
    padding: 0;
}

.gp-shop__pay--success .gp-pay-success__summary-head {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(92, 200, 255, 0.24);
    background: rgba(15, 35, 78, 0.55);
}

.gp-shop__pay--success .gp-pay-success__summary-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #eaf7ff;
    font-size: 18px;
    font-weight: 700;
}

    .gp-shop__pay--success .gp-pay-success__summary-title img {
        width: 20px;
        height: 20px;
    }

.gp-shop__pay--success .gp-pay-success__summary-body {
    padding: 28px 20px;
}

.gp-shop__pay--success .gp-pay-success__meta,
.gp-shop__pay--success .gp-pay-success__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gp-shop__pay--success .gp-pay-success__meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    color: #d5dde8;
    font-size: 14px;
}

    .gp-shop__pay--success .gp-pay-success__meta-row > :last-child {
        font-weight: 500;
    }

.gp-shop__pay--success .gp-pay-success__status-value {
    color: #33ff53;
    font-weight: 600;
}

.gp-shop__pay--success .gp-pay-success__status-value--pending {
    color: #febc2f;
}

.gp-shop__pay--success .gp-pay-success__status-value--cancel {
    color: #ff5f57;
}

.gp-shop__pay--success .gp-pay-success__point-value {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #36cbff;
}

    .gp-shop__pay--success .gp-pay-success__point-value img {
        width: 16px;
        height: 16px;
    }

.gp-shop__pay--success .gp-pay-success__divider {
    margin: 20px 0;
    height: 1px;
    background: rgba(146, 172, 213, 0.24);
}

.gp-shop__pay--success .gp-pay-success__payment-total {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
}

.gp-shop__pay--success .gp-pay-success__payment,
.gp-shop__pay--success .gp-pay-success__total {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #d5dde8;
    font-size: 14px;
}

.gp-shop__pay--success .gp-pay-success__payment-method {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #f3fbff;
}

    .gp-shop__pay--success .gp-pay-success__payment-method img {
        width: 84px;
        height: 35px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-shop__pay--success .gp-pay-success__total {
    align-items: flex-end;
}

    .gp-shop__pay--success .gp-pay-success__total strong {
        color: #35c8ff;
        font-size: 26px;
        line-height: 1;
    }

.gp-shop__pay--success .gp-pay-success__recommend .gp-shop-recommend__head {
    border-bottom: 1px solid rgba(92, 200, 255, 0.24);
    border-radius: 0;
}

.gp-shop__pay--success .gp-pay-success__recommend .recommend-products-grid {
    padding: 20px;
    gap: 10px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.gp-shop__pay--success .gp-pay-success__bottom-actions {
    margin-top: 0;
}

@media (max-width: 1024px) {
    .gp-shop.gp-shop__pay--success {
        padding-top: 24px;
        padding-bottom: 48px;
    }

    .gp-shop__pay--success .gp-pay-success {
        gap: 12px;
    }

    .gp-shop__pay--success .gp-pay-success__hero {
        border-radius: 12px;
        padding: 24px 16px;
    }

    .gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece {
        --fall-duration: 1.6s;
    }

    .gp-shop__pay--success .gp-pay-success__title {
        font-size: 20px;
    }

    .gp-shop__pay--success .gp-pay-success__subtitle {
        font-size: 14px;
        line-height: 20px;
    }

    .gp-shop__pay--success .gp-pay-success__hero.gp-pay-fail .gp-pay-success__subtitle {
        line-height: 20px;
    }

    .gp-pay-fail__caution-text {
        font-size: 14px;
        line-height: 20px;
        white-space: normal;
    }

    .gp-shop__pay--success .gp-pay-success__hero-actions {
        gap: 10px;
        margin-top: 14px;
        max-width: 100%;
    }

    .gp-shop__pay--success .gp-pay-success__hero-btn,
    .gp-shop__pay--success .gp-pay-success__bottom-btn {
        min-height: 48px;
        font-size: 14px;
        border-radius: 6px;
    }

    .gp-shop__pay--success .gp-pay-success__summary-head,
    .gp-shop__pay--success .gp-pay-success__summary-body,
    .gp-shop__pay--success .gp-pay-success__recommend .recommend-products-grid {
        padding-left: 12px;
        padding-right: 12px;
    }

    .gp-shop__pay--success .gp-pay-success__payment-total {
        align-items: stretch;
    }

    .gp-shop__pay--success .gp-pay-success__total strong {
        font-size: 20px;
    }

    .gp-shop__pay--success .gp-pay-success__recommend .recommend-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .gp-shop__pay--success .gp-pay-success__bottom-actions {
        gap: 10px;
        margin-top: 6px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .gp-shop__pay--success .gp-pay-success__recommend .recommend-products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }
}

@media (min-width: 1024px) and (orientation: portrait) {
    .gp-shop__pay--success .gp-pay-success__recommend .recommend-products-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }
}

@media (max-width: 767px) {
    .gp-shop__pay--success .gp-pay-success__hero {
        padding: 24px 12px;
    }

    .gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece--b,
    .gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece--d,
    .gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece--f,
    .gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece--h,
    .gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece--j,
    .gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece--l,
    .gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece--n,
    .gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece--p,
    .gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece--s,
    .gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece--u {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gp-shop__pay--success .gp-pay-success__hero-confetti .confetti-piece {
        animation: none;
        opacity: 0.95;
    }

    .gp-serenade-state__card-icon-flare {
        animation: none;
    }
}

/* Page – gray background */

.page {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.page--gray {
    --tw-bg-opacity: 1;
    background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}

/* Game select popup – full-screen overlay */

.game-select-popup {
    position: fixed;
    inset: 0px;
    z-index: 50;
    display: none;
    min-height: 100vh;
    height: 100vh;
    min-height: 100dvh;
    height: 100dvh;
}

.game-select-popup--open {
    flex-direction: column;
    display: flex;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .game-select-popup--open {
        align-items: center;
        justify-content: center;
    }
}

.game-select-popup__backdrop {
    position: absolute;
    inset: 0px;
    min-height: 100vh;
    width: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(20, 20, 20, 0.08) 0%, transparent 45%), radial-gradient(circle at 50% 50%, rgba(20, 20, 20, 0.08) 10%, transparent 55%), radial-gradient(circle at 50% 50%, #111 0%, #1a1a1a 100%);
    background-blend-mode: soft-light;
    box-shadow: inset 0 0 60px rgba(255, 255, 255, 0.3), inset 20px 0 80px rgba(255, 0, 255, 0.2), inset -20px 0 80px rgba(0, 255, 255, 0.2), inset 20px 0 300px rgba(255, 0, 255, 0.1), inset -20px 0 300px rgba(0, 255, 255, 0.1), 0 0 50px rgba(255, 255, 255, 0.1), -10px 0 80px rgba(255, 0, 255, 0.1), 10px 0 80px rgba(0, 255, 255, 0.1);
    filter: contrast(1.05) brightness(1.05) blur(0.5px);
}

    .game-select-popup__backdrop::before {
        content: '';
        pointer-events: none;
        position: absolute;
        inset: 0px;
        z-index: 1;
        background-image: url('../images/bg-top-gradient.svg');
        background-size: cover;
        background-position: top center;
        opacity: 0.9;
        filter: blur(1px);
    }

/* Page main background – same visual as popup backdrop */

/*radial-gradient(circle at 50% 50%, rgba(255, 0, 255, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(0, 255, 255, 0.08) 10%, transparent 55%),
    radial-gradient(circle at 50% 50%, #111 0%, #1a1a1a 100%);*/

.page__backdrop {
    position: fixed;
    inset: 0px;
    z-index: -1;
    min-height: 100vh;
    width: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(20, 20, 20, 0.08) 0%, transparent 45%), radial-gradient(circle at 50% 50%, rgba(20, 20, 20, 0.08) 10%, transparent 55%), radial-gradient(circle at 50% 50%, #111 0%, #1a1a1a 100%);
    background-blend-mode: soft-light;
    box-shadow: inset 0 0 60px rgba(255, 255, 255, 0.3), inset 20px 0 80px rgba(255, 0, 255, 0.2), inset -20px 0 80px rgba(0, 255, 255, 0.2), inset 20px 0 300px rgba(255, 0, 255, 0.1), inset -20px 0 300px rgba(0, 255, 255, 0.1), 0 0 50px rgba(255, 255, 255, 0.1), -10px 0 80px rgba(255, 0, 255, 0.1), 10px 0 80px rgba(0, 255, 255, 0.1);
    filter: contrast(1.05) brightness(1.05) blur(0.5px);
}

    .page__backdrop::before {
        content: '';
        pointer-events: none;
        position: absolute;
        inset: 0px;
        z-index: 2;
        background-image: url('../images/bg-top-gradient.svg');
        background-size: cover;
        background-position: top center;
        opacity: 0.6;
        filter: blur(2px);
    }

.page__backdrop--type2::before {
    background-position: top center;
}

.page__backdrop::after {
    content: '';
    pointer-events: none;
    position: absolute;
    inset: 0px;
    z-index: 1;
    background-image: url('../images/bg-decoration.webp');
    background-size: cover;
    background-position: center;
    opacity: 0.25;
    mix-blend-mode: overlay;
}

.game-select-popup__inner {
    position: relative;
    display: flex;
    min-height: 100%;
    width: 100%;
    flex: 1 1 0%;
    align-items: stretch;
    justify-content: center;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .game-select-popup__backdrop {
        top: 4vh;
        bottom: 4vh;
        left: 50%;
        transform: translateX(-50%);
        width: min(900px, 80vw);
        min-height: 0;
    }

    .game-select-popup__inner {
        margin-left: auto;
        margin-right: auto;
        max-height: 90vh;
        min-height: 0px;
        max-width: 850px;
    }

        .game-select-popup__inner::before {
            content: '';
            position: fixed;
            inset: 0px;
            z-index: -1;
            background: rgba(0, 0, 0, 0.5);
        }
}

.game-select-popup__content {
    display: grid;
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 25px;
    padding: 1rem;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    max-width: 1400px;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .game-select-popup__content {
        grid-template-columns: 1fr 1fr;
        -moz-column-gap: 16px;
        column-gap: 16px;
        container-type: inline-size;
        container-name: popup;
    }
}

@media (min-width: 1024px) and (orientation: portrait) {
    .game-select-popup__content {
        grid-template-columns: 1fr;
    }
}

.game-select-popup__header {
    display: flex;
    flex-shrink: 0;
    grid-column: 1 / -1;
}

.game-select-popup__close {
    display: inline-flex;
    height: 1rem;
    width: 1rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

    .game-select-popup__close:hover {
        opacity: 0.8;
    }

    .game-select-popup__close:focus {
        outline: 2px solid transparent;
        outline-offset: 2px;
    }

    .game-select-popup__close:focus-visible {
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
        --tw-ring-opacity: 1;
        --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
    }

.game-select-popup__close {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
}

.game-select-popup__close-icon {
    height: 100%;
    width: 100%;
}

.game-select-popup__body {
    position: relative;
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .game-select-popup__body {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
}

.game-select-popup__body {
    grid-column: 1;
}

.game-select-popup__title {
    text-align: center;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
    line-height: 1.5;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 768px) {
    .game-select-popup__title {
        font-size: 26px;
    }
}

.game-select-popup__title {
    font-family: "Google Sans", sans-serif;
}

.game-select-popup__cards {
    display: flex;
    width: 100%;
    max-width: 500px;
    flex-direction: column;
    gap: 0.625rem;
}

.game-select-popup__card {
    position: relative;
    display: flex;
    height: 150px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px;
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(11 77 160 / var(--tw-border-opacity, 1));
    background-color: transparent;
    padding: 2rem;
}

    .game-select-popup__card:focus {
        outline: 2px solid transparent;
        outline-offset: 2px;
    }

    .game-select-popup__card:focus-visible {
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
        --tw-ring-opacity: 1;
        --tw-ring-color: rgb(34 211 238 / var(--tw-ring-opacity, 1));
    }

.game-select-popup__card--selected {
    --tw-border-opacity: 1;
    border-color: rgb(250 204 21 / var(--tw-border-opacity, 1));
    box-shadow: 0 0 9.1px 0 rgba(255, 70, 70, 0.6);
}

.game-select-popup__card-bg {
    position: absolute;
    inset: 0px;
    overflow: hidden;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    filter: brightness(0.5);
}

.game-select-popup__card-bg--cbr {
    background-image: url("../images/game-sel-cbr-bg-type2.webp");
}

.game-select-popup__card-bg--dync {
    background-image: url("../images/game-sel-dync-bg.webp");
}

.game-select-popup__card--selected .game-select-popup__card-bg {
    filter: brightness(1);
}

.game-select-popup__card-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

.game-select-popup__card-logo {
    display: flex;
    height: 72px;
    width: 243px;
    align-items: center;
    justify-content: center;
}

    .game-select-popup__card-logo img {
        max-height: 100%;
        max-width: 100%;
        -o-object-fit: contain;
        object-fit: contain;
    }

.game-select-popup__card-action {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 20px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(159 179 200 / var(--tw-border-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(2 14 31 / var(--tw-text-opacity, 1));
    background: linear-gradient( 108.402deg, rgb(122, 150, 172) 3.16%, rgb(234, 239, 243) 21.6%, rgb(194, 212, 225) 35.4%, rgb(255, 255, 255) 53.6%, rgb(212, 222, 229) 66.2%, rgb(171, 189, 200) 83.6%, rgb(188, 202, 215) 101% );
    box-shadow: inset 0 4px 6px 0 rgba(255, 255, 255, 0.6);
}

.game-select-popup__card-label {
    font-weight: 400;
    font-family: "Google Sans", sans-serif;
}

.game-select-popup__card-caret {
    --tw-text-opacity: 1;
    color: rgb(2 14 31 / var(--tw-text-opacity, 1));
}

.game-select-popup__cta {
    display: flex;
    height: 3.5rem;
    width: 100%;
    max-width: 500px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    --tw-bg-opacity: 1;
    background-color: rgb(28 174 231 / var(--tw-bg-opacity, 1));
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 400;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

    .game-select-popup__cta:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(95 196 238 / var(--tw-bg-opacity, 1));
    }

    .game-select-popup__cta:focus {
        outline: 2px solid transparent;
        outline-offset: 2px;
    }

    .game-select-popup__cta:focus-visible {
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
        --tw-ring-opacity: 1;
        --tw-ring-color: rgb(34 211 238 / var(--tw-ring-opacity, 1));
    }

    .game-select-popup__cta:active {
        --tw-bg-opacity: 1;
        background-color: rgb(95 196 238 / var(--tw-bg-opacity, 1));
    }

.game-select-popup__cta {
    font-family: "Google Sans", sans-serif;
}

.game-select-popup__footer {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem;
    grid-column: 1;
}

.game-select-popup__support {
    display: inline-flex;
    align-items: flex-end;
    gap: 0.625rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    text-decoration-line: none;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

    .game-select-popup__support:hover {
        --tw-text-opacity: 1;
        color: rgb(95 196 238 / var(--tw-text-opacity, 1));
    }

.game-select-popup__support-icon {
    height: 1.5rem;
    width: 1.5rem;
    overflow: hidden;
}

.game-select-popup__support-text {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    font-family: "Google Sans", sans-serif;
}

.game-select-popup__legal {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    -moz-column-gap: 0.5rem;
    column-gap: 0.5rem;
}

.game-select-popup__legal-link {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: rgb(255 255 255 / 0.8);
    text-decoration-line: none;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

    .game-select-popup__legal-link:hover {
        --tw-text-opacity: 1;
        color: rgb(95 196 238 / var(--tw-text-opacity, 1));
    }

.game-select-popup__legal-link {
    font-family: "Google Sans", sans-serif;
}

.game-select-popup__legal-divider {
    height: 0.75rem;
    width: 1px;
    flex-shrink: 0;
    background-color: rgb(255 255 255 / 0.4);
}

.game-select-popup__side {
    display: none;
    overflow: hidden;
    border-radius: 25px;
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: stretch;
    min-height: 0;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .game-select-popup__side {
        display: block;
    }
}

@media (min-width: 1024px) and (orientation: portrait) {
    .game-select-popup__side {
        display: none;
    }
}

.game-select-popup__side .game-select-popup__side-img {
    height: 100%;
}

.game-select-popup__side-img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

/* Login layout inside game-select popup body */

.game-select-login {
    display: flex;
    width: 100%;
    max-width: 460px;
    flex-direction: column;
    gap: 1.25rem;
}

.game-select-otp {
    display: flex;
    width: 100%;
    max-width: 500px;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.game-select-otp__divider {
    width: 100%;
    height: 1px;
    background-color: #243b53;
    opacity: 0.6;
}

.game-select-otp__intro {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
}

.game-select-otp__hint {
    text-align: center;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: 26px;
    color: #ffffff;
}

.game-select-otp__masked {
    text-align: center;
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 30px;
    color: #1caee7;
}

.game-select-otp__expire {
    text-align: center;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: normal;
    color: #829ab1;
}

.game-select-otp__section {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.game-select-otp__prompt {
    width: 100%;
    text-align: center;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
}

.game-select-otp__code {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    gap: 15px;
    padding: 10px 20px;
}

.game-select-otp__digit:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.game-select-otp__digit:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(34 211 238 / var(--tw-ring-opacity, 1));
}

.game-select-otp__digit {
    max-width: 55px;
    width: 100%;
    aspect-ratio: 55 / 74;
    flex: 1 1 0;
    min-width: 0;
    border-radius: 10px;
    border: 1px solid #243b53;
    background-color: #25272b;
    color: #ffffff;
    text-align: center;
    font-family: "Google Sans", sans-serif;
    font-size: 24px;
}

    .game-select-otp__digit:-webkit-autofill,
    .game-select-otp__digit:-webkit-autofill:hover,
    .game-select-otp__digit:-webkit-autofill:focus {
        box-shadow: 0 0 0 1px #243b53 inset, 0 0 0 1000px #25272b inset;
        -webkit-text-fill-color: #ffffff;
        caret-color: #ffffff;
        -webkit-appearance: none;
        appearance: none;
        border-color: #243b53;
        outline: none;
    }

.game-select-otp__digit--error {
    border-color: #ff383c;
}

    .game-select-otp__digit--error:focus-visible:focus-visible {
        --tw-ring-opacity: 1;
        --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
    }

    .game-select-otp__digit--error:-webkit-autofill,
    .game-select-otp__digit--error:-webkit-autofill:hover,
    .game-select-otp__digit--error:-webkit-autofill:focus {
        box-shadow: 0 0 0 1px #ff383c inset, 0 0 0 1000px #020e1f inset;
        border-color: #ff383c;
    }

.game-select-otp__error {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    border-radius: 10px;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(255 56 60 / var(--tw-text-opacity, 1));
}

.gp-create-card__otp-error-spacing {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.game-select-otp__error--hidden {
    display: none;
}

.game-select-otp__error-icon {
    display: inline-flex;
    height: 1.5rem;
    width: 1.5rem;
    align-items: center;
    justify-content: center;
}

.game-select-otp__error-text {
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: normal;
    --tw-text-opacity: 1;
    color: rgb(255 56 60 / var(--tw-text-opacity, 1));
    white-space: nowrap;
}

.game-select-otp__resend {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    height: 55px;
    padding-left: 30px;
    padding-right: 30px;
    border: 1px solid #243b53;
    background-color: #25272b;
}

.game-select-otp__resend-label {
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: normal;
    color: #829ab1;
    text-align: right;
}

.game-select-otp__resend-action {
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    color: #14ae5c;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

    .game-select-otp__resend-action:hover {
        opacity: 0.85;
    }

.game-select-otp__resend--cooldown {
    border-color: #334e68;
    background-color: #020e1f;
}

.game-select-otp__resend-label--cooldown,
.game-select-otp__resend-action--disabled {
    color: #334e68;
    cursor: not-allowed;
}

    .game-select-otp__resend-action--disabled:hover {
        opacity: 1;
    }

.game-select-otp__submit {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

    .game-select-otp__submit:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(95 196 238 / var(--tw-bg-opacity, 1));
    }

    .game-select-otp__submit:focus {
        outline: 2px solid transparent;
        outline-offset: 2px;
    }

    .game-select-otp__submit:focus-visible {
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
        --tw-ring-opacity: 1;
        --tw-ring-color: rgb(34 211 238 / var(--tw-ring-opacity, 1));
    }

.game-select-otp__submit {
    height: 55px;
    padding: 10px;
    background-color: #1caee7;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    cursor: pointer;
}

    .game-select-otp__submit--disabled,
    .game-select-otp__submit:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }

        .game-select-otp__submit--disabled:hover,
        .game-select-otp__submit:disabled:hover {
            background-color: #1caee7;
        }

.game-select-login__social-list {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 1.25rem;
}

.game-select-login__social-button {
    display: flex;
    height: 65px;
    width: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    padding-left: 1rem;
    padding-right: 1rem;
}

    .game-select-login__social-button:hover {
        --tw-border-opacity: 1;
        border-color: rgb(95 196 238 / var(--tw-border-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(95 196 238 / var(--tw-text-opacity, 1));
    }

.game-select-login__social-button {
    border-width: 0.5px;
    border-style: solid;
    border-color: #9bbde0;
    background-color: transparent;
    color: #ffffff;
    font-family: "Google Sans", sans-serif;
    font-size: 15px;
    line-height: normal;
    cursor: pointer;
}

.game-select-login__social-button--active {
    position: relative;
    --tw-border-opacity: 1;
    border-color: rgb(95 196 238 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    background-color: rgba(28, 174, 231, 0.2);
}

.game-select-login__social-check {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: none;
    width: 26px;
    height: 26px;
}

.game-select-login__social-button--active .game-select-login__social-check {
    display: block;
}

.game-select-login__social-icon {
    margin-right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .game-select-login__social-icon img {
        height: 1.5rem;
        width: 1.5rem;
    }

.game-select-login__social-text {
    text-align: center;
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.game-select-login__divider {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.75rem;
}

.game-select-login__divider-line {
    flex: 1 1 0%;
    height: 1px;
    background-color: rgba(217, 226, 236, 0.4);
}

.game-select-login__divider-text {
    text-align: center;
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    font-family: "Google Sans", sans-serif;
}

.game-select-login__divider-text-accent {
    color: #1caee7;
    font-weight: 600;
}

.game-select-login__fields {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 30px;
}

.game-select-login__field {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 15px;
}

.game-select-login__label {
    font-size: 1.125rem;
    line-height: 1.75rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    font-family: "Google Sans", sans-serif;
}

.game-select-login__input-wrapper {
    display: flex;
    height: 65px;
    width: 100%;
    align-items: center;
    border-radius: 10px;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    background-color: #05244d;
}

.game-select-login__input-wrapper--password {
    justify-content: space-between;
}

.game-select-login__input {
    width: 100%;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    background-color: transparent;
}

    .game-select-login__input::-moz-placeholder {
        opacity: 0.5;
    }

    .game-select-login__input::placeholder {
        opacity: 0.5;
    }

    /* Ensure browser autofill does not introduce a white/yellow background */

    .game-select-login__input:-webkit-autofill,
    .game-select-login__input:-webkit-autofill:hover,
    .game-select-login__input:-webkit-autofill:focus {
        box-shadow: 0 0 0 1px transparent inset, 0 0 0 1000px #05244d inset;
        -webkit-text-fill-color: #ffffff;
        caret-color: #ffffff;
        -webkit-appearance: none;
        appearance: none;
        border-color: transparent;
        outline: none;
    }

.game-select-login__field-header {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.game-select-login__forgot {
    text-align: right;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

    .game-select-login__forgot:hover {
        --tw-text-opacity: 1;
        color: rgb(95 196 238 / var(--tw-text-opacity, 1));
    }

.game-select-login__forgot {
    font-family: "Google Sans", sans-serif;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.game-select-login__password-toggle {
    display: flex;
    height: 1.5rem;
    width: 1.5rem;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

    .game-select-login__password-toggle img {
        height: 100%;
        width: 100%;
    }

.game-select-login__remember {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.game-select-login__remember-checkbox {
    height: 15px;
    width: 15px;
    border-radius: 2px;
}

.game-select-login__remember-label {
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    font-family: "Google Sans", sans-serif;
}

.game-select-login__submit {
    margin-top: 0.75rem;
    display: flex;
    height: 55px;
    width: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    --tw-bg-opacity: 1;
    background-color: rgb(28 174 231 / var(--tw-bg-opacity, 1));
    font-size: 1.125rem;
    line-height: 1.75rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

    .game-select-login__submit:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(95 196 238 / var(--tw-bg-opacity, 1));
    }

    .game-select-login__submit:active {
        --tw-bg-opacity: 1;
        background-color: rgb(95 196 238 / var(--tw-bg-opacity, 1));
    }

.game-select-login__submit {
    font-family: "Google Sans", sans-serif;
    cursor: pointer;
}

.game-select-login__signup {
    margin-top: 0.5rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.25rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.game-select-login__signup-text {
    color: #829ab1;
    font-family: "Google Sans", sans-serif;
}

.game-select-login__signup-link {
    color: #1caee7;
    font-family: "Google Sans", sans-serif;
    text-decoration: underline;
}

/* Create Gen Play ID page (frame: Create Gen play ID - 1) */

.gp-navbar {
    position: sticky;
    top: 0;
    z-index: 10;
    transition: transform 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease;
}

.gp-navbar--scrolled {
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* My Account mobile pill: keep header chrome transparent; inner bar carries the fill */

.gp-navbar--type2.gp-navbar--scrolled {
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-navbar--type2.gp-navbar--scrolled {
        background-color: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}

.gp-navbar--hidden {
    transform: translateY(-100%);
}

.gp-navbar__topbar {
    display: none;
}

.gp-navbar__inner {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    height: 50px;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: 1200px;
}

.gp-navbar__brand {
    display: none;
    align-items: center;
    justify-content: center;
    text-decoration-line: none;
}

@media (min-width: 768px) {
    .gp-navbar__brand {
        display: inline-flex;
    }
}

.gp-navbar__brand-logo {
    height: 30px;
    width: auto;
    filter: drop-shadow(0px 0px 8.2px rgba(28, 174, 231, 0.46));
}

.gp-navbar__brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    height: 24px;
    width: 24px;
    border-radius: 10px;
    box-shadow: 0px 0px 8.2px 0px rgba(28, 174, 231, 0.46);
    border: 1px solid rgba(28, 174, 231, 0.25);
}

img.gp-navbar__brand-mark {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-navbar__hamburger {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
}

.gp-navbar__hamburger-icon {
    display: block;
    width: 25px;
    height: 25px;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-navbar__hamburger:focus-visible {
    outline: 2px solid #5fc4ee;
    outline-offset: 2px;
    border-radius: 4px;
}

.gp-navbar__lang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    background-color: transparent;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    border: none;
    padding: 0;
    height: 36px;
}

.gp-navbar__lang-flag {
    display: inline-flex;
    width: 24px;
    height: 24px;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-navbar__lang-text {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    line-height: 12px;
}

.gp-navbar__topbar-link {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

    .gp-navbar__topbar-link:hover {
        --tw-text-opacity: 1;
        color: rgb(95 196 238 / var(--tw-text-opacity, 1));
    }

.gp-navbar__topbar-link {
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    text-decoration: none;
    white-space: nowrap;
}

.gp-navbar__topbar-link--serenade {
    background: linear-gradient(108.902deg, #ffddb0 12.717%, #ffe1b2 24.803%, #f5d6a3 36.579%, #f6cf99 46.186%, #f9c597 56.103%, #e0a060 66.639%, #d99458 76.538%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 600;
}

.gp-navbar__topbar-link--redlink {
    background: linear-gradient(90deg, #f45c43 0%, #eb3349 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 600;
}

/* My Account page (frame: My Account) - navbar type2 */

.gp-navbar--type2 {
    background-color: transparent;
    border-bottom: none;
    padding: 10px;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-navbar--type2 {
        padding: 0;
    }
}

.gp-navbar--type2 .gp-navbar__inner {
    height: 60px;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    max-width: 100%;
    background-color: rgba(28, 33, 40, 0.68);
    border: 1px solid #232e3d;
    border-radius: 12px;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-navbar--type2 .gp-navbar__inner {
        height: 80px;
        padding-left: 100px;
        padding-right: 100px;
        background-color: rgba(19, 19, 21, 0.8);
        border: 1px solid #102a43;
        border-radius: 0;
    }

    .gp-navbar--type2 .gp-navbar__topbar {
        display: flex;
        height: 50px;
        align-items: center;
        justify-content: space-between;
        padding-left: 100px;
        padding-right: 100px;
        background-color: #131315;
    }

    .gp-navbar--type2 .gp-navbar__topbar-left {
        display: flex;
        align-items: center;
        gap: 40px;
    }

    .gp-navbar--type2 .gp-navbar__lang--topbar {
        display: inline-flex;
    }
}

.gp-navbar--type2 .gp-navbar__hamburger {
    display: inline-flex;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-navbar--type2 .gp-navbar__hamburger {
        display: none;
    }
}

.gp-navbar__left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-navbar__left {
        gap: 30px;
    }
}

.gp-navbar--type2 .gp-navbar__brand-logo {
    height: 30px;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-navbar--type2 .gp-navbar__brand-logo {
        height: 40px;
        width: 40px;
        -o-object-fit: contain;
        object-fit: contain;
    }
}

.gp-navbar__brand-logo--icon {
    width: 40px;
    height: 40px;
    filter: none;
}

.gp-navbar--type2 .gp-navbar__left {
    gap: 10px;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-navbar--type2 .gp-navbar__left {
        gap: 30px;
    }
}

.gp-navbar__nav {
    display: none;
    align-items: center;
    gap: 20px;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-navbar__nav {
        display: flex;
        gap: 26px;
    }

    .gp-navbar--type2 .gp-navbar__nav {
        gap: 40px;
    }
}

.gp-navbar__nav-link {
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.2px;
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-navbar__nav-link {
        font-size: 16px;
        letter-spacing: -0.45px;
    }

    .gp-navbar--type2 .gp-navbar__nav-link {
        font-size: 18px;
        letter-spacing: -0.45px;
    }
}

.gp-navbar__nav-link:hover {
    color: #5fc4ee;
}

.gp-navbar__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

@media (min-width: 768px) {
    .gp-navbar__right {
        gap: 10px;
    }
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-navbar__right {
        gap: 15px;
    }
}

.gp-navbar__auth-btn {
    display: flex;
    height: 38px;
    width: 90px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 14px;
    text-decoration-line: none;
}

@media (min-width: 768px) {
    .gp-navbar__auth-btn {
        height: 50px;
        width: 160px;
        padding-left: 20px;
        padding-right: 20px;
        font-size: 18px;
    }
}

.gp-navbar__auth-btn {
    border-radius: 999px;
    border-width: 1px;
    border-style: solid;
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    line-height: 14px;
    color: #ffffff;
    transition: filter 0.2s ease;
}

    .gp-navbar__auth-btn:hover,
    .gp-navbar__auth-btn:focus,
    .gp-navbar__auth-btn:focus-visible,
    .gp-navbar__auth-btn:active {
        filter: brightness(1.1);
    }

.gp-navbar__auth-btn--register {
    background-color: #102a43;
    border-color: #243b53;
}

.gp-navbar__auth-btn--login {
    background-color: #1caee7;
    border-color: #4b89c9;
}

@media (min-width: 1280px) {
    .gp-navbar__auth-btn {
        display: inline-flex;
    }
}

.gp-navbar--type2 .gp-navbar__lang {
    display: none;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-navbar--type2 .gp-navbar__lang {
        display: inline-flex;
    }
}

.gp-navbar__cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration-line: none;
    width: 34px;
    height: 34px;
}

.gp-navbar__cart-icon {
    width: 24px;
    height: 24px;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-navbar__cart-badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    top: -6px;
    right: -4px;
    min-width: 18px;
    height: 16px;
    padding: 0 4px;
    background-color: #ffde2d;
    font-family: "Prompt", "Google Sans", sans-serif;
    font-size: 10px;
    line-height: 1;
    color: #000000;
}

.gp-navbar__mail {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration-line: none;
    width: 34px;
    height: 34px;
}

.gp-navbar__mail-icon {
    width: 24px;
    height: 24px;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-navbar__mail-badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    top: -6px;
    right: -4px;
    min-width: 18px;
    height: 16px;
    padding: 0 4px;
    background-color: #ffde2d;
    font-family: "Prompt", "Google Sans", sans-serif;
    font-size: 10px;
    line-height: 1;
    color: #000000;
}

.gp-navbar__game-select {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    text-decoration-line: none;
    gap: 8px;
    padding: 5px 10px;
    border: 1px solid #0b4da0;
    background-image: linear-gradient(115.48deg, #2a77d9 7.81%, #0b4da0 48.79%, #05244d 95.31%);
    box-shadow: 0px 0px 6px 0px rgba(11, 77, 160, 0.35);
}

.gp-navbar__game-avatar {
    border-radius: 9999px;
    width: 32px;
    height: 32px;
    -o-object-fit: cover;
    object-fit: cover;
}

.gp-navbar__game-change {
    width: 16px;
    height: 16px;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-navbar__divider {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.35);
}

.gp-navbar__user-wrap {
    display: none;
    align-items: center;
    gap: 10px;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-navbar__user-wrap {
        display: inline-flex;
    }
}

/* My Account mobile navbar: show account row in game-select pill (Figma mobile-navbar) */

.gp-navbar--type2 .gp-navbar__user-wrap {
    display: inline-flex;
    max-width: min(140px, 42vw);
    min-width: 0;
}

.gp-navbar--type2 .gp-navbar__user-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-navbar--type2 .gp-navbar__user-wrap {
        max-width: none;
    }

    .gp-navbar--type2 .gp-navbar__user-name {
        overflow: visible;
        text-overflow: clip;
    }
}

.gp-navbar--type2 .gp-navbar__game-change,
.gp-navbar--type2 .gp-navbar__divider {
    display: none;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-navbar--type2 .gp-navbar__game-change {
        display: block;
    }

    .gp-navbar--type2 .gp-navbar__divider {
        display: inline-block;
    }
}

.gp-navbar__user-name {
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    color: #ffffff;
    white-space: nowrap;
}

.gp-navbar__user-level {
    width: 22px;
    height: 22px;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-navbar__caret {
    width: 12px;
    height: 12px;
    -o-object-fit: contain;
    object-fit: contain;
}

/* Desktop floating current-game button (Figma: Floating Game) */

.gp-floating-game {
    display: none;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-floating-game {
        position: fixed;
        left: 40px;
        bottom: 130px;
        z-index: 35;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 255px;
        height: 75px;
        padding: 0;
        border: 1px solid #093f85;
        border-radius: 999px;
        background: radial-gradient(125% 140% at 8% 8%, #06366d 0%, #072447 35%, #081121 70%);
        box-shadow: 0 20px 30px rgba(0, 90, 204, 0.79);
        transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }

    .gp-floating-game__inner {
        display: inline-flex;
        align-items: center;
        gap: 15px;
    }

    .gp-floating-game__avatar-wrap {
        width: 65px;
        height: 65px;
        border: 2px solid #5fc4ee;
        border-radius: 999px;
        /* box-shadow: 0 13px 23.4px -8px rgba(28, 174, 231, 0.51); */
        overflow: hidden;
        flex-shrink: 0;
    }

    .gp-floating-game__avatar {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .gp-floating-game__copy {
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-width: 86px;
        text-align: left;
    }

    .gp-floating-game__label {
        font-family: "Google Sans", sans-serif;
        font-weight: 400;
        font-size: 14px;
        line-height: 1;
        background: linear-gradient(120.46deg, #52ceff 5.7%, #1caee7 54.37%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .gp-floating-game__name {
        font-family: "Google Sans", sans-serif;
        font-weight: 600;
        font-size: 18px;
        line-height: 1;
        color: #ffffff;
    }

    .gp-floating-game__change {
        width: 24px;
        height: 24px;
        -o-object-fit: contain;
        object-fit: contain;
        margin-left: 4px;
        flex-shrink: 0;
    }

    .gp-floating-game:hover,
    .gp-floating-game:focus,
    .gp-floating-game:focus-visible {
        filter: brightness(1.1);
        box-shadow: 0 22px 36px rgba(0, 90, 204, 0.65);
        transform: translateY(1px);
    }

    .gp-floating-game:focus-visible {
        outline: 2px solid #52ceff;
        outline-offset: 2px;
    }
}

/* Mobile main menu (Figma: Nav bar/Mobile-Main Menu-full-screen) */

.gp-mobile-menu {
    position: fixed;
    inset: 0px;
    z-index: 70;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gp-mobile-menu__scrim {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gp-mobile-menu__panel {
    position: relative;
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    padding: 20px 20px 30px;
    border-right: 1px solid #233851;
    background: radial-gradient(circle at 50% 50%, rgba(20, 20, 20, 0.08) 0%, transparent 45%), radial-gradient(circle at 50% 50%, rgba(20, 20, 20, 0.08) 10%, transparent 55%), radial-gradient(circle at 50% 50%, #111 0%, #1a1a1a 100%);
    background-blend-mode: soft-light;
    box-shadow: inset 0 0 60px rgba(255, 255, 255, 0.3), inset 20px 0 80px rgba(255, 0, 255, 0.2), inset -20px 0 80px rgba(0, 255, 255, 0.2), inset 20px 0 300px rgba(255, 0, 255, 0.1), inset -20px 0 300px rgba(0, 255, 255, 0.1), 0 0 50px rgba(255, 255, 255, 0.1), -10px 0 80px rgba(255, 0, 255, 0.1), 10px 0 80px rgba(0, 255, 255, 0.1);
    filter: contrast(1.05) brightness(1.05) blur(0.5px);
    overflow: hidden;
    transform: translateX(-100%);
    transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

    .gp-mobile-menu__panel::before {
        content: '';
        pointer-events: none;
        position: absolute;
        inset: 0px;
        z-index: 1;
        background-image: url('../images/bg-top-gradient.svg');
        background-size: cover;
        background-position: top center;
        opacity: 0.9;
        filter: blur(1px);
    }

    .gp-mobile-menu__panel > * {
        position: relative;
        z-index: 2;
    }

.gp-mobile-menu--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

    .gp-mobile-menu--open .gp-mobile-menu__scrim {
        opacity: 1;
    }

    .gp-mobile-menu--open .gp-mobile-menu__panel {
        transform: translateX(0);
    }

.gp-mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
}

.gp-mobile-menu__logo {
    width: auto;
    height: 32px;
}

.gp-mobile-menu__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    width: 32px;
    height: 32px;
}

    .gp-mobile-menu__close img {
        width: 24px;
        height: 24px;
    }

.gp-mobile-menu__divider {
    width: 100%;
    height: 1px;
    margin-top: 20px;
    background: #0a4a96;
    opacity: 0.7;
}

.gp-mobile-menu__game-card {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration-line: none;
    gap: 14px;
    padding: 18px;
    border: 1px solid #0b4da0;
    border-radius: 20px;
    background: radial-gradient(125% 140% at 8% 8%, #06366d 0%, #072447 35%, #081121 72%);
    box-shadow: 0 22px 55px rgba(0, 90, 204, 0.42);
    transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

    .gp-mobile-menu__game-card:hover,
    .gp-mobile-menu__game-card:focus,
    .gp-mobile-menu__game-card:focus-visible {
        filter: brightness(1.1);
        box-shadow: 0 12px 30px rgba(0, 90, 204, 0.36);
        transform: translateY(1px);
    }

    .gp-mobile-menu__game-card:focus-visible {
        outline: 2px solid #52ceff;
        outline-offset: 2px;
    }

.gp-mobile-menu__game-main {
    display: flex;
    min-width: 0px;
    align-items: center;
    gap: 10px;
}

.gp-mobile-menu__game-avatar {
    width: 58px;
    height: 58px;
    border-radius: 999px;
    border: 2px solid #5fc4ee;
    -o-object-fit: cover;
    object-fit: cover;
    box-shadow: 0 13px 23px -8px rgba(28, 174, 231, 0.51);
}

.gp-mobile-menu__game-copy {
    display: flex;
    min-width: 0px;
    flex-direction: column;
    gap: 5px;
}

.gp-mobile-menu__game-label {
    font-family: "Google Sans", sans-serif;
    font-size: 12px;
    line-height: 1;
    color: #52ceff;
}

.gp-mobile-menu__game-name {
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
    color: #ffffff;
}

.gp-mobile-menu__game-change {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    line-height: 0;
}

    .gp-mobile-menu__game-change img {
        display: block;
        width: auto;
        height: auto;
        max-height: 30px;
        max-width: min(160px, 38vw);
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-mobile-menu__nav {
    margin-top: 2.5rem;
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    overflow: auto;
    padding: 0 20px;
}

.gp-mobile-menu__link {
    display: flex;
    align-items: center;
    text-decoration-line: none;
    gap: 20px;
    padding: 15px 0;
    color: #ffffff;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: 1.3;
}

    .gp-mobile-menu__link img {
        width: 24px;
        height: 24px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-mobile-menu__red-link {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration-line: none;
    min-height: 60px;
    border: 1px solid #ff3134;
    border-radius: 10px;
    padding: 10px 20px;
    background: radial-gradient(115% 130% at 0% 0%, rgba(255, 46, 46, 0.2) 0%, rgba(255, 46, 46, 0.05) 70%);
    box-shadow: inset 0 0 45.4px rgba(255, 124, 126, 0.58);
}

.gp-mobile-menu__red-link-title {
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
    color: #fffbec;
}

.gp-mobile-menu__red-link-cta {
    display: inline-flex;
    align-items: center;
    border-radius: 20px;
    gap: 5px;
    border: 1px solid #ff595c;
    background: #d84a4c;
    padding: 5px 10px;
}

    .gp-mobile-menu__red-link-cta span {
        font-family: "Google Sans", sans-serif;
        font-size: 12px;
        line-height: 1;
        color: #ffffff;
    }

    .gp-mobile-menu__red-link-cta img {
        width: 9px;
        height: 12px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-mobile-menu__lang {
    margin-top: 1.5rem;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    background-color: transparent;
    text-align: left;
    border: 1px solid #243b53;
    min-height: 56px;
    padding: 10px 20px;
}

.gp-mobile-menu__lang-left {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #ffffff;
    font-size: 16px;
    line-height: 1;
}

    .gp-mobile-menu__lang-left img {
        width: 24px;
        height: 24px;
    }

.gp-mobile-menu__lang-right {
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: 1.2;
    color: #bcccdc;
}

body.gp-mobile-menu-open {
    overflow: hidden;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .gp-mobile-menu__panel {
        max-width: 380px;
    }
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-mobile-menu {
        display: none;
    }

    body.gp-mobile-menu-open {
        overflow: auto;
    }
}

/* Right menu – account dropdown / slide-in (Figma: Nav bar/Mobile Right Menu + Drop down Menu) */

.gp-right-menu {
    position: fixed;
    inset: 0px;
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gp-right-menu--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-right-menu__scrim {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gp-right-menu--open .gp-right-menu__scrim {
    opacity: 1;
}

.gp-right-menu__panel {
    position: absolute;
    right: 0px;
    top: 0px;
    display: flex;
    height: 100%;
    flex-direction: column;
    width: 100%;
    padding: 16px 20px;
    background: linear-gradient(#020e1f, #020e1f) padding-box, linear-gradient(135deg, #ff8bbf, #f488ff, #7ef359, #ffde2d, #1bb1e7) border-box;
    border: 0 solid transparent;
    border-left-width: 1px;
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateX(100%);
    transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.gp-right-menu--open .gp-right-menu__panel {
    transform: translateX(0);
}

@media (min-width: 768px) and (max-width: 1023px) {
    .gp-right-menu__panel {
        width: 100%;
        max-width: 520px;
        right: 0;
    }
}

@media (min-width: 1024px) and (orientation: portrait) {
    .gp-right-menu__panel {
        width: 100%;
        max-width: 520px;
        right: 0;
    }

    .gp-mobile-menu__panel {
        max-width: 380px;
    }
}

.gp-right-menu__close {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    flex-shrink: 0;
}

    .gp-right-menu__close img {
        width: 24px;
        height: 24px;
    }

/* User profile */

.gp-right-menu__user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    flex-shrink: 0;
}

.gp-right-menu__avatar-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    padding-bottom: 14px;
}

.gp-right-menu__avatar {
    width: 84px;
    height: 84px;
    border-radius: 99px;
    -o-object-fit: cover;
    object-fit: cover;
}

.gp-right-menu__game-change {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    margin-top: -14px;
    cursor: pointer;
    line-height: 0;
}

    .gp-right-menu__game-change img {
        display: block;
        width: 28px;
        height: 28px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-right-menu__user-info {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.gp-right-menu__username-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.gp-right-menu__username {
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gp-right-menu__edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    cursor: pointer;
}

    .gp-right-menu__edit img {
        width: 100%;
        height: 100%;
    }

.gp-right-menu__level {
    width: 25px;
    height: 22px;
    -o-object-fit: contain;
    object-fit: contain;
    flex-shrink: 0;
}

.gp-right-menu__userid {
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: 1;
    color: #627d98;
}

.gp-right-menu__gift-code {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    padding: 8px 10px;
    border-radius: 30px;
    background-image: linear-gradient(123.6deg, rgb(82, 206, 255) 5.7%, rgb(28, 174, 231) 54.37%);
}

.gp-right-menu__gift-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.gp-right-menu__gift-text {
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: 1;
    color: #020e1f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gp-right-menu__gift-copy {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
}

    .gp-right-menu__gift-copy img {
        width: 100%;
        height: 100%;
    }

.gp-right-menu__gift-info {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.gp-right-menu__gift-info-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    cursor: pointer;
    flex-shrink: 0;
}

.gp-right-menu__gift-info-tooltip {
    pointer-events: none;
    visibility: hidden;
    position: absolute;
    left: 50%;
    --tw-translate-x: calc(calc(50% + 10px) * -1);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 0;
}

@media (min-width: 768px) {
    .gp-right-menu__gift-info-tooltip {
        --tw-translate-x: -50%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
}

.gp-right-menu__gift-info-tooltip {
    bottom: calc(100% + 10px);
    width: -moz-max-content;
    width: max-content;
    max-width: 240px;
    padding: 10px 14px;
    border-radius: 10px;
    background-color: #132d51;
    color: #ffffff;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 10;
}

    .gp-right-menu__gift-info-tooltip::after {
        position: absolute;
        content: "";
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border-width: 6px;
        border-style: solid;
        border-color: #132d51 transparent transparent transparent;
    }

.gp-right-menu__gift-info-tooltip-link {
    --tw-text-opacity: 1;
    color: rgb(251 191 36 / var(--tw-text-opacity, 1));
    text-decoration-line: none;
}

.gp-right-menu__gift-info-trigger:hover .gp-right-menu__gift-info-tooltip,
.gp-right-menu__gift-info-trigger:focus .gp-right-menu__gift-info-tooltip {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.gp-right-menu__serenade {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 0 14px;
    min-height: 34px;
    border: 1px solid #ffeedb;
    border-radius: 20px;
    background-image: linear-gradient( 139deg, rgba(234, 215, 194, 0.14) 11.71%, rgba(185, 166, 147, 0.34) 21.3%, rgba(234, 215, 193, 0.37) 28.54%, rgba(246, 226, 204, 0.36) 34.8%, rgba(202, 177, 149, 0.32) 38.91%, rgba(77, 67, 59, 0.67) 52% );
    box-shadow: inset 0 4px 29.9px 0 #ffc97c;
}

.gp-right-menu__serenade-tier {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.gp-right-menu__serenade-icon {
    width: 20px;
    height: 20px;
    -o-object-fit: contain;
    object-fit: contain;
    flex-shrink: 0;
}

.gp-right-menu__serenade-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gp-right-menu__serenade-label {
    font-weight: 400;
}

.gp-right-menu__serenade-info {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.gp-right-menu__serenade-crown {
    width: 40px;
    height: auto;
    -o-object-fit: contain;
    object-fit: contain;
    flex-shrink: 0;
    margin-left: auto;
    filter: drop-shadow(0 0 6.9px #b7823e);
}

.gp-right-menu__redlink-code {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    padding: 8px 10px;
    border-radius: 30px;
    background-image: linear-gradient(130.75deg, rgb(255, 72, 75) 5.7%, rgb(219, 44, 47) 54.37%);
}

.gp-right-menu__redlink-icon {
    width: 18px;
    height: 18px;
    -o-object-fit: contain;
    object-fit: contain;
    flex-shrink: 0;
}

.gp-right-menu__redlink-text {
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: 1;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gp-right-menu__redlink-info {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.gp-right-menu__redlink-copy {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
}

    .gp-right-menu__redlink-copy img {
        width: 100%;
        height: 100%;
    }

.gp-right-menu__redlink-activate {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 7px;
    padding: 6px 6px 6px 15px;
    border-radius: 999px;
    background-image: linear-gradient(127.92deg, rgb(255, 72, 75) 5.7%, rgb(219, 44, 47) 54.37%);
}

    .gp-right-menu__redlink-activate .gp-right-menu__redlink-icon {
        width: 22px;
        height: 22px;
    }

    .gp-right-menu__redlink-activate .gp-right-menu__redlink-text {
        font-weight: 500;
    }

.gp-right-menu__redlink-activate-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration-line: none;
    gap: 5px;
    height: 25px;
    padding: 0 10px;
    border-radius: 99px;
    background-color: #f94244;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    color: #ffffff;
    white-space: nowrap;
    flex-shrink: 0;
}

    .gp-right-menu__redlink-activate-btn img {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

/* Divider */

.gp-right-menu__divider {
    width: 100%;
    height: 1px;
    margin: 14px 0;
    background: linear-gradient(90deg, #0a4a96 0%, rgba(10, 74, 150, 0.2) 100%);
    flex-shrink: 0;
}

/* Nav links */

.gp-right-menu__nav {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    flex-shrink: 0;
}

.gp-right-menu__link {
    display: flex;
    align-items: center;
    text-decoration-line: none;
    gap: 20px;
    padding: 10px 0;
    color: #bcccdc;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: 1.3;
    transition: color 0.2s ease;
}

    .gp-right-menu__link:hover {
        color: #5fc4ee;
    }

    .gp-right-menu__link img {
        width: 24px;
        height: 24px;
        -o-object-fit: contain;
        object-fit: contain;
        flex-shrink: 0;
    }

/* VIP card – Gold Serenade */

.gp-right-menu__vip {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 10px;
    text-decoration-line: none;
    margin: 0 20px;
    flex-shrink: 0;
    height: 101px;
    padding: 0 20px;
    border: 1px solid #ffeedb;
    background-image: url('../images/background-serenade-small.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: visible;
}

.gp-right-menu__vip-glow {
    pointer-events: none;
    position: absolute;
    inset: 0px;
    border-radius: 10px;
    box-shadow: inset 0 0 45.4px 0 #ffc97c;
    z-index: 2;
}

.gp-right-menu__vip-body {
    position: relative;
    display: flex;
    height: 100%;
    flex: 1 1 0%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

@media (min-width: 1024px) {
    .gp-right-menu__vip-body {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }
}

.gp-right-menu__vip-body {
    gap: 10px;
    z-index: 1;
    min-width: 0;
}

.gp-right-menu__vip-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.gp-right-menu__vip-tier {
    display: flex;
    align-items: center;
    gap: 5px;
}

.gp-right-menu__vip-tier-name {
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: normal;
    color: #fffbec;
}

.gp-right-menu__vip-tier-icon {
    width: 20px;
    height: 20px;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-right-menu__vip-serenade {
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: normal;
    color: #fffbec;
}

.gp-right-menu__vip-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    border-radius: 20px;
    gap: 5px;
    padding: 5px 10px;
    background-image: linear-gradient( 130deg, rgb(234, 215, 194) 3%, rgb(185, 166, 147) 26%, rgb(234, 215, 193) 47%, rgb(246, 226, 204) 63%, rgb(202, 177, 149) 70%, rgb(142, 117, 94) 80% );
    box-shadow: inset 0 4px 6px 0 rgba(255, 255, 255, 0.6);
}

.gp-right-menu__vip-action-text {
    font-family: "Google Sans", sans-serif;
    font-size: 10px;
    line-height: normal;
    color: #020e1f;
    white-space: nowrap;
}

.gp-right-menu__vip-action-caret {
    width: 8px;
    height: 11px;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-right-menu__vip-crown-wrap {
    pointer-events: none;
    position: absolute;
    right: -2.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    height: auto;
    z-index: 1;
}

.gp-right-menu__vip-crown {
    position: absolute;
    width: 12rem;
    height: auto;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    filter: drop-shadow(0 0 6.9px #b7823e);
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (hover: hover) {
    .gp-right-menu__vip:hover .gp-right-menu__vip-crown {
        transform: translateY(-50%) scale(1.08);
    }
}

/* Footer / Logout */

.gp-right-menu__footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    flex-shrink: 0;
}

.gp-right-menu__link--logout {
    padding-top: 20px;
    padding-bottom: 10px;
}

body.gp-right-menu-open {
    overflow: hidden;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-right-menu {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: auto;
        height: auto;
    }

    .gp-right-menu__scrim {
        position: fixed;
        inset: 0px;
        background: transparent;
    }

    .gp-right-menu__panel {
        position: fixed;
        overflow: hidden;
        right: var(--gp-right-menu-right, 80px);
        top: var(--gp-right-menu-top, 100px);
        width: 510px;
        max-width: 510px;
        height: auto;
        max-height: calc(100vh - var(--gp-right-menu-top, 100px));
        border-radius: 15px;
        border: 1px solid transparent;
        background: linear-gradient(#061221, #061221) padding-box, linear-gradient(135deg, #ff8bbf, #f488ff, #7ef359, #ffde2d, #1bb1e7) border-box;
        padding: 16px 18px;
        transform: translateX(0) translateY(-10px);
        opacity: 0;
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .gp-right-menu--open .gp-right-menu__panel {
        transform: translateX(0) translateY(0);
        opacity: 1;
    }

    .gp-right-menu__close {
        display: none;
    }

    .gp-right-menu__user {
        margin-top: 0;
        gap: 20px;
    }

    .gp-right-menu__avatar {
        width: 100px;
        height: 100px;
    }

    .gp-right-menu__avatar-wrap {
        padding-bottom: 16px;
    }

    .gp-right-menu__game-change {
        margin-top: -16px;
    }

        .gp-right-menu__game-change img {
            width: 33px;
            height: 33px;
        }

    .gp-right-menu__username {
        font-size: 20px;
    }

    .gp-right-menu__username-row {
        gap: 5px;
    }

    .gp-right-menu__edit {
        width: 24px;
        height: 24px;
    }

    .gp-right-menu__userid {
        font-size: 16px;
    }

    .gp-right-menu__gift-code {
        gap: 10px;
        margin-top: 7px;
        padding: 8px 15px;
        height: 40px;
        border-radius: 999px;
    }

    .gp-right-menu__gift-icon,
    .gp-right-menu__gift-copy,
    .gp-right-menu__gift-info {
        width: 18px;
        height: 18px;
    }

    .gp-right-menu__gift-info {
        width: 16px;
        height: 16px;
    }

    .gp-right-menu__gift-copy img {
        height: auto;
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .gp-right-menu__gift-text {
        font-size: 16px;
    }

    .gp-right-menu__serenade {
        gap: 10px;
        margin-top: 15px;
        padding: 0 14px;
        min-height: 34px;
    }

    .gp-right-menu__serenade-text {
        font-size: 16px;
    }

    .gp-right-menu__redlink-code {
        gap: 10px;
        margin-top: 7px;
        padding: 8px 15px;
        height: 40px;
        border-radius: 999px;
    }

    .gp-right-menu__redlink-icon,
    .gp-right-menu__redlink-copy {
        width: 18px;
        height: 18px;
    }

    .gp-right-menu__redlink-info {
        width: 16px;
        height: 16px;
    }

    .gp-right-menu__redlink-text {
        font-size: 16px;
    }

    .gp-right-menu__redlink-activate {
        gap: 8px;
        margin-top: 7px;
        padding: 6px 6px 6px 15px;
        height: 40px;
        border-radius: 999px;
    }

        .gp-right-menu__redlink-activate .gp-right-menu__redlink-icon {
            width: 22px;
            height: 22px;
        }

        .gp-right-menu__redlink-activate .gp-right-menu__redlink-text {
            font-size: 16px;
        }

    .gp-right-menu__redlink-activate-btn {
        height: 25px;
        font-size: 14px;
    }

    .gp-right-menu__divider {
        margin: 12px 0;
    }

    .gp-right-menu__nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 5px;
        padding: 0;
    }

    .gp-right-menu__link {
        font-size: 16px;
    }

    .gp-right-menu__vip {
        margin: 0;
        background-image: url('../images/background-serenade-xl.webp');
    }

    .gp-right-menu__vip-body {
        padding: 0 30px;
    }

    .gp-right-menu__vip-tier-name {
        font-size: 20px;
    }

    .gp-right-menu__vip-serenade {
        font-size: 18px;
    }

    .gp-right-menu__vip-action-text {
        font-size: 14px;
    }

    .gp-right-menu__footer {
        padding: 0;
    }

    .gp-right-menu__link--logout {
        padding-top: 10px;
    }

    body.gp-right-menu-open {
        overflow: auto;
    }
}

/* My Account page (frame: Head member) */

.gp-head-member {
    display: flex;
    width: 100%;
    align-items: center;
    position: relative;
    height: 70px;
    background: radial-gradient(90% 200% at -20% 170%, #0b4da0 0%, #0d4081 25%, #0f3262 50%, #112542 75%, #131723 100%);
}

    .gp-head-member::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient( 90deg, #1bb1e7 0%, #ffde2d 25%, #7ef359 50%, #f488ff 75%, #ff8bbf 100% );
    }

.gp-head-member--no-accent::after {
    display: none;
}

.gp-head-member__inner {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    max-width: 1920px;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-head-member__inner {
        padding-left: 100px;
        padding-right: 100px;
    }
}

.gp-head-member__title {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.4;
    color: #ffffff;
    margin: 0;
}

.gp-head-member__breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gp-head-member__breadcrumb-parent {
    margin: 0;
}

.gp-head-member__breadcrumb-link {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: #9fb3c8;
    text-decoration: none;
}

    .gp-head-member__breadcrumb-link:hover {
        color: #bcccdc;
    }

.gp-head-member__breadcrumb-caret {
    width: 24px;
    height: 24px;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-head-member__breadcrumb-current {
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.4;
    color: #ffffff;
}

/* Cart page — head member (Figma Head member) */

.gp-head-member--cart {
    height: auto;
    min-height: 0;
    align-items: stretch;
}

.gp-head-member__inner--cart {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    height: auto;
}

.gp-head-member__back {
    display: inline-flex;
    align-items: center;
    gap: 0;
    text-decoration: none;
    color: #9fb3c8;
}

    .gp-head-member__back:hover {
        color: #bcccdc;
    }

.gp-head-member__back-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-head-member__back-icon {
        width: 24px;
        height: 24px;
    }
}

.gp-head-member__back-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    margin: 0;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-head-member__inner--cart {
        padding-top: 30px;
        padding-bottom: 30px;
        gap: 20px;
    }

    .gp-head-member__back-text {
        font-size: 16px;
    }
}

.gp-head-member__titles {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-head-member__titles {
        gap: 10px;
    }
}

.gp-head-member__title--cart {
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
    text-shadow: 0 0 20px rgba(85, 173, 255, 0.45);
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-head-member__title--cart {
        font-size: 24px;
    }
}

.gp-head-member__subtitle {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #1caee7;
    margin: 0;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-head-member__subtitle {
        font-size: 18px;
    }
}

/* My Account page (frame: My Account - center content) */

.gp-myaccount {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    width: 100%;
    flex-direction: column;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    max-width: 1920px;
    gap: 24px;
}

.gp-myaccount__sidebar {
    display: none;
}

.gp-myaccount__content {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 30px;
}

.gp-myaccount__back {
    display: inline-flex;
    align-items: center;
    text-decoration-line: none;
    width: -moz-fit-content;
    width: fit-content;
    gap: 5px;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: normal;
    color: #829ab1;
}

    .gp-myaccount__back:hover {
        color: #bcccdc;
    }

.gp-myaccount__back-icon {
    width: 24px;
    height: 24px;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-myaccount__section {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
}

.gp-myaccount__section-head {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.gp-myaccount__section-title {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.15;
    color: #ffffff;
    margin: 0;
}

.gp-myaccount__section-edit,
.gp-myaccount__field-edit {
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #1caee7;
    text-decoration: underline;
    text-underline-offset: 2px;
}

    .gp-myaccount__section-edit:hover,
    .gp-myaccount__field-edit:hover {
        color: #5fc4ee;
    }

.gp-myaccount__panel {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 1.5rem;
    border-radius: 10px;
    padding: 1.25rem;
    background-image: radial-gradient(circle at left top, rgba(217, 217, 217, 0.2) 0%, rgba(217, 217, 217, 0.05) 70%);
}

.gp-myaccount__field-row {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.25rem;
}

.gp-myaccount__field-group {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-myaccount__field-label {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    color: #ffffff;
}

.gp-myaccount__field-head {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.gp-myaccount__display {
    display: flex;
    height: 65px;
    width: 100%;
    align-items: center;
    border-radius: 10px;
    padding: 10px 30px;
    background-color: #363e4d;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    color: #9fb3c8;
}

.gp-myaccount__display--editable {
    border: 1px solid #486581;
    color: #ffffff;
}

.gp-myaccount__inline-actions {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
}

.gp-myaccount__btn-cancel,
.gp-myaccount__btn-save {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 65px;
    min-width: 100px;
    border: none;
    border-radius: 10px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    cursor: pointer;
}

.gp-myaccount__btn-cancel {
    background-color: #363e4d;
    color: #d9e2ec;
}

.gp-myaccount__btn-save {
    background-color: #1caee7;
    color: #ffffff;
}

.gp-myaccount__input,
.gp-myaccount__select {
    display: flex;
    height: 65px;
    width: 100%;
    align-items: center;
    border-radius: 10px;
    padding: 10px 30px;
    border: none;
    background-color: #363e4d;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    color: #9fb3c8;
}

    .gp-myaccount__input:focus,
    .gp-myaccount__select:focus {
        outline: 2px solid #1caee7;
        outline-offset: 2px;
    }

.gp-myaccount__select-wrap {
    position: relative;
    width: 100%;
}

.gp-myaccount__select-wrap--custom .gp-myaccount__select {
    position: absolute;
    width: 100%;
    opacity: 0;
    pointer-events: none;
}

.gp-myaccount__select-trigger {
    display: flex;
    width: 100%;
    align-items: center;
    border-radius: 10px;
    min-height: 65px;
    padding: 20px 30px;
    border: 1px solid #486581;
    background-color: #363e4d;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    color: #9fb3c8;
    text-align: left;
    cursor: pointer;
}

.gp-myaccount__select-wrap--open .gp-myaccount__select-trigger {
    color: #ffffff;
}

.gp-myaccount__select-caret {
    pointer-events: none;
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease;
}

.gp-myaccount__select-wrap--open .gp-myaccount__select-caret {
    transform: translateY(-50%) rotate(180deg);
}

.gp-myaccount__select-options {
    position: absolute;
    width: 100%;
    border-radius: 10px;
    z-index: 20;
    top: calc(100% + 8px);
    max-height: 240px;
    overflow-y: auto;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    border: 1px solid #486581;
    background-color: #363e4d;
}

.gp-myaccount__select-wrap--flip-up .gp-myaccount__select-options {
    top: auto;
    bottom: calc(100% + 8px);
}

.gp-myaccount__select-option {
    width: 100%;
    border: none;
    background: transparent;
    padding: 20px 30px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    color: #d9e2ec;
    text-align: left;
    cursor: pointer;
}

    .gp-myaccount__select-option:hover,
    .gp-myaccount__select-option:focus-visible,
    .gp-myaccount__select-option--active {
        background-color: #4b5667;
        color: #ffffff;
    }

.gp-myaccount__btn-submit {
    display: flex;
    height: 65px;
    width: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: none;
    background-color: #1caee7;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
    cursor: pointer;
}

    .gp-myaccount__btn-submit:hover,
    .gp-myaccount__btn-save:hover,
    .gp-myaccount__btn-cancel:hover {
        filter: brightness(1.08);
    }

    .gp-myaccount__btn-submit--disabled,
    .gp-myaccount__btn-submit:disabled {
        background-color: #424242;
        border: 1px solid #333333;
        color: #848484;
        cursor: not-allowed;
        filter: none;
    }

        .gp-myaccount__btn-submit--disabled:hover,
        .gp-myaccount__btn-submit:disabled:hover {
            filter: none;
        }

.gp-myaccount__input--readonly {
    opacity: 0.5;
    color: #829ab1;
    cursor: default;
}

    .gp-myaccount__input--readonly:focus {
        outline: none;
    }

.gp-myaccount__input--disabled,
.gp-myaccount__input:disabled {
    opacity: 0.5;
    color: #829ab1;
    cursor: not-allowed;
}

    .gp-myaccount__input--disabled:focus,
    .gp-myaccount__input:disabled:focus {
        outline: none;
    }

.gp-myaccount__select--disabled,
.gp-myaccount__select:disabled {
    cursor: not-allowed;
}

.gp-myaccount__select-wrap--disabled .gp-myaccount__select-trigger {
    opacity: 0.5;
    color: #829ab1;
    cursor: not-allowed;
    pointer-events: none;
}

.gp-myaccount__field-display {
    display: flex;
    height: 65px;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    padding: 10px 30px;
    background-color: #363e4d;
}

.gp-myaccount__field-display--editable {
    border: 1px solid #486581;
}

.gp-myaccount__field-display-text {
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    color: #9fb3c8;
}

.gp-myaccount__field-edit-btn {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

    .gp-myaccount__field-edit-btn img {
        width: 24px;
        height: 24px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-myaccount__field-input-wrap {
    position: relative;
    display: flex;
    height: 65px;
    width: 100%;
    align-items: center;
    border-radius: 10px;
    background-color: #363e4d;
}

.gp-myaccount__field-input-wrap--editable,
.gp-myaccount__field-input-wrap--editing {
    border: 1px solid #486581;
}

.gp-myaccount__field-input-wrap .gp-myaccount__input {
    height: 100%;
    width: 100%;
    flex: 1 1 0%;
    border-width: 0px;
    background-color: transparent;
    padding: 10px 30px;
    padding-right: 54px;
    border-radius: 10px;
}

    .gp-myaccount__field-input-wrap .gp-myaccount__input:focus {
        outline: none;
    }

.gp-myaccount__field-input-wrap--editing .gp-myaccount__input:focus {
    outline: 2px solid #1caee7;
    outline-offset: -2px;
}

.gp-myaccount__field-input-wrap .gp-myaccount__field-edit-btn {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
}

.gp-myaccount__field-input-wrap[data-js~="single-date-picker"] {
    position: relative;
}

.gp-myaccount__field-input-wrap .gp-history__date-range-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    right: auto;
    width: min(320px, calc(100vw - 48px));
    max-width: calc(100vw - 48px);
    min-width: 0;
}

.gp-myaccount__field-input-wrap--picker-open {
    z-index: 20;
}

.gp-myaccount__field-hint {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: normal;
    color: #829ab1;
}

.gp-myaccount__field-hint--warning {
    color: #ff5f57;
}

.gp-myaccount__form-actions {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
}

.gp-myaccount__form-actions--hidden {
    display: none;
}

.gp-myaccount__btn-address-edit--hidden {
    display: none;
}

.gp-myaccount__consent {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    border: 1px solid #0b4da0;
    border-radius: 10px;
    background-color: rgba(5, 36, 77, 0.4);
    cursor: pointer;
}

.gp-myaccount__consent-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.gp-myaccount__consent-checkbox-ui {
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid #2275de;
    box-sizing: border-box;
    background-color: transparent;
}

.gp-myaccount__consent-checkbox:checked + .gp-myaccount__consent-checkbox-ui {
    background: #0b4da0 url("../images/icon-cart-check.svg") center / 20px 20px no-repeat;
}

.gp-myaccount__consent-copy {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 3px;
}

.gp-myaccount__consent-text {
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: normal;
    color: #ffffff;
}

.gp-myaccount__consent-link-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.gp-myaccount__consent-link {
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: normal;
    color: #1caee7;
    text-decoration: none;
}

    .gp-myaccount__consent-link:hover {
        color: #5fc4ee;
    }

.gp-myaccount__consent-link-icon {
    width: 18px;
    height: 18px;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-myaccount__section--accordion {
    border-radius: 15px;
    padding: 1.25rem;
    background-image: radial-gradient(circle at left top, rgba(217, 217, 217, 0.2) 0%, rgba(217, 217, 217, 0.05) 70%);
}

.gp-myaccount__section-subtitle {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: normal;
    color: #829ab1;
}

.gp-myaccount__accordion-head {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.gp-myaccount__accordion-head-copy {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 10px;
}

.gp-myaccount__accordion-toggle {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0px;
    width: 27px;
    height: 27px;
    border-radius: 99px;
    border: 1px solid #093f85;
    background-color: #073269;
}

.gp-myaccount__accordion-caret {
    display: block;
    width: 14px;
    height: 14px;
    -o-object-fit: contain;
    object-fit: contain;
    transform: rotate(0deg);
    transition: transform 0.2s ease;
}

.gp-myaccount__section--accordion:not(.gp-myaccount__section--open) .gp-myaccount__accordion-caret {
    transform: rotate(180deg);
}

.gp-myaccount__accordion-panel {
    display: none;
    width: 100%;
    margin-top: 20px;
}

.gp-myaccount__section--accordion.gp-myaccount__section--open .gp-myaccount__accordion-panel {
    display: block;
}

.gp-myaccount__panel--nested {
    background-color: rgba(26, 27, 30, 0.5);
    gap: 30px;
}

    .gp-myaccount__panel--nested .gp-myaccount__input {
        color: #ffffff;
    }

.gp-myaccount__display--with-status {
    justify-content: space-between;
}

.gp-myaccount__contact {
    display: flex;
    align-items: center;
    gap: 30px;
    min-width: 0;
}

.gp-myaccount__contact-icon,
.gp-myaccount__status-icon {
    height: 1.5rem;
    width: 1.5rem;
    flex: 0 0 auto;
}

.gp-myaccount__phone-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
}

.gp-myaccount__phone-prefix {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #ffffff;
    white-space: nowrap;
}

.gp-myaccount__flag {
    width: 24px;
    height: 24px;
}

.gp-myaccount__phone-number,
.gp-myaccount__email {
    color: #ffffff;
    white-space: nowrap;
}

.gp-myaccount__verified {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: #14ae5c;
}

.gp-myaccount__divider {
    width: 100%;
    height: 1px;
    background-color: #102a43;
    opacity: 0.7;
}

.gp-myaccount__card-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 20px;
}

.gp-myaccount__action-card {
    display: flex;
    width: 100%;
    flex-direction: column;
    border-radius: 10px;
    padding: 1.25rem;
    text-decoration-line: none;
    gap: 10px;
    background-image: radial-gradient(circle at left top, rgba(217, 217, 217, 0.2) 0%, rgba(217, 217, 217, 0.05) 70%);
}

.gp-myaccount__action-title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    color: #ffffff;
}

.gp-myaccount__action-link {
    display: flex;
    height: 2.75rem;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    background-color: #627d98;
    padding: 10px 20px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: 1.4;
    color: #ffffff;
    text-decoration: none;
}

    .gp-myaccount__action-link:hover,
    .gp-myaccount__action-link:active,
    .gp-myaccount__action-link:focus-visible {
        background-color: #9fb3c8;
    }

    .gp-myaccount__action-link img {
        height: 1.5rem;
        width: 1.5rem;
        flex: 0 0 auto;
    }

.gp-myaccount__action-desc {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: 1.3;
    color: #9fb3c8;
}

.gp-history {
    gap: 24px;
}

.gp-history__game {
    display: flex;
    width: 100%;
    align-items: center;
    border-radius: 10px;
    padding: 1.25rem;
    gap: 16px;
    border: 1px solid #243b53;
    background-image: url("../images/game-bg-cbr-history.webp");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: cover;
}

.gp-history__game-thumb {
    width: 72px;
    height: 72px;
    border-radius: 6px;
    -o-object-fit: cover;
    object-fit: cover;
    flex: 0 0 auto;
}

.gp-history__game-content {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 10px;
}

.gp-history__game-title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: #ffffff;
}

.gp-history__game-switch {
    display: inline-flex;
    align-items: center;
    text-decoration-line: none;
}

    .gp-history__game-switch.gp-itemcode-head__change-game {
        width: -moz-fit-content;
        width: fit-content;
        min-width: 102px;
        min-height: 28px;
        height: auto;
        flex-shrink: 0;
        font-size: 14px;
        line-height: normal;
        box-sizing: border-box;
    }

@media (max-width: 1023px) {
    .gp-history__game-switch.gp-itemcode-head__change-game {
        width: -moz-fit-content;
        width: fit-content;
        min-width: 0;
        min-height: 0;
        height: auto;
        font-size: 10px;
        padding: 5px 15px;
    }

    .gp-history__game-switch .gp-itemcode-head__change-game-icon {
        width: 4px;
        height: 6px;
    }
}

.gp-history__filter {
    position: relative;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
}

.gp-history__filter-item {
    display: flex;
    flex-direction: column;
    width: calc((100% - 10px) / 2);
    gap: 10px;
}

.gp-history__filter-head {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.gp-history__filter-label {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: 13px;
    color: #ffffff;
}

.gp-history__filter-hint {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: 13px;
    color: #627d98;
}

.gp-history__filter-btn,
.gp-history__filter-action {
    display: flex;
    width: 100%;
    align-items: center;
    border-radius: 10px;
    height: 50px;
    padding: 10px;
    border: 0.5px solid #4b89c9;
    background: transparent;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: 16px;
    color: #ffffff;
}

.gp-history__filter-select-field {
    width: 100%;
}

.gp-history__filter-select-wrap {
    position: relative;
    width: 100%;
}

.gp-history__filter-select {
    width: 100%;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 50px;
    border-radius: 10px;
    border: 1px solid #4b89c9;
    background-color: transparent;
    box-shadow: 0 0 6px rgba(28, 174, 231, 0.3);
    padding: 10px 44px 10px 10px;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: 16px;
    color: #bcccdc;
}

.gp-history__filter-select-caret {
    pointer-events: none;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    transition: transform 0.2s ease;
}

.gp-history__filter-select-wrap--custom .gp-history__filter-select {
    position: absolute;
    width: 100%;
    opacity: 0;
    pointer-events: none;
}

.gp-history__filter-select-trigger {
    display: flex;
    width: 100%;
    align-items: center;
    border-radius: 10px;
    height: 50px;
    padding: 10px 44px 10px 10px;
    border: 1px solid #4b89c9;
    background-color: transparent;
    box-shadow: 0 0 6px rgba(28, 174, 231, 0.3);
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: 16px;
    color: #bcccdc;
    text-align: left;
    cursor: pointer;
}

.gp-history__filter-select-wrap--open .gp-history__filter-select-trigger {
    color: #ffffff;
}

.gp-history__filter-select-wrap--open .gp-history__filter-select-caret {
    transform: translateY(-50%) rotate(180deg);
}

.gp-history__filter-select-options {
    position: absolute;
    width: 100%;
    border-radius: 10px;
    z-index: 20;
    top: calc(100% + 6px);
    max-height: 240px;
    overflow-y: auto;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    border: 1px solid #4b89c9;
    background-color: #363e4d;
}

.gp-history__filter-select-wrap--flip-up .gp-history__filter-select-options {
    top: auto;
    bottom: calc(100% + 6px);
}

.gp-history__filter-select-option {
    width: 100%;
    border: none;
    background: transparent;
    padding: 12px 14px;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: 16px;
    color: #d9e2ec;
    text-align: left;
    cursor: pointer;
}

    .gp-history__filter-select-option:hover,
    .gp-history__filter-select-option:focus-visible,
    .gp-history__filter-select-option--active {
        background-color: #4b5667;
        color: #ffffff;
    }

.gp-history__filter-btn {
    justify-content: space-between;
    text-align: left;
}

    .gp-history__filter-btn img {
        width: 26px;
        height: 26px;
        transition: transform 0.2s ease;
    }

.gp-history__filter-action {
    width: auto;
    min-width: 95px;
    padding: 10px 20px;
    justify-content: center;
    gap: 10px;
}

    .gp-history__filter-action img {
        width: 14px;
        height: 14px;
    }

.gp-history__filter-item:nth-child(3) {
    width: calc(100% - 105px);
}

.gp-history__filter-item--action {
    position: relative;
    justify-content: flex-end;
    width: 95px;
}

/* Purchase history — desktop tag filter dropdown (below Filter button) */

.gp-history-filter-dropdown {
    display: none;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-history-filter-dropdown {
        position: absolute;
        right: 0px;
        top: 100%;
        z-index: 30;
        display: block;
        margin-top: 8px;
        min-width: 220px;
        max-width: min(280px, calc(100vw - 40px));
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }

    .gp-history-filter-dropdown--open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .gp-shop-filter-sidebar--history-dropdown {
        display: flex;
        width: 100%;
        flex-shrink: 0;
        flex-direction: column;
        min-width: 220px;
        max-height: min(420px, 70vh);
        overflow: hidden;
    }

        .gp-shop-filter-sidebar--history-dropdown .gp-shop-filter-sidebar__list {
            min-height: 0px;
            flex: 1 1 0%;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
}

/* Date range picker (purchase history filter) */

.gp-history__date-range {
    position: relative;
    width: 100%;
}

.gp-history__date-range-panel {
    position: absolute;
    z-index: 30;
    border-radius: 10px;
    padding: 0.75rem;
    top: calc(100% + 6px);
    left: 0;
    right: auto;
    width: min(600px, calc(100vw - 48px));
    max-width: calc(100vw - 48px);
    min-width: 0;
    border: 1px solid #4b89c9;
    background-color: #363e4d;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.gp-history__date-range-calendars {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 1rem;
}

.gp-history__date-range-calendar {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 0.5rem;
}

.gp-history__date-range-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.gp-history__date-range-nav {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    border-width: 0px;
    padding: 0.25rem;
    background: transparent;
    cursor: pointer;
    color: #d9e2ec;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .gp-history__date-range-nav:hover,
    .gp-history__date-range-nav:focus-visible {
        background-color: #4b5667;
        color: #ffffff;
        outline: none;
    }

    .gp-history__date-range-nav img {
        height: 26px;
        width: 26px;
    }

.gp-history__date-range-month {
    flex: 1;
    text-align: center;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    color: #ffffff;
}

.gp-history__date-range-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}

.gp-history__date-range-weekday {
    text-align: center;
    font-family: "Google Sans", sans-serif;
    font-size: 11px;
    line-height: 14px;
    color: #bcccdc;
}

.gp-history__date-range-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}

.gp-history__date-range-day {
    display: flex;
    aspect-ratio: 1 / 1;
    max-height: 2.5rem;
    min-height: 36px;
    width: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    border-width: 0px;
    padding: 0px;
    font-family: "Google Sans", sans-serif;
    font-size: 13px;
    line-height: 1;
    color: #ffffff;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

    .gp-history__date-range-day:focus-visible {
        outline: 2px solid #4b89c9;
        outline-offset: 1px;
    }

    .gp-history__date-range-day:hover:not(:disabled) {
        background-color: #4b5667;
    }

.gp-history__date-range-day--outside {
    color: #6b7a8f;
    cursor: pointer;
}

.gp-history__date-range-day--today:not(.gp-history__date-range-day--selected) {
    box-shadow: inset 0 0 0 1px rgba(75, 137, 201, 0.85);
}

.gp-history__date-range-day--in-range {
    background-color: rgba(75, 137, 201, 0.28);
    color: #ffffff;
}

    .gp-history__date-range-day--in-range:hover {
        background-color: rgba(75, 137, 201, 0.42);
    }

.gp-history__date-range-day--selected {
    background-color: #4b89c9;
    color: #ffffff;
    font-weight: 600;
}

    .gp-history__date-range-day--selected:hover {
        background-color: #5a9ad6;
    }

.gp-history__date-range-day--range-start.gp-history__date-range-day--in-range,
.gp-history__date-range-day--range-end.gp-history__date-range-day--in-range {
    background-color: #4b89c9;
}

.gp-history__date-range--open .gp-history__filter-btn {
    color: #ffffff;
}

    .gp-history__date-range--open .gp-history__filter-btn img {
        transform: rotate(180deg);
    }

@media (min-width: 768px) {
    .gp-history__date-range-calendars {
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
    }
}

.gp-history__list {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 15px;
    padding: 8px;
    border-radius: 15px;
    background-image: radial-gradient(circle at left top, rgba(217, 217, 217, 0.2) 0%, rgba(217, 217, 217, 0.05) 70%);
}

.gp-history__list--table {
    gap: 0;
    padding: 0;
    border-radius: 0;
    background-image: none;
}

.gp-history__table-wrap {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #627d98 #1f2126;
    border: 1px solid #243b53;
    border-radius: 10px;
}

    .gp-history__table-wrap::-webkit-scrollbar {
        height: 6px;
    }

    .gp-history__table-wrap::-webkit-scrollbar-track {
        background: #1f2126;
        border-radius: 4px;
    }

    .gp-history__table-wrap::-webkit-scrollbar-thumb {
        background: #627d98;
        border-radius: 4px;
    }

.gp-history__table {
    width: 100%;
    min-width: 1050px;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}

.gp-history__thead {
    background-color: #16171a;
}

.gp-history__th {
    padding: 20px 10px 20px 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.25;
    color: #bcccdc;
    text-align: left;
    vertical-align: middle;
}

    .gp-history__th:first-child {
        padding-left: 20px;
    }

    .gp-history__th:last-child {
        padding-right: 20px;
    }

    .gp-history__th:nth-child(1),
    .gp-history__cell:nth-child(1) {
        width: 15%;
    }

    .gp-history__th:nth-child(2),
    .gp-history__cell:nth-child(2) {
        width: 10%;
    }

    .gp-history__th:nth-child(3),
    .gp-history__cell:nth-child(3) {
        width: 20%;
    }

    .gp-history__th:nth-child(4),
    .gp-history__cell:nth-child(4) {
        width: 20%;
    }

    .gp-history__th:nth-child(5),
    .gp-history__cell:nth-child(5) {
        width: 10%;
    }

    .gp-history__th:nth-child(6),
    .gp-history__cell:nth-child(6) {
        width: 20%;
    }

    .gp-history__th:nth-child(7),
    .gp-history__cell:nth-child(7) {
        width: 5%;
    }

.gp-history__tbody {
    background-color: #1a1b1e;
}

.gp-history__row {
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: 1.25;
    color: #ffffff;
}

    .gp-history__row + .gp-history__row .gp-history__cell {
        border-top: 1px solid #243b53;
    }

.gp-history__cell {
    padding: 15px 10px 15px 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.gp-history__tbody .gp-history__row:last-child .gp-history__cell {
    padding-bottom: 20px;
}

.gp-history__tbody .gp-history__row:first-child .gp-history__cell {
    padding-top: 20px;
}

.gp-history__cell:first-child {
    padding-left: 20px;
}

.gp-history__cell:last-child {
    padding-right: 20px;
}

.gp-history__cell--date {
    font-size: 16px;
    color: #ffffff;
}

.gp-history__limit-note {
    display: flex;
    width: 100%;
    max-width: 900px;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 20px;
    padding: 10px;
}

.gp-history__limit-note-line {
    flex: 1 1 0;
    min-width: 0;
    height: 1px;
    background-color: #486581;
}

.gp-history__limit-note-text {
    flex-shrink: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 14px;
    color: #486581;
    white-space: nowrap;
}

.gp-history__limit-note--redlink .gp-history__limit-note-line {
    background-color: #685c62;
}

.gp-history__limit-note--redlink .gp-history__limit-note-text {
    color: #685c62;
}

@media (max-width: 767px) {
    .gp-history__limit-note {
        gap: 12px;
    }

    .gp-history__limit-note-text {
        white-space: normal;
        text-align: center;
        font-size: 14px;
        line-height: 1.25;
    }
}

.gp-history__tabs {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 10px;
    background-image: radial-gradient(circle at left top, rgba(217, 217, 217, 0.2) 0%, rgba(217, 217, 217, 0.05) 70%);
}

.gp-history__tabs-track {
    display: flex;
    flex-wrap: nowrap;
    width: -moz-max-content;
    width: max-content;
    min-width: 100%;
    padding: 5px;
    gap: 0;
}

.gp-history__tab {
    flex-shrink: 0;
    padding: 12px 16px;
    border: none;
    border-radius: 10px;
    background: transparent;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: #9fb3c8;
    white-space: nowrap;
    cursor: pointer;
}

    .gp-history__tab:is(:hover, .gp-history__tab--active) {
        font-size: 18px;
        font-weight: 700;
        color: #ffffff;
        background-image: linear-gradient(115.31deg, #52ceff 5.7%, #1caee7 54.37%);
    }

.gp-history__tabs::-webkit-scrollbar {
    display: none;
}

.gp-history__card {
    display: flex;
    width: 100%;
    flex-direction: column;
    border-radius: 10px;
    gap: 20px;
    padding: 20px;
    border: 1px solid #243b53;
    background-color: #1a1b1e;
}

.gp-history__card-head {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 12px;
}

.gp-history__card-head-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gp-history__deadline {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: 1.2;
    color: #febc2f;
}

.gp-history__card-head-actions {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

@media (min-width: 1024px) {
    .gp-history__card-head-actions {
        width: -moz-fit-content;
        width: fit-content;
    }
}

.gp-history__card-head-actions {
    gap: 10px;
    flex-wrap: wrap;
}

.gp-history__status {
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    white-space: nowrap;
}

.gp-history__status--complete {
    color: #33ff53;
}

.gp-history__status--pending {
    color: #febc2f;
}

.gp-history__status--cancel {
    color: #ff5f57;
}

.gp-history__pay-now {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 5px 15px;
    border: 1px solid #ffc955;
    border-radius: 99px;
    background-color: #febc2f;
    box-shadow: 0 0 8.85px rgba(173, 126, 27, 0.35);
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    color: #020e1f;
    white-space: nowrap;
}

.gp-history__card-foot {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    flex-wrap: wrap;
}

.gp-history__card-divider {
    width: 100%;
    height: 1px;
    background-color: #243b53;
}

.gp-history__group {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 14px;
}

.gp-history__group-head {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
}

.gp-history__group-title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.gp-history__group-head--self .gp-history__group-title {
    color: #1caee7;
}

.gp-history__group-head--gift .gp-history__group-title {
    color: #b273ff;
}

.gp-history__group-line {
    flex: 1 0 0;
    height: 1px;
    background-color: #243b53;
}

.gp-history__group-head--self .gp-history__group-line {
    background-color: #1caee7;
}

.gp-history__group-head--gift .gp-history__group-line {
    background-color: #6829a4;
}

.gp-history__entry {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 12px;
}

.gp-history__entry--divided {
    padding-top: 16px;
    border-top: 1px solid #243b53;
}

.gp-history__card-meta-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
}

.gp-history__payment-ref {
    font-weight: 600;
    color: #1caee7;
}

.gp-history__meta {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: 1.2;
    color: #627d98;
}

.gp-history__meta--strong {
    color: #bcccdc;
}

.gp-history__meta--hide-xs {
    display: none;
}

@media (min-width: 768px) {
    .gp-history__meta--hide-xs {
        display: inline;
    }
}

.gp-history__card-total {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: normal;
    color: #627d98;
}

    .gp-history__card-total strong {
        font-size: 18px;
        font-weight: 700;
        color: #1caee7;
    }

.gp-history__card-head-right {
    order: -9999;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

.gp-history__card-pts {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gp-history__card-pt {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: normal;
    color: #bcccdc;
}

    .gp-history__card-pt img {
        width: 22px;
        height: 22px;
        -o-object-fit: cover;
        object-fit: cover;
    }

.gp-history__card-total--points {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: normal;
    color: #627d98;
}

.gp-history__card-points-amount {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
    color: #1caee7;
}

    .gp-history__card-points-amount img {
        width: 22px;
        height: 22px;
        -o-object-fit: cover;
        object-fit: cover;
    }

.gp-history__product-value--points-spend {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .gp-history__product-value--points-spend img {
        width: 22px;
        height: 22px;
        -o-object-fit: cover;
        object-fit: cover;
        flex-shrink: 0;
    }

.gp-history__product-thumb-wrap {
    position: relative;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
}

.gp-history__product-badge {
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px 8px;
    border-bottom-right-radius: 5px;
    background-color: #facc15;
    font-family: "Google Sans", sans-serif;
    font-size: 12px;
    line-height: normal;
    color: #020e1f;
    white-space: nowrap;
}

.gp-history__items {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 6px;
}

.gp-history__items-toggle {
    display: flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: none;
    background: none;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: normal;
    color: #bcccdc;
}

.gp-history__items-toggle-icon {
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease;
}

.gp-history__items-toggle[aria-expanded="true"] .gp-history__items-toggle-icon {
    transform: rotate(180deg);
}

.gp-history__items-panel {
    display: flex;
    width: 100%;
    border: 1px solid #243b53;
    border-radius: 10px;
    background-color: #27292f;
}

    .gp-history__items-panel[hidden] {
        display: none;
    }

.gp-history__items-list {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
    padding: 30px;
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #627d98 #1f2126;
}

    .gp-history__items-list::-webkit-scrollbar {
        width: 8px;
    }

    .gp-history__items-list::-webkit-scrollbar-track {
        background: #1f2126;
        border-radius: 4px;
    }

    .gp-history__items-list::-webkit-scrollbar-thumb {
        background: #627d98;
        border-radius: 4px;
    }

.gp-history__items-day {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-history__items-day-title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    color: #9fb3c8;
}

.gp-history__items-list > .gp-history__items-day:first-child .gp-history__items-day-title {
    padding-top: 10px;
}

.gp-history__items-row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: normal;
    color: #9fb3c8;
    padding: 0 10px;
}

    .gp-history__items-row > span:first-child::before {
        content: "•";
        margin-right: 10px;
    }

    .gp-history__items-row > span:last-child {
        text-align: right;
    }

.gp-history__product-row {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
}

.gp-history__product-thumb-main-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

@media (min-width: 768px) {
    .gp-history__product-thumb-main-wrap {
        flex-direction: row;
        gap: 2.5rem;
    }
}

.gp-history__product-thumb {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    -o-object-fit: cover;
    object-fit: cover;
}

.gp-history__product-main,
.gp-history__product-col {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.gp-history__product-col--gift {
    gap: 3px;
}

.gp-history__product-col--empty {
    display: none;
}

.gp-history__product-label {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: 1.2;
    color: #627d98;
}

.gp-history__product-name {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    color: #ffffff;
}

.gp-history__product-value {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: 1.2;
    color: #ffffff;
}

.gp-history__product-value--gift {
    color: #b273ff;
}

.gp-history__product-note {
    margin: 0;
    max-width: 220px;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: 1.25;
    color: #ffdf72;
}

.gp-history__product-note-link {
    color: #ffdf72;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.gp-history__code-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.gp-history__code-copy {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
}

    .gp-history__code-copy img {
        display: block;
        width: 22px;
        height: 22px;
    }

/* -------------------------------------------------------------------------- */

/* Subscribe pack page (Figma: 1072:7022 desktop, 1814:5679 mobile)             */

/* -------------------------------------------------------------------------- */

.gp-subscribe-pack__list {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-subscribe-pack__panel {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-subscribe-pack__row {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #243b53;
    background-color: #1a1b1e;
    box-sizing: border-box;
}

.gp-subscribe-pack__thumb-wrap {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
}

.gp-subscribe-pack__thumb {
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 6px;
    -o-object-fit: cover;
    object-fit: cover;
}

.gp-subscribe-pack__main {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 20px;
}

.gp-subscribe-pack__pack,
.gp-subscribe-pack__character {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gp-subscribe-pack__pack-name,
.gp-subscribe-pack__character-name {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: normal;
    color: #ffffff;
}

.gp-subscribe-pack__pack-desc,
.gp-subscribe-pack__server {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: normal;
    color: #829ab1;
}

.gp-subscribe-pack__footer {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 40px;
}

.gp-subscribe-pack__expiry {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: normal;
    color: #facc15;
}

.gp-subscribe-pack__detail {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 10px;
    border: 1px solid #243b53;
    border-radius: 5px;
    background-color: #243b53;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: normal;
    color: #ffffff;
}

    .gp-subscribe-pack__detail:hover {
        filter: brightness(1.08);
    }

@media (max-width: 1023px) {
    .gp-history--subscribe-pack .gp-history__game {
        padding: 30px;
        gap: 10px;
    }

    .gp-history--subscribe-pack .gp-history__game-thumb {
        width: 66px;
        height: 66px;
    }

    .gp-history--subscribe-pack .gp-history__game-title {
        font-size: 18px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .gp-subscribe-pack__panel {
        gap: 20px;
        padding: 40px;
        border-radius: 10px;
        border: 1px solid #243b53;
        background-color: #1a1b1e;
        box-sizing: border-box;
    }

    .gp-subscribe-pack__row {
        display: grid;
        grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 0.75fr);
        gap: 10px;
        align-items: start;
        padding: 0;
        border: 0;
        background-color: transparent;
    }

    .gp-subscribe-pack__main,
    .gp-subscribe-pack__footer {
        display: contents;
    }

    .gp-subscribe-pack__thumb-wrap {
        width: auto;
        height: auto;
        align-self: center;
    }

    .gp-subscribe-pack__pack,
    .gp-subscribe-pack__character {
        justify-content: center;
        padding: 15px 0;
        gap: 5px;
    }

    .gp-subscribe-pack__pack-name,
    .gp-subscribe-pack__character-name {
        font-size: 18px;
    }

    .gp-subscribe-pack__pack-desc,
    .gp-subscribe-pack__server {
        font-size: 14px;
    }

    .gp-subscribe-pack__expiry {
        align-self: start;
        padding: 15px 0;
        font-size: 16px;
    }

    .gp-subscribe-pack__detail {
        align-self: center;
        justify-self: start;
        height: 50px;
        padding: 10px 20px;
        font-size: 16px;
    }
}

@media (min-width: 1024px) {
    .gp-subscribe-pack__panel {
        gap: 20px;
        padding: 40px;
        border-radius: 10px;
        border: 1px solid #243b53;
        background-color: #1a1b1e;
        box-sizing: border-box;
    }

    .gp-subscribe-pack__row {
        display: grid;
        grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 0.75fr);
        gap: 10px;
        align-items: start;
        padding: 0;
        border: 0;
        background-color: transparent;
    }

    .gp-subscribe-pack__main,
    .gp-subscribe-pack__footer {
        display: contents;
    }

    .gp-subscribe-pack__thumb-wrap {
        width: auto;
        height: auto;
        align-self: center;
    }

    .gp-subscribe-pack__pack,
    .gp-subscribe-pack__character {
        justify-content: center;
        padding: 15px 0;
        gap: 5px;
    }

    .gp-subscribe-pack__pack-name,
    .gp-subscribe-pack__character-name {
        font-size: 18px;
    }

    .gp-subscribe-pack__pack-desc,
    .gp-subscribe-pack__server {
        font-size: 14px;
    }

    .gp-subscribe-pack__expiry {
        align-self: start;
        padding: 15px 0;
        font-size: 16px;
    }

    .gp-subscribe-pack__detail {
        align-self: center;
        justify-self: start;
        height: 50px;
        padding: 10px 20px;
        font-size: 16px;
    }
}

/* -------------------------------------------------------------------------- */

/* Lock ID page (Figma: 996:4664)                                              */

/* -------------------------------------------------------------------------- */

.gp-lock-id__notice {
    width: 100%;
    padding: 20px;
    border-radius: 10px;
    background: radial-gradient( ellipse 50% 80% at 50% -20%, rgba(19, 91, 181, 1) 0%, rgba(18, 76, 148, 1) 25%, rgba(18, 61, 115, 1) 50%, rgba(17, 45, 81, 1) 75%, rgba(16, 30, 48, 1) 100% );
    box-sizing: border-box;
}

.gp-lock-id__notice-text {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
}

.gp-lock-id__panel {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-lock-id__account {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #243b53;
    background-color: #1a1b1e;
    box-sizing: border-box;
}

.gp-lock-id__account-head {
    display: flex;
    min-width: 0px;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: 10px;
}

.gp-lock-id__account-info {
    display: flex;
    min-width: 0px;
    flex-direction: column;
    gap: 10px;
}

.gp-lock-id__status-tag {
    margin: 0;
    align-self: flex-start;
    padding: 20px 16px;
    border: 1px solid #801f21;
    border-radius: 5px;
    background-color: rgba(129, 26, 20, 0.75);
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    text-align: center;
    color: #ff827c;
    white-space: nowrap;
    box-sizing: border-box;
}

.gp-lock-id__account-game {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    color: #829ab1;
}

.gp-lock-id__account-id {
    font-size: 14px;
}

@media (min-width: 768px) {
    .gp-lock-id__account-id {
        font-size: 18px;
    }
}

.gp-lock-id__account-id {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
}

.gp-lock-id__account-email {
    font-size: 14px;
}

@media (min-width: 768px) {
    .gp-lock-id__account-email {
        font-size: 16px;
    }
}

.gp-lock-id__account-email {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    line-height: 1;
    color: #72afff;
}

.gp-lock-id__action {
    display: inline-flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

    .gp-lock-id__action:hover {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

    .gp-lock-id__action:active {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-lock-id__action {
    gap: 20px;
    min-height: 50px;
    padding: 10px 20px;
    border: 1px solid #334e68;
    border-radius: 10px;
    background-color: transparent;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #f0f4f8;
    box-sizing: border-box;
}

.gp-lock-id__action-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-lock-id__action--unlock {
    gap: 10px;
    padding: 10px 30px;
    border: 1px solid #3db9eb;
    background-color: #1caee7;
    color: #ffffff;
}

/* Lock ID confirm modal (Figma: node 996-5962 "Pop up ถาม Lock ID") */

.gp-lock-id-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 73;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-lock-id-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-lock-id-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.7);
    cursor: default;
    pointer-events: auto;
}

.gp-lock-id-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 645px;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-lock-id-modal__dialog {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    background-color: #1f2024;
    border: 1px solid #243b53;
    border-radius: 20px;
    padding: 50px 70px;
    gap: 50px;
    box-sizing: border-box;
}

.gp-lock-id-modal__content {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 50px;
}

.gp-lock-id-modal__header-block {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
}

.gp-lock-id-modal__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
}

.gp-lock-id-modal__account-card {
    width: 100%;
    padding: 20px;
    border: 1px solid #486581;
    border-radius: 10px;
    background-color: #243b53;
    box-sizing: border-box;
}

.gp-lock-id-modal__account-row {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 20px;
    min-height: 65px;
}

.gp-lock-id-modal__account-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-lock-id-modal__account-text {
    display: flex;
    min-width: 0px;
    flex-direction: column;
    gap: 8px;
}

.gp-lock-id-modal__account-name {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
}

.gp-lock-id-modal__account-email {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
}

.gp-lock-id-modal__message {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 13px;
}

.gp-lock-id-modal__message-line {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    color: #ffffff;
}

.gp-lock-id-modal__message-highlight {
    color: #ff5f57;
}

.gp-lock-id-modal__actions {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.gp-lock-id-modal__cancel,
.gp-lock-id-modal__confirm {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    height: 65px;
    border-radius: 10px;
    padding: 10px 30px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    white-space: nowrap;
}

.gp-lock-id-modal__cancel {
    background-color: transparent;
    border: 1px solid #486581;
    color: #ffffff;
    font-weight: 400;
}

    .gp-lock-id-modal__cancel:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-lock-id-modal__confirm {
    background-color: #e8b931;
    color: #020e1f;
    font-weight: 600;
}

    .gp-lock-id-modal__confirm:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

body.gp-lock-id-modal-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .gp-lock-id-modal__dialog {
        padding: 30px 20px;
        gap: 30px;
    }

    .gp-lock-id-modal__content {
        gap: 30px;
    }

    .gp-lock-id-modal__actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .gp-lock-id-modal__cancel,
    .gp-lock-id-modal__confirm {
        width: 100%;
        white-space: normal;
        text-align: center;
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 1023px) {
    .gp-lock-id .gp-history__game {
        padding: 30px;
        gap: 10px;
    }

    .gp-lock-id .gp-history__game-thumb {
        width: 66px;
        height: 66px;
    }

    .gp-lock-id .gp-history__game-title {
        font-size: 18px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .gp-lock-id__notice {
        padding: 30px;
    }

    .gp-lock-id__account {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 30px;
        gap: 20px;
    }

    .gp-lock-id__account-head {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex: 1 0 0;
        gap: 30px;
    }

    .gp-lock-id__status-tag {
        align-self: center;
        flex-shrink: 0;
    }

    .gp-lock-id__action {
        width: auto;
        min-width: 179px;
        min-height: 70px;
        flex-shrink: 0;
        font-size: 18px;
    }
}

@media (min-width: 1024px) {
    .gp-lock-id__notice {
        padding: 30px;
    }

    .gp-lock-id__account {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 30px;
        gap: 20px;
    }

    .gp-lock-id__account-head {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex: 1 0 0;
        gap: 30px;
    }

    .gp-lock-id__status-tag {
        align-self: center;
        flex-shrink: 0;
    }

    .gp-lock-id__action {
        width: auto;
        min-width: 179px;
        min-height: 70px;
        flex-shrink: 0;
        font-size: 18px;
    }
}

/* -------------------------------------------------------------------------- */

/* Account connect page (Figma: 938:10810)                                    */

/* -------------------------------------------------------------------------- */

.gp-connect .gp-myaccount__section-title {
    font-size: 18px;
}

.gp-connect__panel {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 50px;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #243b53;
    background-color: #1a1b1e;
    box-sizing: border-box;
}

.gp-connect__row {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
}

.gp-connect__row-main {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.gp-connect__row-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-connect__row-icon--genplay {
    width: 39px;
}

.gp-connect__row-info {
    display: flex;
    min-width: 0px;
    flex-direction: column;
    gap: 5px;
}

.gp-connect__row-name {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: normal;
    color: #ffffff;
}

.gp-connect__row-email,
.gp-connect__row-message {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #829ab1;
}

.gp-connect__action {
    display: inline-flex;
    width: 100%;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

    .gp-connect__action:hover {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

    .gp-connect__action:active {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-connect__action {
    gap: 20px;
    min-height: 50px;
    padding: 10px 20px;
    border-radius: 10px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    box-sizing: border-box;
}

.gp-connect__action--disconnect {
    border: 1px solid #bcccdc;
    background-color: transparent;
    color: #bcccdc;
}

    .gp-connect__action--disconnect:disabled {
        border-color: #243b53;
        color: #243b53;
        cursor: not-allowed;
    }

        .gp-connect__action--disconnect:disabled:hover,
        .gp-connect__action--disconnect:disabled:active {
            --tw-scale-x: 1;
            --tw-scale-y: 1;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
            --tw-brightness: brightness(1);
            filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
            filter: none;
        }

.gp-connect__action--connect {
    border: 1px solid #3db9eb;
    background-color: #1caee7;
    color: #ffffff;
}

.gp-connect__action-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-connect__action-text {
    /* visible by default on tablet/desktop */
}

@media (max-width: 767px) {
    .gp-connect__action-text {
        display: none;
    }

    .gp-connect__action {
        width: auto;
        min-width: 0;
        gap: 0;
        padding: 13px;
        align-self: flex-end;
    }

    .gp-connect__row,
    .gp-connect__row-head {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }
}

.gp-connect__row-head {
    display: flex;
    width: 100%;
    flex-direction: row;
    gap: 20px;
}

.gp-connect__row--genplay {
    flex-direction: column;
    align-items: stretch;
}

    .gp-connect__row--genplay.gp-connect__row--expanded {
        flex-direction: column;
        align-items: stretch;
    }

.gp-connect__form {
    width: 100%;
}

.gp-connect__form-panel,
.gp-connect__form-body {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
}

.gp-connect__form-divider {
    width: 100%;
    height: 1px;
    background-color: #102a43;
    opacity: 0.7;
}

.gp-connect__form-lead {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #d9e2ec;
}

.gp-connect__fields {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 18px;
}

.gp-connect__field {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-connect__field--password {
    gap: 5px;
}

.gp-connect__field-label {
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    color: #829ab1;
}

.gp-connect__input-wrap {
    display: flex;
    height: 65px;
    width: 100%;
    align-items: center;
    border-radius: 10px;
    padding: 10px 30px;
    background-color: #05244d;
    box-sizing: border-box;
}

.gp-connect__input-wrap--password {
    justify-content: space-between;
}

.gp-connect__input {
    min-width: 0px;
    flex: 1 1 0%;
    background-color: transparent;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: normal;
    border: none;
}

    .gp-connect__input::-moz-placeholder {
        opacity: 0.8;
        color: #ffffff;
    }

    .gp-connect__input::placeholder {
        opacity: 0.8;
        color: #ffffff;
    }

    .gp-connect__input:-webkit-autofill,
    .gp-connect__input:-webkit-autofill:hover,
    .gp-connect__input:-webkit-autofill:focus {
        box-shadow: 0 0 0 1px transparent inset, 0 0 0 1000px #05244d inset;
        -webkit-text-fill-color: #ffffff;
        caret-color: #ffffff;
    }

.gp-connect__password-toggle {
    display: flex;
    height: 1.5rem;
    width: 1.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

    .gp-connect__password-toggle img {
        height: 100%;
        width: 100%;
    }

.gp-connect__input-error-icon {
    display: none;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-connect__field--error .gp-connect__input-error-icon {
    display: block;
}

.gp-connect__field--error .gp-connect__input-wrap {
    border: 1px solid #ff383c;
    box-shadow: 0 0 3px rgba(255, 56, 60, 0.55);
}

.gp-connect__field--error .gp-connect__input:-webkit-autofill,
.gp-connect__field--error .gp-connect__input:-webkit-autofill:hover,
.gp-connect__field--error .gp-connect__input:-webkit-autofill:focus {
    box-shadow: 0 0 0 1px #ff383c inset, 0 0 0 1000px #05244d inset, 0 0 3px rgba(255, 56, 60, 0.55);
    border-color: #ff383c;
}

.gp-connect__field-error {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #ff383c;
}

.gp-connect__submit {
    display: flex;
    height: 55px;
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border-width: 0px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

    .gp-connect__submit:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-connect__submit {
    padding: 10px;
    background-color: #1caee7;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #ffffff;
    box-sizing: border-box;
}

.gp-connect__signup {
    display: flex;
    width: 100%;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
    margin: 0;
    font-size: 16px;
    line-height: normal;
}

.gp-connect__signup-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    color: #829ab1;
}

.gp-connect__signup-link {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    color: #1caee7;
    text-decoration: underline;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .gp-connect .gp-myaccount__section-title {
        font-size: 20px;
    }

    .gp-connect__panel {
        padding: 30px 40px;
    }

    .gp-connect__row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .gp-connect__row-name,
    .gp-connect__row-email,
    .gp-connect__row-message {
        font-size: 18px;
    }

    .gp-connect__action {
        width: auto;
        min-width: 179px;
        min-height: 65px;
        padding: 10px 30px;
        font-size: 18px;
    }
}

@media (min-width: 768px) {
    .gp-connect__row-head {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        min-height: 65px;
    }

        .gp-connect__row-head .gp-connect__action {
            width: auto;
        }

    .gp-connect__row--genplay {
        flex-direction: column;
        align-items: stretch;
    }

    .gp-connect__form-lead,
    .gp-connect__input,
    .gp-connect__submit,
    .gp-connect__signup {
        font-size: 18px;
    }
}

@media (min-width: 1024px) {
    .gp-connect__panel {
        padding: 30px 40px;
    }

    .gp-connect__row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .gp-connect__row--genplay {
        flex-direction: column;
        align-items: stretch;
    }

    .gp-connect__row-head {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        min-height: 65px;
    }

    .gp-connect__action {
        width: auto;
        min-width: 179px;
        min-height: 65px;
        padding: 10px 30px;
        font-size: 18px;
    }
}

/* Disconnect account confirm modal (Figma: node 940:11459 desktop, 1584:5541 mobile) */

.gp-connect-disconnect-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 73;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-connect-disconnect-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-connect-disconnect-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.7);
    cursor: default;
    pointer-events: auto;
}

.gp-connect-disconnect-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 645px;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-connect-disconnect-modal__dialog {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    background-color: #1f2024;
    border: 1px solid #243b53;
    border-radius: 20px;
    padding: 50px;
    gap: 50px;
    box-sizing: border-box;
}

.gp-connect-disconnect-modal__content {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 50px;
}

.gp-connect-disconnect-modal__header-block {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
}

.gp-connect-disconnect-modal__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
}

.gp-connect-disconnect-modal__account-card {
    width: 100%;
    padding: 20px;
    border: 1px solid #486581;
    border-radius: 10px;
    background-color: #243b53;
    box-sizing: border-box;
}

.gp-connect-disconnect-modal__account-row {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 20px;
    min-height: 65px;
}

.gp-connect-disconnect-modal__account-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-connect-disconnect-modal__account-text {
    display: flex;
    min-width: 0px;
    flex-direction: column;
    gap: 8px;
}

.gp-connect-disconnect-modal__account-name {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
}

.gp-connect-disconnect-modal__account-email {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #829ab1;
}

.gp-connect-disconnect-modal__message {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 13px;
}

.gp-connect-disconnect-modal__message-line {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    color: #ffffff;
}

.gp-connect-disconnect-modal__message-provider {
    font-weight: 700;
}

.gp-connect-disconnect-modal__message-highlight {
    color: #ff5f57;
}

.gp-connect-disconnect-modal__actions {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.gp-connect-disconnect-modal__cancel,
.gp-connect-disconnect-modal__confirm {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    height: 65px;
    border-radius: 10px;
    padding: 10px 30px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    white-space: nowrap;
}

.gp-connect-disconnect-modal__cancel {
    background-color: transparent;
    border: 1px solid #486581;
    color: #ffffff;
    font-weight: 400;
}

    .gp-connect-disconnect-modal__cancel:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-connect-disconnect-modal__confirm {
    background-color: #e8b931;
    color: #020e1f;
    font-weight: 600;
}

    .gp-connect-disconnect-modal__confirm:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

body.gp-connect-disconnect-modal-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .gp-connect-disconnect-modal__dialog {
        padding: 40px;
        gap: 30px;
    }

    .gp-connect-disconnect-modal__content {
        gap: 30px;
    }

    .gp-connect-disconnect-modal__title {
        font-size: 16px;
    }

    .gp-connect-disconnect-modal__account-row {
        gap: 10px;
        min-height: 0;
    }

    .gp-connect-disconnect-modal__account-icon {
        width: 35px;
        height: 35px;
    }

    .gp-connect-disconnect-modal__account-text {
        gap: 3px;
    }

    .gp-connect-disconnect-modal__account-name {
        font-size: 16px;
    }

    .gp-connect-disconnect-modal__account-email {
        font-size: 14px;
    }

    .gp-connect-disconnect-modal__message-line {
        font-size: 16px;
    }

    .gp-connect-disconnect-modal__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .gp-connect-disconnect-modal__cancel,
    .gp-connect-disconnect-modal__confirm {
        width: 100%;
        height: 60px;
        white-space: normal;
        text-align: center;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Connect fail modal (Figma: node 2239:10459 "Pop up เชื่อมไม่ได้") */

.gp-connect-fail-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 73;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-connect-fail-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-connect-fail-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.7);
    cursor: default;
    pointer-events: auto;
}

.gp-connect-fail-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 645px;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-connect-fail-modal__dialog {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    background-color: #1f2024;
    border: 1px solid #243b53;
    border-radius: 20px;
    padding: 50px;
    gap: 30px;
    box-sizing: border-box;
}

.gp-connect-fail-modal__content {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.gp-connect-fail-modal__header-block {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.gp-connect-fail-modal__icon {
    width: 60px;
    height: 60px;
    flex: 0 0 auto;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-connect-fail-modal__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
    text-align: center;
}

.gp-connect-fail-modal__account-card {
    width: 100%;
    padding: 20px;
    border: 1px solid #486581;
    border-radius: 10px;
    background-color: #243b53;
    box-sizing: border-box;
}

.gp-connect-fail-modal__account-row {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 20px;
    min-height: 65px;
}

.gp-connect-fail-modal__account-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-connect-fail-modal__account-text {
    display: flex;
    min-width: 0px;
    flex-direction: column;
    gap: 6px;
}

.gp-connect-fail-modal__account-name {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
}

.gp-connect-fail-modal__account-email {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #829ab1;
}

.gp-connect-fail-modal__message {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    color: #ffffff;
    text-align: center;
}

.gp-connect-fail-modal__message-alert {
    color: #ff5f57;
}

.gp-connect-fail-modal__message-provider {
    font-weight: 700;
}

.gp-connect-fail-modal__close {
    display: inline-flex;
    width: 100%;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    background-color: transparent;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    height: 65px;
    border: 1px solid #486581;
    border-radius: 10px;
    padding: 10px 30px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    font-weight: 400;
    color: #ffffff;
    white-space: nowrap;
}

    .gp-connect-fail-modal__close:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

body.gp-connect-fail-modal-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .gp-connect-fail-modal__dialog {
        padding: 40px;
        gap: 30px;
    }

    .gp-connect-fail-modal__content {
        gap: 30px;
    }

    .gp-connect-fail-modal__title {
        font-size: 16px;
    }

    .gp-connect-fail-modal__account-row {
        gap: 10px;
        min-height: 0;
    }

    .gp-connect-fail-modal__account-icon {
        width: 35px;
        height: 35px;
    }

    .gp-connect-fail-modal__account-text {
        gap: 3px;
    }

    .gp-connect-fail-modal__account-name {
        font-size: 16px;
    }

    .gp-connect-fail-modal__account-email {
        font-size: 14px;
    }

    .gp-connect-fail-modal__message {
        font-size: 16px;
    }

    .gp-connect-fail-modal__close {
        height: 60px;
        white-space: normal;
        text-align: center;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* -------------------------------------------------------------------------- */

/* Two-factor authentication page (Figma: 1073:10508)                         */

/* -------------------------------------------------------------------------- */

.gp-two-authen .gp-myaccount__section-title {
    font-size: 18px;
}

.gp-two-authen__title-group {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-two-authen__subtitle {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.15;
    color: #ffffff;
}

.gp-two-authen__panel {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-two-authen__method {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #243b53;
    background-color: #1a1b1e;
    box-sizing: border-box;
}

.gp-two-authen__method-head {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.gp-two-authen__method-main {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.gp-two-authen__method-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-two-authen__method-title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: normal;
    color: #ffffff;
}

.gp-two-authen__method-desc {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #9fb3c8;
}

.gp-two-authen__toggle {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    width: 50px;
    height: 50px;
}

.gp-two-authen__toggle-track {
    position: relative;
    display: block;
    width: 46px;
    height: 23px;
    border-radius: 9999px;
    background-color: #627d98;
    transition: background-color 150ms ease;
}

.gp-two-authen__toggle-thumb {
    position: absolute;
    display: block;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    top: 2px;
    left: 2px;
    width: 19px;
    height: 19px;
    transition: transform 150ms ease;
}

.gp-two-authen__toggle--on .gp-two-authen__toggle-track {
    background-color: #1caee7;
}

.gp-two-authen__toggle--on .gp-two-authen__toggle-thumb {
    transform: translateX(23px);
}

/* Figma: 1123:4686 open state — backup codes card (1591:17412) */

.gp-two-authen__method--link {
    cursor: pointer;
    text-decoration-line: none;
    color: inherit;
    transition: border-color 150ms ease, background-color 150ms ease;
}

    .gp-two-authen__method--link:hover {
        border-color: #334e68;
        background-color: #212226;
    }

.gp-two-authen__method-icon--backup {
    width: 33px;
    height: 33px;
}

.gp-two-authen__method-caret {
    width: 35px;
    height: 35px;
    flex: 0 0 auto;
    -o-object-fit: contain;
    object-fit: contain;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .gp-two-authen .gp-myaccount__section-title {
        font-size: 20px;
    }

    .gp-two-authen__method {
        padding: 30px 40px;
    }
}

@media (min-width: 1024px) {
    .gp-two-authen__method {
        padding: 30px 40px;
    }
}

/* Figma: 1123:5063 — backup codes detail page */

.gp-two-authen__backup {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 30px;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #243b53;
    background-color: #1a1b1e;
    box-sizing: border-box;
}

.gp-two-authen__backup-intro {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #9fb3c8;
}

.gp-two-authen__backup-body {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
}

.gp-two-authen__backup-heading {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
}

.gp-two-authen__backup-grid {
    display: grid;
    width: 100%;
    list-style-type: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
    max-width: 440px;
    margin: 0;
    padding: 0;
}

.gp-two-authen__backup-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.gp-two-authen__backup-status {
    display: block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    border: 1px solid #829ab1;
    box-sizing: border-box;
}

.gp-two-authen__backup-status--used {
    border-color: #1caee7;
    background-color: #1caee7;
    background-image: url("../images/icon-cart-check.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 10px;
}

.gp-two-authen__backup-code {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
}

.gp-two-authen__backup-regen {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #1caee7;
    text-decoration: underline;
    text-underline-offset: 2px;
}

    .gp-two-authen__backup-regen:hover {
        text-decoration: none;
    }

@media (min-width: 768px) and (max-width: 1023px) {
    .gp-two-authen__backup {
        padding: 30px 40px;
    }
}

@media (min-width: 1024px) {
    .gp-two-authen__backup {
        padding: 30px 40px;
    }
}

/* Two-factor enable confirm modal (Figma: node 1133:4794) */

.gp-two-authen-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 73;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-two-authen-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-two-authen-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.7);
    cursor: default;
    pointer-events: auto;
}

.gp-two-authen-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 645px;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-two-authen-modal__dialog {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    background-color: #1a1b1e;
    border: 1px solid #243b53;
    border-radius: 10px;
    padding: 20px 40px 50px;
    gap: 50px;
    box-sizing: border-box;
}

.gp-two-authen-modal__body {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-two-authen-modal__header {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
}

.gp-two-authen-modal__close {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    width: 16px;
    height: 16px;
}

    .gp-two-authen-modal__close img {
        height: auto;
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .gp-two-authen-modal__close:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-two-authen-modal__head {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 30px;
}

.gp-two-authen-modal__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
}

    .gp-two-authen-modal__icon img {
        width: 60px;
        height: 60px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-two-authen-modal__text {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.gp-two-authen-modal__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: #ffffff;
    text-align: center;
    word-break: break-word;
}

.gp-two-authen-modal__message {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #ffffff;
    text-align: center;
    word-break: break-word;
}

.gp-two-authen-modal__actions {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.gp-two-authen-modal__cancel,
.gp-two-authen-modal__confirm {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    height: 65px;
    border-radius: 10px;
    padding: 10px 30px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    white-space: nowrap;
}

.gp-two-authen-modal__cancel {
    background-color: transparent;
    border: 1px solid #486581;
    color: #ffffff;
    font-weight: 400;
}

    .gp-two-authen-modal__cancel:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-two-authen-modal__confirm {
    background-color: #1caee7;
    color: #020e1f;
    font-weight: 600;
}

    .gp-two-authen-modal__confirm:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

body.gp-two-authen-modal-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .gp-two-authen-modal__dialog {
        padding: 20px 20px 30px;
        gap: 30px;
    }

    .gp-two-authen-modal__actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .gp-two-authen-modal__cancel,
    .gp-two-authen-modal__confirm {
        width: 100%;
        white-space: normal;
        text-align: center;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Two-factor setup modal (Figma: node 1108:5509) */

.gp-two-authen-setup-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 74;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-two-authen-setup-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-two-authen-setup-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.7);
    cursor: default;
    pointer-events: auto;
}

.gp-two-authen-setup-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 660px;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-two-authen-setup-modal__dialog {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    background-color: #1a1b1e;
    border: 1px solid #243b53;
    border-radius: 10px;
    padding: 10px 24px;
    gap: 10px;
    box-sizing: border-box;
}

.gp-two-authen-setup-modal__body {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-two-authen-setup-modal__header {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
}

.gp-two-authen-setup-modal__close {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    width: 16px;
    height: 16px;
}

    .gp-two-authen-setup-modal__close img {
        height: auto;
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .gp-two-authen-setup-modal__close:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-two-authen-setup-modal__head {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
}

.gp-two-authen-setup-modal__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    color: #ffffff;
    text-align: center;
    word-break: break-word;
}

.gp-two-authen-setup-modal__subtitle {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: normal;
    color: #829ab1;
    text-align: center;
    word-break: break-word;
}

.gp-two-authen-setup-modal__divider {
    width: 100%;
    flex-shrink: 0;
    height: 0;
    border-top: 1px solid #486581;
}

.gp-two-authen-setup-modal__steps {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 2px;
}

@media (min-width: 768px) {
    .gp-two-authen-setup-modal__steps {
        gap: 10px;
    }
}

.gp-two-authen-setup-modal__steps {
    padding: 0 50px;
    box-sizing: border-box;
}

.gp-two-authen-setup-modal__step {
    display: grid;
    width: 100%;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    gap: 30px;
    padding: 10px 0;
}

.gp-two-authen-setup-modal__step-media {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gp-two-authen-setup-modal__step-icon {
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
    width: 105px;
    height: 105px;
}

.gp-two-authen-setup-modal__step:nth-child(5) .gp-two-authen-setup-modal__step-icon {
    width: 90px;
    height: 90px;
}

.gp-two-authen-setup-modal__step-qr {
    flex-shrink: 0;
    -o-object-fit: cover;
    object-fit: cover;
    width: 117px;
    height: 117px;
    border: 5px solid #ffffff;
    border-radius: 5px;
    box-sizing: border-box;
}

.gp-two-authen-setup-modal__step-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.gp-two-authen-setup-modal__step:nth-child(5) .gp-two-authen-setup-modal__step-content {
    gap: 10px;
}

.gp-two-authen-setup-modal__step-title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
}

.gp-two-authen-setup-modal__step-desc {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #ffffff;
    word-break: break-word;
    text-align: left;
}

.gp-two-authen-setup-modal__highlight {
    color: #1caee7;
}

.gp-two-authen-setup-modal__manual-label {
    margin: 15px 0 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #ffffff;
    text-align: left;
}

.gp-two-authen-setup-modal__manual-key {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #1caee7;
    word-break: break-all;
}

.gp-two-authen-setup-modal__step-hint {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #1caee7;
}

.gp-two-authen-setup-modal__form {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
}

.gp-two-authen-setup-modal__code-input {
    flex-shrink: 0;
    border-width: 1px;
    border-style: solid;
    background-color: transparent;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    width: 198px;
    height: 55px;
    border-color: #1caee7;
    border-radius: 10px;
    background-color: #363e4d;
    padding: 10px 30px;
    box-sizing: border-box;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
    text-align: center;
}

    .gp-two-authen-setup-modal__code-input::-moz-placeholder {
        color: #627d98;
    }

    .gp-two-authen-setup-modal__code-input::placeholder {
        color: #627d98;
    }

    .gp-two-authen-setup-modal__code-input:focus-visible {
        outline: 2px solid transparent;
        outline-offset: 2px;
        box-shadow: 0 0 0 2px rgba(28, 174, 231, 0.35);
    }

.gp-two-authen-setup-modal__submit {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    width: 149px;
    height: 55px;
    border-radius: 10px;
    padding: 10px;
    background-color: #1caee7;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
    white-space: nowrap;
}

    .gp-two-authen-setup-modal__submit:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

body.gp-two-authen-setup-modal-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .gp-two-authen-setup-modal__dialog {
        padding: 20px 20px 30px;
    }

    .gp-two-authen-setup-modal__steps {
        padding: 0;
    }

    .gp-two-authen-setup-modal__step {
        grid-template-columns: 0.7fr 1.3fr;
        gap: 16px;
        text-align: center;
    }

    .gp-two-authen-setup-modal__step-media {
        justify-content: center;
    }

    .gp-two-authen-setup-modal__step-content {
        align-items: flex-start;
    }

    .gp-two-authen-setup-modal__form {
        flex-direction: column;
        align-items: stretch;
    }

    .gp-two-authen-setup-modal__code-input,
    .gp-two-authen-setup-modal__submit {
        width: 100%;
    }
}

/* Two-factor complete modal (Figma: node 1119:4507) */

.gp-two-authen-complete-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 75;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-two-authen-complete-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-two-authen-complete-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.7);
    cursor: default;
    pointer-events: auto;
}

.gp-two-authen-complete-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 645px;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-two-authen-complete-modal__dialog {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    background-color: #1a1b1e;
    border: 1px solid #243b53;
    border-radius: 10px;
    padding: 16px 40px;
    gap: 16px;
    box-sizing: border-box;
}

.gp-two-authen-complete-modal__body {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-two-authen-complete-modal__header {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
}

.gp-two-authen-complete-modal__close {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    width: 16px;
    height: 16px;
}

    .gp-two-authen-complete-modal__close img {
        height: 100%;
        width: 100%;
        -o-object-fit: contain;
        object-fit: contain;
    }

    .gp-two-authen-complete-modal__close:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-two-authen-complete-modal__head {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 0 50px;
    box-sizing: border-box;
}

.gp-two-authen-complete-modal__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
}

    .gp-two-authen-complete-modal__icon img {
        width: 60px;
        height: 60px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-two-authen-complete-modal__text {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.gp-two-authen-complete-modal__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
    text-align: center;
    word-break: break-word;
}

.gp-two-authen-complete-modal__message {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    text-align: center;
    word-break: break-word;
}

.gp-two-authen-complete-modal__backup {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.gp-two-authen-complete-modal__backup-heading {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #1caee7;
    text-align: center;
    word-break: break-word;
}

.gp-two-authen-complete-modal__backup-grid {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
}

.gp-two-authen-complete-modal__backup-col {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 10px;
    width: 130px;
}

.gp-two-authen-complete-modal__backup-code {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    text-align: left;
}

.gp-two-authen-complete-modal__footnote {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    text-align: center;
    word-break: break-word;
}

.gp-two-authen-complete-modal__actions {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.gp-two-authen-complete-modal__confirm {
    display: inline-flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    height: 65px;
    border-radius: 10px;
    padding: 10px;
    background-color: #1caee7;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
    white-space: nowrap;
}

    .gp-two-authen-complete-modal__confirm:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-two-authen-complete-modal__backup-link {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #f0f4f8;
    text-decoration: underline;
    text-underline-position: from-font;
    white-space: nowrap;
}

    .gp-two-authen-complete-modal__backup-link:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

body.gp-two-authen-complete-modal-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .gp-two-authen-complete-modal__dialog {
        padding: 20px 20px 30px;
        gap: 24px;
    }

    .gp-two-authen-complete-modal__head {
        padding: 0;
    }

    .gp-two-authen-complete-modal__title {
        font-size: 20px;
    }
}

/* Two-factor disable verify modal (Figma: node 1133:4660) */

.gp-two-authen-disable-verify-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 76;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-two-authen-disable-verify-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-two-authen-disable-verify-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.7);
    cursor: default;
    pointer-events: auto;
}

.gp-two-authen-disable-verify-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 660px;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-two-authen-disable-verify-modal__dialog {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    background-color: #1a1b1e;
    border: 1px solid #243b53;
    border-radius: 10px;
    padding: 20px 40px 50px;
    gap: 20px;
    box-sizing: border-box;
}

.gp-two-authen-disable-verify-modal__body {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-two-authen-disable-verify-modal__header {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
}

.gp-two-authen-disable-verify-modal__close {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    width: 16px;
    height: 16px;
}

    .gp-two-authen-disable-verify-modal__close img {
        height: 100%;
        width: 100%;
        -o-object-fit: contain;
        object-fit: contain;
    }

    .gp-two-authen-disable-verify-modal__close:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-two-authen-disable-verify-modal__head {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.gp-two-authen-disable-verify-modal__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: normal;
    color: #ffffff;
    text-align: center;
    word-break: break-word;
}

.gp-two-authen-disable-verify-modal__divider {
    flex-shrink: 0;
}

.gp-two-authen-disable-verify-modal__form {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.gp-two-authen-disable-verify-modal__prompt {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: #ffffff;
    text-align: center;
    word-break: break-word;
}

.gp-two-authen-disable-verify-modal__otp {
    display: flex;
    width: 100%;
    max-width: 500px;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.gp-two-authen-disable-verify-modal__code {
    width: 100%;
}

.gp-two-authen-disable-verify-modal__submit {
    width: 100%;
    max-width: 500px;
}

body.gp-two-authen-disable-verify-modal-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .gp-two-authen-disable-verify-modal__dialog {
        padding: 20px 20px 30px;
        gap: 20px;
    }

    .gp-two-authen-disable-verify-modal__title {
        font-size: 20px;
    }

    .gp-two-authen-disable-verify-modal__otp {
        gap: 24px;
    }
}

/* -------------------------------------------------------------------------- */

/* Secure overview page (Figma: 907:2478)                                     */

/* -------------------------------------------------------------------------- */

.gp-secure__panel {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 40px;
    padding: 30px;
    box-sizing: border-box;
}

.gp-secure__section {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
    max-width: 700px;
}

.gp-secure__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: normal;
    color: #ffffff;
}

.gp-secure__head {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.gp-secure__link {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #1caee7;
    text-decoration: underline;
    white-space: nowrap;
}

    .gp-secure__link:hover {
        color: #5fc4ee;
    }

.gp-secure__action {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    text-decoration-line: none;
    width: 254px;
    max-width: 100%;
    min-height: 65px;
    padding: 10px 30px;
    border-radius: 10px;
    background-color: #363e4d;
    box-sizing: border-box;
}

.gp-secure__action-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
    white-space: nowrap;
}

.gp-secure__action-icon {
    height: 1.5rem;
    width: 1.5rem;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-secure__box {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    min-height: 65px;
    padding: 10px 30px;
    border-radius: 10px;
    background-color: #363e4d;
    box-sizing: border-box;
}

.gp-secure__contact {
    display: flex;
    min-width: 0px;
    align-items: center;
    gap: 30px;
}

.gp-secure__contact-icon,
.gp-secure__status-icon {
    height: 1.5rem;
    width: 1.5rem;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-secure__phone-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
}

.gp-secure__phone-prefix {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
    white-space: nowrap;
}

.gp-secure__flag {
    width: 24px;
    height: 24px;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-secure__phone-number,
.gp-secure__email {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
    white-space: nowrap;
}

.gp-secure__meta {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #9fb3c8;
}

.gp-secure__verified {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #14ae5c;
}

.gp-secure__warning {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #ff383c;
}

.gp-secure__divider {
    width: 100%;
    height: 1px;
    background-color: #4B89C9;
    opacity: 0.7;
}

@media (max-width: 767px) {
    .gp-secure__panel {
        gap: 30px;
        padding: 20px;
    }

    .gp-secure__action {
        width: 100%;
    }

    .gp-secure__section {
        max-width: none;
    }

    .gp-secure__link {
        font-size: 14px;
    }
}

/* -------------------------------------------------------------------------- */

/* Secure change password page (Figma: 869:13357)                             */

/* -------------------------------------------------------------------------- */

.gp-secure-change .gp-myaccount__section-title {
    font-size: 18px;
}

.gp-secure-change__panel {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 30px;
    padding: 20px;
    box-sizing: border-box;
}

.gp-secure-change__section {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
    max-width: 700px;
}

.gp-secure-change__section--otp {
    gap: 15px;
}

.gp-secure-change__section--password {
    gap: 20px;
}

.gp-secure-change__lead {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
}

.gp-secure-change__methods {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: none;
}

.gp-secure-change__methods-legend {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.gp-secure-change__method {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: 10px;
}

.gp-secure-change__method-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.gp-secure-change__method-indicator {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid #486581;
    border-radius: 9999px;
    box-sizing: border-box;
}

    .gp-secure-change__method-indicator::after {
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        border-radius: 9999px;
        background-color: transparent;
    }

.gp-secure-change__method-input:checked + .gp-secure-change__method-indicator {
    border-color: #1caee7;
}

    .gp-secure-change__method-input:checked + .gp-secure-change__method-indicator::after {
        background-color: #1caee7;
    }

.gp-secure-change__method-input:focus-visible + .gp-secure-change__method-indicator {
    outline: 2px solid #1caee7;
    outline-offset: 2px;
}

.gp-secure-change__method-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
    white-space: nowrap;
}

.gp-secure-change__send-otp {
    display: inline-flex;
    width: -moz-fit-content;
    width: fit-content;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

    .gp-secure-change__send-otp:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-secure-change__send-otp {
    height: 50px;
    padding: 12px 20px;
    border: 1px solid #486581;
    background-color: transparent;
    color: #1caee7;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    cursor: pointer;
}

    .gp-secure-change__send-otp:focus {
        outline: 2px solid transparent;
        outline-offset: 2px;
    }

    .gp-secure-change__send-otp:focus-visible {
        box-shadow: 0 0 0 2px rgba(28, 174, 231, 0.5);
    }

.gp-secure-change__status {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #14ae5c;
}

.gp-secure-change__status--sent {
    font-weight: 600;
}

.gp-secure-change__resend-cooldown {
    display: inline-flex;
    width: -moz-fit-content;
    width: fit-content;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    height: 50px;
    margin: 0;
    padding: 12px 20px;
    border: 1px solid #486581;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: normal;
    color: #627d98;
}

.gp-secure-change__divider {
    width: 100%;
    height: 1px;
    background-color: #4B89C9;
    opacity: 0.7;
}

.gp-secure-change__field {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-secure-change__label {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
}

    .gp-secure-change__label strong {
        font-weight: 600;
    }

.gp-secure-change__input-wrap {
    display: flex;
    height: 65px;
    width: 100%;
    align-items: center;
    border-radius: 10px;
    gap: 30px;
    padding: 10px 30px;
    background-color: #363e4d;
    box-sizing: border-box;
}

.gp-secure-change__input-wrap--password {
    justify-content: space-between;
}

.gp-secure-change__input-main {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    align-items: center;
    gap: 30px;
}

.gp-secure-change__input-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-secure-change__input {
    min-width: 0px;
    flex: 1 1 0%;
    border-width: 0px;
    background-color: transparent;
    outline: 2px solid transparent;
    outline-offset: 2px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
}

    .gp-secure-change__input::-moz-placeholder {
        opacity: 0.8;
        color: #627d98;
    }

    .gp-secure-change__input::placeholder {
        opacity: 0.8;
        color: #627d98;
    }

    .gp-secure-change__input:-webkit-autofill,
    .gp-secure-change__input:-webkit-autofill:hover,
    .gp-secure-change__input:-webkit-autofill:focus {
        box-shadow: 0 0 0 1px transparent inset, 0 0 0 1000px #363e4d inset;
        -webkit-text-fill-color: #ffffff;
        caret-color: #ffffff;
    }

.gp-secure-change__password-toggle {
    display: flex;
    height: 1.5rem;
    width: 1.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    cursor: pointer;
}

    .gp-secure-change__password-toggle img {
        height: 100%;
        width: 100%;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-secure-change__error {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
}

.gp-secure-change__error--otp {
    color: #ec221f;
}

.gp-secure-change__error--password {
    padding-top: 5px;
    text-align: right;
    color: #ff383c;
}

.gp-secure-change__rules {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gp-secure-change__rule {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gp-secure-change__rule-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-secure-change__rule-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 25px;
    color: #9fb3c8;
}

@keyframes gp-secure-change-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.gp-secure-change__submit {
    display: flex;
    height: 65px;
    width: 100%;
    max-width: 700px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 5px;
    border-width: 0px;
    background-color: #1caee7;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
    cursor: pointer;
}

.gp-secure-change__submit-icon {
    display: none;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

.gp-secure-change__submit-text {
    flex-shrink: 0;
}

.gp-secure-change__submit:hover {
    filter: brightness(1.08);
}

.gp-secure-change__submit:focus-visible {
    outline: 2px solid #1caee7;
    outline-offset: 2px;
}

.gp-secure-change__submit--loading {
    pointer-events: none;
    border-width: 1px;
    border-style: solid;
    background-color: #2c2c2c;
    border-color: #444444;
    color: #5a5a5a;
    cursor: default;
}

    .gp-secure-change__submit--loading:hover {
        filter: none;
    }

    .gp-secure-change__submit--loading .gp-secure-change__submit-icon {
        display: block;
        opacity: 0.5;
        animation: gp-secure-change-spin 1s linear infinite;
    }

.gp-secure-change__submit--success {
    pointer-events: none;
    border-width: 1px;
    border-style: solid;
    background-color: rgba(0, 153, 81, 0.33);
    border-color: #009951;
    color: #14ae5c;
    cursor: default;
}

    .gp-secure-change__submit--success:hover {
        filter: none;
    }

    .gp-secure-change__submit--success .gp-secure-change__submit-icon {
        display: block;
        width: 24px;
        height: 24px;
        opacity: 1;
        animation: none;
    }

.gp-secure-change__submit--fail {
    pointer-events: none;
    border-width: 1px;
    border-style: solid;
    background-color: rgba(232, 77, 77, 0.2);
    border-color: #e84d4d;
    color: #ff7b7b;
    cursor: default;
}

    .gp-secure-change__submit--fail:hover {
        filter: none;
    }

    .gp-secure-change__submit--fail .gp-secure-change__submit-icon {
        display: block;
        width: 24px;
        height: 24px;
        opacity: 1;
        animation: none;
    }

@media (max-width: 767px) {
    .gp-secure-change__panel {
        gap: 20px;
        padding: 12px;
    }

    .gp-secure-change__section {
        max-width: none;
    }

    .gp-secure-change__method-text {
        white-space: normal;
    }

    .gp-secure-change__input-wrap {
        gap: 16px;
        padding: 10px 20px;
    }

    .gp-secure-change__input-main {
        gap: 16px;
    }

    .gp-secure-change__submit {
        max-width: none;
    }
}

/* -------------------------------------------------------------------------- */

/* Delete account page (Figma desktop: 965:2632, mobile: 1662:5523)           */

/* -------------------------------------------------------------------------- */

.gp-delete-account .gp-myaccount__section-title {
    font-size: 18px;
}

.gp-delete-account__panel {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-delete-account__caution {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border: 1px solid #900b09;
    border-radius: 10px;
    background: linear-gradient( 99.16deg, rgba(255, 31, 42, 0.6) 3.18%, rgba(134, 0, 2, 0.6) 96.21% );
    box-sizing: border-box;
}

.gp-delete-account__caution-body {
    display: flex;
    min-width: 0px;
    flex-direction: column;
    gap: 10px;
}

.gp-delete-account__caution-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gp-delete-account__caution-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-delete-account__caution-title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: normal;
    color: #ffffff;
}

.gp-delete-account__caution-list {
    margin: 0;
    padding-left: 24px;
    list-style: disc;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 25px;
    color: #ffffff;
}

    .gp-delete-account__caution-list li {
        margin-bottom: 0;
    }

.gp-delete-account__caution-link {
    font-weight: 700;
    color: #facc15;
    text-decoration: underline;
}

    .gp-delete-account__caution-link:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-delete-account__caution-em {
    font-weight: 700;
    color: #ffffff;
}

.gp-delete-account__caution-deco {
    display: none;
    flex: 0 0 auto;
    width: 258px;
    height: 258px;
    -o-object-fit: contain;
    object-fit: contain;
    pointer-events: none;
}

.gp-delete-account__account {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    border: 1px solid #243b53;
    border-radius: 10px;
    background-color: #1a1b1e;
    box-sizing: border-box;
}

.gp-delete-account__account-info {
    display: flex;
    min-width: 0px;
    flex-direction: column;
    gap: 10px;
}

.gp-delete-account__account-game {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    color: #829ab1;
}

.gp-delete-account__account-id {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    color: #ffffff;
}

.gp-delete-account__account-email {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    color: #72afff;
}

.gp-delete-account__support-cta {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration-line: none;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

    .gp-delete-account__support-cta:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-delete-account__support-cta {
    min-height: 60px;
    padding: 10px 20px;
    border: 1px solid #ec221f;
    border-radius: 10px;
    background-color: #c00f0c;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #ffffff;
    box-sizing: border-box;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .gp-delete-account .gp-myaccount__section-title {
        font-size: 20px;
    }

    .gp-delete-account__caution {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 30px;
    }

    .gp-delete-account__caution-deco {
        display: block;
    }

    .gp-delete-account__caution-title {
        font-size: 18px;
    }

    .gp-delete-account__caution-list {
        font-size: 16px;
        line-height: 30px;
    }

    .gp-delete-account__account {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 30px;
        gap: 20px;
    }

    .gp-delete-account__support-cta {
        width: auto;
        min-height: 70px;
        padding: 10px 30px;
        font-size: 18px;
        flex-shrink: 0;
    }
}

@media (min-width: 1024px) {
    .gp-delete-account__caution {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 30px;
    }

    .gp-delete-account__caution-deco {
        display: block;
    }

    .gp-delete-account__caution-title {
        font-size: 18px;
    }

    .gp-delete-account__caution-list {
        font-size: 16px;
        line-height: 30px;
    }

    .gp-delete-account__account {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 30px;
        gap: 20px;
    }

    .gp-delete-account__support-cta {
        width: auto;
        min-height: 70px;
        padding: 10px 30px;
        font-size: 18px;
        flex-shrink: 0;
    }
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-myaccount {
        flex-direction: row;
        align-items: flex-start;
        padding: 0px;
        gap: 0;
        min-height: 1100px;
    }

    .gp-myaccount__sidebar {
        display: flex;
        flex-shrink: 0;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 60px;
        padding-bottom: 60px;
        padding-left: 30px;
        padding-right: 30px;
        width: 320px;
        min-height: 1100px;
        border-right: 0.5px solid transparent;
        -o-border-image: linear-gradient(to bottom, #ff8bbf, #f488ff, #7ef359, #ffde2d, #1bb1e7, #0f1013) 1;
        border-image: linear-gradient(to bottom, #ff8bbf, #f488ff, #7ef359, #ffde2d, #1bb1e7, #0f1013) 1;
    }

    .gp-myaccount__sidebar--personal .gp-myaccount__sidebar-nav {
        gap: 15px;
    }

    .gp-myaccount__sidebar-nav {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: 15px;
    }

    .gp-myaccount__menu-item {
        display: flex;
        height: 60px;
        width: 100%;
        align-items: center;
        border-radius: 8px;
        text-decoration-line: none;
        padding: 0 16px;
        gap: 12px;
    }

        .gp-myaccount__menu-item:not(.gp-myaccount__menu-item--active):hover {
            border: 0.5px solid #3db9eb;
            background-color: #5fc4ee;
        }

    .gp-myaccount__menu-item--active {
        border: 0.5px solid #3db9eb;
        background-image: linear-gradient(113.306deg, rgb(82, 206, 255) 5.7048%, rgb(28, 174, 231) 54.368%);
    }

    .gp-myaccount__menu-icon {
        height: 1.5rem;
        width: 1.5rem;
        flex: 0 0 auto;
    }

    .gp-myaccount__menu-text {
        font-family: "Google Sans", sans-serif;
        font-size: 16px;
        line-height: 1.4;
        color: #829ab1;
        white-space: nowrap;
    }

    .gp-myaccount__menu-item--active .gp-myaccount__menu-text {
        color: #020e1f;
        font-weight: 500;
    }

    .gp-myaccount__menu-item:not(.gp-myaccount__menu-item--active):hover .gp-myaccount__menu-text {
        color: #020e1f;
        font-weight: 500;
    }

    .gp-myaccount__sidebar--personal
    .gp-myaccount__menu-item:not(.gp-myaccount__menu-item--active):is(:hover, :active) {
        border: 0.5px solid #3db9eb;
        background-color: transparent;
        background-image: linear-gradient(113.306deg, rgb(82, 206, 255) 5.7048%, rgb(28, 174, 231) 54.368%);
    }

        .gp-myaccount__sidebar--personal
        .gp-myaccount__menu-item:not(.gp-myaccount__menu-item--active):is(:hover, :active)
        .gp-myaccount__menu-text {
            color: #020e1f;
            font-weight: 500;
        }

    .gp-myaccount__vip {
        position: relative;
        display: flex;
        height: 101px;
        width: 270px;
        align-items: center;
        overflow: hidden;
        border-radius: 10px;
        text-decoration-line: none;
        padding: 0 20px;
        border: none;
        background-image: url('../images/btn-side-vip.webp');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        box-shadow: none;
    }

        .gp-myaccount__vip::after {
            content: none;
        }

    .gp-myaccount__vip-text {
        position: relative;
        z-index: 1;
        font-family: "Google Sans", sans-serif;
        font-size: 18px;
        font-weight: 600;
        color: #fffbec;
    }

    .gp-right-menu__vip--sidebar {
        width: 100%;
        margin: 0;
    }

    .gp-right-menu__vip.gp-right-menu__vip--sidebar .gp-right-menu__vip-body {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .gp-right-menu__vip.gp-right-menu__vip--sidebar .gp-right-menu__vip-crown {
        width: 11rem;
    }

    .gp-myaccount__sidebar-footer {
        margin-top: 60px;
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: 30px;
        padding-top: 30px;
        border-top: 1px solid #102a43;
    }

    .gp-myaccount__sidebar--personal .gp-myaccount__sidebar-footer {
        margin-top: 60px;
        gap: 15px;
        padding-top: 0;
        border-top: none;
    }

    .gp-myaccount__sidebar-divider {
        width: 100%;
        height: 1px;
        background-color: #102a43;
        opacity: 0.7;
    }

    .gp-myaccount__menu-icon--delete {
        width: 30px;
        height: 30px;
    }

    .gp-myaccount__content {
        flex: 1 1 0%;
        gap: 20px;
        padding: 60px 80px;
    }

    .gp-myaccount__content--personal {
        gap: 21px;
        padding: 30px 80px;
    }

    .gp-myaccount__field-row {
        grid-template-columns: 1fr 1fr;
    }

    .gp-myaccount__field-row--3col {
        grid-template-columns: 234px 1fr 221px;
    }

    .gp-myaccount__section-edit,
    .gp-myaccount__field-edit {
        font-size: 16px;
    }

    .gp-myaccount__card-grid {
        grid-template-columns: 1fr 1fr;
    }

    .gp-history {
        gap: 30px;
    }

    .gp-history__game {
        height: 185px;
        padding: 30px;
        gap: 20px;
    }

    .gp-history__game-thumb {
        width: 104px;
        height: 104px;
    }

    .gp-history__filter {
        display: grid;
        grid-template-columns: 200px 1fr 1fr 200px;
        align-items: end;
        gap: 10px;
    }

    .gp-history__filter-item,
    .gp-history__filter-item:nth-child(3),
    .gp-history__filter-item--action {
        width: auto;
    }

    .gp-history__filter-item--action {
        justify-content: flex-end;
    }

    .gp-history .gp-history__date-range-panel {
        left: auto;
        right: 0;
    }

    .gp-history__list {
        padding: 20px;
        gap: 20px;
    }

    .gp-history__tabs-track {
        width: 100%;
    }

    .gp-history__tab {
        flex: 1 1 0;
        min-width: 0;
        padding: 20px;
        font-size: 18px;
    }

        .gp-history__tab:is(:hover, .gp-history__tab--active) {
            font-size: 20px;
        }

    .gp-history__card {
        padding: 30px 50px;
    }

    .gp-history__card-head {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .gp-history__card-head-right {
        order: 9999;
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }

    .gp-history__product-thumb-wrap {
        width: 100px;
        height: 100px;
    }

    .gp-history__product-row {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.75fr) minmax(0, 0.5fr);
        gap: 10px;
        align-items: start;
    }

    .gp-history__card--points .gp-history__product-row {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.65fr) minmax(0, 0.85fr);
    }

    .gp-history__card--points .gp-history__product-col:last-child .gp-history__product-value--points-spend {
        justify-content: flex-end;
    }

    .gp-history__product-thumb-main-wrap {
        margin-right: 0;
    }

    .gp-history__entry {
        gap: 10px;
    }

    .gp-history__entry--divided {
        margin-top: 4px;
    }

    .gp-history__product-col--empty {
        display: flex;
    }

    .gp-history__group--gift .gp-history__product-row {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1.45fr) minmax(0, 0.55fr) minmax(0, 0.75fr) minmax(0, 0.5fr);
    }

    .gp-history__card--itemcode .gp-history__product-row {
        grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 0.75fr) minmax(0, 0.5fr);
    }
}

@media (max-width: 1023px) {
    .gp-history__product-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.75fr);
        grid-template-rows: 70px auto;
        -moz-column-gap: 15px;
        column-gap: 15px;
        row-gap: 5px;
        align-items: start;
    }

    .gp-history__product-thumb-main-wrap {
        grid-column: 1;
        grid-row: 1 / span 2;
        display: grid;
        grid-template-rows: 70px auto;
        gap: 5px;
        min-width: 0;
    }

    .gp-history__product-thumb-wrap {
        width: 70px;
        height: 70px;
    }

    .gp-history__product-badge {
        padding: 3px 5px;
        font-size: 10px;
    }

    .gp-history__product-main {
        gap: 3px;
        min-width: 0;
        padding-right: 5px;
    }

    .gp-history__product-col {
        gap: 3px;
        min-width: 0;
    }

    .gp-history__product-row > .gp-history__product-col:nth-of-type(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .gp-history__product-row > .gp-history__product-col:nth-of-type(3) {
        grid-column: 3;
        grid-row: 1;
    }

    .gp-history__product-row > .gp-history__product-col:nth-of-type(4) {
        grid-column: 2;
        grid-row: 2;
    }

    .gp-history__product-row > .gp-history__product-col:nth-of-type(5) {
        grid-column: 3;
        grid-row: 2;
    }

    .gp-history__group--gift .gp-history__product-row > .gp-history__product-col--gift {
        grid-column: 2 / span 2;
        grid-row: 1;
    }

    .gp-history__group--gift .gp-history__product-row > .gp-history__product-col--empty {
        display: none;
    }

    .gp-history__card--itemcode .gp-history__product-row > .gp-history__product-col--code {
        grid-column: 2 / span 2;
        grid-row: 1;
    }

    .gp-history__card--itemcode .gp-history__product-row > .gp-history__product-col:nth-of-type(3) {
        grid-column: 2;
        grid-row: 2;
    }

    .gp-history__card--itemcode .gp-history__product-row > .gp-history__product-col:nth-of-type(4) {
        grid-column: 3;
        grid-row: 2;
    }

    .gp-history__card--itemcode-empty .gp-history__product-col--empty {
        display: none;
    }

    .gp-history__product-label {
        font-size: 12px;
        line-height: normal;
    }

    .gp-history__product-name,
    .gp-history__product-value {
        font-size: 14px;
        line-height: normal;
    }

    .gp-history__product-name {
        font-weight: 400;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .gp-history__card-meta-row {
        gap: 12px;
    }

    .gp-history__group-title {
        font-size: 15px;
    }

    .gp-history__product-note {
        max-width: none;
    }

    .gp-head-member__breadcrumb-link,
    .gp-head-member__breadcrumb-current {
        font-size: 16px;
    }

    .gp-myaccount__inline-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .gp-myaccount__btn-cancel,
    .gp-myaccount__btn-save {
        min-width: 0;
    }
}

.gp-create {
    /* Center content within remaining space between header and footer.
     Uses flex auto-margins so when content is taller than viewport it falls back to normal page scroll. */
    display: flex;
    width: 100%;
    flex: 1 1 0%;
    flex-direction: column;
    min-height: 0;
}

/* Shop page main and hero banner (Figma: shop-before-login-pc / Mobile-Shop-before-login) */

.gp-shop {
    display: flex;
    width: 100%;
    flex: 1 1 0%;
    flex-direction: column;
    min-height: 0;
}

/* Activity gacha page – scoped bg (index-genplay-activity-gachabox.html only) */

.gp-shop--activity-gacha {
    position: relative;
    z-index: 0;
}

    .gp-shop--activity-gacha .gp-shop__inner {
        position: relative;
        z-index: 1;
    }

    .gp-shop--activity-gacha::before {
        content: "";
        pointer-events: none;
        position: absolute;
        inset: 0px;
        z-index: -2;
        background-image: url("../images/activity-bg-mobile.webp");
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
    }

    .gp-shop--activity-gacha::after {
        content: "";
        pointer-events: none;
        position: absolute;
        inset: 0px;
        z-index: -1;
        background: rgba(19, 23, 35, 0.7);
    }

@media (min-width: 768px) {
    .gp-shop--activity-gacha::before {
        background-image: url("../images/activity-bg.webp");
    }
}

.gp-shop-banner {
    margin-top: 1rem;
    margin-bottom: 1rem;
    width: 100%;
    overflow: hidden;
    padding: 10px;
}

.gp-shop-banner__track {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: calc(min(300px, 100vw - 20px) * 9 / 16);
    touch-action: pan-y;
    cursor: grab;
    gap: 10px;
}

.gp-shop-banner--dragging .gp-shop-banner__track {
    cursor: grabbing;
    transition: transform 0s;
}

.gp-shop-banner__slide {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.95);
    transform-origin: center;
    border-radius: 12px;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s ease;
}

.gp-shop-banner--dragging .gp-shop-banner__slide {
    transition: none;
}

.gp-shop-banner__slide:not(.gp-shop-banner__slide--active):not(.gp-shop-banner__slide--side) {
    position: absolute;
    width: 300px;
    max-width: calc(100vw - 20px);
    aspect-ratio: 16 / 9;
}

.gp-shop-banner__slide--active,
.gp-shop-banner__slide--side {
    visibility: visible;
    pointer-events: auto;
}

.gp-shop-banner__slide--prev {
    order: 1;
}

.gp-shop-banner__slide--active {
    order: 2;
    opacity: 1;
    transform: scale(1);
    width: 300px;
    max-width: calc(100vw - 20px);
    aspect-ratio: 16 / 9;
    border: 1px solid #243b53;
    box-shadow: 0 20px 50px -20px rgba(0, 90, 204, 0.79);
}

.gp-shop-banner__slide--side {
    opacity: 1;
    transform: scale(0.95);
    width: 300px;
    max-width: calc(100vw - 20px);
    aspect-ratio: 16 / 9;
}

.gp-shop-banner__slide--next {
    order: 3;
}

.gp-shop-banner__slide--side::after {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0px;
    border-radius: inherit;
    box-shadow: inset 0 0 11.1px 67px rgba(0, 0, 0, 0.36);
}

.gp-shop-banner__img {
    display: block;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.gp-shop-banner__dots {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 20px;
}

.gp-shop-banner__dot {
    border-radius: 9999px;
    width: 6px;
    height: 6px;
    border: none;
    background-color: #486581;
    cursor: pointer;
}

.gp-shop-banner__dot--active {
    background-color: #21c4ff;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-shop-banner {
        padding: 0;
    }

    .gp-shop-banner__track {
        gap: 22px;
        min-height: calc(540px * 9 / 16);
    }

    .gp-shop-banner__slide {
        border-radius: 15px;
    }

        .gp-shop-banner__slide:not(.gp-shop-banner__slide--active):not(.gp-shop-banner__slide--side) {
            width: 540px;
            max-width: none;
        }

    .gp-shop-banner__slide--active {
        width: 540px;
        max-width: none;
        border-width: 1px;
        box-shadow: 0 50px 50px -52px rgba(0, 90, 204, 0.79);
    }

    .gp-shop-banner__slide--side {
        width: 540px;
        max-width: none;
        transform: scale(0.95);
    }

        .gp-shop-banner__slide--side::after {
            box-shadow: inset 0 0 23.28px 369.5px rgba(0, 0, 0, 0.5);
        }

    .gp-shop-banner__dots {
        gap: 10px;
        margin-top: 40px;
    }

    .gp-shop-banner__dot {
        width: 10px;
        height: 10px;
    }
}

/* Shop content width + game select row (Figma: shop-before-login-pc / Mb-Game-Select-Before-Login) */

.gp-shop__inner {
    width: 100%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    box-sizing: border-box;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-shop__inner {
        margin-left: auto;
        margin-right: auto;
        max-width: 1320px;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .gp-shop--cart .gp-shop__inner {
        max-width: 1320px;
    }
}

/* -------------------------------------------------------------------------- */

/* Shared item page (index-genplay-item-shared)                               */

/* -------------------------------------------------------------------------- */

.gp-shop--item-shared {
    padding-bottom: 40px;
}

    .gp-shop--item-shared .gp-shop__inner {
        width: 100%;
        max-width: 1320px;
        margin: 0 auto;
        padding-top: 20px;
    }

.gp-item-shared {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gp-item-shared__back {
    display: inline-flex;
    align-items: center;
    color: #9fb3c8;
    text-decoration: none;
}

    .gp-item-shared__back:hover {
        color: #bcccdc;
    }

.gp-item-shared__back-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.gp-item-shared__back-text {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
}

.gp-item-shared__frame {
    width: 100%;
    border-radius: 15px;
    padding: 10px;
    background: radial-gradient(circle at 0 0, rgba(217, 217, 217, 0.2) 0%, rgba(217, 217, 217, 0.05) 70%);
}

.gp-item-shared__head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    border: 1px solid #073269;
    border-radius: 10px 10px 0 0;
    padding: 10px 15px;
    background-image: linear-gradient(92deg, #0b58b9 5%, #122767 95%);
}

.gp-item-shared__game-avatar {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    -o-object-fit: cover;
    object-fit: cover;
    flex-shrink: 0;
}

.gp-item-shared__head-copy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.gp-item-shared__game-name,
.gp-item-shared__game-id {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: 1.2;
    color: #fff;
}

.gp-item-shared__game-id {
    font-weight: 500;
}

.gp-item-shared__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border: 1px solid #073269;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    padding: 20px;
    background: #242424;
}

.gp-item-shared__product {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gp-item-shared__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.gp-item-shared__thumb-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gp-item-shared__countdown {
    display: flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    width: 100%;
}

.gp-item-shared__countdown-icon,
.gp-item-shared__countdown-text {
    height: 27px;
    border-radius: 5px;
    background: #1b1b1b;
}

.gp-item-shared__countdown-icon {
    width: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .gp-item-shared__countdown-icon img {
        width: 14px;
        height: 14px;
        display: block;
    }

.gp-item-shared__countdown-text {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    color: #facc15;
    font-family: "Google Sans", sans-serif;
    font-size: 12px;
}

.gp-item-shared__thumb-wrap {
    width: 100%;
    max-width: 215px;
    min-height: 215px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.gp-item-shared__thumb {
    width: 100%;
    height: 100%;
    min-height: 215px;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
}

.gp-item-shared__flash {
    position: absolute;
    top: 8px;
    left: 0;
    padding: 4px 10px;
    border-radius: 0 0 5px 0;
    background: #facc15;
    color: #061221;
    font-family: "Google Sans", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
}

.gp-item-shared__thumb-actions {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: flex;
    gap: 10px;
}

.gp-item-shared__icon-btn {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: rgba(114, 114, 114, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

    .gp-item-shared__icon-btn img {
        width: 18px;
        height: 18px;
        display: block;
    }

.gp-item-shared__meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.gp-item-shared__name {
    margin: 0;
    color: #f0f4f8;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.35;
    text-align: center;
}

.gp-item-shared__limit {
    width: -moz-fit-content;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 35px;
    border-radius: 10px;
    border: 1px solid #685233;
    background: rgba(231, 167, 28, 0.06);
    padding: 7px 10px;
    color: #fff;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
}

.gp-item-shared__limit-num {
    color: #ffde2d;
    border-left: 1px solid #5f4e37;
    padding-left: 8px;
    font-weight: 500;
}

.gp-item-shared__limit-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.gp-item-shared__stock {
    width: 100%;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
}

.gp-item-shared__stock-label,
.gp-item-shared__stock-unit {
    color: #ffffff;
}

.gp-item-shared__stock-count {
    color: #f24c10;
}

.gp-item-shared__prices {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.gp-item-shared__price-now,
.gp-item-shared__price-was {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    line-height: 1.1;
}

.gp-item-shared__price-now {
    color: #facc15;
    font-size: 26px;
    font-weight: 700;
}

.gp-item-shared__price-was {
    color: #829ab1;
    font-size: 14px;
    font-weight: 400;
    text-decoration: line-through;
}

.gp-item-shared__disc {
    height: 32px;
    border-radius: 6px;
    border: 1px solid #ffde2d;
    background: #facc15;
    color: #061221;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}

.gp-item-shared__share-link {
    width: -moz-fit-content;
    width: fit-content;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: flex-end;
    gap: 5px;
    padding: 0;
    cursor: pointer;
    margin-top: 5px;
    text-decoration: none;
    outline: none;
}

.gp-item-shared__share-text {
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: #829ab1;
    transition: color 0.15s ease-in-out;
}

.gp-item-shared__share-link:is(:hover, :active, :focus-visible) .gp-item-shared__share-text {
    color: #5fc4ee;
}

.gp-item-shared__share-icon-wrap {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
}

.gp-item-shared__share-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    -o-object-fit: contain;
    object-fit: contain;
    transition: opacity 0.15s ease-in-out;
    display: block;
}

.gp-item-shared__share-icon--default {
    opacity: 1;
}

.gp-item-shared__share-icon--hover {
    opacity: 0;
}

.gp-item-shared__share-link:is(:hover, :active, :focus-visible) .gp-item-shared__share-icon--default {
    opacity: 0;
}

.gp-item-shared__share-link:is(:hover, :active, :focus-visible) .gp-item-shared__share-icon--hover {
    opacity: 1;
}

.gp-item-shared__received {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gp-item-shared__received-head {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.gp-item-shared__received-title {
    margin: 0;
    color: #bcccdc;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
}

.gp-item-shared__received-box {
    width: 100%;
    border: 1px solid #243b53;
    border-radius: 10px;
    background: #27292f;
    max-height: 230px;
    overflow-y: auto;
    padding: 12px 14px;
    scrollbar-width: thin;
    scrollbar-color: #bcccdc #3d4350;
}

    .gp-item-shared__received-box::-webkit-scrollbar {
        width: 8px;
    }

    .gp-item-shared__received-box::-webkit-scrollbar-track {
        background: #3d4350;
        border-radius: 2px;
    }

    .gp-item-shared__received-box::-webkit-scrollbar-thumb {
        background: #bcccdc;
        border-radius: 2px;
    }

.gp-item-shared__received-list {
    margin: 0;
    padding: 0 0 0 18px;
    list-style: disc;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gp-item-shared__received-row {
    color: #9fb3c8;
    font-family: "Google Sans", sans-serif;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.gp-item-shared__summary {
    width: 100%;
    border-radius: 10px;
    background: #1b1b1b;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.gp-item-shared__summary-title {
    margin: 0;
    color: #fff;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
}

.gp-item-shared__qty {
    min-height: 60px;
    border-radius: 10px;
    border: 1px solid #334e68;
    background: #333;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.gp-item-shared__qty-label {
    color: #f0f4f8;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
}

.gp-item-shared__qty-controls {
    display: inline-flex;
    align-items: center;
    gap: 15px;
}

.gp-item-shared__qty-btn {
    border: 0;
    background: transparent;
    padding: 0;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.gp-item-shared__qty-value {
    color: #fff;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
}

.gp-item-shared__total {
    border-top: 1px solid #334e68;
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.gp-item-shared__total-label {
    color: #fff;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
}

.gp-item-shared__total-value {
    color: #facc15;
    font-family: "Google Sans", sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
}

.gp-item-shared__actions {
    display: flex;
    gap: 10px;
}

.gp-item-shared__cta {
    flex: 1;
    min-height: 50px;
    border-radius: 10px;
    border: 1px solid #3db9eb;
    background: #1caee7;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    cursor: pointer;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

    .gp-item-shared__cta:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

    .gp-item-shared__cta:active {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

    .gp-item-shared__cta img {
        width: 18px;
        height: 18px;
        display: block;
    }

.gp-item-shared__gift {
    width: 50px;
    min-width: 50px;
    min-height: 50px;
    border-radius: 10px;
    border: 1px solid #0b4da0;
    background: #093f85;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

    .gp-item-shared__gift:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

    .gp-item-shared__gift:active {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

    .gp-item-shared__gift img {
        width: 20px;
        height: 20px;
        display: block;
    }

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-shop--item-shared {
        padding-bottom: 50px;
    }

        .gp-shop--item-shared .gp-shop__inner {
            padding-top: 20px;
        }

    .gp-item-shared {
        gap: 10px;
    }

    .gp-item-shared__back-icon {
        width: 24px;
        height: 24px;
    }

    .gp-item-shared__back-text {
        font-size: 16px;
    }

    .gp-item-shared__body {
        flex-direction: row;
        align-items: stretch;
        gap: 30px;
        padding: 30px;
    }

    .gp-item-shared__product {
        flex: 1;
        min-width: 0;
        gap: 30px;
    }

    .gp-item-shared__hero {
        flex-direction: row;
        align-items: stretch;
        gap: 20px;
    }

    .gp-item-shared__meta {
        flex: 1;
        justify-content: space-between;
        align-items: stretch;
    }

    .gp-item-shared__limit-block {
        align-items: flex-start;
    }

    .gp-item-shared__name {
        text-align: left;
    }

    .gp-item-shared__summary {
        width: 430px;
        flex-shrink: 0;
        padding: 30px;
        gap: 30px;
    }

    .gp-item-shared__qty {
        min-height: 60px;
    }

    .gp-item-shared__actions {
        min-height: 60px;
    }

    .gp-item-shared__cta,
    .gp-item-shared__gift {
        min-height: 60px;
    }

    .gp-item-shared__gift {
        width: 60px;
        min-width: 60px;
    }
}

/* -------------------------------------------------------------------------- */

/* Cart page (index-genplay-shop-cart) — gp-cart-*                            */

/* -------------------------------------------------------------------------- */

/* Responsive: .gp-cart-summary--sidebar (and hiding .gp-cart-footer / .gp-cart-server--inline)
   only at cart-sidebar-desktop (min-width: 1280px, landscape). Below that, footer + inline server
   are the mobile/tablet summary. Markup duplicates—sync in JS. */

body:has(.gp-cart-footer) {
    --gp-shop-footer-h: 300px;
}

.gp-shop--cart {
    padding-bottom: calc(300px + env(safe-area-inset-bottom, 0px));
}

.gp-shop--cart-empty {
    padding-bottom: 0;
}

.gp-shop-empty {
    width: 100%;
    padding: 20px 0 40px;
}

.gp-shop-empty__frame {
    width: 100%;
    padding: 10px;
    border-radius: 15px;
    background: radial-gradient(circle at 0 0, rgba(217, 217, 217, 0.2) 0%, rgba(217, 217, 217, 0.05) 70%);
}

.gp-shop-empty__panel {
    width: 100%;
    min-height: 360px;
    padding: 80px 20px;
    border: 1px solid #243b53;
    border-radius: 10px;
    background: #1a1b1e;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

    .gp-shop-empty__panel.empty-panel__type2 {
        min-height: 200px;
        border-width: 0px;
        background-color: transparent;
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

@media (min-width: 768px) {
    .gp-shop-empty__panel.empty-panel__type2 {
        padding: 0px;
    }
}

.gp-shop-empty__state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.gp-shop-empty__text {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: normal;
    color: #486581;
    text-align: center;
}

.gp-shop-empty__icon {
    width: 100px;
    height: 100px;
    display: block;
}

.gp-shop-empty__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 183px;
    padding: 15px 40px;
    border: 1px solid #093f85;
    border-radius: 999px;
    box-shadow: 0 4px 32.3px rgba(0, 90, 204, 0.5);
    background-image: linear-gradient(107.33deg, #52ceff 5.7%, #1caee7 54.37%);
    font-family: "Google Sans", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: normal;
    color: #020e1f;
    text-align: center;
    text-decoration: none;
    transition: filter 0.2s ease;
}

    .gp-shop-empty__cta:hover {
        filter: brightness(1.06);
    }

    .gp-shop-empty__cta:active {
        filter: brightness(0.98);
    }

@media (min-width: 1280px) and (orientation: landscape) {
    body:has(.gp-cart-footer) {
        --gp-shop-footer-h: 0px;
    }

    .gp-shop--cart {
        padding-bottom: 0;
    }
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-shop--cart-empty .gp-shop__inner {
        max-width: 1320px;
    }

    .gp-shop-empty {
        padding: 20px 0 50px;
    }

    .gp-shop-empty__panel {
        min-height: 440px;
        padding: 100px 20px;
    }
}

/* Shop All Noti — shared banner + theme modifiers */

.gp-shop-noti {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    overflow: hidden;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    margin: 10px 0;
    padding: 10px 15px;
    border-radius: 10px;
    border: 1px solid transparent;
}

    .gp-shop-noti::before {
        content: "";
        pointer-events: none;
        position: absolute;
        inset: 0px;
        border-radius: inherit;
    }

    .gp-shop-noti::after {
        content: "";
        pointer-events: none;
        position: absolute;
        inset: 0px;
        border-radius: inherit;
    }

.gp-shop-noti--hidden {
    display: none;
}

.gp-shop-noti--unpaid {
    border-color: #febc2f;
    box-shadow: 0 10px 13.6px rgba(255, 193, 23, 0.18);
}

    .gp-shop-noti--unpaid::before {
        background: rgba(254, 188, 47, 0.3);
    }

    .gp-shop-noti--unpaid::after {
        box-shadow: inset 0 0 22.3px rgba(255, 192, 76, 0.58);
    }

.gp-shop-noti--platinum {
    border-color: #007c13;
    box-shadow: 0 10px 13.6px rgba(85, 255, 23, 0.18);
}

    .gp-shop-noti--platinum::before {
        background: rgba(39, 200, 64, 0.3);
    }

    .gp-shop-noti--platinum::after {
        box-shadow: inset 0 0 22.3px rgba(118, 255, 76, 0.58);
    }

.gp-shop-noti--red-credit {
    border-color: #fe5f2f;
    box-shadow: 0 10px 13.6px rgba(255, 112, 23, 0.18);
}

    .gp-shop-noti--red-credit::before {
        background: rgba(255, 102, 75, 0.3);
    }

    .gp-shop-noti--red-credit::after {
        box-shadow: inset 0 0 22.3px rgba(255, 112, 76, 0.58);
    }

.gp-shop-noti--birthday {
    border-color: #0b4da0;
    box-shadow: 0 10px 13.6px rgba(23, 97, 255, 0.18);
}

    .gp-shop-noti--birthday::before {
        background: rgba(28, 108, 255, 0.3);
    }

    .gp-shop-noti--birthday::after {
        box-shadow: inset 0 0 22.3px rgba(76, 154, 255, 0.58);
    }

.gp-shop-noti__left {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0px;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.gp-shop-noti__icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

.gp-shop-noti__text {
    position: relative;
    z-index: 1;
    margin: 0px;
    min-width: 0px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: #ffffff;
}

.gp-shop-noti__highlight {
    font-weight: 700;
    color: #facc15;
}

.gp-shop-noti__body {
    font-weight: 400;
    color: #ffffff;
}

.gp-shop-noti__actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

@media (min-width: 1024px) {
    .gp-shop-noti__actions {
        flex-shrink: 0;
        justify-content: flex-end;
    }
}

.gp-shop-noti__cancel,
.gp-shop-noti__dismiss,
.gp-shop-noti__cta,
.gp-shop-noti__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 33px;
    border-radius: 99px;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: normal;
    text-decoration: none;
    flex-shrink: 0;
    box-sizing: border-box;
    cursor: pointer;
    color: #ffffff;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

    .gp-shop-noti__cancel:hover,
    .gp-shop-noti__dismiss:hover,
    .gp-shop-noti__cta:hover,
    .gp-shop-noti__close:hover {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

    .gp-shop-noti__cancel:active,
    .gp-shop-noti__dismiss:active,
    .gp-shop-noti__cta:active,
    .gp-shop-noti__close:active {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-shop-noti__cancel,
.gp-shop-noti__dismiss,
.gp-shop-noti__cta {
    gap: 5px;
    padding: 0 15px;
}

.gp-shop-noti__cancel {
    border: 1px solid #ff5f57;
    background: rgba(255, 95, 87, 0.5);
}

.gp-shop-noti__dismiss {
    gap: 20px;
    border: 1px solid transparent;
    background: transparent;
}

.gp-shop-noti--red-credit .gp-shop-noti__dismiss {
    border-color: #fe7e2f;
}

.gp-shop-noti--birthday .gp-shop-noti__dismiss {
    border-color: #4b89c9;
}

.gp-shop-noti__cta {
    border: 1px solid transparent;
    background: transparent;
}

.gp-shop-noti--unpaid .gp-shop-noti__cta {
    border-color: #febc2f;
    background: rgba(254, 188, 47, 0.45);
}

.gp-shop-noti--platinum .gp-shop-noti__cta {
    gap: 10px;
    border-color: #58d46d;
    background: rgba(19, 123, 47, 0.2);
}

.gp-shop-noti--red-credit .gp-shop-noti__cta {
    gap: 20px;
    border-color: #fe7e2f;
    background: rgba(254, 119, 47, 0.45);
}

.gp-shop-noti__close {
    width: 33px;
    padding: 0;
    border: 1px solid #58d46d;
    background: transparent;
}

.gp-shop-noti__cancel-icon,
.gp-shop-noti__cta-icon,
.gp-shop-noti__close-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.gp-shop-noti__dismiss-icon {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-shop-noti {
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 15px;
        margin: 10px 0;
        padding: 15px 20px;
        border-radius: 20px;
    }

    .gp-shop__inner > .gp-shop-noti:first-child {
        margin-top: 20px;
    }

    .gp-shop-noti__text {
        font-size: 16px;
        white-space: nowrap;
    }

    .gp-shop-noti__cancel,
    .gp-shop-noti__dismiss,
    .gp-shop-noti__cta {
        font-size: 16px;
    }
}

/* Legacy aliases — unpaid / platinum themes for older markup */

.gp-cart-caution {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    overflow: hidden;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    margin: 10px 0;
    padding: 10px 15px;
    border-radius: 10px;
    border: 1px solid #febc2f;
    box-shadow: 0 10px 13.6px rgba(255, 193, 23, 0.18);
}

    .gp-cart-caution::before {
        content: "";
        pointer-events: none;
        position: absolute;
        inset: 0px;
        border-radius: inherit;
        background: rgba(254, 188, 47, 0.3);
    }

    .gp-cart-caution::after {
        content: "";
        pointer-events: none;
        position: absolute;
        inset: 0px;
        border-radius: inherit;
        box-shadow: inset 0 0 22.3px rgba(255, 192, 76, 0.58);
    }

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-caution {
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: 15px 20px;
        border-radius: 20px;
        margin: 20px 0;
    }
}

.gp-cart-caution__left {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0px;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.gp-cart-caution__icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

.gp-cart-caution__text {
    position: relative;
    z-index: 1;
    margin: 0px;
    min-width: 0px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: #ffffff;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-caution__text {
        font-size: 16px;
        white-space: nowrap;
    }
}

.gp-cart-caution__actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

@media (min-width: 1024px) {
    .gp-cart-caution__actions {
        flex-shrink: 0;
        justify-content: flex-end;
    }
}

.gp-cart-caution__cancel,
.gp-cart-caution__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 33px;
    padding: 0 15px;
    border-radius: 99px;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: normal;
    text-decoration: none;
    flex-shrink: 0;
    box-sizing: border-box;
    cursor: pointer;
    color: #ffffff;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

    .gp-cart-caution__cancel:hover,
    .gp-cart-caution__cta:hover {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

    .gp-cart-caution__cancel:active,
    .gp-cart-caution__cta:active {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-cart-caution__cancel {
    border: 1px solid #ff5f57;
    background: rgba(255, 95, 87, 0.5);
}

.gp-cart-caution__cta {
    border: 1px solid #febc2f;
    background: rgba(254, 188, 47, 0.45);
}

.gp-cart-caution__cancel-icon,
.gp-cart-caution__cta-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-caution__cancel,
    .gp-cart-caution__cta {
        font-size: 16px;
    }
}

.gp-cart-frame {
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
    border-radius: 15px;
    margin-top: 10px;
    background: radial-gradient(120% 80% at 0% 0%, rgba(217, 217, 217, 0.2) 0%, rgba(217, 217, 217, 0.05) 70%);
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-frame {
        padding: 10px;
        margin: 20px 0 0 0;
    }
}

.gp-cart-promo {
    width: 100%;
    margin-bottom: 10px;
    border: 1px solid #243b53;
    border-radius: 10px;
    overflow: hidden;
}

.gp-cart-promo__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 45px;
    padding: 10px 15px;
    list-style: none;
    cursor: pointer;
    background: #232427;
    border-bottom: 1px solid #243b53;
}

    .gp-cart-promo__head::-webkit-details-marker {
        display: none;
    }

.gp-cart-promo__title {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #facc15;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-promo__title {
        font-size: 18px;
    }
}

.gp-cart-promo__toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    color: #aeaeae;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-promo__toggle {
        font-size: 16px;
    }
}

.gp-cart-promo__toggle-text--collapsed {
    display: none;
}

.gp-cart-promo__toggle-text--expanded {
    display: inline;
}

.gp-cart-promo.is-collapsed .gp-cart-promo__toggle-text--collapsed {
    display: inline;
}

.gp-cart-promo.is-collapsed .gp-cart-promo__toggle-text--expanded {
    display: none;
}

.gp-cart-promo__caret {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-promo__caret {
        width: 24px;
        height: 24px;
    }
}

.gp-cart-promo.is-expanded .gp-cart-promo__caret {
    transform: scaleY(-1);
}

.gp-cart-promo__body {
    position: relative;
    padding: 10px;
    background: #1a1b1e;
}

.gp-cart-promo.is-collapsed .gp-cart-promo__row--extra,
.gp-cart-promo.is-collapsed .gp-cart-promo__divider--extra {
    display: none;
}

.gp-cart-promo__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
}

.gp-cart-promo__row-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-promo__row-main {
        gap: 20px;
    }
}

.gp-cart-promo__date {
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: 10px;
    border: 0.5px solid #ffa702;
    background: rgba(255, 182, 23, 0.06);
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 10px;
    line-height: 1.2;
    color: #ffa702;
    text-align: center;
    max-width: 72px;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-promo__date {
        padding: 4px 10px;
        font-size: 14px;
        max-width: none;
    }
}

.gp-cart-promo__copy {
    min-width: 0;
}

.gp-cart-promo__line1 {
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.3;
    color: #fff;
    margin: 0;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-promo__line1 {
        font-size: 16px;
    }
}

.gp-cart-promo__line2 {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.3;
    color: #b8b8b8;
    margin: 2px 0 0;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-promo__line2 {
        font-size: 14px;
    }
}

.gp-cart-promo__hl {
    color: #facc15;
}

.gp-cart-promo__more {
    box-sizing: border-box;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-width: 35px;
    width: 35px;
    height: 35px;
    padding: 0;
    border-radius: 10px;
    border: 0.5px solid #313338;
    background: #1a1b1e;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    color: #aeaeae;
    cursor: pointer;
}

.gp-cart-promo__more-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.gp-cart-promo__more-icon {
    display: block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

@media (min-width: 768px) {
    .gp-cart-promo__more {
        width: auto;
        min-width: 0;
        height: 35px;
        padding: 0 12px;
    }

    .gp-cart-promo__more-text {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        clip-path: none;
        white-space: nowrap;
        border-width: 0;
        font-size: 14px;
        line-height: 1.3;
    }

    .gp-cart-promo__more-icon {
        display: none;
    }
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-promo__more {
        height: 45px;
        padding: 0 15px;
    }

    .gp-cart-promo__more-text {
        font-size: 16px;
    }
}

.gp-cart-promo__divider {
    height: 1px;
    margin: 0;
    background: linear-gradient(to right, transparent, #334e68, transparent);
    opacity: 0.8;
}

.gp-cart-layout {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
    }
}

.gp-cart-layout__main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    min-width: 0;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-layout__main {
        flex: 1;
    }
}

.gp-cart-section {
    width: 100%;
    border: 1px solid #243b53;
    border-radius: 10px;
    overflow: hidden;
}

.gp-cart-section__head {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 15px 20px;
    min-height: 52px;
    box-sizing: border-box;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-section__head {
        min-height: 58px;
        align-items: center;
    }
}

.gp-cart-section__head--blue {
    background: linear-gradient(90deg, #0b58b9 0%, #122767 100%);
    border-bottom: 1px solid #243b53;
}

.gp-cart-section__head--purple {
    background: linear-gradient(90deg, #5a1498 0%, #2b1267 100%);
    border-bottom: 1px solid #243b53;
}

.gp-cart-section__select {
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.gp-cart-section__checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.gp-cart-section__checkbox-ui {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    box-sizing: border-box;
}

.gp-cart-section__checkbox-ui--cyan {
    border: 1px solid #1caee7;
    background-color: #1caee7;
    background-image: url("../images/icon-cart-check.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}

.gp-cart-section__checkbox-ui--purple {
    border: 1px solid #b273ff;
    background-color: #9742ff;
    background-image: url("../images/icon-cart-check.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}

.gp-cart-section__checkbox:not(:checked) + .gp-cart-section__checkbox-ui--cyan {
    background-color: transparent;
    background-image: none;
}

.gp-cart-section__checkbox:not(:checked) + .gp-cart-section__checkbox-ui--purple {
    background-color: transparent;
    background-image: none;
}

.gp-cart-section__head-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.gp-cart-section__title {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    margin: 0;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-section__title {
        font-size: 18px;
    }
}

.gp-cart-section__badge {
    padding: 2px 10px;
    border-radius: 99px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
}

.gp-cart-section__badge--blue {
    border: 1px solid #2c7adf;
    background: #1763c3;
    color: #7bd9ff;
}

.gp-cart-section__badge--purple {
    border: 1px solid #8738cc;
    background: #65279c;
    color: #e79fff;
}

.gp-cart-section__body {
    background: #1a1b1e;
}

.gp-cart-section__game {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    background: #232427;
    border-bottom: 1px solid #093f85;
}

.gp-cart-section--gift .gp-cart-section__game {
    border-bottom-color: #3b234c;
}

.gp-cart-section__game-avatar {
    width: 23px;
    height: 23px;
    border-radius: 5px;
    -o-object-fit: cover;
    object-fit: cover;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-section__game-avatar {
        width: 23px;
        height: 100%;
        aspect-ratio: 1;
    }
}

.gp-cart-section__game-text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
}

.gp-cart-section__game-name {
    color: #9fb3c8;
}

.gp-cart-section__game-id {
    color: #fff;
    font-weight: 500;
}

.gp-cart-section__game-hint {
    display: none;
    flex: 1 1 100%;
    margin: 0;
    padding-left: 20px;
    border-left: 1px solid #334e68;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    color: #9fb3c8;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-section__game-hint--desktop {
        display: block;
        flex: 1;
        margin-left: 0;
    }
}

.gp-cart-items {
    display: flex;
    flex-direction: column;
    gap: 0px;
    padding: 10px;
}

@media (min-width: 768px) {
    .gp-cart-items {
        padding: 20px;
    }
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-items {
        padding: 20px 20px;
        gap: 0;
    }
}

.gp-cart-item {
    width: 100%;
}

.gp-cart-item__row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-item__row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }
}

.gp-cart-item__row--stack {
    flex-direction: column;
    gap: 10px;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-item__row--stack {
        flex-direction: column;
    }
}

.gp-cart-item__row--err-inline {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

    .gp-cart-item__row--err-inline .gp-cart-item__remove {
        align-self: flex-end;
    }

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-item__row--err-inline {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

        .gp-cart-item__row--err-inline .gp-cart-item__left {
            flex: 0 1 auto;
            max-width: 435px;
        }

        .gp-cart-item__row--err-inline .gp-cart-item__err-banner--inline {
            flex: 1 1 auto;
            min-width: 0;
            width: auto;
        }

        .gp-cart-item__row--err-inline .gp-cart-item__remove {
            align-self: center;
            flex-shrink: 0;
        }
}

.gp-cart-item__row-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-item__row-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.gp-cart-item__left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-item__left {
        gap: 20px;
        max-width: 435px;
    }
}

.gp-cart-item__select {
    position: relative;
    display: flex;
    align-self: center;
    cursor: pointer;
    flex-shrink: 0;
}

.gp-cart-item__checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.gp-cart-item__checkbox-ui {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    box-sizing: border-box;
}

.gp-cart-item__checkbox-ui--cyan {
    border: 1px solid #1caee7;
    background: #1caee7 url("../images/icon-cart-check.svg") center / 20px 20px no-repeat;
}

.gp-cart-item__checkbox-ui--purple {
    border: 1px solid #b273ff;
    background: #9742ff url("../images/icon-cart-check.svg") center / 20px 20px no-repeat;
}

.gp-cart-item__checkbox-ui--empty {
    background-image: none !important;
    background-color: transparent !important;
}

.gp-cart-item__checkbox:not(:checked) + .gp-cart-item__checkbox-ui--cyan {
    background-color: transparent;
    background-image: none;
}

.gp-cart-item__checkbox:not(:checked) + .gp-cart-item__checkbox-ui--purple {
    background-color: transparent;
    background-image: none;
}

.gp-cart-item__thumb-wrap {
    position: relative;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
}

.gp-cart-item__thumb-wrap--sm {
    width: 70px;
    height: 70px;
}

.gp-cart-item__thumb {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
}

.gp-cart-item__thumb--disabled {
    --tw-brightness: brightness(.5);
    --tw-saturate: saturate(.5);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.gp-cart-item__flash {
    position: absolute;
    top: 0;
    left: 0;
    padding: 3px 5px;
    border-bottom-right-radius: 5px;
    background: #facc15;
    font-family: "Google Sans", sans-serif;
    font-size: 10px;
    color: #020e1f;
}

.gp-cart-item__info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.gp-cart-item__name {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    color: #f0f4f8;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-item__name {
        max-width: 215px;
    }
}

.gp-cart-item__name-accent {
    color: #facc15;
}

.gp-cart-item__name--muted {
    color: #696969;
}

.gp-cart-item__info--muted .gp-cart-item__name,
.gp-cart-item__info--muted .gp-cart-item__limit,
.gp-cart-item__info--muted .gp-cart-item__limit-num,
.gp-cart-item__info--muted .gp-cart-item__stock-label,
.gp-cart-item__info--muted .gp-cart-item__stock-count,
.gp-cart-item__info--muted .gp-cart-item__stock-unit {
    color: #696969;
}

.gp-cart-item__info--muted .gp-cart-item__limit {
    border-color: #696969;
    background: rgba(105, 105, 105, 0.06);
}

.gp-cart-item__limit {
    display: inline-flex;
    width: -moz-fit-content;
    width: fit-content;
    align-items: center;
    gap: 5px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 0.562px solid #685233;
    background: rgba(231, 167, 28, 0.06);
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    color: #fff;
}

.gp-cart-item__limit-num {
    color: #ffde2d;
}

.gp-cart-item__meta-row {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.gp-cart-item__stock {
    width: 100%;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
}

.gp-cart-item__stock-label {
    color: #ffffff;
}

.gp-cart-item__stock-count {
    color: #f24c10;
}

.gp-cart-item__stock-unit {
    color: #ffffff;
}

.gp-cart-item__note {
    display: flex;
    align-items: flex-start;
    flex-grow: 1;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 10px;
    font-family: "Google Sans", sans-serif;
    font-size: 12px;
    margin: 0;
}

.gp-cart-item__note--success {
    border: 0.562px solid #15facc;
    background: rgba(28, 231, 129, 0.06);
    color: #15fa9e;
}

    .gp-cart-item__note--success strong {
        font-weight: 700;
        color: #15fa9e;
    }

.gp-cart-item__bonus-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.gp-cart-item__bonus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 10px;
    border: 0.562px solid #facc15;
    background: rgba(231, 69, 28, 0.06);
    color: #ff6b2b;
    font-size: 14px;
}

.gp-cart-item__bonus-total {
    font-size: 14px;
    color: #ff6b2b;
}

.gp-cart-item__err-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 15px;
    border-radius: 10px;
    border: 1px solid #ff5f57;
    background: rgba(255, 95, 87, 0.2);
    font-family: "Google Sans", sans-serif;
    font-size: 13px;
    line-height: 1.4;
    color: #ff8781;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-item__err-banner--inline {
        min-height: 40px;
        padding: 10px 15px;
        box-sizing: border-box;
    }
}

.gp-cart-item__right {
    display: flex;
    flex-wrap: wrap;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    padding-left: 0px;
}

@media (min-width: 768px) {
    .gp-cart-item__right {
        padding-left: 2rem;
    }
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-item__right {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        padding-left: 0;
        max-width: none;
    }
}

.gp-cart-item__right--err {
    justify-content: flex-end;
}

.gp-cart-item__price-block {
    display: flex;
    align-items: center;
    gap: 10px;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-item__price-block {
        justify-content: flex-end;
    }
}

.gp-cart-item__prices {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.gp-cart-item__price-now {
    font-size: 14px;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 768px) {
    .gp-cart-item__price-now {
        font-size: 16px;
    }
}

.gp-cart-item__price-now {
    font-family: "Google Sans", sans-serif;
}

.gp-cart-item__price-was {
    font-size: 12px;
    color: #829ab1;
    text-decoration: line-through;
}

.gp-cart-item__disc {
    display: flex;
    height: 36px;
    width: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 5.623px;
    border-width: 1.125px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(255 222 45 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
    font-size: 12px;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(6 18 33 / var(--tw-text-opacity, 1));
}

@media (min-width: 768px) {
    .gp-cart-item__disc {
        height: 50px;
        width: 50px;
        font-size: 14px;
    }
}

.gp-cart-item__disc {
    font-family: "Google Sans", sans-serif;
}

.gp-cart-item__qty {
    display: flex;
    height: 50px;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 85px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 10px;
    --tw-bg-opacity: 1;
    background-color: rgb(51 51 51 / var(--tw-bg-opacity, 1));
    padding: 0 10px;
}

@media (min-width: 768px) {
    .gp-cart-item__qty {
        max-width: 100px;
    }
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-item__qty {
        gap: 16px;
        justify-self: end;
    }
}

.gp-cart-item__qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.gp-cart-item__qty-val {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #facc15;
}

.gp-cart-item__sum {
    font-size: 14px;
    --tw-text-opacity: 1;
    color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}

@media (min-width: 768px) {
    .gp-cart-item__sum {
        font-size: 16px;
    }
}

.gp-cart-item__sum {
    flex: 1;
    margin: 0;
    text-align: center;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-item__sum {
        flex: none;
    }
}

.gp-cart-item__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-item__remove {
        width: 30px;
    }
}

.gp-cart-item__expand {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    padding: 0;
    border: none;
    background: transparent;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    color: #829ab1;
    cursor: pointer;
}

.gp-cart-item__expand-caret {
    transition: transform 0.2s ease;
}

.gp-cart-item__expand[aria-expanded="true"] .gp-cart-item__expand-caret {
    transform: rotate(180deg);
}

.gp-cart-item__received-shell--cart {
    display: flex;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
    border-radius: 10px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(36 59 83 / var(--tw-border-opacity, 1));
    margin-top: 10px;
    background-color: #27292f;
}

    .gp-cart-item__received-shell--cart[hidden] {
        display: none !important;
    }

.gp-cart-item__received-scroll--cart {
    max-height: min(220px, 38vh);
    overflow-y: auto;
    padding: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #bcccdc #3d4350;
}

    .gp-cart-item__received-scroll--cart::-webkit-scrollbar {
        width: 8px;
    }

    .gp-cart-item__received-scroll--cart::-webkit-scrollbar-track {
        background: #3d4350;
        border-radius: 2px;
    }

    .gp-cart-item__received-scroll--cart::-webkit-scrollbar-thumb {
        background: #bcccdc;
        border-radius: 2px;
    }

.gp-cart-item__received-list--cart {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gp-cart-item__received-row--cart {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #9fb3c8;
}

.gp-cart-item__received-name--cart {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 16px;
    position: relative;
}

    .gp-cart-item__received-name--cart::before {
        content: "";
        position: absolute;
        left: 4px;
        top: 0.45em;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: #9fb3c8;
    }

.gp-cart-item__received-qty--cart {
    flex: 1 1 0;
    min-width: 0;
    text-align: right;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-item__expand {
        margin-top: 10px;
        margin-left: 40px;
    }

    .gp-cart-item__received-shell--cart {
        margin-left: 40px;
        width: calc(100% - 40px);
    }
}

.gp-cart-item__divider {
    height: 1px;
    margin: 14px 0;
    background: #334e68;
    opacity: 0.9;
}

.gp-cart-item--disabled .gp-cart-item__thumb,
.gp-cart-item--disabled .gp-cart-item__name {
    opacity: 0.7;
}

.gp-cart-item__friend {
    margin-top: 10px;
    padding-top: 10px;
    width: 100%;
}

.gp-cart-item--gift-err .gp-cart-item__friend {
    margin-top: 20px;
    padding-top: 0;
}

.gp-cart-item__friend-row {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 15px 20px;
    border-radius: 10px;
    border: 0.562px solid #8d53ff;
    background: rgba(137, 69, 255, 0.06);
}

.gp-cart-item__friend-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #fff;
}

.gp-cart-item__friend-code {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #facc15;
    padding-left: 20px;
    border-left: 1px solid #444;
}

.gp-cart-item__friend-hint {
    margin: 10px 0 0;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #ffdf72;
}

    .gp-cart-item__friend-hint strong {
        font-weight: 700;
    }

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-item__friend {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 20px;
        padding-left: 40px;
    }

    .gp-cart-item--gift-err .gp-cart-item__friend {
        align-items: flex-start;
    }

    .gp-cart-item__friend-row {
        flex: 0 0 auto;
        max-width: 100%;
    }

    .gp-cart-item__friend-hint {
        flex: 0 1 auto;
        margin-top: 0;
        max-width: 335px;
    }
}

.gp-cart-section__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 15px 20px;
    background: #232427;
    border-top: 1px solid #243b53;
}

.gp-cart-section__foot-label {
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    color: #fff;
}

.gp-cart-section__foot-sum {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #fff;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-section__foot-sum {
        font-size: 20px;
    }
}

.gp-cart-server--inline {
    width: 100%;
    border: 1px solid #243b53;
    border-radius: 10px;
    overflow: hidden;
}

@media (min-width: 1280px) and (orientation: landscape) {
    .gp-cart-server--inline {
        display: none;
    }
}

.gp-cart-server__head {
    padding: 15px 20px;
    background: linear-gradient(90deg, #0b58b9 0%, #122767 100%);
    border-bottom: 1px solid #243b53;
}

.gp-cart-server__head-title {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
}

.gp-cart-server__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: #1a1b1e;
}

.gp-cart-server__row {
    display: flex;
    gap: 10px;
    width: 100%;
}

.gp-cart-server__divider {
    height: 1px;
    background: #334e68;
}

.gp-cart-summary--sidebar {
    display: flex;
    flex-direction: column;
}

@media (min-width: 1280px) and (orientation: landscape) {
    .gp-cart-summary--sidebar {
        display: flex;
        flex-direction: column;
        width: 330px;
        flex-shrink: 0;
        position: sticky;
        top: 10px;
        align-self: flex-start;
        border: 1px solid #243b53;
        border-radius: 10px;
        overflow: hidden;
    }
}

.gp-cart-summary__head {
    padding: 15px 20px;
    background: #232427;
    border-bottom: 1px solid #243b53;
}

.gp-cart-summary__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #fff;
}

.gp-cart-summary__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 30px 20px;
    background: #1a1a1a;
}

.gp-cart-summary__hint {
    margin: 0 0 10px;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    color: #1caee7;
}

.gp-cart-summary__block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .gp-cart-summary__block .gp-shop-redeem-modal__select-field {
        width: 100%;
    }

.gp-cart-summary__char-miss {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #829ab1;
}

.gp-cart-summary__char-miss-refresh {
    display: inline;
    cursor: pointer;
    border-style: none;
    background-color: transparent;
    padding: 0px;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: #1caee7;
    text-decoration: underline;
    text-underline-offset: 2px;
}

    .gp-cart-summary__char-miss-refresh:hover {
        filter: brightness(1.08);
    }

.gp-cart-summary__char-miss-countdown {
    color: #9fb3c8;
}

.gp-cart-summary__field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 50px;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid #1caee7;
    background: #27292f;
    box-shadow: 0 0 6px rgba(28, 174, 231, 0.3);
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    color: #bcccdc;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
}

.gp-cart-summary__divider {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    height: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(51 78 104 / var(--tw-bg-opacity, 1));
    opacity: 0.9;
}

.gp-cart-summary__redlink {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gp-cart-summary__redlink-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    color: #fff;
}

.gp-cart-summary__redlink--mobile {
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

.gp-cart-summary__redlink-opt {
    font-size: 14px;
    color: #9fb3c8;
}

.gp-cart-summary__redlink-input-wrap {
    flex: 1;
    min-height: 45px;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid #3a3c43;
    background: #27292f;
    box-sizing: border-box;
}

.gp-cart-summary__redlink-input-wrap--desktop {
    width: 100%;
    min-height: 50px;
}

.gp-cart-summary__redlink-placeholder {
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    color: #5c5e67;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-summary__redlink-placeholder {
        font-size: 16px;
    }
}

.gp-cart-summary__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

.gp-cart-summary__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
}

    .gp-cart-summary__row dt {
        margin: 0;
        font-family: "Google Sans", sans-serif;
        font-weight: 400;
        color: #829ab1;
    }

    .gp-cart-summary__row dd {
        display: flex;
        align-items: center;
        gap: 5px;
        margin: 0;
        font-family: "Google Sans", sans-serif;
        font-weight: 500;
        color: #fff;
    }

.gp-cart-summary__row--points dd {
    color: #1caee7;
}

.gp-cart-summary__points {
    color: #1caee7;
}

.gp-cart-summary__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.gp-cart-summary__total-label {
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #fff;
}

.gp-cart-summary__total-value {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: #1caee7;
}

.gp-cart-summary__checkout {
    width: 100%;
    height: 50px;
    border-radius: 10px;
    border: 1px solid #333;
    background: #333;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #848484;
    cursor: not-allowed;
}

/* Mobile fixed footer — cart: Figma 3075:15034; checkout: 3286:36697 (Summary Footer Mobile) */

.gp-cart-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 1280px) and (orientation: landscape) {
    .gp-cart-footer {
        display: none;
    }
}

.gp-cart-footer__panel {
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    background: #1a1b1e;
}

.gp-cart-footer__panel--server {
    overflow: visible;
}

.gp-cart-footer__panel--detail {
    border-top: none;
    border-radius: 0;
    background: transparent;
}

.gp-cart-footer__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 15px 20px;
    list-style: none;
    cursor: pointer;
    background: linear-gradient(90deg, #0b58b9 0%, #122767 100%);
}

    .gp-cart-footer__summary::-webkit-details-marker {
        display: none;
    }

.gp-cart-footer__summary--detail {
    background: transparent;
    padding: 10px 20px 10px;
}

.gp-cart-footer__summary-title {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
}

.gp-cart-footer__summary-caret {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    background: url("../images/icon-fixed-footer-caret-down.svg") center / contain no-repeat;
    transform: scaleY(-1);
}

.gp-cart-footer__panel:not([open]) .gp-cart-footer__summary-caret {
    transform: none;
}

.gp-cart-footer__summary-caret--detail {
    width: 24px;
    height: 24px;
}

.gp-cart-footer__panel-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gp-cart-footer__bottom-wrap {
    padding: 10px 20px 10px;
    background: linear-gradient(90deg, #ff8bbf 0%, #f488ff 25%, #7ef359 50%, #ffde2d 75%, #1bb1e7 100%) top / 100% 0.5px no-repeat, radial-gradient(60% 50% at 0% 0%, #0b4da0 0%, #0f417f 25%, #14355e 50%, #18283d 75%, #1c1c1c 100%);
    box-shadow: 0 -3px 12.3px rgba(0, 0, 0, 0.32);
}

.gp-cart-footer__detail-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-bottom: 10px;
}

.gp-cart-footer__dt {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #bcccdc;
}

.gp-cart-footer__dd {
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #fff;
    text-align: right;
}

.gp-cart-footer__dd--points {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    color: #1caee7;
}

.gp-cart-footer__divider {
    height: 1px;
    margin: 0;
    background: #334e68;
}

.gp-cart-footer__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
}

.gp-cart-footer__total {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.gp-cart-footer__total-label {
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #fff;
}

.gp-cart-footer__total-value {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #1caee7;
}

.gp-cart-footer__checkout {
    flex: 1;
    height: 50px;
    border-radius: 10px;
    border: 1px solid #333;
    background: #333;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #848484;
    cursor: not-allowed;
}

/* -------------------------------------------------------------------------- */

/* Checkout page (index-genplay-shop-checkout)                                */

/* -------------------------------------------------------------------------- */

body:has(.gp-cart-footer--checkout) {
    /* Paywall + summary strip in fixed footer (Figma 3286:36697); cap height so main stays scrollable */
    --gp-shop-footer-h: min(20dvh, 100px);
}

.gp-shop--checkout {
    padding-bottom: calc(var(--gp-shop-footer-h) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 1280px) and (orientation: landscape) {
    body:has(.gp-cart-footer--checkout) {
        --gp-shop-footer-h: 0px;
    }

    .gp-shop--checkout {
        padding-bottom: 0;
    }
}

.gp-cart-frame--checkout {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 12px 0;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-frame--checkout {
        gap: 20px;
        margin: 20px 0;
    }
}

.gp-checkout-review {
    width: 100%;
    border: 1px solid #243b53;
    border-radius: 10px;
    overflow: hidden;
    background: #1a1b1e;
}

.gp-checkout-review__hero {
    padding: 12px 16px;
    background-image: linear-gradient(90deg, #0b58b9 0%, #122767 100%);
    border-bottom: 1px solid #243b53;
}

.gp-checkout-review__hero-title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-checkout-review__hero {
        padding: 14px 20px;
    }

    .gp-checkout-review__hero-title {
        font-size: 18px;
    }
}

.gp-checkout-review__account {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #243b53;
}

.gp-checkout-review__game-wrap {
    aspect-ratio: 1 / 1;
    width: 1.5rem;
    overflow: hidden;
    border-radius: 0.375rem;
}

    .gp-checkout-review__game-wrap img {
        height: 100%;
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-checkout-review__account {
        padding: 16px 20px;
    }
}

.gp-checkout-review__account-text {
    display: flex;
    gap: 6px;
    line-height: 1;
}

.gp-checkout-review__account-game {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #fff;
}

.gp-checkout-review__account-id {
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    color: #e8e8e8;
}

.gp-checkout-review__group-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
}

.gp-checkout-review__group-head-decoration {
    height: 1px;
    width: 100%;
}

.gp-checkout-review__group-title--self {
    --tw-text-opacity: 1;
    color: rgb(28 174 231 / var(--tw-text-opacity, 1));
}

.gp-checkout-review__group-title--gift {
    --tw-text-opacity: 1;
    color: rgb(178 115 255 / var(--tw-text-opacity, 1));
}

.gp-checkout-review__group-head-dec-self {
    --tw-bg-opacity: 1;
    background-color: rgb(19 127 169 / var(--tw-bg-opacity, 1));
}

.gp-checkout-review__group-head-dec-gift {
    --tw-bg-opacity: 1;
    background-color: rgb(94 34 167 / var(--tw-bg-opacity, 1));
}

.gp-checkout-review__group-title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.gp-checkout-review__group-count {
    font-weight: 500;
}

.gp-checkout-review__list {
    padding: 4px 12px 4px;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-checkout-review__list {
        padding: 4px 20px 8px;
    }
}

.gp-checkout-line {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 0;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-checkout-line {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 20px;
        padding: 16px 0;
    }

    .gp-checkout-line__main {
        gap: 20px;
        width: 435px;
        flex: 0 0 435px;
    }

    .gp-checkout-line__name {
        font-size: 16px;
    }
}

.gp-checkout-line__main {
    display: flex;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.gp-checkout-line__thumb-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #243b53;
    background: #1f2933;
}

.gp-checkout-line__thumb {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.gp-checkout-line__flash {
    position: absolute;
    left: 0;
    top: 0;
    padding: 3px 5px;
    font-family: "Google Sans", sans-serif;
    font-size: 10px;
    color: #020e1f;
    background: #facc15;
    line-height: 1.1;
    border-bottom-right-radius: 5px;
}

.gp-checkout-line__info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.gp-checkout-line__name {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.35;
    color: #fff;
}

.gp-checkout-line__name-plus {
    color: #1caee7;
}

.gp-checkout-line__meta {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 13px;
    line-height: 1.4;
    color: #1caee7;
}

.gp-checkout-line__code {
    font-weight: 600;
    color: #e8e8e8;
}

.gp-checkout-line--gift .gp-checkout-line__meta {
    color: #B273FF;
}

.gp-checkout-line__note {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 12px;
    line-height: 1.4;
    color: #829ab1;
}

    .gp-checkout-line__note strong {
        color: #fff;
    }

.gp-checkout-line__bonus {
    display: inline-block;
    margin-right: 6px;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: "Google Sans", sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #020e1f;
    background: linear-gradient(112.53deg, #52ceff 5.7%, #1caee7 54.37%);
}

.gp-checkout-line__aside {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 12px;
    width: 100%;
    max-width: 420px;
    margin-left: auto;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-checkout-line__aside {
        flex-shrink: 0;
        margin-left: 0;
    }
}

.gp-checkout-line__col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    min-width: 0;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-checkout-line__col {
        align-items: flex-end;
    }
}

.gp-checkout-line__col-label {
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: 1;
    font-weight: 400;
    color: #829ab1;
    white-space: nowrap;
}

.gp-checkout-line__unit-prices {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 5px;
}

.gp-checkout-line__price-was {
    order: 2;
    font-family: "Google Sans", sans-serif;
    font-size: 12px;
    color: #829ab1;
    text-decoration: line-through;
}

.gp-checkout-line__price-now {
    order: 1;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #fff;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-checkout-line__price-was {
        order: 1;
    }

    .gp-checkout-line__price-now {
        order: 2;
    }
}

.gp-checkout-line__disc {
    font-family: "Google Sans", sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #facc15;
}

.gp-checkout-line__qty {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #facc15;
    text-align: right;
    line-height: 1;
}

.gp-checkout-line__sum {
    margin: 0;
    text-align: right;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    color: #facc15;
}

.gp-checkout-line__divider {
    height: 1px;
    background: #334e68;
    opacity: 0.85;
}

.gp-checkout-line__divider--group-break {
    background: #7726c2;
    opacity: 1;
}

.gp-checkout-review__total-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 16px;
    background: #232427;
    border-top: 1px solid #243b53;
}

.gp-checkout-review__total-label {
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    color: #fff;
}

.gp-checkout-review__total-value {
    font-family: "Google Sans", sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: #fff;
}

.gp-cart-summary--checkout .gp-cart-summary__body {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.gp-checkout-summary-desktop-only {
    display: none;
}

@media (min-width: 1280px) and (orientation: landscape) {
    .gp-checkout-summary-desktop-only {
        display: block;
    }
}

.gp-checkout-summary-pay {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0 2px;
}

.gp-checkout-summary-pay__head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.gp-checkout-summary-pay__caution {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    width: 100%;
    padding: 10px 15px;
    border-radius: 10px;
    border: 1px solid #ff5f57;
    background: rgba(255, 95, 87, 0.2);
}

    .gp-checkout-summary-pay__caution[hidden] {
        display: none;
    }

    .gp-checkout-summary-pay__caution img {
        display: block;
        flex-shrink: 0;
    }

.gp-checkout-summary-pay__caution-text {
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: #ff8781;
}

.gp-checkout-summary-pay__label {
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
}

.gp-checkout-summary-pay__select-link {
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 13.248px;
    color: #9fb3c8;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    white-space: nowrap;
}

    .gp-checkout-summary-pay__select-link:hover {
        color: #bcccdc;
    }

    .gp-checkout-summary-pay__select-link:focus-visible {
        outline: 1px solid #1caee7;
        outline-offset: 2px;
        border-radius: 3px;
    }

.gp-checkout-summary-pay__row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

    .gp-checkout-summary-pay__row[hidden] {
        display: none;
    }

.gp-checkout-summary-pay__name {
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    text-align: right;
    white-space: nowrap;
}

.gp-checkout-summary-pay__logo-slot {
    flex-shrink: 0;
    width: 84px;
    height: 35px;
    border-radius: 5px;
    border: none;
    background: transparent;
    overflow: hidden;
}

    .gp-checkout-summary-pay__logo-slot img {
        display: block;
        width: 100%;
        height: 100%;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-checkout-summary-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.gp-checkout-summary-actions__primary {
    width: 100%;
    min-height: 50px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #020e1f;
    background-image: linear-gradient(112.53deg, #52ceff 5.7%, #1caee7 54.37%);
    box-shadow: 0 6px 19.7px rgba(11, 77, 160, 0.5);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

    .gp-checkout-summary-actions__primary:hover {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

    .gp-checkout-summary-actions__primary:active {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-checkout-summary-actions__secondary {
    width: 100%;
    min-height: 50px;
    border-radius: 10px;
    cursor: pointer;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #829AB1;
    border: 1px solid #486581;
    background: transparent;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

    .gp-checkout-summary-actions__secondary:hover {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

    .gp-checkout-summary-actions__secondary:active {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-checkout-summary-legal__warning {
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}

    .gp-checkout-summary-legal__warning span {
        --tw-text-opacity: 1;
        color: rgb(251 191 36 / var(--tw-text-opacity, 1));
    }

.gp-checkout-summary-legal {
    margin: 12px 0 0;
    font-family: "Google Sans", sans-serif;
    font-size: 12px;
    line-height: 1.45;
    color: #829ab1;
}

.gp-checkout-summary-legal__link {
    color: #1caee7;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.gp-checkout-paywall {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    border-radius: 10px;
    border: 1px solid #243b53;
    background: #f6f6f6;
    color: #102a43;
    overflow: hidden;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-checkout-paywall {
        display: block;
        border-radius: 10px;
    }
}

.gp-checkout-paywall__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 58px;
    padding: 10px 20px;
    background-image: linear-gradient(90deg, #0b58b9 0%, #122767 100%);
    border-bottom: 1px solid #243b53;
}

.gp-checkout-paywall__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #fff;
}

.gp-checkout-paywall__brand-block {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gp-checkout-paywall__brand-line {
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    color: #00adee;
}

.gp-checkout-paywall__brand-logo {
    display: block;
    width: 35px;
    height: 35px;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-checkout-paywall__region {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
}

@media (min-width: 768px) {
    .gp-checkout-paywall__region {
        display: inline-flex;
        max-width: calc(100% - 80px);
        gap: 16px;
        padding: 15px;
    }
}

.gp-checkout-paywall__region {
    margin: 0;
    margin: 30px 10px 0;
    border: 1px solid #ededed;
    border-radius: 10px;
    background: #fff;
    box-sizing: border-box;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-checkout-paywall__region {
        margin: 30px 40px 0;
    }
}

.gp-checkout-paywall__region-label {
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: 1.25;
    color: #020e1f;
    white-space: nowrap;
}

.gp-checkout-paywall__region-divider {
    width: 1px;
    height: 16px;
    background: #d9d9d9;
    flex-shrink: 0;
}

.gp-checkout-paywall__region-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.gp-checkout-paywall__region-wrap--custom .gp-checkout-paywall__region-select {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.gp-checkout-paywall__region-select {
    width: 190px;
    height: 50px;
    padding: 0 44px 0 12px;
    border-radius: 10px;
    border: 1px solid #ededed;
    background: #fff;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    color: #102a43;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

.gp-checkout-paywall__region-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
    min-height: 0;
    border: 0;
    background: transparent;
    padding: 0 26px 0 0;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: 1.25;
    color: #020e1f;
    text-align: left;
    cursor: pointer;
}

.gp-checkout-paywall__region-wrap--open .gp-checkout-paywall__region-trigger {
    border-color: transparent;
}

.gp-checkout-paywall__region-trigger-flag,
.gp-checkout-paywall__region-option-flag {
    width: 20px;
    height: 20px;
    -o-object-fit: contain;
    object-fit: contain;
    flex-shrink: 0;
}

.gp-checkout-paywall__region-trigger-text {
    min-width: 0;
}

.gp-checkout-paywall__region-caret {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    transition: transform 0.2s ease;
}

.gp-checkout-paywall__region-wrap--open .gp-checkout-paywall__region-caret {
    transform: translateY(-50%) rotate(180deg);
}

.gp-checkout-paywall__region-options {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    max-height: 240px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    overflow-y: auto;
    border: 1px solid #ededed;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(16, 42, 67, 0.14);
}

.gp-checkout-paywall__region-wrap--flip-up .gp-checkout-paywall__region-options {
    top: auto;
    bottom: calc(100% + 8px);
}

.gp-checkout-paywall__region-option {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    border: none;
    background: transparent;
    padding: 10px 12px;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: 1.3;
    color: #102a43;
    text-align: left;
    cursor: pointer;
}

    .gp-checkout-paywall__region-option:hover,
    .gp-checkout-paywall__region-option:focus-visible,
    .gp-checkout-paywall__region-option--active {
        background: #f1f5f9;
    }

.gp-checkout-paywall__region-option-text {
    min-width: 0;
}

.gp-checkout-paywall__methods {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 20px 10px 0;
    border: none;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-checkout-paywall__methods {
        padding: 20px 40px 0;
    }
}

.gp-checkout-paywall__method {
    position: relative;
    min-height: 55px;
    gap: 0.5rem;
    padding: 10px;
}

@media (min-width: 768px) {
    .gp-checkout-paywall__method {
        min-height: 150px;
        min-width: 150px;
        gap: 10px;
        padding: 20px;
    }
}

.gp-checkout-paywall__method {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid #ededed;
    background: #fff;
    text-align: center;
    cursor: pointer;
    font-family: "Google Sans", sans-serif;
    box-sizing: border-box;
}

.gp-checkout-paywall__method--razer {
    height: 55px;
    width: 104px;
}

@media (min-width: 768px) {
    .gp-checkout-paywall__method--razer {
        height: 150px;
        min-height: 150px;
        width: 150px;
        min-width: 150px;
    }
}

.gp-checkout-paywall__method--selected {
    border-color: #1caee7;
    border-width: 2px;
    box-shadow: 0 4px 4px rgba(51, 51, 51, 0.12);
}

.gp-checkout-paywall__method-check {
    position: absolute;
    top: -8px;
    right: -8px;
}

@media (min-width: 768px) {
    .gp-checkout-paywall__method-check {
        top: 4px;
        right: 4px;
    }
}

.gp-checkout-paywall__method-check {
    display: none;
}

    .gp-checkout-paywall__method-check.method__check--footer {
        top: -8px;
        right: -8px;
    }

.gp-checkout-paywall__method--selected .gp-checkout-paywall__method-check {
    display: block;
}

.gp-checkout-paywall__method-art {
    display: block;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-checkout-paywall__method-art--qr {
    width: 84px;
    height: 35px;
}

.gp-checkout-paywall__method-art--wallet {
    width: 111px;
    height: 34px;
}

.gp-checkout-paywall__method-art--razer {
    height: 26px;
    width: 58px;
}

@media (min-width: 768px) {
    .gp-checkout-paywall__method-art--razer {
        height: 40px;
        width: 90px;
    }
}

.gp-checkout-paywall__method-artset {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.gp-checkout-paywall__card-art {
    height: auto;
    width: 160px;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-checkout-paywall__method-labels {
    display: none;
    gap: 0px;
}

@media (min-width: 768px) {
    .gp-checkout-paywall__method-labels {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

.gp-checkout-paywall__method-name {
    font-weight: 700;
    font-size: 16px;
    color: #243b53;
}

.gp-checkout-paywall__method-sub {
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    color: #9fb3c8;
}

.gp-checkout-paywall__method-caret {
    position: absolute;
    right: 3px;
    bottom: 1px;
    height: 18px;
    width: 18px;
}

@media (min-width: 768px) {
    .gp-checkout-paywall__method-caret {
        right: 10px;
        bottom: 10px;
        height: 24px;
        width: 24px;
    }
}

.gp-checkout-paywall__method-caret {
    display: block;
    transition: transform 0.2s ease;
}

.gp-checkout-paywall__method--razer-open .gp-checkout-paywall__method-caret {
    transform: rotate(180deg);
    filter: brightness(0) saturate(100%) invert(58%) sepia(72%) saturate(508%) hue-rotate(152deg) brightness(95%) contrast(92%);
}

.gp-checkout-paywall__card-icons {
    font-size: 12px;
    color: #486581;
}

.gp-checkout-paywall__razer-panel {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
}

@media (min-width: 768px) {
    .gp-checkout-paywall__razer-panel {
        margin-left: 40px;
        margin-right: 40px;
        margin-top: 20px;
    }
}

.gp-checkout-paywall__razer-panel {
    border-radius: 10px;
    border: 1px dashed #d8d8d8;
    background: #f2f2f2;
    box-sizing: border-box;
}

    .gp-checkout-paywall__razer-panel[hidden] {
        display: none;
    }

.gp-checkout-paywall__razer-panel-title {
    margin: 0px;
    font-size: 14px;
}

@media (min-width: 768px) {
    .gp-checkout-paywall__razer-panel-title {
        font-size: 16px;
    }
}

.gp-checkout-paywall__razer-panel-title {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    line-height: normal;
    color: #020e1f;
}

.gp-checkout-paywall__razer-panel-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.gp-checkout-paywall__razer-sub {
    position: relative;
    display: flex;
    height: 48px;
    width: 100px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

@media (min-width: 768px) {
    .gp-checkout-paywall__razer-sub {
        height: 110px;
        width: 110px;
        padding: 20px;
    }
}

.gp-checkout-paywall__razer-sub {
    border-radius: 10px;
    border: 1px solid #ededed;
    background: #fff;
    cursor: pointer;
    box-sizing: border-box;
}

.gp-checkout-paywall__razer-sub--selected {
    border-color: #1caee7;
    border-width: 2px;
    box-shadow: 0 4px 4px rgba(51, 51, 51, 0.12);
}

.gp-checkout-paywall__razer-sub-art {
    display: block;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-checkout-paywall__razer-sub-art--wallet {
    height: 25px;
    width: 56px;
}

@media (min-width: 768px) {
    .gp-checkout-paywall__razer-sub-art--wallet {
        height: 33px;
        width: 75px;
    }
}

.gp-checkout-paywall__razer-sub-art--true {
    height: 22px;
    width: 72px;
}

@media (min-width: 768px) {
    .gp-checkout-paywall__razer-sub-art--true {
        height: 25px;
        width: 86px;
    }
}

.gp-checkout-paywall__razer-sub-art--line {
    height: 20px;
    width: 69px;
}

@media (min-width: 768px) {
    .gp-checkout-paywall__razer-sub-art--line {
        height: 24px;
        width: 83px;
    }
}

.gp-checkout-paywall__razer-sub-art--shopee {
    height: 22px;
    width: 51px;
}

@media (min-width: 768px) {
    .gp-checkout-paywall__razer-sub-art--shopee {
        height: 26px;
        width: 61px;
    }
}

.gp-checkout-paywall__razer-sub-art--qr {
    height: 26px;
    width: 35px;
}

@media (min-width: 768px) {
    .gp-checkout-paywall__razer-sub-art--qr {
        height: 30px;
        width: 40px;
    }
}

.gp-checkout-paywall__razer-sub-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.gp-checkout-paywall__razer-sub-qr-label {
    margin: 0px;
    display: none;
    white-space: nowrap;
    text-align: center;
    font-size: 12px;
    line-height: 12px;
}

@media (min-width: 768px) {
    .gp-checkout-paywall__razer-sub-qr-label {
        display: block;
    }
}

.gp-checkout-paywall__razer-sub-qr-label {
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    color: #243b53;
}

.gp-checkout-paywall__razer-sub-bank {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

@media (min-width: 768px) {
    .gp-checkout-paywall__razer-sub-bank {
        gap: 10px;
    }
}

.gp-checkout-paywall__razer-sub-art--bank {
    height: 1.5rem;
    width: 1.5rem;
}

@media (min-width: 768px) {
    .gp-checkout-paywall__razer-sub-art--bank {
        height: 2.5rem;
        width: 2.5rem;
    }
}

.gp-checkout-paywall__razer-sub-bank-label {
    margin: 0px;
    white-space: nowrap;
    text-align: center;
    font-size: 8px;
    line-height: 8px;
}

@media (min-width: 768px) {
    .gp-checkout-paywall__razer-sub-bank-label {
        font-size: 12px;
        line-height: 12px;
    }
}

.gp-checkout-paywall__razer-sub-bank-label {
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    color: #627d98;
}

.gp-checkout-paywall__email {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
}

@media (min-width: 768px) {
    .gp-checkout-paywall__email {
        gap: 16px;
        padding: 15px;
    }
}

.gp-checkout-paywall__email {
    margin: 20px 10px;
    min-height: 60px;
    border-radius: 10px;
    border: 1px solid #ededed;
    background: #fff;
    box-sizing: border-box;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-checkout-paywall__email {
        margin: 20px 40px 30px;
    }
}

.gp-checkout-paywall__email-label {
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: 1.25;
    color: #020e1f;
    word-break: break-all;
    white-space: nowrap;
    flex-shrink: 1;
}

.gp-checkout-paywall__email-divider {
    width: 1px;
    height: 16px;
    background: #d9d9d9;
    flex-shrink: 0;
}

.gp-checkout-paywall__email-row {
    display: flex;
    align-items: center;
    min-width: 0;
    flex-grow: 1;
}

.gp-checkout-paywall__email-input {
    flex: 1;
    min-width: 0;
    height: auto;
    line-height: 1.25;
    border: none;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    color: #020e1f;
    background: transparent;
    outline: none;
}

    .gp-checkout-paywall__email-input::-moz-placeholder {
        color: #cecece;
    }

    .gp-checkout-paywall__email-input::placeholder {
        color: #cecece;
    }

/* Paywall inside mobile fixed checkout footer — scoped by .gp-checkout-paywall--checkout-fixed */

.gp-cart-footer.gp-cart-footer--checkout {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.gp-cart-footer--checkout .gp-checkout-paywall.gp-checkout-paywall--checkout-fixed {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px 10px 0 0;
    border-bottom: none;
}

@media (min-width: 1024px) and (orientation: landscape) {
    /* Main flow paywall is visible here; hide duplicate in fixed footer */

    .gp-cart-footer--checkout .gp-checkout-paywall--checkout-fixed {
        display: none;
    }
}

@media (min-width: 1280px) and (orientation: landscape) {
    .gp-cart-footer--checkout .gp-checkout-paywall--checkout-fixed {
        display: none;
    }
}

.gp-cart-footer--checkout .gp-checkout-paywall--checkout-fixed .gp-checkout-paywall__head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 50px;
    padding: 13px 20px;
}

.gp-cart-footer--checkout .gp-checkout-paywall--checkout-fixed .gp-checkout-paywall__title {
    font-size: 16px;
}

.gp-cart-footer--checkout .gp-checkout-paywall--checkout-fixed .gp-checkout-paywall__brand-line {
    font-size: 14px;
}

.gp-cart-footer--checkout .gp-checkout-paywall--checkout-fixed .gp-checkout-paywall__head-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
}

.gp-cart-footer--checkout .gp-checkout-paywall--checkout-fixed .gp-checkout-paywall__head-toggle-caret {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    background: url("../images/icon-fixed-footer-caret-down.svg") center / contain no-repeat;
    transition: transform 0.2s ease;
}

.gp-cart-footer--checkout .gp-checkout-paywall--checkout-fixed.is-collapsed .gp-checkout-paywall__head-toggle-caret {
    transform: none;
}

.gp-cart-footer--checkout .gp-checkout-paywall--checkout-fixed:not(.is-collapsed) .gp-checkout-paywall__head-toggle-caret {
    transform: scaleY(-1);
}

.gp-cart-footer--checkout .gp-checkout-paywall--checkout-fixed .gp-checkout-paywall__panel-body {
    border-top: 1px solid #eaf0fa;
    padding-bottom: 10px;
}

.gp-cart-footer--checkout .gp-checkout-paywall--checkout-fixed.is-collapsed .gp-checkout-paywall__panel-body {
    display: none;
}

.gp-cart-footer--checkout .gp-checkout-paywall--checkout-fixed .gp-checkout-paywall__region {
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: calc(100% - 40px);
    margin: 15px 20px 0;
}

.gp-cart-footer--checkout .gp-checkout-paywall--checkout-fixed .gp-checkout-paywall__region-label {
    font-size: 14px;
}

.gp-cart-footer--checkout .gp-checkout-paywall--checkout-fixed .gp-checkout-paywall__region-divider {
    height: 14px;
}

.gp-cart-footer--checkout .gp-checkout-paywall--checkout-fixed .gp-checkout-paywall__region-options {
    z-index: 40;
}

.gp-cart-footer--checkout .gp-checkout-paywall--checkout-fixed .gp-checkout-paywall__methods {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px 20px 0;
}

.gp-cart-footer--checkout .gp-checkout-paywall--checkout-fixed .gp-checkout-paywall__method {
    min-height: 60px;
    padding: 10px 8px;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-cart-footer--checkout .gp-checkout-paywall--checkout-fixed .gp-checkout-paywall__method {
        min-height: 60px;
        padding: 10px 16px;
    }
}

.gp-cart-footer--checkout .gp-checkout-paywall--checkout-fixed .gp-checkout-paywall__method-name {
    font-size: 14px;
}

.gp-cart-footer--checkout .gp-checkout-paywall--checkout-fixed .gp-checkout-paywall__method-sub {
    font-size: 12px;
}

.gp-cart-footer--checkout .gp-checkout-paywall--checkout-fixed .gp-checkout-paywall__email {
    gap: 12px;
    margin: 15px 20px 0;
}

.gp-cart-footer--checkout .gp-checkout-paywall--checkout-fixed .gp-checkout-paywall__email-label {
    font-size: 14px;
}

.gp-cart-footer--checkout .gp-checkout-paywall--checkout-fixed .gp-checkout-paywall__email-divider {
    height: 14px;
}

.gp-cart-footer--checkout .gp-checkout-paywall--checkout-fixed .gp-checkout-paywall__email-row {
    flex: 1 1 auto;
    min-height: 0;
}

.gp-cart-footer--checkout .gp-checkout-paywall--checkout-fixed .gp-checkout-paywall__email-input {
    font-size: 14px;
}

.gp-cart-footer--checkout .gp-cart-footer__panel--detail {
    border: none;
    background: transparent;
}

.gp-cart-footer--checkout .gp-cart-footer__checkout-select {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 10px 20px;
    padding: 10px 20px;
    min-height: 40px;
    border-radius: 999px;
    border: 1px solid #3db9eb;
    background-image: linear-gradient(136.32deg, #52ceff 5.7%, #1caee7 54.37%);
    box-shadow: 0 0 5px rgba(58, 150, 255, 0.57);
    text-decoration: none;
}

    .gp-cart-footer--checkout .gp-cart-footer__checkout-select:focus-visible {
        outline: 2px solid #52ceff;
        outline-offset: 2px;
    }

.gp-cart-footer--checkout .gp-cart-footer__checkout-select-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: normal;
    color: #020e1f;
    text-align: center;
}

.gp-cart-footer--checkout .gp-cart-footer__checkout-select-caret {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    background: url("../images/icon-fixed-footer-caret-down-dark.svg") center / contain no-repeat;
}

.gp-cart-footer__bottom-wrap--checkout {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 20px;
}

.gp-cart-footer--checkout .gp-cart-footer__summary--detail {
    padding: 10px 0;
}

.gp-cart-footer--checkout .gp-cart-footer__summary-title {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
}

.gp-cart-footer__checkout-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px 0;
    width: 100%;
    box-sizing: border-box;
}

.gp-cart-footer__checkout-upper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.gp-cart-footer__checkout-row {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
}

@media (min-width: 768px) {
    .gp-cart-footer__checkout-row {
        flex-direction: row;
    }
}

.gp-cart-footer__checkout-row {
    gap: 10px 20px;
}

.gp-cart-footer__actions--checkout {
    flex: 0 0 auto;
    padding: 0;
    min-width: 0;
}

.gp-cart-footer--checkout .gp-cart-footer__total {
    display: flex;
    min-height: 50px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .gp-cart-footer--checkout .gp-cart-footer__total {
        flex-direction: column;
    }
}

.gp-cart-footer--checkout .gp-checkout-footer-actions {
    display: flex;
    width: 100%;
    min-width: 0px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    padding: 0px;
}

@media (min-width: 768px) {
    .gp-cart-footer--checkout .gp-checkout-footer-actions {
        justify-content: flex-end;
    }
}

.gp-cart-footer--checkout .gp-checkout-footer-actions__primary {
    flex-grow: 1;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

    .gp-cart-footer--checkout .gp-checkout-footer-actions__primary:hover {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

    .gp-cart-footer--checkout .gp-checkout-footer-actions__primary:active {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

@media (min-width: 768px) {
    .gp-cart-footer--checkout .gp-checkout-footer-actions__primary {
        flex-grow: 0;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

.gp-cart-footer--checkout .gp-checkout-footer-actions__primary {
    width: -moz-fit-content;
    width: fit-content;
    min-width: 100px;
    max-width: 100%;
    height: 50px;
    min-height: 50px;
    border: 1px solid #3db9eb;
    border-radius: 10px;
    box-shadow: 0 6px 19.7px rgba(11, 77, 160, 0.5);
    cursor: pointer;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #020e1f;
    background-image: linear-gradient(107.33deg, #52ceff 5.7%, #1caee7 54.37%);
}

.gp-cart-footer--checkout .gp-checkout-footer-actions__secondary {
    flex-grow: 1;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

    .gp-cart-footer--checkout .gp-checkout-footer-actions__secondary:hover {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

    .gp-cart-footer--checkout .gp-checkout-footer-actions__secondary:active {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

@media (min-width: 768px) {
    .gp-cart-footer--checkout .gp-checkout-footer-actions__secondary {
        flex-grow: 0;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

.gp-cart-footer--checkout .gp-checkout-footer-actions__secondary {
    width: -moz-fit-content;
    width: fit-content;
    min-width: 140px;
    max-width: 100%;
    height: 50px;
    min-height: 50px;
    border-radius: 10px;
    border: 1px solid #486581;
    cursor: pointer;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #829ab1;
    background: transparent;
}

.gp-cart-footer__checkout-warning {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #fff;
}

.gp-cart-footer__checkout-warning__date {
    color: #facc15;
}

.gp-cart-footer__checkout-legal {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: normal;
    color: #829ab1;
}

.gp-cart-footer__checkout-legal__link {
    color: #1caee7;
    text-decoration: underline;
}

/* Cart consent modal (Figma: node 5364:44516 "Popup Consent - TH") */

.gp-cart-consent-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 73;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-cart-consent-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-cart-consent-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.7);
    cursor: default;
    pointer-events: auto;
}

.gp-cart-consent-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 865px;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-cart-consent-modal__dialog {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    background-color: #1a1b1e;
    border: 1px solid #243b53;
    border-radius: 10px;
    padding: 26px;
    gap: 20px;
    box-sizing: border-box;
}

.gp-cart-consent-modal__head {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.gp-cart-consent-modal__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 26px;
    line-height: 24px;
    color: #ffffff;
}

.gp-cart-consent-modal__intro {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.gp-cart-consent-modal__intro-text {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #ffffff;
}

.gp-cart-consent-modal__updated {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #627d98;
}

.gp-cart-consent-modal__main {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex-direction: column;
    gap: 30px;
}

.gp-cart-consent-modal__terms-box {
    width: 100%;
    flex-shrink: 0;
    border: 1px solid #243b53;
    border-radius: 10px;
    background-color: #27292f;
    overflow: hidden;
}

.gp-cart-consent-modal__terms-scroll {
    max-height: min(300px, 35vh);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 30px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #bcccdc #3d4350;
}

    .gp-cart-consent-modal__terms-scroll::-webkit-scrollbar {
        width: 8px;
    }

    .gp-cart-consent-modal__terms-scroll::-webkit-scrollbar-track {
        background: #3d4350;
        border-radius: 2px;
    }

    .gp-cart-consent-modal__terms-scroll::-webkit-scrollbar-thumb {
        background: #bcccdc;
        border-radius: 2px;
    }

.gp-cart-consent-modal__terms-content {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    color: #ffffff;
}

.gp-cart-consent-modal__terms-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: gp-cart-consent-terms;
}

.gp-cart-consent-modal__terms-item {
    counter-increment: gp-cart-consent-terms;
}

    .gp-cart-consent-modal__terms-item + .gp-cart-consent-modal__terms-item {
        margin-top: 0;
    }

.gp-cart-consent-modal__terms-heading {
    display: block;
    font-weight: 700;
}

    .gp-cart-consent-modal__terms-heading::before {
        content: counter(gp-cart-consent-terms) ". ";
    }

.gp-cart-consent-modal__terms-para {
    margin: 0;
    padding-left: 27px;
}

.gp-cart-consent-modal__terms-strong {
    font-weight: 700;
}

.gp-cart-consent-modal__link {
    color: #1caee7;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.gp-cart-consent-modal__consent {
    display: flex;
    width: 100%;
    cursor: pointer;
    align-items: flex-start;
    gap: 10px;
}

.gp-cart-consent-modal__checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.gp-cart-consent-modal__checkbox-ui {
    display: block;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    margin-top: 0;
    border-radius: 3px;
    border: 1px solid #1caee7;
    box-sizing: border-box;
    background: transparent;
}

.gp-cart-consent-modal__checkbox:checked + .gp-cart-consent-modal__checkbox-ui {
    background: #1caee7 url("../images/icon-cart-check.svg") center / 20px 20px no-repeat;
}

.gp-cart-consent-modal__consent-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
}

.gp-cart-consent-modal__actions {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    gap: 20px;
}

.gp-cart-consent-modal__confirm,
.gp-cart-consent-modal__cancel {
    display: inline-flex;
    flex: 1 1 0%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    height: 60px;
    border-radius: 10px;
    padding: 10px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    white-space: nowrap;
}

.gp-cart-consent-modal__confirm {
    background-color: #1caee7;
    color: #020e1f;
    font-weight: 500;
}

    .gp-cart-consent-modal__confirm:not(:disabled):not(.gp-cart-consent-modal__confirm--disabled):hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

    .gp-cart-consent-modal__confirm--disabled,
    .gp-cart-consent-modal__confirm:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.gp-cart-consent-modal__cancel {
    background-color: transparent;
    border: 1px solid #486581;
    color: #829ab1;
    font-weight: 400;
}

    .gp-cart-consent-modal__cancel:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

body.gp-cart-consent-modal-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .gp-cart-consent-modal__dialog {
        padding: 30px 20px;
        gap: 20px;
    }

    .gp-cart-consent-modal__title {
        font-size: 22px;
        line-height: 1.2;
    }

    .gp-cart-consent-modal__intro-text,
    .gp-cart-consent-modal__updated,
    .gp-cart-consent-modal__terms-content,
    .gp-cart-consent-modal__consent-text {
        font-size: 16px;
    }

    .gp-cart-consent-modal__terms-scroll {
        padding: 20px;
        max-height: min(320px, 40vh);
    }

    .gp-cart-consent-modal__actions {
        flex-direction: column-reverse;
        gap: 10px;
    }

    .gp-cart-consent-modal__confirm,
    .gp-cart-consent-modal__cancel {
        width: 100%;
        flex: none;
    }
}

/* Cart cancel modal (Figma: node 5212-70291 "Popup กดยกเลิกคำสั่งซื้อ") */

.gp-cart-cancel-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 74;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-cart-cancel-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-cart-cancel-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.7);
    cursor: default;
    pointer-events: auto;
}

.gp-cart-cancel-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 746px;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-cart-cancel-modal__dialog {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    background-color: #1a1b1e;
    border: 1px solid #243b53;
    border-radius: 10px;
    padding: 40px;
    gap: 20px;
    box-sizing: border-box;
}

.gp-cart-cancel-modal__head {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.gp-cart-cancel-modal__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
}

    .gp-cart-cancel-modal__icon img {
        width: 50px;
        height: 50px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-cart-cancel-modal__text {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.gp-cart-cancel-modal__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    color: #ffffff;
}

.gp-cart-cancel-modal__message {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #ffffff;
}

.gp-cart-cancel-modal__actions {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
}

.gp-cart-cancel-modal__cancel,
.gp-cart-cancel-modal__confirm {
    display: inline-flex;
    min-width: 0px;
    flex: 1 1 0%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    height: 60px;
    border-radius: 10px;
    padding: 10px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    white-space: nowrap;
}

.gp-cart-cancel-modal__cancel {
    background-color: transparent;
    border: 1px solid #486581;
    color: #829ab1;
    font-weight: 400;
}

    .gp-cart-cancel-modal__cancel:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-cart-cancel-modal__confirm {
    background-color: #1caee7;
    color: #020e1f;
    font-weight: 500;
}

    .gp-cart-cancel-modal__confirm:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

body.gp-cart-cancel-modal-open,
body.gp-cart-pending-cancel-modal-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .gp-cart-cancel-modal__dialog {
        padding: 30px 20px;
    }

    .gp-cart-cancel-modal__actions {
        flex-direction: column-reverse;
    }

    .gp-cart-cancel-modal__cancel,
    .gp-cart-cancel-modal__confirm {
        width: 100%;
        flex: none;
        white-space: normal;
        text-align: center;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Cart pending pay modal (Figma: node 5540:47395 "Popup ให้ตรวจสอบระวังหักเงินซ้ำ") */

.gp-cart-pending-pay-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 74;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-cart-pending-pay-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-cart-pending-pay-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.7);
    cursor: default;
    pointer-events: auto;
}

.gp-cart-pending-pay-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 746px;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-cart-pending-pay-modal__dialog {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    background-color: #1a1b1e;
    border: 1px solid #243b53;
    border-radius: 10px;
    padding: 40px;
    gap: 30px;
    box-sizing: border-box;
}

.gp-cart-pending-pay-modal__head {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.gp-cart-pending-pay-modal__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
}

    .gp-cart-pending-pay-modal__icon img {
        width: 50px;
        height: 50px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-cart-pending-pay-modal__text {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.gp-cart-pending-pay-modal__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    color: #ffffff;
}

.gp-cart-pending-pay-modal__message {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #ffffff;
}

.gp-cart-pending-pay-modal__highlight {
    color: #ffde2d;
}

.gp-cart-pending-pay-modal__actions {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
}

.gp-cart-pending-pay-modal__cancel,
.gp-cart-pending-pay-modal__confirm {
    display: inline-flex;
    min-width: 0px;
    flex: 1 1 0%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    height: 60px;
    border-radius: 10px;
    padding: 10px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    white-space: nowrap;
}

.gp-cart-pending-pay-modal__cancel {
    background-color: transparent;
    border: 1px solid #486581;
    color: #829ab1;
    font-weight: 400;
}

    .gp-cart-pending-pay-modal__cancel:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-cart-pending-pay-modal__confirm {
    background-color: #1caee7;
    color: #020e1f;
    font-weight: 500;
}

    .gp-cart-pending-pay-modal__confirm:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

body.gp-cart-pending-pay-modal-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .gp-cart-pending-pay-modal__dialog {
        padding: 30px 20px;
    }

    .gp-cart-pending-pay-modal__actions {
        flex-direction: column-reverse;
    }

    .gp-cart-pending-pay-modal__cancel,
    .gp-cart-pending-pay-modal__confirm {
        width: 100%;
        flex: none;
        white-space: normal;
        text-align: center;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Cart pending unpaid-order modal (Figma: node 5549:46748 "Popup รายการค้างชำระ") */

.gp-cart-pending-order-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 74;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-cart-pending-order-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-cart-pending-order-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.7);
    cursor: default;
    pointer-events: auto;
}

.gp-cart-pending-order-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 746px;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-cart-pending-order-modal__dialog {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    background-color: #1a1b1e;
    border: 1px solid #243b53;
    border-radius: 10px;
    padding: 40px;
    gap: 30px;
    box-sizing: border-box;
}

.gp-cart-pending-order-modal__head {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.gp-cart-pending-order-modal__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
}

    .gp-cart-pending-order-modal__icon img {
        width: 50px;
        height: 50px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-cart-pending-order-modal__text {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.gp-cart-pending-order-modal__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    color: #ffffff;
}

.gp-cart-pending-order-modal__message {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: #ffffff;
}

.gp-cart-pending-order-modal__link {
    color: #3db9eb;
    text-decoration: underline;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none;
}

    .gp-cart-pending-order-modal__link:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-cart-pending-order-modal__actions {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
}

.gp-cart-pending-order-modal__cancel,
.gp-cart-pending-order-modal__confirm {
    display: inline-flex;
    min-width: 0px;
    flex: 1 1 0%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    height: 60px;
    border-radius: 10px;
    padding: 10px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    white-space: nowrap;
    text-decoration: none;
    box-sizing: border-box;
}

.gp-cart-pending-order-modal__cancel {
    background-color: transparent;
    border: 1px solid #486581;
    color: #829ab1;
    font-weight: 400;
}

    .gp-cart-pending-order-modal__cancel:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-cart-pending-order-modal__confirm {
    background-color: #1caee7;
    color: #020e1f;
    font-weight: 500;
}

    .gp-cart-pending-order-modal__confirm:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

body.gp-cart-pending-order-modal-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .gp-cart-pending-order-modal__dialog {
        padding: 30px 20px;
    }

    .gp-cart-pending-order-modal__actions {
        flex-direction: column-reverse;
    }

    .gp-cart-pending-order-modal__cancel,
    .gp-cart-pending-order-modal__confirm {
        width: 100%;
        flex: none;
        white-space: normal;
        text-align: center;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Universal popup (Figma: node 5474:100043 "Universal-popup") */

.gp-universal-popup {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 77;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-universal-popup--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-universal-popup__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.7);
    cursor: default;
    pointer-events: auto;
}

.gp-universal-popup__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 667px;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-universal-popup__dialog {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    background-color: #1a1b1e;
    border-radius: 20px;
    padding-bottom: 40px;
    box-sizing: border-box;
}

.gp-universal-popup__header {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 16px;
    padding-right: 16px;
}

.gp-universal-popup__close {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    width: 16px;
    height: 16px;
}

    .gp-universal-popup__close img {
        height: auto;
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .gp-universal-popup__close:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-universal-popup__head {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding-left: 60px;
    padding-right: 60px;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
}

.gp-universal-popup__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
}

    .gp-universal-popup__icon img {
        width: 60px;
        height: 60px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-universal-popup__text {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.gp-universal-popup__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: normal;
    color: #ffffff;
}

.gp-universal-popup__message {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: #ffffff;
    word-break: break-word;
}

.gp-universal-popup__actions {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}

.gp-universal-popup__dismiss {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    width: 180px;
    height: 60px;
    border: 1px solid #486581;
    border-radius: 10px;
    padding: 10px 80px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #829ab1;
    white-space: nowrap;
}

    .gp-universal-popup__dismiss:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

body.gp-universal-popup-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .gp-universal-popup__head {
        padding-left: 14px;
        padding-right: 14px;
    }

    .gp-universal-popup__dismiss {
        width: 100%;
        max-width: 180px;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Cart payment confirm modal (Figma: node 5208:70290 "Popup Confirm Payment") */

.gp-cart-payment-confirm-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 76;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-cart-payment-confirm-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-cart-payment-confirm-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.7);
    cursor: default;
    pointer-events: auto;
}

.gp-cart-payment-confirm-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 596px;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-cart-payment-confirm-modal__dialog {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    background-color: #1a1b1e;
    border: 1px solid #243b53;
    border-radius: 10px;
    padding: 30px;
    gap: 20px;
    box-sizing: border-box;
}

.gp-cart-payment-confirm-modal__head {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
}

.gp-cart-payment-confirm-modal__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    color: #ffffff;
}

.gp-cart-payment-confirm-modal__subtitle {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
}

.gp-cart-payment-confirm-modal__divider {
    height: 1px;
    width: 100%;
    flex-shrink: 0;
    --tw-bg-opacity: 1;
    background-color: rgb(51 78 104 / var(--tw-bg-opacity, 1));
    opacity: 0.9;
}

.gp-cart-payment-confirm-modal__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    width: 100%;
}

.gp-cart-payment-confirm-modal__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
}

.gp-cart-payment-confirm-modal__row-label {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    color: #829ab1;
}

.gp-cart-payment-confirm-modal__row-value {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    color: #ffffff;
}

.gp-cart-payment-confirm-modal__row--points .gp-cart-payment-confirm-modal__row-value {
    color: #1caee7;
}

    .gp-cart-payment-confirm-modal__row--points .gp-cart-payment-confirm-modal__row-value span {
        color: #1caee7;
    }

.gp-cart-payment-confirm-modal__payment {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.gp-cart-payment-confirm-modal__payment-label {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 13.248px;
    color: #ffffff;
}

.gp-cart-payment-confirm-modal__payment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 35px;
}

.gp-cart-payment-confirm-modal__payment-name {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 13.248px;
    color: #ffffff;
}

.gp-cart-payment-confirm-modal__payment-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 84px;
    height: 35px;
    border-radius: 5px;
    overflow: hidden;
}

    .gp-cart-payment-confirm-modal__payment-logo img {
        display: block;
        width: 100%;
        height: 100%;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-cart-payment-confirm-modal__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 15px 0;
}

.gp-cart-payment-confirm-modal__total-label {
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 13.248px;
    color: #ffffff;
}

.gp-cart-payment-confirm-modal__total-value {
    flex: 1 0 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 13.248px;
    color: #1caee7;
    text-align: right;
}

.gp-cart-payment-confirm-modal__actions {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
}

.gp-cart-payment-confirm-modal__cancel,
.gp-cart-payment-confirm-modal__confirm {
    display: inline-flex;
    min-width: 0px;
    flex: 1 1 0%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    height: 60px;
    border-radius: 10px;
    padding: 10px 20px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    white-space: nowrap;
}

.gp-cart-payment-confirm-modal__cancel {
    background-color: transparent;
    border: 1px solid #486581;
    color: #829ab1;
    font-weight: 400;
}

    .gp-cart-payment-confirm-modal__cancel:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-cart-payment-confirm-modal__confirm {
    background-color: #1caee7;
    color: #020e1f;
    font-weight: 500;
}

    .gp-cart-payment-confirm-modal__confirm:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-cart-payment-confirm-modal__legal {
    font-size: 14px;
}

@media (min-width: 768px) {
    .gp-cart-payment-confirm-modal__legal {
        font-size: 12px;
    }
}

.gp-cart-payment-confirm-modal__legal {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    line-height: normal;
    color: #829ab1;
    text-align: center;
}

.gp-cart-payment-confirm-modal__legal-link {
    color: #1caee7;
    text-decoration: underline;
    text-underline-offset: 2px;
}

body.gp-cart-payment-confirm-modal-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .gp-cart-payment-confirm-modal__dialog {
        padding: 30px 20px;
    }

    .gp-cart-payment-confirm-modal__actions {
        flex-direction: column-reverse;
    }

    .gp-cart-payment-confirm-modal__cancel,
    .gp-cart-payment-confirm-modal__confirm {
        width: 100%;
        flex: none;
        white-space: normal;
        text-align: center;
        padding-left: 16px;
        padding-right: 16px;
    }
}

.gp-cart-item-remove-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 75;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-cart-item-remove-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-cart-item-remove-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.7);
    cursor: default;
    pointer-events: auto;
}

.gp-cart-item-remove-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 746px;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-cart-item-remove-modal__dialog {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    background-color: #1a1b1e;
    border: 1px solid #243b53;
    border-radius: 10px;
    padding: 40px;
    gap: 20px;
    box-sizing: border-box;
}

.gp-cart-item-remove-modal__head {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.gp-cart-item-remove-modal__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
}

    .gp-cart-item-remove-modal__icon img {
        width: 50px;
        height: 50px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-cart-item-remove-modal__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    color: #ffffff;
}

.gp-cart-item-remove-modal__pack {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    background-color: #27292f;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
}

.gp-cart-item-remove-modal__pack-row {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 20px;
}

.gp-cart-item-remove-modal__pack-thumb-wrap {
    position: relative;
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    border-radius: 6px;
    overflow: hidden;
}

.gp-cart-item-remove-modal__pack-thumb {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
}

.gp-cart-item-remove-modal__pack-flash {
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px 10px;
    border-bottom-right-radius: 5px;
    background: #facc15;
    font-family: "Google Sans", sans-serif;
    font-size: 12px;
    color: #020e1f;
}

    .gp-cart-item-remove-modal__pack-flash[hidden] {
        display: none;
    }

.gp-cart-item-remove-modal__pack-info {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    align-self: stretch;
    gap: 5px;
}

.gp-cart-item-remove-modal__pack-meta {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-cart-item-remove-modal__pack-name {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #f0f4f8;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gp-cart-item-remove-modal__pack-limit {
    display: inline-flex;
    width: -moz-fit-content;
    width: fit-content;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 0.562px solid #685233;
    background: rgba(231, 167, 28, 0.06);
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    color: #fff;
}

.gp-cart-item-remove-modal__pack-limit-num {
    padding-left: 7px;
    border-left: 1px solid #5f4e37;
    color: #ffde2d;
    font-weight: 500;
    line-height: 15px;
}

.gp-cart-item-remove-modal__pack-price-row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    overflow: hidden;
    border-radius: 4.499px;
}

.gp-cart-item-remove-modal__pack-prices {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.gp-cart-item-remove-modal__pack-price-now {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 15.745px;
    color: #facc15;
}

.gp-cart-item-remove-modal__pack-price-was {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 13.496px;
    color: #829ab1;
    text-decoration: line-through;
}

    .gp-cart-item-remove-modal__pack-price-was[hidden] {
        display: none;
    }

.gp-cart-item-remove-modal__pack-disc {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 10.909px;
    border-radius: 5.623px;
    border: 1.125px solid #ffde2d;
    background: #facc15;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 13.496px;
    color: #061221;
    min-width: 45px;
    box-sizing: border-box;
}

    .gp-cart-item-remove-modal__pack-disc[hidden] {
        display: none;
    }

.gp-cart-item-remove-modal__actions {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
}

.gp-cart-item-remove-modal__cancel,
.gp-cart-item-remove-modal__confirm {
    display: inline-flex;
    min-width: 0px;
    flex: 1 1 0%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    height: 60px;
    border-radius: 10px;
    padding: 10px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    white-space: nowrap;
}

.gp-cart-item-remove-modal__cancel {
    background-color: transparent;
    border: 1px solid #486581;
    color: #829ab1;
    font-weight: 400;
}

    .gp-cart-item-remove-modal__cancel:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-cart-item-remove-modal__confirm {
    background-color: #1caee7;
    color: #020e1f;
    font-weight: 500;
}

    .gp-cart-item-remove-modal__confirm:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

body.gp-cart-item-remove-modal-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .gp-cart-item-remove-modal__dialog {
        padding: 30px 20px;
    }

    .gp-cart-item-remove-modal__pack-row {
        flex-direction: column;
        align-items: center;
    }

    .gp-cart-item-remove-modal__pack-info {
        width: 100%;
    }

    .gp-cart-item-remove-modal__actions {
        flex-direction: column-reverse;
    }

    .gp-cart-item-remove-modal__cancel,
    .gp-cart-item-remove-modal__confirm {
        width: 100%;
        flex: none;
        white-space: normal;
        text-align: center;
        padding-left: 16px;
        padding-right: 16px;
    }
}

.gp-shop-game-select {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
    margin-bottom: 16px;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-shop-game-select {
        gap: 20px;
        margin-top: 0;
        margin-bottom: 24px;
    }
}

.gp-shop-game-select__head {
    display: flex;
    height: 27px;
    min-height: 27px;
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
}

.gp-shop-game-select__title-wrap {
    display: flex;
    min-height: 0px;
    min-width: 0px;
    flex: 1 1 0%;
    align-items: center;
    border-radius: 0.375rem;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}

.gp-shop-game-select__title {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 14px;
    color: #e3f6fc;
    text-transform: uppercase;
    margin: 0;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-shop-game-select__title-wrap {
        flex: none;
        flex: 0 0 auto;
        width: auto;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .gp-shop-game-select__title {
        font-size: 20px;
        line-height: 14px;
        color: #ffffff;
    }
}

.gp-shop-game-select__head-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 7px;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-shop-game-select__head-actions {
        display: none;
    }
}

.gp-shop-game-select__caret {
    height: 1.25rem;
    width: 1.25rem;
    flex-shrink: 0;
}

.gp-shop-game-select__caret--flip {
    transform: scaleX(-1);
}

.gp-shop-game-select__scroller {
    width: 100%;
    min-width: 0px;
    -webkit-overflow-scrolling: touch;
}

.gp-shop-game-select__list {
    display: flex;
    width: 100%;
    align-items: flex-start;
    padding: 0px;
    margin: 0;
    list-style: none;
    gap: 20px;
    min-height: 114px;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
}

    .gp-shop-game-select__list::-webkit-scrollbar {
        display: none;
    }

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-shop-game-select__list {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 30px;
        min-height: 177px;
        overflow: visible;
    }
}

.gp-shop-game-select__item {
    flex-shrink: 0;
    flex: 0 0 auto;
}

.gp-shop-game-select__option {
    display: flex;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    text-align: left;
    gap: 10px;
    width: 80px;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-shop-game-select__option {
        gap: 19.368px;
        width: 114.576px;
    }
}

.gp-shop-game-select__icon-ring {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border-radius: 12px;
    padding: 0;
    box-sizing: border-box;
}

.gp-shop-game-select__item--selected .gp-shop-game-select__icon-ring {
    border: 0.5px solid #243b53;
    background-image: radial-gradient( circle at 0 0, rgba(217, 217, 217, 0.2) 0%, rgba(217, 217, 217, 0.05) 70.328% );
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-shop-game-select__item--selected .gp-shop-game-select__icon-ring {
        border-radius: 15px;
    }
}

.gp-shop-game-select__icon {
    position: relative;
    display: block;
    overflow: hidden;
    width: 80px;
    height: 80px;
    border-radius: 10px;
}

    .gp-shop-game-select__icon img {
        pointer-events: none;
        height: 100%;
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

.gp-shop-game-select__item--selected .gp-shop-game-select__icon {
    border: 2px solid transparent;
    background: linear-gradient(#020e1f, #020e1f) padding-box, linear-gradient(135deg, #ff8bbf, #f488ff, #7ef359, #ffde2d, #1bb1e7) border-box;
    box-shadow: 0 13px 23.4px -8px rgba(28, 174, 231, 0.51);
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-shop-game-select__icon {
        width: 114.576px;
        height: 114.576px;
        border-radius: 14.322px;
    }

    .gp-shop-game-select__item--selected .gp-shop-game-select__icon {
        background: linear-gradient(#061221, #061221) padding-box, linear-gradient(135deg, #ff8bbf, #f488ff, #7ef359, #ffde2d, #1bb1e7) border-box;
        box-shadow: 0 18.619px 33.514px -11.458px rgba(28, 174, 231, 0.51);
    }
}

.gp-shop-game-select__icon--dimmed::after {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0px;
    border-radius: inherit;
    box-shadow: inset 0 0 10px 44px rgba(0, 0, 0, 0.25);
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-shop-game-select__icon--dimmed::after {
        box-shadow: inset 0 0 14.322px 63.017px rgba(0, 0, 0, 0.2);
    }
}

.gp-shop-game-select__label {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 12px;
    text-align: center;
    width: 100%;
}

.gp-shop-game-select__item--selected .gp-shop-game-select__label {
    color: #5fc4ee;
}

.gp-shop-game-select__item:not(.gp-shop-game-select__item--selected):not(.gp-shop-game-select__item--soon)
.gp-shop-game-select__label {
    font-weight: 400;
    color: #e3e3e3;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-shop-game-select__label {
        font-size: 16px;
        line-height: 17.186px;
    }

    .gp-shop-game-select__item--selected .gp-shop-game-select__label {
        font-weight: 700;
        color: #1caee7;
    }

    .gp-shop-game-select__item:not(.gp-shop-game-select__item--selected):not(.gp-shop-game-select__item--soon)
    .gp-shop-game-select__label {
        font-weight: 400;
    }
}

.gp-shop-game-select__label--multiline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    font-weight: 400;
    color: #e3e3e3;
}

.gp-shop-game-select__label-line {
    display: block;
    line-height: 12px;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-shop-game-select__label--multiline .gp-shop-game-select__label-line {
        line-height: 22px;
    }
}

.gp-shop-game-select__soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 80px;
    pointer-events: none;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-shop-game-select__soon {
        gap: 15px;
        width: 114.576px;
    }
}

.gp-shop-game-select__soon-inner {
    display: flex;
    height: 5rem;
    width: 5rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px;
    background-color: #05244d;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-shop-game-select__soon-inner {
        height: auto;
        width: auto;
        width: 114.58px;
        height: 114.58px;
        border-radius: 15px;
    }
}

.gp-shop-game-select__soon-logo {
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.gp-shop-game-select__label--soon {
    font-weight: 400;
    font-size: 10px;
    line-height: 12px;
    color: #e3e3e3;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-shop-game-select__label--soon {
        font-size: 16px;
        line-height: 22px;
    }
}

/* Activity page panel variant (Figma 3522:23394) */

.gp-shop-game-select--panel {
    margin-top: 0;
    margin-bottom: 10px;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-shop-game-select--panel {
        margin-bottom: 10px;
    }
}

.gp-shop-game-select__panel {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    border-radius: 15px;
    background: radial-gradient(136% 100% at 0% 0%, rgba(217, 217, 217, 0.2) 0%, rgba(217, 217, 217, 0.05) 70%);
}

.gp-shop-game-select__toggle {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0px;
    width: 27px;
    height: 27px;
    border-radius: 99px;
    border: 1px solid #093f85;
    background-color: #073269;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-shop-game-select__toggle {
        display: inline-flex;
    }
}

.gp-shop-game-select__toggle-icon {
    display: block;
    width: 14px;
    height: 14px;
    transform: rotate(0deg);
}

.gp-shop-game-select--collapsed .gp-shop-game-select__toggle-icon {
    transform: rotate(180deg);
}

.gp-shop-game-select--collapsed .gp-shop-game-select__scroller {
    display: none;
}

.gp-shop-game-select__item--maintenance .gp-shop-game-select__option {
    pointer-events: none;
    cursor: default;
}

.gp-shop-game-select__badge {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    display: inline-flex;
    --tw-translate-x: -50%;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    height: 24px;
    min-width: 84px;
    padding: 0 8px;
    border-radius: 99px;
    border: 1px solid #ffc300;
    background-color: rgba(26, 16, 0, 0.8);
    box-shadow: 0 3px 6.7px rgba(0, 0, 0, 0.54);
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 17.186px;
    color: #ffc300;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-shop-game-select__badge {
        font-size: 14px;
    }
}

/* Legacy alias — platinum theme for older tier-noti markup */

.gp-shop-tier-noti {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    overflow: hidden;
    gap: 12px;
    margin: 0 0 10px;
    padding: 10px 15px;
    border: 1px solid #007c13;
    border-radius: 10px;
    box-shadow: 0 10px 13.6px rgba(85, 255, 23, 0.18);
    box-sizing: border-box;
}

    .gp-shop-tier-noti::before {
        content: "";
        pointer-events: none;
        position: absolute;
        inset: 0px;
        border-radius: inherit;
        background: rgba(39, 200, 64, 0.3);
    }

    .gp-shop-tier-noti::after {
        content: "";
        pointer-events: none;
        position: absolute;
        inset: 0px;
        border-radius: inherit;
        box-shadow: inset 0 0 22.3px rgba(118, 255, 76, 0.58);
    }

.gp-shop-tier-noti--hidden {
    display: none;
}

.gp-shop-tier-noti__message {
    position: relative;
    z-index: 1;
    margin: 0px;
    min-width: 0px;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #ffffff;
}

.gp-shop-tier-noti__highlight {
    font-weight: 700;
    color: #facc15;
}

.gp-shop-tier-noti__body {
    font-weight: 400;
    color: #ffffff;
}

.gp-shop-tier-noti__actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

@media (min-width: 1024px) {
    .gp-shop-tier-noti__actions {
        flex-shrink: 0;
        justify-content: flex-end;
    }
}

.gp-shop-tier-noti__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration-line: none;
    gap: 10px;
    height: 33px;
    padding: 0 15px;
    border: 1px solid #58d46d;
    border-radius: 99px;
    background: rgba(19, 123, 47, 0.2);
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: #ffffff;
    cursor: pointer;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

    .gp-shop-tier-noti__cta:hover {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

    .gp-shop-tier-noti__cta:active {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-shop-tier-noti__cta-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.gp-shop-tier-noti__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    padding: 0 8px;
    border: 1px solid #58d46d;
    border-radius: 99px;
    background: transparent;
    cursor: pointer;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

    .gp-shop-tier-noti__close:hover {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

    .gp-shop-tier-noti__close:active {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

    .gp-shop-tier-noti__close img {
        width: 24px;
        height: 24px;
        -o-object-fit: contain;
        object-fit: contain;
    }

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-shop-tier-noti {
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 15px;
        margin: 0 0 10px;
        padding: 15px 20px;
        border-radius: 20px;
    }

    .gp-shop-tier-noti__message {
        font-size: 16px;
        white-space: nowrap;
    }

    .gp-shop-tier-noti__cta {
        font-size: 16px;
    }
}

.gp-shop-select {
    display: flex;
    width: 100%;
    flex-direction: row;
    gap: 12px;
    margin-top: 4px;
    margin-bottom: 16px;
}

.gp-shop-balance {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
    padding: 16px;
    border-radius: 20px;
    background: radial-gradient(120% 140% at 0% 0%, rgba(217, 217, 217, 0.2) 0%, rgba(217, 217, 217, 0.05) 70%), #1b1b1b;
}

.gp-shop-balance__title {
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff;
    margin: 0;
}

.gp-shop-balance__cards {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .gp-shop-balance__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .gp-shop-balance__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.gp-shop-balance__cards {
    gap: 10px;
}

@media (min-width: 1024px) {
    .gp-shop-balance__cards:has(> .gp-shop-balance-card:nth-last-child(3):first-child) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.gp-shop-balance-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 88px;
    border-radius: 15px;
    border: 1px solid transparent;
    padding: 14px;
}

.gp-shop-balance-card--genpoint {
    border-color: #639aff;
    background: linear-gradient(110deg, rgba(164, 206, 235, 0.14) 11%, rgba(52, 72, 91, 0.67) 52%);
}

.gp-shop-balance-card--redcredit {
    border-color: #ff6366;
    background: linear-gradient(110deg, rgba(235, 164, 165, 0.14) 11%, rgba(91, 52, 53, 0.67) 52%);
}

.gp-shop-balance-card__amount {
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: #ffffff;
    margin: 0 0 4px;
}

.gp-shop-balance-card__label {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
}

.gp-shop-balance-card--genpoint .gp-shop-balance-card__label {
    color: #5fc4ee;
}

.gp-shop-balance-card--redcredit .gp-shop-balance-card__label {
    color: #ff7d7f;
}

.gp-shop-balance-card__helper-btn,
.gp-shop-balance-card__helper-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.gp-shop-balance-card__label img {
    width: 14px;
    height: 14px;
}

.gp-shop-balance-card__coin {
    width: 40px;
    height: 40px;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-shop-store-tabs {
    display: flex;
    width: 100%;
    align-items: center;
    overflow-x: auto;
    gap: 4px;
    scrollbar-width: none;
}

    .gp-shop-store-tabs::-webkit-scrollbar {
        display: none;
    }

.gp-shop-store-tabs__tab {
    display: flex;
    flex-shrink: 0;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    gap: 10px;
    width: 110px;
    height: 70px;
    border-radius: 5px 5px 0 0;
}

    .gp-shop-store-tabs__tab span {
        font-family: "Google Sans", sans-serif;
        font-weight: 400;
        font-size: 14px;
        line-height: 14px;
        color: #9fb3c8;
        text-align: center;
        white-space: nowrap;
        position: relative;
        z-index: 1;
    }

    .gp-shop-store-tabs__tab img {
        width: 22px;
        height: 22px;
        -o-object-fit: contain;
        object-fit: contain;
        position: relative;
        z-index: 1;
    }

.gp-shop-store-tabs__tab--active {
    border: 0.5px solid #102a43;
    box-shadow: 0 0 6.8px 0 rgba(16, 58, 112, 0.08);
    position: relative;
}

    .gp-shop-store-tabs__tab--active::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: inherit;
        background-image: radial-gradient(circle at 0 0, #0b4da0 0%, #0e407e 25%, #11345c 50%, #142539 75%, #171717 100%);
    }

    .gp-shop-store-tabs__tab--active span {
        color: #5fc4ee;
    }

    .gp-shop-store-tabs__tab--active img {
        width: 22px;
        height: 22px;
    }

@media (min-width: 768px) and (max-width: 1023px) {
    .gp-shop-store-tabs {
        width: 100%;
        overflow: visible;
        gap: 0;
        border-radius: 20px 20px 0 0;
    }

    .gp-shop-store-tabs__tab {
        flex-direction: row;
        gap: 10px;
        width: auto;
        height: 80px;
        flex: 1 1 0;
        border-radius: 20px 20px 0 0;
    }

        .gp-shop-store-tabs__tab img {
            width: 20px;
            height: 20px;
        }

    .gp-shop-store-tabs__tab--active img {
        width: 22px;
        height: 22px;
    }

    .gp-shop-store-tabs__tab span {
        font-size: 18px;
        line-height: 18px;
    }
}

@media (min-width: 1024px) and (orientation: portrait) {
    .gp-shop-store-tabs {
        width: 100%;
        overflow: visible;
        gap: 0;
        border-radius: 20px 20px 0 0;
    }

    .gp-shop-store-tabs__tab {
        flex-direction: row;
        gap: 10px;
        width: auto;
        height: 80px;
        flex: 1 1 0;
        border-radius: 20px 20px 0 0;
    }

        .gp-shop-store-tabs__tab img {
            width: 20px;
            height: 20px;
        }

    .gp-shop-store-tabs__tab--active img {
        width: 22px;
        height: 22px;
    }

    .gp-shop-store-tabs__tab span {
        font-size: 18px;
        line-height: 18px;
    }
}

.gp-shop-select__card {
    position: relative;
    display: flex;
    min-height: 80px;
    flex-grow: 1;
    align-items: center;
    overflow: visible;
    border-radius: 10px;
    text-decoration-line: none;
}

@media (min-width: 768px) {
    .gp-shop-select__card {
        min-height: 120px;
    }
}

.gp-shop-select__card {
    padding: 0 20px;
}

    .gp-shop-select__card::before {
        content: "";
        pointer-events: none;
        position: absolute;
        inset: 0px;
        border-radius: inherit;
    }

    .gp-shop-select__card::after {
        content: "";
        pointer-events: none;
        position: absolute;
        inset: 0px;
        border-radius: inherit;
    }

.gp-shop-select__card--point {
    --shop-select-media-right: -6px;
    border: 1px solid #639aff;
}

    .gp-shop-select__card--point::before {
        background: linear-gradient(106.7deg, #0b4da0 6.53%, #05244d 95.31%);
    }

    .gp-shop-select__card--point::after {
        box-shadow: inset 0 0 45.4px 0 #7cb0ff;
    }

.gp-shop-select__card--serenade {
    --shop-select-media-right: -6px;
    border: 1px solid #ffeedb;
}

    .gp-shop-select__card--serenade::before {
        background: linear-gradient( 129.42deg, rgba(234, 215, 194, 0.23) 11.71%, rgba(185, 166, 147, 0.34) 21.3%, rgba(234, 215, 193, 0.37) 28.54%, rgba(246, 226, 204, 0.36) 34.8%, rgba(202, 177, 149, 0.32) 38.91%, rgba(87, 63, 43, 0.67) 52% );
        background-color: #1f1e1d;
    }

    .gp-shop-select__card--serenade::after {
        box-shadow: inset 0 0 45.4px 0 #ffa62a;
    }

.gp-shop-select__text {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 5px;
    padding-right: 8px;
}

/* .gp-shop-select__card--point .gp-shop-select__text {
  padding-right: 60px;
}

.gp-shop-select__card--serenade .gp-shop-select__text {
  padding-right: 60px;
} */

.gp-shop-select__title {
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
}

.gp-shop-select__desc {
    font-family: "Google Sans", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    color: #f0f4f8;
}

    .gp-shop-select__desc span {
        display: none;
    }

@media (min-width: 768px) {
    .gp-shop-select__desc span {
        display: inline-block;
    }
}

.gp-shop-select__media {
    position: absolute;
    z-index: 1;
    flex-shrink: 0;
    top: 50%;
    right: var(--shop-select-media-right, 0px);
    transform: translateY(-50%);
    pointer-events: none;
}

.gp-shop-select__media--point {
    width: 6rem;
    height: auto;
}

.gp-shop-select__point-logo-placeholder {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 9999px;
    background: radial-gradient(circle at 34% 30%, rgba(57, 210, 255, 0.95) 0%, rgba(9, 122, 223, 0.95) 42%, rgba(5, 49, 105, 0.88) 73%, rgba(5, 36, 77, 0.6) 100%), linear-gradient(145deg, rgba(8, 67, 141, 0.5), rgba(0, 0, 0, 0));
    box-shadow: 0 0 0 2px rgba(123, 192, 255, 0.5), 0 0 18px 2px rgba(22, 145, 255, 0.5);
}

.gp-shop-select__media--serenade {
    width: 7.5rem;
    height: auto;
}

    .gp-shop-select__media--serenade img {
        height: 100%;
        width: 100%;
        -o-object-fit: contain;
        object-fit: contain;
        filter: drop-shadow(0 0 6.9px rgba(183, 130, 62, 0.9));
    }

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-shop-balance {
        gap: 20px;
        margin-bottom: 40px;
        padding: 20px;
    }

    .gp-shop-balance__title {
        font-size: 20px;
    }

    .gp-shop-balance-card {
        min-height: 108px;
        border-radius: 20px;
        padding: 20px 40px;
    }

    .gp-shop-balance-card__amount {
        font-size: 22px;
    }

    .gp-shop-balance-card__label {
        gap: 10px;
        font-size: 18px;
    }

        .gp-shop-balance-card__label img {
            width: 20px;
            height: 20px;
        }

    .gp-shop-balance-card__coin {
        width: 75px;
        height: 75px;
    }

    .gp-shop-store-tabs {
        width: 100%;
        overflow: visible;
        gap: 0;
        border-radius: 20px 20px 0 0;
    }

    .gp-shop-store-tabs__tab {
        flex-direction: row;
        gap: 10px;
        width: auto;
        height: 80px;
        flex: 1 1 0;
        border-radius: 20px 20px 0 0;
    }

        .gp-shop-store-tabs__tab img {
            width: 20px;
            height: 20px;
        }

    .gp-shop-store-tabs__tab--active img {
        width: 22px;
        height: 22px;
    }

    .gp-shop-store-tabs__tab span {
        font-size: 18px;
        line-height: 18px;
    }

    .gp-shop-select {
        margin-top: 2rem;
        margin-bottom: 2rem;
        flex-direction: row;
        gap: 20px;
    }

    .gp-shop-select__card {
        flex: 1 1 0%;
        min-width: 0;
    }

    .gp-shop-select__text {
        padding-left: 20px;
        padding-right: 20px;
    }

    .gp-shop-select__card--point .gp-shop-select__text {
        padding-right: 124px;
    }

    .gp-shop-select__card--serenade .gp-shop-select__text {
        padding-right: 132px;
    }

    .gp-shop-select__title {
        font-size: 22px;
        line-height: 28px;
    }

    .gp-shop-select__desc {
        font-size: 18px;
        line-height: 23px;
    }

    .gp-shop-select__media--point {
        width: 9rem;
        height: auto;
    }

    .gp-shop-select__card--point {
        --shop-select-media-right: -10px;
    }

    .gp-shop-select__media--serenade {
        width: 12rem;
        height: auto;
    }

    .gp-shop-select__card--serenade {
        --shop-select-media-right: 8px;
    }
}

.gp-shop-recommend {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #0b4da0;
    border-radius: 20px;
    background: radial-gradient(100% 100% at 0% 0%, rgba(37, 182, 255, 0.2) 0%, rgba(60, 46, 255, 0.05) 72%), #06224f;
    box-shadow: 0 22px 44px rgba(11, 77, 160, 0.37);
}

.gp-shop-recommend__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 54px;
    padding: 12px 16px;
    border-radius: 14px;
    background: linear-gradient(90deg, #0B58B9 0%, #122767 90.31%);
}

.gp-shop-recommend__head-left {
    display: flex;
    min-width: 0px;
    align-items: center;
    gap: 10px;
}

.gp-shop-recommend__head-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(137, 198, 255, 0.3);
}

    .gp-shop-recommend__head-icon img {
        width: 16px;
        height: 16px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-shop-recommend__head-title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff;
}

.gp-shop-recommend__head-toggle {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    border: none;
    border-radius: 999px;
    background: #0b4da0;
    padding: 0;
    cursor: pointer;
}

    .gp-shop-recommend__head-toggle img {
        width: 16px;
        height: auto;
        transition: transform 320ms ease;
    }

.recommend-products-grid {
    display: grid;
    width: 100%;
    margin-top: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    overflow: hidden;
    transition: height 320ms ease, padding 320ms ease, margin-top 320ms ease, opacity 320ms ease;
}

.gp-shop-recommend.is-collapsed .gp-shop-recommend__head-toggle img {
    transform: rotate(180deg);
}

.recommend-products-grid.is-collapsed {
    height: 0;
    padding: 0;
    margin-top: 0;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 640px) {
    .recommend-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) and (orientation: portrait) {
    .recommend-products-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-shop-recommend {
        margin-bottom: 40px;
        padding: 10px;
    }

    .gp-shop-recommend__head {
        min-height: 70px;
        padding: 15px 20px;
        border-radius: 15px;
    }

    .gp-shop-recommend__head-icon {
        width: 40px;
        height: 40px;
    }

        .gp-shop-recommend__head-icon img {
            width: 24px;
            height: 24px;
        }

    .gp-shop-recommend__head-title {
        font-size: 22px;
        line-height: 1;
    }

    .recommend-products-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        margin-top: 0;
        padding: 30px 20px;
        gap: 20px;
    }
}

/* Shop tabs, filters, and package cards (Figma: shop-before-login-pc / Mobile-Shop-before-login) */

.gp-shop-main {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 24px;
}

.gp-shop-main__header {
    display: flex;
    flex-direction: column;
}

.gp-shop-main__controls {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-shop-filter__trigger {
    display: flex;
    flex-grow: 0;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 5px 14px;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: 16px;
    color: #ffffff;
}

.gp-shop-filter__trigger-main {
    display: flex;
    align-items: center;
    gap: 5px;
}

.gp-shop-filter__trigger-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
}

    .gp-shop-filter__trigger-icon img {
        width: 100%;
        height: 100%;
    }

.gp-shop-filter__trigger-text {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.gp-shop-filter__trigger-count {
    color: #1caee7;
}

.gp-shop-filter__trigger-caret {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

    .gp-shop-filter__trigger-caret img {
        width: 100%;
        height: 100%;
    }

.gp-shop-cate-tabs {
    display: flex;
    width: 100%;
    align-items: center;
    overflow-x: auto;
    gap: 4px;
    scrollbar-width: none;
}

    .gp-shop-cate-tabs::-webkit-scrollbar {
        display: none;
    }

.gp-shop-cate-tabs__tab {
    display: flex;
    flex-shrink: 0;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    gap: 10px;
    width: 110px;
    height: 70px;
    border-radius: 5px 5px 0 0;
}

.gp-shop-cate-tabs__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

    .gp-shop-cate-tabs__icon img {
        width: 20px;
        height: 20px;
    }

.gp-shop-cate-tabs__text {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
    color: #9fb3c8;
    text-align: center;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}

.gp-shop-cate-tabs__tab--active {
    border: 0.5px solid #102a43;
    box-shadow: 0 0 6.8px 0 rgba(16, 58, 112, 0.08);
    position: relative;
}

    .gp-shop-cate-tabs__tab--active::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: inherit;
        background-image: radial-gradient(circle at 0 0, #0b4da0 0%, #0e407e 25%, #11345c 50%, #142539 75%, #171717 100%);
    }

    .gp-shop-cate-tabs__tab--active .gp-shop-cate-tabs__text {
        color: #5fc4ee;
    }

    .gp-shop-cate-tabs__tab--active .gp-shop-cate-tabs__icon img {
        width: 22px;
        height: 22px;
    }

.gp-shop-sort-bar {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 10px 20px;
    background-color: #121319;
    border: 0.5px solid #102a43;
}

.gp-shop-sort-bar__label {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: 14px;
    color: #bcccdc;
}

.gp-shop-sort-bar__buttons {
    display: flex;
    align-items: center;
}

.gp-shop-sort-bar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 70px;
    height: 30px;
    padding: 0 10px;
    border: 0;
    border-right: 0.5px solid #333333;
    background: transparent;
    cursor: pointer;
}

    .gp-shop-sort-bar__btn:last-child {
        border-right: none;
    }

    .gp-shop-sort-bar__btn span {
        font-family: "Google Sans", sans-serif;
        font-size: 14px;
        line-height: 12px;
        color: #bcccdc;
        text-align: center;
        white-space: nowrap;
    }

.gp-shop-sort-bar__btn--active span {
    color: #ffde2d;
}

.gp-shop-sort-bar__btn-icon {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}

.gp-shop-sort-bar__btn-wrap {
    position: relative;
    display: inline-flex;
}

.gp-shop-sort-bar__dropdown {
    position: absolute;
    border-radius: 10px;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    border: 1px solid #4b89c9;
    background-color: #363e4d;
}

.gp-shop-sort-bar__dropdown-option {
    width: 100%;
    white-space: nowrap;
    border: none;
    background: transparent;
    padding: 12px 14px;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: 16px;
    color: #d9e2ec;
    text-align: left;
    cursor: pointer;
}

    .gp-shop-sort-bar__dropdown-option:hover,
    .gp-shop-sort-bar__dropdown-option:focus-visible {
        background-color: #4b5667;
        color: #ffffff;
    }

.gp-shop-sort-bar__dropdown-option--active {
    background-color: #4b5667;
    color: #ffde2d;
}

.gp-shop-sort-bar__btn-wrap--open .gp-shop-sort-bar__btn-icon {
    transform: rotate(180deg);
}

.gp-shop-sort-bar__btn-wrap--open .gp-shop-sort-bar__btn span,
.gp-shop-sort-bar__btn-wrap .gp-shop-sort-bar__btn--active span {
    color: #ffde2d;
}

.gp-shop-main__controls {
    display: flex;
    width: 100%;
    flex-direction: row;
    gap: 10px;
}

.gp-shop-main__body {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 16px;
}

.gp-shop-filter-sidebar {
    display: none;
    width: 100%;
    flex-direction: column;
    border-radius: 10px;
    padding: 20px;
    background: linear-gradient(#1b1b1b, #1b1b1b) padding-box, linear-gradient(135deg, #ff8bbf, #f488ff, #7ef359, #ffde2d, #1bb1e7) border-box;
    border: 0.5px solid transparent;
}

.gp-shop-filter-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.gp-shop-filter-sidebar__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #1caee7;
    letter-spacing: 0.1px;
}

.gp-shop-filter-sidebar__caret {
    width: 20px;
    height: 20px;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-shop-filter-sidebar__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: thin;
    scrollbar-color: #627d98 #1f2126;
}

    .gp-shop-filter-sidebar__list::-webkit-scrollbar {
        width: 8px;
    }

    .gp-shop-filter-sidebar__list::-webkit-scrollbar-track {
        background: #1f2126;
        border-radius: 4px;
    }

    .gp-shop-filter-sidebar__list::-webkit-scrollbar-thumb {
        background: #627d98;
        border-radius: 4px;
    }

.gp-shop-filter-sidebar__item {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: 10px;
}

.gp-shop-filter-sidebar__checkbox {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    border: 1px solid #ffffff;
    border-radius: 3px;
    background: transparent;
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

    .gp-shop-filter-sidebar__checkbox:checked {
        background-color: #1caee7;
        border-color: #1caee7;
    }

.gp-shop-filter-sidebar__item-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #ffffff;
}

.gp-shop-filter-sidebar__divider {
    width: 100%;
    height: 1px;
    margin: 20px 0;
    background: linear-gradient(90deg, #486581 0%, rgba(72, 101, 129, 0.2) 100%);
}

.gp-shop-filter-sidebar__clear {
    display: flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 40px;
    border: 0.5px solid #486581;
    border-radius: 99px;
    background: transparent;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 12px;
    color: #ffffff;
    text-align: center;
}

.gp-shop-filter-sidebar__clear-icon {
    width: 16px;
    height: 16px;
    -o-object-fit: contain;
    object-fit: contain;
}

/* Mobile/Tablet filter drawer — slide-in from left (Figma: Filter) */

.gp-shop-filter-drawer {
    position: fixed;
    inset: 0px;
    z-index: 65;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gp-shop-filter-drawer__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gp-shop-filter-drawer__panel {
    position: absolute;
    left: 0px;
    top: 0px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    max-width: 100vw;
    transform: translateX(-100%);
    transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.gp-shop-filter-drawer--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

    .gp-shop-filter-drawer--open .gp-shop-filter-drawer__backdrop {
        opacity: 1;
    }

    .gp-shop-filter-drawer--open .gp-shop-filter-drawer__panel {
        transform: translateX(0);
    }

@media (min-width: 768px) and (max-width: 1023px) {
    .gp-shop-filter-drawer__panel {
        width: min(500px, 100vw);
    }
}

.gp-shop-filter-sidebar--drawer {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex-direction: column;
    flex: 1;
    height: 100%;
    max-height: 100dvh;
    overflow: hidden;
}

.gp-shop-filter-sidebar__header--drawer {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
}

.gp-shop-filter-sidebar__list--drawer {
    display: flex;
    min-height: 0px;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.gp-shop-filter-sidebar--drawer .gp-shop-filter-sidebar__divider {
    flex-shrink: 0;
}

.gp-shop-filter-sidebar--drawer .gp-shop-filter-sidebar__clear {
    flex-shrink: 0;
}

.gp-shop-filter-drawer__close {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}

    .gp-shop-filter-drawer__close img {
        width: 20px;
        height: 20px;
        -o-object-fit: contain;
        object-fit: contain;
    }

body.gp-shop-filter-drawer-open {
    overflow: hidden;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-shop-filter-drawer {
        display: none;
    }

    body.gp-shop-filter-drawer-open {
        overflow: auto;
    }
}

/* Purchase history — mobile/tablet tag filter drawer (same pattern as shop) */

.gp-history-filter-drawer {
    position: fixed;
    inset: 0px;
    z-index: 65;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gp-history-filter-drawer__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gp-history-filter-drawer__panel {
    position: absolute;
    left: 0px;
    top: 0px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    max-width: 100vw;
    transform: translateX(-100%);
    transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.gp-history-filter-drawer--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

    .gp-history-filter-drawer--open .gp-history-filter-drawer__backdrop {
        opacity: 1;
    }

    .gp-history-filter-drawer--open .gp-history-filter-drawer__panel {
        transform: translateX(0);
    }

@media (min-width: 768px) and (max-width: 1023px) {
    .gp-history-filter-drawer__panel {
        width: min(500px, 100vw);
    }
}

.gp-history-filter-drawer__close {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}

    .gp-history-filter-drawer__close img {
        width: 20px;
        height: 20px;
        -o-object-fit: contain;
        object-fit: contain;
    }

body.gp-history-filter-drawer-open {
    overflow: hidden;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-history-filter-drawer {
        display: none;
    }

    body.gp-history-filter-drawer-open {
        overflow: auto;
    }
}

/* Product detail modal (Figma: info-product) */

.gp-shop-product-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 70;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-shop-product-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.6);
    cursor: pointer;
    pointer-events: auto;
}

.gp-shop-product-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    max-width: 529px;
    justify-content: center;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-shop-product-modal__dialog {
    display: flex;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    background-color: #1a1b1e;
    border: 1px solid #243b53;
    border-radius: 10px;
}

.gp-shop-product-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-shop-product-modal__header {
    display: flex;
    flex-shrink: 0;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 10px;
}

.gp-shop-product-modal__close {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

    .gp-shop-product-modal__close img {
        width: 20px;
        height: 20px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-shop-product-modal__body {
    display: flex;
    min-height: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 16px;
    padding: 0 20px 20px;
    overflow-y: auto;
}

.gp-shop-product-modal__summary {
    /* Figma info-product: row, gap 20px, items-start (pack-img | meta column) */
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
}

.gp-shop-product-modal__media {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    width: 170px;
    height: 170px;
    border-radius: 6px;
}

.gp-shop-product-modal__pack-img {
    position: absolute;
    inset: 0px;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 6px;
}

.gp-shop-product-modal__labels {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.gp-shop-product-modal__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 0 0 5px 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: normal;
    color: #020e1f;
    background-color: #facc15;
}

.gp-shop-product-modal__meta {
    display: flex;
    min-height: 0px;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: 10px;
    width: 100%;
}

.gp-shop-product-modal__title {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin: 0;
    width: 100%;
    min-width: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #f0f4f8;
}

.gp-shop-product-modal__limit-slot {
    display: inline-flex;
    height: 35px;
    max-width: 215px;
    align-items: center;
    overflow: hidden;
    border-radius: 10px;
    border-width: 0.562px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(104 82 51 / var(--tw-border-opacity, 1));
    background-color: rgba(231,167,28,0.06);
    padding: 8px 10px;
    gap: 5px;
}

.gp-shop-product-modal__limit-divider {
    width: 2px;
    height: 14px;
    background-color: #5f4e37;
    flex-shrink: 0;
}

.gp-shop-product-modal__limit-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #ffffff;
    align-self: center;
}

.gp-shop-product-modal__limit-count {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 15px;
    color: #ffde2d;
    align-self: center;
}

.gp-shop-product-modal__limit-group {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.gp-shop-product-modal__stock {
    width: 100%;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
}

.gp-shop-product-modal__stock-label {
    color: #ffffff;
}

.gp-shop-product-modal__stock-count {
    color: #f24c10;
}

.gp-shop-product-modal__stock-unit {
    color: #ffffff;
}

.gp-shop-product-modal__price-slot {
    display: flex;
    height: 50px;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    border-radius: 4.5px;
}

.gp-shop-product-modal__share-slot {
    display: inline-flex;
    align-items: flex-end;
    gap: 5px;
}

    .gp-shop-product-modal__share-slot:focus-visible {
        outline: 2px solid transparent;
        outline-offset: 2px;
    }

.gp-shop-product-modal__share-slot {
    width: -moz-fit-content;
    width: fit-content;
    border: none;
    background: transparent;
    padding: 0;
    margin-top: 5px;
    cursor: pointer;
}

.gp-shop-product-modal__share-text {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #829ab1;
}

.gp-shop-product-modal__share-slot:is(:hover, :active, :focus-visible) .gp-shop-product-modal__share-text {
    --tw-text-opacity: 1;
    color: rgb(95 196 238 / var(--tw-text-opacity, 1));
}

.gp-shop-product-modal__share-icon-wrap {
    position: relative;
    display: inline-block;
    height: 18px;
    width: 18px;
}

.gp-shop-product-modal__share-icon {
    position: absolute;
    left: 0px;
    top: 0px;
    transition-property: opacity;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    width: 18px;
    height: 18px;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-shop-product-modal__share-icon--default {
    opacity: 1;
}

.gp-shop-product-modal__share-icon--hover {
    opacity: 0;
}

.gp-shop-product-modal__share-slot:is(:hover, :active, :focus-visible) .gp-shop-product-modal__share-icon--default {
    opacity: 0;
}

.gp-shop-product-modal__share-slot:is(:hover, :active, :focus-visible) .gp-shop-product-modal__share-icon--hover {
    opacity: 1;
}

.gp-shop-product-modal__price-detail {
    display: flex;
    height: 100%;
    min-width: 0px;
    flex: 1 1 0%;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.gp-shop-redeem-modal__price span.gp-shop-product-modal__price-value {
    color: #facc15;
}

.gp-shop-product-modal__price {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 15.745px;
    color: #facc15;
    flex-shrink: 0;
}

.gp-shop-product-modal__price-orig {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 13.496px;
    color: #829ab1;
    text-decoration-line: line-through;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none;
    flex-shrink: 0;
}

.gp-shop-product-modal__disc-rate {
    display: flex;
    height: 100%;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 5.623px;
    border-width: 1.125px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(255 222 45 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
    box-sizing: border-box;
    width: 50px;
    padding: 0 10.909px;
}

    .gp-shop-product-modal__disc-rate span {
        font-family: "Google Sans", sans-serif;
        font-weight: 500;
        font-size: 14px;
        line-height: 13.496px;
        color: #061221;
        text-align: center;
    }

.gp-shop-product-modal__items-block {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-shop-product-modal__items-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gp-shop-product-modal__items-head-icon {
    width: 20px;
    height: 20px;
    -o-object-fit: contain;
    object-fit: contain;
    flex-shrink: 0;
}

.gp-shop-product-modal__items-head-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #bcccdc;
}

.gp-shop-product-modal__items-shell {
    display: flex;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
    border-radius: 10px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(36 59 83 / var(--tw-border-opacity, 1));
    background-color: #27292f;
}

.gp-shop-product-modal__items-scroll {
    max-height: min(180px, 38vh);
    overflow-y: auto;
    padding: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #bcccdc #3d4350;
}

    .gp-shop-product-modal__items-scroll::-webkit-scrollbar {
        width: 8px;
    }

    .gp-shop-product-modal__items-scroll::-webkit-scrollbar-track {
        background: #3d4350;
        border-radius: 2px;
    }

    .gp-shop-product-modal__items-scroll::-webkit-scrollbar-thumb {
        background: #bcccdc;
        border-radius: 2px;
    }

.gp-shop-product-modal__items-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gp-shop-product-modal__item-row {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #9fb3c8;
}

.gp-shop-product-modal__item-name {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 16px;
    position: relative;
}

    .gp-shop-product-modal__item-name::before {
        content: "";
        position: absolute;
        left: 4px;
        top: 0.45em;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: #9fb3c8;
    }

.gp-shop-product-modal__item-qty {
    flex: 1 1 0;
    min-width: 0;
    text-align: right;
}

.gp-shop-product-modal__footer-block {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-shop-product-modal__qty-bar {
    display: flex;
    height: 50px;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    border-radius: 10px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(51 78 104 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(51 51 51 / var(--tw-bg-opacity, 1));
    padding: 0 20px;
}

.gp-shop-product-modal__qty-bar-label {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 15.745px;
    color: #f0f4f8;
}

.gp-shop-product-modal__qty-bar-controls {
    display: flex;
    height: 100%;
    align-items: center;
    gap: 15px;
}

.gp-shop-product-modal__qty-icon-btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    width: 24px;
    height: 24px;
}

    .gp-shop-product-modal__qty-icon-btn img {
        width: 16px;
        height: 16px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-shop-product-modal__qty-bar-value {
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
    min-width: 1.5em;
    text-align: center;
}

.gp-shop-product-modal__cta-row {
    display: flex;
    height: 50px;
    width: 100%;
    align-items: stretch;
    gap: 5px;
}

.gp-shop-product-modal__add-cart {
    display: flex;
    min-height: 0px;
    min-width: 0px;
    flex: 1 1 0%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

    .gp-shop-product-modal__add-cart:hover {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

    .gp-shop-product-modal__add-cart:active {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-shop-product-modal__add-cart {
    gap: 5px;
    border-radius: 10px;
    background-color: #1caee7;
    border: 1px solid #3db9eb;
    padding: 5px 10px;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    color: #ffffff;
}

    .gp-shop-product-modal__add-cart img {
        width: 18px;
        height: 18px;
        -o-object-fit: contain;
        object-fit: contain;
        flex-shrink: 0;
    }

    .gp-shop-product-modal__add-cart--locked,
    .gp-shop-product-modal__add-cart:disabled {
        border-color: #333333;
        background-color: #333333;
        color: #6e6e6e;
        cursor: not-allowed;
    }

        .gp-shop-product-modal__add-cart--locked:hover,
        .gp-shop-product-modal__add-cart--locked:active,
        .gp-shop-product-modal__add-cart:disabled:hover,
        .gp-shop-product-modal__add-cart:disabled:active {
            transform: none;
            filter: none;
            --tw-scale-x: 1;
            --tw-scale-y: 1;
            --tw-brightness: brightness(1);
        }

        .gp-shop-product-modal__add-cart--locked img {
            display: none;
        }

.gp-shop-product-modal__gift-btn {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

    .gp-shop-product-modal__gift-btn:hover {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

    .gp-shop-product-modal__gift-btn:active {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-shop-product-modal__gift-btn {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background-color: #093f85;
    border: 1px solid #0b4da0;
    padding: 0 10.909px;
}

    .gp-shop-product-modal__gift-btn img {
        width: 19.636px;
        height: 19.636px;
        -o-object-fit: contain;
        object-fit: contain;
    }

body.gp-shop-product-modal-open {
    overflow: hidden;
}

/* Gen Point info modal (Figma: node 3614-38632 "Gen Point คืออะไร") */

.gp-shop-genpoint-info-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 71;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-shop-genpoint-info-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.6);
    cursor: pointer;
    pointer-events: auto;
}

.gp-shop-genpoint-info-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    max-width: 529px;
    justify-content: center;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-shop-genpoint-info-modal__dialog {
    display: flex;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    background-color: #1a1b1e;
    border: 1px solid #243b53;
    border-radius: 10px;
}

.gp-shop-genpoint-info-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-shop-genpoint-info-modal__header {
    display: flex;
    flex-shrink: 0;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 10px;
}

.gp-shop-genpoint-info-modal__close {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

    .gp-shop-genpoint-info-modal__close img {
        width: 100%;
        height: auto;
        -o-object-fit: cover;
        object-fit: cover;
    }

.gp-shop-genpoint-info-modal__body {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 20px 40px;
}

.gp-shop-genpoint-info-modal__icon {
    width: 66px;
    height: 66px;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-shop-genpoint-info-modal__text {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #f0f4f8;
    text-align: center;
}

body.gp-shop-genpoint-info-modal-open {
    overflow: hidden;
}

/* Redeem modal (Figma: Point Shop - Pop up เมื่อกดแลก) */

.gp-shop-redeem-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 72;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-shop-redeem-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-shop-redeem-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.7);
    cursor: pointer;
    pointer-events: auto;
}

.gp-shop-redeem-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 0px;
    width: 100%;
    justify-content: center;
    max-width: 740px;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-shop-redeem-modal__dialog {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    background: #1a1b1e;
    border: 1px solid #073269;
    border-radius: 10px;
    padding: 10px;
}

.gp-shop-redeem-modal__panel {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex: 1 1 0%;
    flex-direction: column;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #073269;
    background: #1a1a1a;
}

.gp-shop-redeem-modal__head {
    position: relative;
    flex-shrink: 0;
}

.gp-shop-redeem-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #bcccdc #3d4350;
}

    .gp-shop-redeem-modal__body::-webkit-scrollbar {
        width: 8px;
    }

    .gp-shop-redeem-modal__body::-webkit-scrollbar-track {
        background: #3d4350;
        border-radius: 2px;
    }

    .gp-shop-redeem-modal__body::-webkit-scrollbar-thumb {
        background: #bcccdc;
        border-radius: 2px;
    }

.gp-shop-redeem-modal__close {
    position: absolute;
    right: 0.75rem;
    top: 0.75rem;
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    width: 24px;
    height: 24px;
    z-index: 1;
}

    .gp-shop-redeem-modal__close img {
        width: 20px;
        height: 20px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-shop-redeem-modal__head-main {
    display: flex;
    align-items: center;
    min-height: 68px;
    gap: 12px;
    padding: 12px 20px;
    background: linear-gradient(90deg, #0b58b9 0%, #122767 100%);
}

.gp-shop-redeem-modal__head-avatar {
    width: 42px;
    height: 42px;
    border-radius: 5px;
    -o-object-fit: cover;
    object-fit: cover;
    flex-shrink: 0;
}

.gp-shop-redeem-modal__head-user {
    display: flex;
    min-width: 0px;
    flex-shrink: 0;
    flex-direction: column;
    line-height: 1.15;
}

.gp-shop-redeem-modal__head-game {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #9fb3c8;
}

.gp-shop-redeem-modal__head-id {
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    color: #f0f4f8;
}

.gp-shop-redeem-modal__head-divider {
    width: 1px;
    height: 40px;
    background: #627d98;
    flex-shrink: 0;
}

.gp-shop-redeem-modal__head-title {
    margin: 0px;
    min-width: 0px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.2;
    color: #d9e2ec;
}

.gp-shop-redeem-modal__selects {
    display: flex;
    width: 100%;
    gap: 10px;
    padding: 16px 20px;
    background: linear-gradient(90deg, #1d1e27 2.55%, #10245b 99.9%);
}

.gp-shop-redeem-modal__select-field {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 10px;
}

.gp-shop-redeem-modal__select-wrap {
    position: relative;
    width: 100%;
}

.gp-shop-redeem-modal__select-label {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 13.248px;
    color: #ffffff;
}

.gp-shop-redeem-modal__select {
    width: 100%;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 60px;
    border-radius: 10px;
    border: 1px solid #1caee7;
    background-color: #27292f;
    box-shadow: 0 0 6px rgba(28, 174, 231, 0.3);
    padding: 10px 52px 10px 20px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 13.248px;
    color: #bcccdc;
    background-image: url("../images/icon-small-caret-down.svg");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 24px 24px;
}

.gp-shop-redeem-modal__select-wrap--custom .gp-shop-redeem-modal__select {
    position: absolute;
    width: 100%;
    opacity: 0;
    pointer-events: none;
}

.gp-shop-redeem-modal__select-trigger {
    display: flex;
    width: 100%;
    align-items: center;
    border-radius: 10px;
    min-height: 50px;
    border: 1px solid #1caee7;
    background-color: #27292f;
    box-shadow: 0 0 6px rgba(28, 174, 231, 0.3);
    padding: 10px 52px 10px 20px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 13.248px;
    color: #bcccdc;
    text-align: left;
    cursor: pointer;
}

.gp-shop-redeem-modal__select-wrap--selected .gp-shop-redeem-modal__select-trigger {
    color: #1caee7;
}

.gp-shop-redeem-modal__select-wrap--open .gp-shop-redeem-modal__select-trigger {
    color: #ffffff;
}

.gp-shop-redeem-modal__select-caret {
    pointer-events: none;
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease;
}

.gp-shop-redeem-modal__select-wrap--open .gp-shop-redeem-modal__select-caret {
    transform: translateY(-50%) rotate(180deg);
}

.gp-shop-redeem-modal__select-options {
    position: absolute;
    width: 100%;
    border-radius: 10px;
    z-index: 20;
    top: calc(100% + 8px);
    max-height: 240px;
    overflow-y: auto;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    border: 1px solid #1caee7;
    background-color: #27292f;
    box-shadow: 0 0 6px rgba(28, 174, 231, 0.3);
}

.gp-shop-redeem-modal__select-wrap--flip-up .gp-shop-redeem-modal__select-options {
    top: auto;
    bottom: calc(100% + 8px);
}

.gp-shop-redeem-modal__select-option {
    width: 100%;
    border: none;
    background: transparent;
    padding: 14px 20px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    color: #d9e2ec;
    text-align: left;
    cursor: pointer;
}

    .gp-shop-redeem-modal__select-option:hover,
    .gp-shop-redeem-modal__select-option:focus-visible,
    .gp-shop-redeem-modal__select-option--active {
        background-color: #3a404c;
        color: #ffffff;
    }

.gp-shop-redeem-modal__item-block {
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 30px 20px;
    gap: 10px;
}

.gp-shop-redeem-modal__item-detail-row {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.gp-shop-redeem-modal__item-main {
    display: flex;
    min-width: 0px;
    width: 400px;
    gap: 20px;
}

.gp-shop-redeem-modal__item-thumb-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.gp-shop-redeem-modal__item-thumb {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.gp-shop-redeem-modal__item-badge {
    position: absolute;
    left: 0px;
    top: 0px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-bottom-right-radius: 5px;
    background: #3db9eb;
    color: #020e1f;
    padding: 5px 10px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: normal;
}

.gp-shop-redeem-modal__item-copy {
    display: flex;
    min-width: 0px;
    flex-direction: column;
    gap: 10px;
}

.gp-shop-redeem-modal__item-title {
    margin: 0px;
    width: 100%;
    color: #f0f4f8;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
}

.gp-shop-redeem-modal__limit {
    display: inline-flex;
    align-items: center;
    width: -moz-fit-content;
    width: fit-content;
    gap: 7px;
    height: 35px;
    border-radius: 10px;
    border: 0.562px solid #685233;
    background: rgba(231, 167, 28, 0.06);
    color: #ffffff;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    padding: 0 10px;
}

.gp-shop-redeem-modal__limit-divider {
    width: 1px;
    height: 20px;
    background: #5f4e37;
}

.gp-shop-redeem-modal__limit-count {
    font-weight: 500;
    color: #ffde2d;
}

.gp-shop-redeem-modal__limit-group {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.gp-shop-redeem-modal__stock {
    width: 100%;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
}

.gp-shop-redeem-modal__stock-label {
    color: #ffffff;
}

.gp-shop-redeem-modal__stock-count {
    color: #f24c10;
}

.gp-shop-redeem-modal__stock-unit {
    color: #ffffff;
}

.gp-shop-redeem-modal__item-aside {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.gp-shop-redeem-modal__price {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

    .gp-shop-redeem-modal__price img {
        width: 20px;
        height: 20px;
        -o-object-fit: contain;
        object-fit: contain;
    }

    .gp-shop-redeem-modal__price span {
        font-family: "Google Sans", sans-serif;
        font-weight: 400;
        font-size: 20px;
        line-height: 15.745px;
        color: #ffffff;
    }

.gp-shop-redeem-modal__qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 170px;
    height: 50px;
    border-radius: 10px;
    border: 1.091px solid #334e68;
    background: #333333;
    padding: 0 20px;
}

.gp-shop-redeem-modal__qty-label {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 15.745px;
    color: #f0f4f8;
}

.gp-shop-redeem-modal__qty-btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    width: 16px;
    height: 16px;
}

    .gp-shop-redeem-modal__qty-btn img {
        width: 16px;
        height: 16px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-shop-redeem-modal__qty-value {
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
    min-width: 1.5em;
    text-align: center;
}

.gp-shop-redeem-modal__items-toggle {
    display: inline-flex;
    width: -moz-fit-content;
    width: fit-content;
    cursor: pointer;
    align-items: center;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    gap: 5px;
    color: #829ab1;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
}

    .gp-shop-redeem-modal__items-toggle img {
        width: 24px;
        height: 24px;
        -o-object-fit: contain;
        object-fit: contain;
        transition: transform 0.2s ease;
    }

    .gp-shop-redeem-modal__items-toggle[aria-expanded="true"] img {
        transform: rotate(180deg);
    }

.gp-shop-redeem-modal__items-shell {
    display: flex;
    width: 100%;
    flex-direction: column;
    border-radius: 10px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(36 59 83 / var(--tw-border-opacity, 1));
    background-color: #27292f;
}

    .gp-shop-redeem-modal__items-shell[hidden] {
        display: none;
    }

.gp-shop-redeem-modal__items-scroll {
    padding: 10px;
}

.gp-shop-redeem-modal__items-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gp-shop-redeem-modal__item-row {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #9fb3c8;
}

.gp-shop-redeem-modal__item-name {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 16px;
    position: relative;
}

    .gp-shop-redeem-modal__item-name::before {
        content: "";
        position: absolute;
        left: 4px;
        top: 0.45em;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: #9fb3c8;
    }

.gp-shop-redeem-modal__item-qty {
    flex: 1 1 0;
    min-width: 0;
    text-align: right;
}

.gp-shop-redeem-modal__summary {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    border-top: 1px solid #073269;
}

.gp-shop-redeem-modal__warning {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 15px 20px;
    border: 1px solid #a80a0d;
    border-radius: 10px;
    background: rgba(167, 22, 25, 0.59);
}

.gp-shop-redeem-modal__warning-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    text-align: center;
    color: #ffffff;
}

.gp-shop-redeem-modal__summary-row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    min-height: 20px;
}

.gp-shop-redeem-modal__summary-row--emphasis .gp-shop-redeem-modal__summary-label {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
}

.gp-shop-redeem-modal__summary-label {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 13.248px;
    color: #829ab1;
}

.gp-shop-redeem-modal__summary-value {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    color: #ffffff;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 13.248px;
}

    .gp-shop-redeem-modal__summary-value img {
        width: 16px;
        height: 16px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-shop-redeem-modal__summary-value--use {
    color: #1caee7;
    font-size: 22px;
    font-weight: 700;
}

    .gp-shop-redeem-modal__summary-value--use img {
        width: 20px;
        height: 20px;
    }

.gp-shop-redeem-modal__summary-value--left {
    color: #27c840;
    font-weight: 500;
}

.gp-shop-redeem-modal__actions {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
    padding: 0 20px 20px;
}

.gp-shop-redeem-modal__cancel {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    width: 250px;
    height: 60px;
    border-radius: 10px;
    border: 1px solid #486581;
    color: #829ab1;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
}

.gp-shop-redeem-modal__confirm {
    display: inline-flex;
    min-width: 0px;
    flex: 1 1 0%;
    align-items: center;
    justify-content: center;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    height: 60px;
    border-radius: 10px;
    border: 1px solid #333333;
    background: #333333;
    color: #848484;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: normal;
}

.gp-shop-redeem-modal__cancel:hover {
    --tw-brightness: brightness(1.1);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.gp-checkout-footer-actions__primary.gp-checkout-footer-actions__primary--disabled,
.gp-checkout-summary-actions__primary--disabled,
.gp-shop-redeem-modal__confirm--disabled {
    border-color: #333333;
    background: #333333;
    color: #848484;
    cursor: not-allowed;
    box-shadow: 0 6px 19.7px rgba(11, 77, 160, 0);
    background-image: none;
}

    .gp-checkout-footer-actions__primary.gp-checkout-footer-actions__primary--disabled:hover,
    .gp-checkout-summary-actions__primary--disabled:hover,
    .gp-shop-redeem-modal__confirm--disabled:hover {
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

    .gp-checkout-footer-actions__primary.gp-checkout-footer-actions__primary--disabled:active,
    .gp-checkout-summary-actions__primary--disabled:active,
    .gp-shop-redeem-modal__confirm--disabled:active {
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-shop-redeem-modal__confirm:not(:disabled):not(.gp-shop-redeem-modal__confirm--disabled):hover {
    --tw-brightness: brightness(1.1);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.gp-shop-redeem-modal__confirm:not(:disabled) {
    border-color: #3db9eb;
    background: linear-gradient(109.61deg, #52ceff 5.7%, #1caee7 54.37%);
    box-shadow: 0 6px 19.7px rgba(11, 77, 160, 0.5);
    color: #020e1f;
}

body.gp-shop-redeem-modal-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .gp-shop-redeem-modal__dialog {
        padding: 8px;
    }

    .gp-shop-redeem-modal__head-main {
        align-items: flex-start;
        gap: 8px;
        padding-right: 0px;
    }

    .gp-shop-redeem-modal__head-id {
        font-size: 18px;
    }

    .gp-shop-redeem-modal__head-title {
        font-size: 14px;
    }

    .gp-shop-redeem-modal__selects {
        flex-direction: column;
        padding: 10px 16px;
    }

    .gp-shop-redeem-modal__item-block {
        padding: 16px;
    }

    .gp-shop-redeem-modal__item-detail-row {
        flex-direction: column;
    }

    .gp-shop-redeem-modal__item-main {
        width: 100%;
    }

    .gp-shop-redeem-modal__item-aside {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .gp-shop-redeem-modal__summary,
    .gp-shop-redeem-modal__actions {
        padding-left: 16px;
        padding-right: 16px;
    }

    .gp-shop-redeem-modal__actions {
        flex-direction: row;
        align-items: center;
    }

    .gp-shop-redeem-modal__cancel {
        width: 120px;
        flex: 0 0 auto;
    }

    .gp-shop-redeem-modal__confirm {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
    }
}

/* Redeem success modal (Figma MCP: node 3619-38636 "Reddem Success") */

.gp-shop-redeem-success-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 73;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-shop-redeem-success-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-shop-redeem-success-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.7);
    cursor: pointer;
    pointer-events: auto;
}

.gp-shop-redeem-success-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 667px;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-shop-redeem-success-modal__dialog {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    background-color: #1a1b1e;
    border-radius: 20px;
    padding: 40px 30px;
}

.gp-shop-redeem-success-modal__inner {
    display: flex;
    width: 100%;
    min-width: 0px;
    flex-direction: column;
    gap: 20px;
}

.gp-shop-redeem-success-modal__hero {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.gp-shop-redeem-success-modal__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
}

    .gp-shop-redeem-success-modal__icon img {
        width: 60px;
        height: 60px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-shop-redeem-success-modal__hero-text {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.gp-shop-redeem-success-modal__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: normal;
    color: #ffffff;
}

.gp-shop-redeem-success-modal__subtitle {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #ffffff;
}

.gp-shop-redeem-success-modal__pack {
    width: 100%;
    border-radius: 10px;
    background-color: #212326;
}

.gp-shop-redeem-success-modal__pack-inner {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

.gp-shop-redeem-success-modal__pack-row {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
}

.gp-shop-redeem-success-modal__thumb-wrap {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 0.375rem;
    width: 100px;
    height: 100px;
}

.gp-shop-redeem-success-modal__thumb {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 6px;
}

.gp-shop-redeem-success-modal__thumb-badge {
    position: absolute;
    left: 0px;
    top: 0px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 0 0 5px 0;
    background-color: #3db9eb;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: normal;
    color: #020e1f;
}

.gp-shop-redeem-success-modal__pack-meta {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 5px;
}

.gp-shop-redeem-success-modal__pack-title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #f0f4f8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gp-shop-redeem-success-modal__pack-qty {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #829ab1;
}

.gp-shop-redeem-success-modal__recipient {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 5px;
    padding: 0 20px;
}

.gp-shop-redeem-success-modal__recipient-label {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #829ab1;
}

.gp-shop-redeem-success-modal__recipient-values {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #1caee7;
}

.gp-shop-redeem-success-modal__recipient-line {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gp-shop-redeem-success-modal__items-toggle {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: 5px;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #829ab1;
}

    .gp-shop-redeem-success-modal__items-toggle img {
        width: 24px;
        height: 24px;
        -o-object-fit: contain;
        object-fit: contain;
        flex-shrink: 0;
        transition: transform 0.2s ease;
    }

    .gp-shop-redeem-success-modal__items-toggle[aria-expanded="false"] img {
        transform: rotate(0deg);
    }

    .gp-shop-redeem-success-modal__items-toggle[aria-expanded="true"] img {
        transform: rotate(180deg);
    }

.gp-shop-redeem-success-modal__items-toggle-label--when-expanded[hidden],
.gp-shop-redeem-success-modal__items-toggle-label--when-collapsed[hidden] {
    display: none !important;
}

.gp-shop-redeem-success-modal__items-shell {
    width: 100%;
    border-radius: 10px;
    border: 1px solid #243b53;
    background-color: #27292f;
}

    .gp-shop-redeem-success-modal__items-shell[hidden] {
        display: none !important;
    }

.gp-shop-redeem-success-modal__items-scroll {
    max-height: 94px;
    overflow-y: auto;
    padding: 12px;
    scrollbar-width: thin;
    scrollbar-color: #bcccdc #3d4350;
}

    .gp-shop-redeem-success-modal__items-scroll::-webkit-scrollbar {
        width: 8px;
    }

    .gp-shop-redeem-success-modal__items-scroll::-webkit-scrollbar-track {
        background: #3d4350;
        border-radius: 2px;
    }

    .gp-shop-redeem-success-modal__items-scroll::-webkit-scrollbar-thumb {
        background: #bcccdc;
        border-radius: 2px;
    }

.gp-shop-redeem-success-modal__items-list {
    margin: 0;
    padding: 10px;
    list-style: none;
}

.gp-shop-redeem-success-modal__item-row {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #9fb3c8;
}

    .gp-shop-redeem-success-modal__item-row + .gp-shop-redeem-success-modal__item-row {
        margin-top: 10px;
    }

.gp-shop-redeem-success-modal__item-name {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 24px;
    position: relative;
}

    .gp-shop-redeem-success-modal__item-name::before {
        content: "";
        position: absolute;
        left: 8px;
        top: 0.55em;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: #9fb3c8;
    }

.gp-shop-redeem-success-modal__item-qty {
    flex: 0 0 auto;
    text-align: right;
    color: #9fb3c8;
}

.gp-shop-redeem-success-modal__actions {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
}

.gp-shop-redeem-success-modal__dismiss {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    height: 60px;
    padding: 10px 80px;
    border-radius: 10px;
    border: 1px solid #486581;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #829ab1;
}

    .gp-shop-redeem-success-modal__dismiss:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-shop-redeem-success-modal__shop {
    display: inline-flex;
    min-width: 0px;
    flex: 1 1 0%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    text-decoration-line: none;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    height: 60px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #1caee7;
    background-color: #1caee7;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: normal;
    color: #020e1f;
    text-align: center;
}

    .gp-shop-redeem-success-modal__shop:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-shop-redeem-success-modal__remaining {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 0;
}

.gp-shop-redeem-success-modal__remaining-label {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 13.248px;
    color: #829ab1;
}

.gp-shop-redeem-success-modal__remaining-value {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

    .gp-shop-redeem-success-modal__remaining-value img {
        width: 16px;
        height: 16px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-shop-redeem-success-modal__remaining-amount {
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 13.248px;
    color: #27c840;
    text-align: right;
}

@media (max-width: 639px) {
    .gp-shop-redeem-success-modal__dialog {
        padding: 28px 20px;
    }

    .gp-shop-redeem-success-modal__recipient {
        width: 100%;
        padding: 0;
    }

    .gp-shop-redeem-success-modal__dismiss {
        padding-left: 24px;
        padding-right: 24px;
    }
}

body.gp-shop-redeem-success-modal-open {
    overflow: hidden;
}

/* Gift modal (Figma: popup-gift) */

.gp-shop-gift-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 71;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-shop-gift-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.6);
    cursor: pointer;
    pointer-events: auto;
}

.gp-shop-gift-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 0px;
    width: 100%;
    justify-content: center;
    max-width: 686px;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-shop-gift-modal__dialog {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    background-color: #1a1b1e;
    border: 1px solid #243b53;
    border-radius: 10px;
    padding: 20px 30px 40px;
}

.gp-shop-gift-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-shop-gift-modal__header {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 10px;
}

.gp-shop-gift-modal__title-row {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    align-items: center;
    gap: 10px;
}

.gp-shop-gift-modal__title-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

    .gp-shop-gift-modal__title-icon img {
        width: 24px;
        height: 24px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-shop-gift-modal__heading {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: normal;
    color: #ffffff;
}

.gp-shop-gift-modal__close {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    width: 32px;
    height: 32px;
}

    .gp-shop-gift-modal__close img {
        width: 20px;
        height: 20px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-shop-gift-modal__body {
    display: flex;
    min-height: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    overflow-y: auto;
    gap: 20px;
    padding: 0 clamp(0px, 1vw, 50px);
    overscroll-behavior: contain;
}

.gp-shop-gift-modal__pack {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.25rem;
    border-radius: 10px;
    background-color: #27292f;
    padding: 20px;
}

.gp-shop-gift-modal__pack-main {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    align-items: flex-start;
    gap: 10px;
}

.gp-shop-gift-modal__media {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    width: 100px;
    height: 100px;
    border-radius: 6px;
}

.gp-shop-gift-modal__pack-img {
    position: absolute;
    inset: 0px;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 6px;
}

.gp-shop-gift-modal__labels {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.gp-shop-gift-modal__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 0 0 5px 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: normal;
    color: #020e1f;
    background-color: #facc15;
}

.gp-shop-gift-modal__meta {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: 10px;
}

.gp-shop-gift-modal__pack-title {
    margin: 0;
    max-width: 215px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #f0f4f8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gp-shop-gift-modal__limit-slot {
    display: inline-flex;
    height: 35px;
    max-width: 215px;
    align-items: center;
    overflow: hidden;
    border-radius: 10px;
    border-width: 0.562px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(104 82 51 / var(--tw-border-opacity, 1));
    background-color: rgba(231,167,28,0.06);
    padding: 8px 10px;
    gap: 5px;
}

.gp-shop-gift-modal__limit-divider {
    width: 2px;
    height: 14px;
    background-color: #5f4e37;
    flex-shrink: 0;
}

.gp-shop-gift-modal__limit-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #ffffff;
    white-space: nowrap;
}

.gp-shop-gift-modal__limit-count {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 15px;
    color: #ffde2d;
}

.gp-shop-gift-modal__limit-group {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.gp-shop-gift-modal__stock {
    width: 100%;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
}

.gp-shop-gift-modal__stock-label {
    color: #ffffff;
}

.gp-shop-gift-modal__stock-count {
    color: #f24c10;
}

.gp-shop-gift-modal__stock-unit {
    color: #ffffff;
}

.gp-shop-gift-modal__pack-side {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    flex-direction: column;
    width: 130px;
    gap: 10px;
}

@media (max-width: 640px) {
    .gp-shop-gift-modal__pack-side {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
    }
}

.gp-shop-gift-modal__price-block {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.gp-shop-gift-modal__price-detail {
    display: flex;
    min-width: 0px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.gp-shop-gift-modal__price {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 15.745px;
    color: #ffffff;
}

.gp-shop-gift-modal__price-orig {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 13.496px;
    color: #829ab1;
    text-decoration-line: line-through;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none;
}

.gp-shop-gift-modal__disc-rate {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 5.623px;
    border-width: 1.125px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(255 222 45 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    padding: 0 10.909px;
}

    .gp-shop-gift-modal__disc-rate span {
        font-family: "Google Sans", sans-serif;
        font-weight: 500;
        font-size: 14px;
        line-height: 13.496px;
        color: #061221;
        text-align: center;
    }

.gp-shop-gift-modal__qty {
    display: flex;
    height: 50px;
    width: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px;
    --tw-bg-opacity: 1;
    background-color: rgb(51 51 51 / var(--tw-bg-opacity, 1));
    padding: 0 10px;
    gap: 30px;
}

.gp-shop-gift-modal__qty-btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    width: 24px;
    height: 24px;
}

    .gp-shop-gift-modal__qty-btn img {
        width: 14px;
        height: 14px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-shop-gift-modal__qty-value {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: normal;
    color: #facc15;
    min-width: 1em;
    text-align: center;
}

.gp-shop-gift-modal__section-label {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.gp-shop-gift-modal__section-line {
    flex: 1 1 0;
    max-width: 200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #627d98 20%, #627d98 80%, transparent);
}

.gp-shop-gift-modal__section-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 14px;
    color: #627d98;
    text-transform: capitalize;
    white-space: nowrap;
}

.gp-shop-gift-modal__expiry-notice {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 5px;
    padding: 2px 15px;
    border-radius: 99px;
    border: 1px solid #ff8d28;
    background-color: rgba(255, 141, 40, 0.2);
}

.gp-shop-gift-modal__expiry-notice-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-shop-gift-modal__expiry-notice-text {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #febc2f;
}

.gp-shop-gift-modal__friend {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.gp-shop-gift-modal__friend-label {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #ffffff;
}

.gp-shop-gift-modal__friend-row {
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
}

.gp-shop-gift-modal__friend-input {
    min-height: 60px;
    min-width: 0px;
    flex: 1 1 0%;
    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 10px;
    padding-bottom: 10px;
    border-color: #3a3c43;
    background-color: #27292f;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #f0f4f8;
    transition: border-color 0.2s, color 0.2s;
}

    .gp-shop-gift-modal__friend-input::-moz-placeholder {
        color: #5c5e67;
    }

    .gp-shop-gift-modal__friend-input::placeholder {
        color: #5c5e67;
    }

.gp-shop-gift-modal__friend-check {
    display: inline-flex;
    min-height: 60px;
    width: 120px;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 10px;
    padding-bottom: 10px;
    border-color: #1b65c2;
    background-color: rgba(15, 63, 123, 0.5);
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #1caee7;
    transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

/* Friend-caution block (hidden by default, shown by state modifiers) */

.gp-shop-gift-modal__friend-caution {
    margin-top: 1rem;
    margin-bottom: 1rem;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 16px;
    display: none;
    font-family: "Google Sans", sans-serif;
    line-height: normal;
    text-align: center;
}

.gp-shop-gift-modal__friend-caution-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.gp-shop-gift-modal__friend-caution-icon {
    width: 18px;
    height: 18px;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-shop-gift-modal__friend-caution-heading {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: normal;
}

.gp-shop-gift-modal__friend-caution-text {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
}

/* ── Typing state ── */

.gp-shop-gift-modal__friend--typing .gp-shop-gift-modal__friend-input {
    border-color: #1caee7;
    color: #1caee7;
}

/* ── Invalid state (ไม่มีคนนี้) ── */

.gp-shop-gift-modal__friend--invalid .gp-shop-gift-modal__friend-input {
    border-color: #ff5f57;
    color: #ff5f57;
}

.gp-shop-gift-modal__friend--invalid .gp-shop-gift-modal__friend-check {
    border-color: #ff5f57;
    color: #ff5f57;
}

.gp-shop-gift-modal__friend--invalid .gp-shop-gift-modal__friend-caution {
    display: flex;
    background: rgba(255, 95, 87, 0.2);
    border-color: #ff5f57;
    color: #ff5f57;
}

/* ── Duplicate state (เพื่อนได้ไปแล้ว) ── */

.gp-shop-gift-modal__friend--duplicate .gp-shop-gift-modal__friend-input {
    border-color: #ff8d28;
    color: #ff8d28;
}

.gp-shop-gift-modal__friend--duplicate .gp-shop-gift-modal__friend-check {
    border-color: #ff8d28;
    color: #ff8d28;
}

.gp-shop-gift-modal__friend--duplicate .gp-shop-gift-modal__friend-caution {
    display: flex;
    background: rgba(255, 141, 40, 0.2);
    border-color: #ff8d28;
    color: #ff8d28;
}

/* ── Valid state (ส่งได้) ── */

.gp-shop-gift-modal__friend--valid .gp-shop-gift-modal__friend-input {
    border-color: #34c759;
    color: #34c759;
}

.gp-shop-gift-modal__friend--valid .gp-shop-gift-modal__friend-check {
    border-color: #35404e;
    background-color: rgba(39, 54, 72, 0.5);
    color: #4d595d;
    cursor: default;
    pointer-events: none;
}

.gp-shop-gift-modal__friend--valid .gp-shop-gift-modal__friend-caution {
    display: flex;
    background: rgba(52, 199, 89, 0.2);
    border-color: #34c759;
    color: #34c759;
}

.gp-shop-gift-modal__friend--valid .gp-shop-gift-modal__btn-cart {
    border-color: #3db9eb;
    color: #1caee7;
    cursor: pointer;
    opacity: 1;
}

    .gp-shop-gift-modal__friend--valid .gp-shop-gift-modal__btn-cart img {
        opacity: 1;
    }

.gp-shop-gift-modal__friend--valid .gp-shop-gift-modal__btn-pay {
    background: linear-gradient(114.3deg, #52ceff 5.7%, #1caee7 54.4%);
    border-color: #3db9eb;
    color: #020e1f;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 6px 19.7px rgba(11, 77, 160, 0.5);
}

/* Error / duplicate states: button text swap */

.gp-shop-gift-modal__friend--invalid .gp-shop-gift-modal__btn-cart,
.gp-shop-gift-modal__friend--duplicate .gp-shop-gift-modal__btn-cart {
    border-color: #636363;
}

.gp-shop-gift-modal__actions {
    display: flex;
    width: 100%;
    align-items: stretch;
    gap: 20px;
    margin-top: 20px;
}

.gp-shop-gift-modal__btn-cart {
    display: flex;
    min-height: 0px;
    min-width: 0px;
    flex: 1 1 0%;
    cursor: not-allowed;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    opacity: 0.9;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

    .gp-shop-gift-modal__btn-cart:hover {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

    .gp-shop-gift-modal__btn-cart:active {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-shop-gift-modal__btn-cart {
    border-color: #4d595d;
    background-color: transparent;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: normal;
    color: #4d595d;
}

    .gp-shop-gift-modal__btn-cart:disabled {
        cursor: not-allowed;
    }

    .gp-shop-gift-modal__btn-cart img {
        width: 18px;
        height: 18px;
        -o-object-fit: contain;
        object-fit: contain;
        opacity: 0.85;
    }

.gp-shop-gift-modal__btn-pay {
    display: flex;
    min-height: 60px;
    min-width: 0px;
    flex: 1 1 0%;
    cursor: not-allowed;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

    .gp-shop-gift-modal__btn-pay:hover {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

    .gp-shop-gift-modal__btn-pay:active {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-shop-gift-modal__btn-pay {
    border-color: #4d595d;
    background-color: #2c2d30;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #627074;
}

.gp-shop-gift-modal__friend-help {
    margin-top: 1rem;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration-line: none;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.gp-shop-gift-modal__friend-help-icon {
    width: 18px;
    height: 18px;
    -o-object-fit: contain;
    object-fit: contain;
    flex-shrink: 0;
}

.gp-shop-gift-modal__friend-help-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 13.248px;
    color: #829ab1;
    text-transform: capitalize;
}

.gp-shop-gift-modal__friend-help:hover .gp-shop-gift-modal__friend-help-text {
    color: #fff;
}

body.gp-shop-gift-modal-open {
    overflow: hidden;
}

.gp-shop-grid {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gp-shop-filter {
    display: flex;
    width: 100%;
    align-items: center;
    overflow-x: auto;
    gap: 8px;
    scrollbar-width: none;
}

    .gp-shop-filter::-webkit-scrollbar {
        display: none;
    }

.gp-shop-filter__pill {
    cursor: pointer;
    white-space: nowrap;
    border-radius: 9999px;
    border-width: 1px;
    border-color: transparent;
    background-color: transparent;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 12px;
    color: #9fb3c8;
    padding: 8px 12px;
    background-color: rgba(12, 25, 44, 0.9);
}

.gp-shop-filter__pill--active {
    color: #ffffff;
    border-color: rgba(28, 174, 231, 0.55);
    background-color: rgba(28, 174, 231, 0.2);
}

.gp-shop-filter__sort {
    display: inline-flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(36 59 83 / var(--tw-border-opacity, 1));
    background-color: transparent;
    padding: 10px 12px;
}

.gp-shop-filter__sort-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 13px;
    color: #e3f6fc;
}

.gp-shop-filter__sort img {
    height: 1rem;
    width: 1rem;
    transform: rotate(90deg);
}

.gp-shop-packages {
    width: 100%;
}

.gp-shop-packages__grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .gp-shop-packages__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }
}

@media (min-width: 1024px) and (orientation: portrait) {
    .gp-shop-packages__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }
}

.gp-shop-package-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 11px;
    height: 100%;
    padding: 10px;
    gap: 10px;
    background: linear-gradient(#242424, #242424) padding-box, linear-gradient(135deg, #ff8bbf, #f488ff, #7ef359, #ffde2d, #1bb1e7) border-box;
    border: 0.5px solid transparent;
}

    /* Point shop card modifier (Figma: gpoint card) */

    .gp-shop-package-card.gpoint-card {
        border: 0.545px solid #52ceff;
        border-radius: 10.909px;
        background: #242424;
    }

    /* Red Credit shop card modifier */

    .gp-shop-package-card.redcredit-card {
        border: 0.545px solid transparent;
        border-radius: 10.909px;
        background: linear-gradient(#242424, #242424) padding-box, linear-gradient(-135deg, #facc15, #ef569b) border-box;
    }

    .gp-shop-package-card .redcredit-card__badge {
        border-radius: 0 0 5px 0;
        background-color: #831616;
        color: #ffffff;
    }

.gp-shop-redeem-modal__item-badge.redcredit-card__badge,
.gp-shop-redeem-success-modal__thumb-badge.redcredit-card__badge {
    background-color: #831616;
    color: #fff;
}

.gp-shop-package-card.redcredit-card .gp-shop-package-card__price-row {
    padding-bottom: 10px;
    min-height: auto;
}

.gp-shop-package-card.redcredit-card .gp-shop-package-card__prices {
    gap: 5px;
}

.gp-shop-package-card .redcredit-card__cta {
    height: 50px;
    border-color: #831616;
    background-color: #831616;
}

    .gp-shop-package-card .redcredit-card__cta img {
        width: 25px;
        height: 25px;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .gp-shop-package-card .redcredit-card__cta span {
        font-size: 18px;
    }

.gp-shop-package-card__cta--disabled.redcredit-card__cta img {
    opacity: 0.85;
}

/* Countdown timer bar */

.gp-shop-package-card__countdown {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 5px;
    height: 27px;
}

.gp-shop-package-card__countdown-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 27px;
    height: 27px;
    border-radius: 4.5px;
    background-color: #1b1b1b;
}

    .gp-shop-package-card__countdown-icon img {
        width: 16px;
        height: 16px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-shop-package-card__countdown-text {
    display: flex;
    flex: 1 1 0%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 27px;
    border-radius: 4.5px;
    background-color: #1b1b1b;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 13.5px;
    color: #facc15;
    text-align: center;
}

.gp-shop-package-card__countdown--unlimited .gp-shop-package-card__countdown-text {
    color: #9fb3c8;
}

.gp-shop-package-card__countdown--limited .gp-shop-package-card__countdown-text {
    color: #1CAEE7;
}

/* Product image area */

.gp-shop-package-card__thumb-wrap {
    position: relative;
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 6.5px;
}

.gp-shop-package-card__thumb-btn {
    position: absolute;
    inset: 0px;
    z-index: 0;
    display: block;
    cursor: pointer;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 6.5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.gp-shop-package-card__thumb-btn--disabled {
    --tw-brightness: brightness(.5);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.gp-shop-package-card__thumb {
    pointer-events: none;
    position: absolute;
    inset: 0px;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 6.5px;
}

.gp-shop-package-card__labels {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    z-index: 1;
}

.gp-shop-package-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 0 0 5px 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: normal;
    color: #061221;
    background-color: #facc15;
}

.gp-shop-package-card .gpoint-card__badge {
    border-radius: 0 0 5px 0;
    background: #3db9eb;
    color: #020e1f;
}

.gp-shop-package-card__badge--new {
    background-color: #8CD6F3;
}

.gp-shop-package-card__overlay {
    position: relative;
    display: flex;
    width: 100%;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 10px;
    padding: 11px;
    z-index: 1;
    pointer-events: none;
}

.gp-shop-package-card__fav {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

    .gp-shop-package-card__fav:hover {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

    .gp-shop-package-card__fav:active {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-shop-package-card__fav {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(114, 114, 114, 0.2);
    border: none;
    padding: 5.6px;
    cursor: pointer;
    pointer-events: auto;
}

    .gp-shop-package-card__fav img {
        width: 18px;
        height: 18px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-shop-package-card__share {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

    .gp-shop-package-card__share:hover {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

    .gp-shop-package-card__share:active {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-shop-package-card__share {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(114, 114, 114, 0.2);
    border: none;
    padding: 5.6px;
    cursor: pointer;
    pointer-events: auto;
}

    .gp-shop-package-card__share img {
        width: 18px;
        height: 18px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-shop-package-card__info {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
}

    .gp-shop-package-card__info img {
        width: 20px;
        height: 20px;
        -o-object-fit: contain;
        object-fit: contain;
    }

/* Card body: title, limit, price */

.gp-shop-package-card__body {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-shop-package-card__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #f0f4f8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.gp-shop-package-card__limit-row {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-height: 50px;
}

.gp-shop-package-card__stock {
    width: 100%;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
}

.gp-shop-package-card__stock-label {
    color: #ffffff;
}

.gp-shop-package-card__stock-count {
    color: #f24c10;
}

.gp-shop-package-card__stock-unit {
    color: #ffffff;
}

.gp-shop-package-card__limit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 10px;
    border: 0.56px solid #685233;
    border-radius: 10px;
    background: rgba(231, 167, 28, 0.06);
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: normal;
    color: #ffffff;
    width: -moz-fit-content;
    width: fit-content;
}

.gp-shop-package-card__limit-divider {
    width: 2px;
    height: 12px;
    background-color: #5f4e37;
    flex-shrink: 0;
}

.gp-shop-package-card__limit-count {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    color: #ffde2d;
}

.gp-shop-package-card__limit-count--full {
    color: #eb3d3d;
}

.gp-shop-package-card__limit--full {
    border-color: #683333;
    background: rgba(199, 81, 52, 0.06);
}

    .gp-shop-package-card__limit--full .gp-shop-package-card__limit-count {
        color: #eb3d3d;
    }

    .gp-shop-package-card__limit--full .gp-shop-package-card__limit-divider {
        background-color: #683333;
    }

.gp-shop-package-card--serenade .gp-shop-package-card__limit--full .gp-shop-package-card__limit-divider {
    border-left-color: #683333;
}

.gp-shop-package-card__limit-count--unlimited {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    line-height: 0;
}

    .gp-shop-package-card__limit-count--unlimited img {
        display: block;
        width: 20px;
        height: auto;
    }

.gp-shop-package-card__price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    min-height: 50px;
}

.gp-shop-package-card__prices {
    display: flex;
    flex: 1 1 0%;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.gp-shop-package-card__price {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 15.7px;
    color: #facc15;
    white-space: nowrap;
}

.gp-shop-package-card.gpoint-card .gp-shop-package-card__price-row {
    padding-bottom: 10px;
    min-height: auto;
}

.gp-shop-package-card.gpoint-card .gp-shop-package-card__prices {
    gap: 5px;
}

.gp-shop-package-card .gpoint-card__currency {
    width: 24px;
    height: 24px;
    -o-object-fit: cover;
    object-fit: cover;
    flex-shrink: 0;
}

.gp-shop-package-card .gpoint-card__price {
    font-size: 20px;
    line-height: 15.745px;
    color: #facc15;
}

.gp-shop-package-card__price-orig {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 13.5px;
    color: #829ab1;
    text-decoration: line-through;
    white-space: nowrap;
}

.gp-shop-package-card__discount {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 5.6px;
    background-color: #facc15;
    border: 1.1px solid #ffde2d;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 13.5px;
    color: #061221;
    text-align: center;
}

/* Actions: quantity + buttons */

.gp-shop-package-card__actions {
    margin-top: auto;
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-shop-package-card__qty {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    padding: 0 16px;
    background-color: #333333;
    border: 1px solid #334e68;
    border-radius: 10px;
}

.gp-shop-package-card__qty-label {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 15.7px;
    color: #f0f4f8;
    white-space: nowrap;
}

.gp-shop-package-card__qty-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gp-shop-package-card__qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    color: #9fb3c8;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.gp-shop-package-card__qty-value {
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: normal;
    color: #ffffff;
    text-align: center;
    min-width: 24px;
}

.gp-shop-package-card__btns {
    display: flex;
    width: 100%;
    gap: 5px;
    height: 44px;
}

.gp-shop-package-card__cta {
    display: flex;
    flex: 1 1 0%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

    .gp-shop-package-card__cta:hover {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

    .gp-shop-package-card__cta:active {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-shop-package-card__cta {
    gap: 5px;
    height: 44px;
    padding: 5px 10px;
    border: 1px solid #3db9eb;
    border-radius: 10px;
    background-color: #1caee7;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: normal;
    color: #ffffff;
}

.gp-shop-package-card .gpoint-card__cta {
    height: 50px;
    border-color: #5130c5;
    background-color: #411cc5;
}

    .gp-shop-package-card .gpoint-card__cta img {
        width: 25px;
        height: 25px;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .gp-shop-package-card .gpoint-card__cta span {
        font-size: 18px;
    }

.gp-shop-package-card__cta img {
    width: 18px;
    height: 18px;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-shop-package-card__cta--disabled {
    background-color: #333333;
    border-color: #3f3f3f;
    color: #848484;
    cursor: not-allowed;
}

.gp-shop-package-card .gp-shop-package-card__cta--disabled.gpoint-card__cta,
.gp-shop-package-card .gp-shop-package-card__cta--disabled.redcredit-card__cta {
    background-color: #333333;
    border-color: #3f3f3f;
    color: #848484;
}

.gp-shop-package-card__cta--disabled.gpoint-card__cta img {
    opacity: 0.85;
}

.gp-shop-package-card__gift {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

    .gp-shop-package-card__gift:hover {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

    .gp-shop-package-card__gift:active {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-shop-package-card__gift {
    width: 44px;
    height: 44px;
    border: 1px solid #0b4da0;
    border-radius: 10px;
    background-color: #093f85;
    padding: 0;
    cursor: pointer;
}

    .gp-shop-package-card__gift img {
        width: 20px;
        height: 20px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-shop-package-card__gift--disabled {
    background-color: #333333;
    border-color: #3f3f3f;
    cursor: not-allowed;
}

.gp-shop-pagination {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 10px;
}

.gp-shop-pagination--col-span-full {
    grid-column: 1 / -1;
}

.gp-shop-pagination__page,
.gp-shop-pagination__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    width: 26px;
    height: 26px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: #627d98;
    border: none;
    border-radius: 999px;
}

.gp-shop-pagination__page--active {
    color: #ffffff;
    font-weight: 500;
    background-color: #4b89c9;
}

.gp-shop-pagination__arrow-icon {
    display: block;
    width: 24px;
    height: 24px;
}

.gp-shop-pagination__arrow-icon--prev {
    transform: none;
}

.gp-shop-pagination__arrow-icon--next {
    transform: none;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-shop-main {
        gap: 20px;
        padding-bottom: 40px;
    }

    .gp-shop-main__header {
        flex-direction: column;
        gap: 0;
    }

    .gp-shop-cate-tabs {
        width: 100%;
        overflow: visible;
        gap: 0;
        border-radius: 20px 20px 0 0;
    }

    .gp-shop-cate-tabs__tab {
        flex-direction: row;
        gap: 10px;
        width: auto;
        height: 80px;
        flex: 1 1 0;
        border-radius: 20px 20px 0 0;
    }

    .gp-shop-cate-tabs__icon img {
        width: 20px;
        height: 20px;
    }

    .gp-shop-cate-tabs__tab--active .gp-shop-cate-tabs__icon img {
        width: 22px;
        height: 22px;
    }

    .gp-shop-cate-tabs__text {
        font-size: 18px;
        line-height: 18px;
    }

    .gp-shop-sort-bar {
        height: 80px;
        padding: 10px 20px 10px 30px;
        background-color: #1b1b1b;
    }

    .gp-shop-sort-bar__label {
        font-size: 18px;
        line-height: 18px;
    }

    .gp-shop-sort-bar__buttons {
        gap: 20px;
    }

    .gp-shop-sort-bar__btn {
        height: 23px;
        width: auto;
    }

        .gp-shop-sort-bar__btn span {
            font-size: 18px;
            line-height: 16px;
        }

    .gp-shop-sort-bar__btn-icon {
        width: 22px;
        height: 22px;
    }

    .gp-shop-main__controls {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .gp-shop-filter {
        flex: 1 1 0%;
        overflow: visible;
        gap: 10px;
    }

    .gp-shop-filter__pill {
        font-size: 13px;
        line-height: 13px;
        padding: 10px 14px;
    }

    .gp-shop-filter__sort {
        width: 220px;
    }

    .gp-shop-main__body {
        display: grid;
        grid-template-columns: 200px minmax(0, 1fr);
        -moz-column-gap: 20px;
        column-gap: 20px;
        align-items: flex-start;
    }

    .gp-shop-filter-sidebar {
        display: flex;
    }

    .gp-shop-main__controls {
        display: none;
    }

    .gp-shop-packages__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
    }

    .gp-shop-package-card__title {
        font-size: 18px;
    }

    .gp-shop-package-card__limit {
        font-size: 14px;
    }

    .gp-shop-package-card__limit-count {
        font-size: 14px;
    }

    .gp-shop-package-card__price {
        font-size: 20px;
    }

    .gp-shop-package-card__price-orig {
        font-size: 14px;
    }

    .gp-shop-package-card__discount {
        width: 50px;
        height: 50px;
        font-size: 14px;
    }

    .gp-shop-package-card__qty {
        height: 50px;
        padding: 0 20px;
    }

    .gp-shop-package-card__qty-label {
        font-size: 16px;
    }

    .gp-shop-package-card__btns {
        height: 50px;
    }

    .gp-shop-package-card__cta {
        height: 50px;
        font-size: 16px;
    }

    .gp-shop-package-card__gift {
        width: 50px;
        height: 50px;
    }
}

/* Shop mobile fixed footer + support FAB (Figma mobile frame) */

:root {
    --gp-shop-footer-h: 80px;
}

.gp-shop {
    padding-bottom: calc(var(--gp-shop-footer-h) + 20px + env(safe-area-inset-bottom, 0px));
}

.gp-shop-mobile-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    height: var(--gp-shop-footer-h);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: radial-gradient( ellipse at 3% -28%, #0b4da0 0%, #0f417f 25%, #14355e 50%, #18283d 75%, #1c1c1c 100% );
    box-shadow: 0 -13px 12.1px rgba(0, 0, 0, 0.32);
}

    .gp-shop-mobile-footer::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1px;
        pointer-events: none;
        background: linear-gradient(to right, #ff8bbf, #f488ff, #7ef359, #ffde2d, #1bb1e7);
    }

.gp-shop-mobile-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 400px;
    height: 100%;
    overflow: hidden;
    padding: 0 10px;
}

.gp-shop-mobile-footer__game {
    display: flex;
    align-items: center;
    text-decoration-line: none;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.gp-shop-mobile-footer__game-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background-color: #032433;
}

.gp-shop-mobile-footer__game-icon-img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
}

.gp-shop-mobile-footer__game-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    min-width: 0;
}

.gp-shop-mobile-footer__game-name {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    background: linear-gradient(120deg, #52ceff 5.7%, #1caee7 54.37%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
}

.gp-shop-mobile-footer__user-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.gp-shop-mobile-footer__username {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    color: #e3f6fc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gp-shop-mobile-footer__user-change {
    width: 16px;
    height: 16px;
    -o-object-fit: contain;
    object-fit: contain;
    flex-shrink: 0;
}

.gp-shop-mobile-footer__cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration-line: none;
    position: relative;
    width: 55px;
    height: 55px;
    border-radius: 10px;
    background: linear-gradient(#1b2026, #1b2026) padding-box, linear-gradient(135deg, #ff8bbf, #f488ff, #7ef359, #ffde2d, #1bb1e7) border-box;
    border: 0.5px solid transparent;
    flex-shrink: 0;
}

.gp-shop-mobile-footer__cart-icon {
    width: 39px;
    height: 39px;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-shop-mobile-footer__cart-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 3px;
    top: 5px;
    min-width: 20px;
    height: 16px;
    padding: 3px 5px;
    border-radius: 999px;
    background-color: #ffde2d;
    color: #000;
    font-family: "Prompt", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}

.gp-shop-mobile-footer__points {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    flex-shrink: 0;
    align-items: flex-start;
}

.gp-shop-mobile-footer__points-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.gp-shop-mobile-footer__points-icon {
    width: 20px;
    height: 20px;
    -o-object-fit: cover;
    object-fit: cover;
    flex-shrink: 0;
}

.gp-shop-mobile-footer__points-value {
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    white-space: nowrap;
}

.gp-shop-mobile-footer__points-value--genpoint {
    color: #1caee7;
}

.gp-shop-mobile-footer__points-value--redcredit {
    color: #ff4545;
}

.gp-shop-support-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration-line: none;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

    .gp-shop-support-fab:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-shop-support-fab {
    position: fixed;
    right: 0px;
    bottom: calc(var(--gp-shop-footer-h) + env(safe-area-inset-bottom, 0px));
    z-index: 31;
    width: 44px;
    height: 44px;
    border: 1px solid #5fc4ee;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(97deg, #52ceff 5.7%, #1caee7 54.37%);
    box-shadow: 0 0 8px rgba(28, 174, 231, 0.5);
}

.gp-shop-support-fab__icon {
    width: 30px;
    height: 30px;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-shop-support-fab__label {
    display: none;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-shop {
        padding-bottom: 0;
    }

    .gp-shop-mobile-footer {
        display: none;
    }

    .gp-shop-support-fab {
        gap: 0.5rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        right: 20px;
        bottom: 0;
        width: auto;
        color: #fff;
    }

    .gp-shop-support-fab__label {
        display: inline-block;
        font-family: "Google Sans", sans-serif;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
        color: #102A43;
        white-space: nowrap;
    }
}

.gp-create__inner {
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-create__inner {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

.gp-create__grid {
    margin-left: auto;
    margin-right: auto;
    display: grid;
    width: 100%;
    gap: 1rem;
    max-width: 980px;
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-create__grid {
        gap: 3rem;
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.gp-create__form {
    display: flex;
    flex-direction: column;
}

.gp-forgot__form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gp-forgot-card__content {
    display: flex;
    width: 100%;
    min-width: 280px;
    max-width: 500px;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 768px) {
    .gp-forgot-card__content {
        min-width: 450px;
    }
}

.gp-forgot-card__title {
    text-align: center;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    font-family: "Google Sans", sans-serif;
    font-size: 30px;
    /* Figma title size */
    line-height: normal;
    margin-bottom: 12px;
}

.gp-forgot-card__desc {
    text-align: center;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    /* Figma body size */
    line-height: 26px;
    margin-bottom: 22px;
}

.gp-forgot-success {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 80px;
}

.gp-forgot-success__icon {
    width: 55px;
    height: 55px;
    display: block;
}

.gp-forgot-success .gp-forgot-card__title {
    margin-bottom: 0;
    line-height: 26px;
}

.gp-forgot-success .gp-forgot-card__desc {
    margin-bottom: 0;
}

.gp-forgot-stepper {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
}

.gp-forgot-stepper__track {
    display: flex;
    width: 100%;
    align-items: flex-start;
    padding-left: 10px;
    padding-right: 10px;
}

.gp-forgot-stepper__item {
    position: relative;
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.gp-forgot-stepper__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    width: 30px;
    height: 30px;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: normal;
    background-color: #334e68;
    color: #627d98;
}

.gp-forgot-stepper__item--active .gp-forgot-stepper__dot {
    background-color: #1caee7;
    color: #ffffff;
}

.gp-forgot-stepper__dot--inactive {
    /* explicit class for readability in markup */
    background-color: #334e68;
    color: #627d98;
}

.gp-forgot-stepper__line {
    height: 2px;
    flex: 1 1 0;
    max-width: 100px;
    margin-top: 14px;
    background-color: #243b53;
    opacity: 0.7;
}

.gp-forgot-stepper__label {
    font-family: "Google Sans", sans-serif;
    font-size: 12px;
    line-height: normal;
    color: #627d98;
    white-space: nowrap;
    text-align: center;
}

.gp-forgot-stepper__label--active {
    color: #ffffff;
}

.gp-forgot-stepper__label--done {
    color: #1caee7;
}

.gp-forgot-info {
    margin-top: 30px;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    max-width: 500px;
}

.gp-forgot-info__label {
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
}

.gp-forgot-info__input::-moz-placeholder {
    opacity: 0.5;
}

.gp-forgot-info__input::placeholder {
    opacity: 0.5;
}

.gp-forgot-info__submit {
    margin-top: 8px;
}

.gp-forgot-success__actions {
    margin-top: 56px;
    width: 100%;
    max-width: 500px;
}

.gp-forgot-success__cta {
    width: 100%;
}

.gp-forgot-change-pass__session {
    margin-top: 12px;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 10px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.gp-forgot-change-pass__session-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.gp-forgot-change-pass__session-text {
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: normal;
    color: #b3b3b3;
}

.gp-forgot-card__desc-text {
    text-align: center;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: 26px;
    margin: 0;
}

.gp-forgot-card__desc-highlight {
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
    color: #1caee7;
}

.gp-forgot-card__expire {
    text-align: center;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: normal;
    color: #829ab1;
    margin: 20px 0 0;
}

.gp-forgot-stepper__dot--done {
    background-color: #1caee7;
    color: #ffffff;
}

.gp-forgot-stepper__check {
    width: 20px;
    height: 20px;
    display: block;
}

.gp-forgot-stepper__line--active {
    background-color: #1caee7;
    opacity: 1;
}

.gp-forgot-otp {
    margin-top: 30px;
    display: flex;
    width: 100%;
    flex-direction: column;
    max-width: 500px;
    gap: 30px;
}

.gp-forgot-otp__field {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
}

.gp-forgot-otp__prompt {
    width: 100%;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
    margin-bottom: 15px;
}

.gp-forgot-otp__code {
    width: 100%;
}

.gp-forgot-otp__actions {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.gp-forgot-otp__submit {
    width: 100%;
}

.gp-forgot-otp__error {
    margin-top: 15px;
}

.gp-create__title {
    text-align: center;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    font-family: "Google Sans", sans-serif;
    font-size: 30px;
    line-height: normal;
    margin-bottom: 24px;
}

/* Create Game Select (frame: Create Game Select) */

.game-select-page__title {
    font-size: 35px;
    /* Figma title size */
    margin-bottom: 28px;
}

.game-select-page__content {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    min-height: 0;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .game-select-page__content {
        min-height: 520px;
        /* align with `.gp-create__side` */
    }
}

.game-select-page__support {
    margin-top: auto;
    align-self: flex-start;
}

    .game-select-page__support .game-select-popup__support-icon {
        height: 1rem;
        width: 1rem;
    }

    .game-select-page__support .game-select-popup__support-text {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }

.gp-create__card {
    width: 100%;
    overflow: hidden;
    min-height: 520px;
}

.gp-create-card {
    height: 100%;
    width: 100%;
}

.gp-create-card__content {
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.gp-create-card__step {
    width: 100%;
    max-width: 420px;
}

.gp-create-card__stepbar {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    padding-right: 4px;
}

.gp-create-card__stepbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30px;
}

.gp-create-card__stepbar-line {
    max-width: 10rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

@media (min-width: 768px) {
    .gp-create-card__stepbar-line {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

.gp-create-card__stepbar-line {
    margin-top: 14px;
    height: 2px;
    background-color: #243b53;
    opacity: 0.7;
    box-sizing: border-box;
}

.gp-create-card__stepbar-line--active {
    background-color: #1caee7;
    opacity: 1;
}

.gp-create-card__stepdot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    width: 30px;
    height: 30px;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: normal;
    background-color: #334e68;
    color: #627d98;
}

.gp-create-card__stepdot--active {
    background-color: #1caee7;
    color: #ffffff;
}

.gp-create-card__stepdot--done {
    background-color: #1caee7;
    color: #ffffff;
}

.gp-create-card__stepcheck {
    width: 20px;
    height: 20px;
    display: block;
}

.gp-create-card__steptext {
    text-align: center;
    margin-top: 6px;
    font-family: "Google Sans", sans-serif;
    font-size: 12px;
    line-height: normal;
    color: #627d98;
    white-space: nowrap;
}

.gp-create-card__steptext--active {
    color: #ffffff;
}

.gp-create-card__steptext--done {
    color: #1caee7;
}

.gp-create-card__section {
    width: 100%;
    max-width: 500px;
    margin-top: 30px;
}

.gp-create-card__hint {
    width: 100%;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
    margin-bottom: 15px;
}

.gp-create-card__hint-strong {
    font-weight: 700;
}

.gp-create-card__field {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 8px;
}

.gp-create-card__field-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.gp-create-card__input {
    width: 100%;
    border-radius: 10px;
    height: 65px;
    padding: 10px 30px;
    background-color: #05244d;
    border: 1px solid transparent;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
}

    .gp-create-card__input:focus {
        outline: 2px solid transparent;
        outline-offset: 2px;
    }

    .gp-create-card__input:focus-visible {
        box-shadow: 0 0 0 2px rgba(28, 174, 231, 1);
    }

    .gp-create-card__input:-webkit-autofill,
    .gp-create-card__input:-webkit-autofill:hover,
    .gp-create-card__input:-webkit-autofill:focus {
        box-shadow: 0 0 0 1px transparent inset, 0 0 0 1000px #05244d inset;
        -webkit-text-fill-color: #ffffff;
        caret-color: #ffffff;
        -webkit-appearance: none;
        appearance: none;
        border-color: #627D98;
        border-width: 2px;
        outline: none;
    }

.gp-create-card__input--icon {
    padding-right: 56px;
}

.gp-create-card__phone-input {
    width: 100%;
    border-radius: 10px;
    height: 65px;
    padding: 10px 30px;
    background-color: #05244d;
    border: 1px solid transparent;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
    opacity: 0.8;
}

    .gp-create-card__phone-input:focus {
        outline: 2px solid transparent;
        outline-offset: 2px;
    }

    .gp-create-card__phone-input:focus-visible {
        box-shadow: 0 0 0 2px rgba(28, 174, 231, 0.5);
    }

    .gp-create-card__phone-input:-webkit-autofill,
    .gp-create-card__phone-input:-webkit-autofill:hover,
    .gp-create-card__phone-input:-webkit-autofill:focus {
        box-shadow: 0 0 0 1px transparent inset, 0 0 0 1000px #05244d inset;
        -webkit-text-fill-color: #ffffff;
        caret-color: #ffffff;
        -webkit-appearance: none;
        appearance: none;
        border-color: transparent;
        outline: none;
    }

.gp-create-card__send-otp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

    .gp-create-card__send-otp:hover {
        --tw-text-opacity: 1;
        color: rgb(95 196 238 / var(--tw-text-opacity, 1));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-create-card__send-otp {
    height: 50px;
    margin-top: 15px;
    padding: 12px 20px;
    border: 1px solid #486581;
    background-color: transparent;
    color: #1caee7;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: normal;
    cursor: pointer;
}

    .gp-create-card__send-otp:focus {
        outline: 2px solid transparent;
        outline-offset: 2px;
    }

    .gp-create-card__send-otp:focus-visible {
        box-shadow: 0 0 0 2px rgba(28, 174, 231, 0.5);
    }

.gp-create-card__send-otp--resend {
    border-color: #334E68;
    color: #334E68;
}

    .gp-create-card__send-otp--resend:hover {
        color: #334E68;
    }

    .gp-create-card__send-otp--resend:focus-visible {
        box-shadow: 0 0 0 2px rgba(51, 78, 104, 0.5);
    }

.gp-create-card__otp-status {
    margin-top: 10px;
    color: #14AE5C;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: 1.4;
}

.gp-create-card__divider {
    width: 100%;
    height: 1px;
    background-color: #102A43;
    opacity: 0.6;
    margin: 16px 0;
}

.gp-create-card__prompt {
    width: 100%;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
    margin-bottom: 15px;
}

.gp-create-card__otp {
    width: 100%;
}

.gp-create-card__otp-code {
    width: 100%;
}

.gp-create-card__otp-digit.game-select-otp__digit {
    --tw-bg-opacity: 1;
    background-color: rgb(2 14 31 / var(--tw-bg-opacity, 1));
}

    .gp-create-card__otp-digit.game-select-otp__digit:-webkit-autofill,
    .gp-create-card__otp-digit.game-select-otp__digit:-webkit-autofill:hover,
    .gp-create-card__otp-digit.game-select-otp__digit:-webkit-autofill:focus {
        box-shadow: 0 0 0 1px #243b53 inset, 0 0 0 1000px #020e1f inset;
        -webkit-text-fill-color: #ffffff;
        caret-color: #ffffff;
        -webkit-appearance: none;
        appearance: none;
        border-color: #243b53;
        outline: none;
    }

.gp-create-card__terms {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    margin-bottom: 20px;
}

.gp-create-card__terms-checkbox {
    width: 28px;
    height: 28px;
    border: 1.5px solid #1caee7;
    border-radius: 4px;
    background: transparent;
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    display: inline-grid;
    place-content: center;
    position: relative;
    cursor: pointer;
}

    .gp-create-card__terms-checkbox::after {
        content: "";
        width: 7px;
        height: 12px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg) scale(0);
        transform-origin: center;
        transition: transform 0.15s ease-in-out;
    }

    .gp-create-card__terms-checkbox:checked {
        background: #1caee7;
    }

        .gp-create-card__terms-checkbox:checked::after {
            transform: rotate(45deg) scale(1);
        }

.gp-create-card__terms-label {
    width: 100%;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: normal;
    color: #9fb3c8;
}

.gp-create-card__terms-text {
    color: #ffffff;
}

.gp-create-card__terms-sep {
    color: #9fb3c8;
}

.gp-create-card__terms-link {
    color: #1caee7;
    text-decoration: underline;
    text-decoration-thickness: from-font;
}

.gp-create-card__primary {
    width: 100%;
    max-width: 500px;
}

.gp-create-card__back {
    display: flex;
    width: 100%;
    max-width: 500px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

    .gp-create-card__back:hover {
        --tw-text-opacity: 1;
        color: rgb(95 196 238 / var(--tw-text-opacity, 1));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-create-card__back {
    height: 55px;
    margin-top: 12px;
    padding: 10px;
    border: 1px solid #486581;
    background-color: transparent;
    color: #1caee7;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    cursor: pointer;
}

    .gp-create-card__back:focus {
        outline: 2px solid transparent;
        outline-offset: 2px;
    }

    .gp-create-card__back:focus-visible {
        box-shadow: 0 0 0 2px rgba(28, 174, 231, 0.5);
    }

.gp-create-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.gp-create-info__field {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-create-info__label {
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    color: #829ab1;
}

.gp-create-info__helper {
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: normal;
    color: #829ab1;
}

.gp-create-info__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-create-info__row {
        grid-template-columns: 1fr 1fr;
    }
}

.gp-create-info__input-icon {
    position: relative;
    display: block;
    width: 100%;
}

.gp-create-info__icon {
    width: 22px;
    height: 22px;
    display: block;
    opacity: 0.5;
}

.gp-create-info__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.gp-create-info__input-icon > .gp-create-info__icon {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Username availability (Figma: border + glow + 24px status icons) */

.icon-input-wrong,
.icon-input-check {
    position: absolute;
    right: 21px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: none;
    pointer-events: none;
}

.gp-create-info__field--username-invalid .icon-input-wrong,
.gp-create-info__field--username-valid .icon-input-check {
    display: block;
}

.gp-create-info__username-status {
    display: none;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: normal;
}

.gp-create-info__field--username-invalid .gp-create-info__username-status--invalid,
.gp-create-info__field--username-valid .gp-create-info__username-status--valid {
    display: block;
}

.gp-create-info__field--username-invalid .gp-create-info__username-hint,
.gp-create-info__field--username-valid .gp-create-info__username-hint {
    display: none;
}

.gp-create-info__username-status--invalid {
    color: #ff383c;
}

.gp-create-info__username-status--valid {
    color: #34c759;
}

.gp-create-info__field--username-invalid .gp-create-info__input-icon .gp-create-card__input {
    border: 1px solid #ff383c;
    box-shadow: 0 0 6px rgba(255, 56, 60, 0.55);
}

.gp-create-info__field--username-valid .gp-create-info__input-icon .gp-create-card__input {
    border: 1px solid #34c759;
    box-shadow: 0 0 6px rgba(52, 199, 89, 0.55);
}

.gp-create-info__field--username-invalid .gp-create-info__input-icon .gp-create-card__input:-webkit-autofill,
.gp-create-info__field--username-invalid .gp-create-info__input-icon .gp-create-card__input:-webkit-autofill:hover,
.gp-create-info__field--username-invalid .gp-create-info__input-icon .gp-create-card__input:-webkit-autofill:focus {
    box-shadow: 0 0 0 1px #ff383c inset, 0 0 0 1000px #05244d inset, 0 0 6px rgba(255, 56, 60, 0.55);
    -webkit-text-fill-color: #ffffff;
    caret-color: #ffffff;
    border-color: #ff383c;
}

.gp-create-info__field--username-valid .gp-create-info__input-icon .gp-create-card__input:-webkit-autofill,
.gp-create-info__field--username-valid .gp-create-info__input-icon .gp-create-card__input:-webkit-autofill:hover,
.gp-create-info__field--username-valid .gp-create-info__input-icon .gp-create-card__input:-webkit-autofill:focus {
    box-shadow: 0 0 0 1px #34c759 inset, 0 0 0 1000px #05244d inset, 0 0 6px rgba(52, 199, 89, 0.55);
    -webkit-text-fill-color: #ffffff;
    caret-color: #ffffff;
    border-color: #34c759;
}

.gp-create-info__field--username-invalid .gp-create-info__input-icon .gp-create-card__input:focus-visible {
    box-shadow: 0 0 6px rgba(255, 56, 60, 0.55), 0 0 0 2px rgba(255, 56, 60, 0.45);
}

.gp-create-info__field--username-valid .gp-create-info__input-icon .gp-create-card__input:focus-visible {
    box-shadow: 0 0 6px rgba(52, 199, 89, 0.55), 0 0 0 2px rgba(52, 199, 89, 0.45);
}

/* Birthday date input: hide native picker icon (use custom calendar button) */

#gp-create-birthday {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

    /* Chromium/WebKit */

    #gp-create-birthday::-webkit-calendar-picker-indicator {
        opacity: 0;
        background: transparent;
        color: transparent;
    }

    #gp-create-birthday::-webkit-inner-spin-button,
    #gp-create-birthday::-webkit-clear-button {
        display: none;
    }

.gp-create-info__error {
    width: 100%;
    text-align: right;
    padding-top: 5px;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: normal;
    color: #ff383c;
}

.gp-create-info__rules {
    width: 100%;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gp-create-info__rule {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gp-create-info__rule-icon {
    width: 18px;
    height: 18px;
    display: block;
    flex: 0 0 auto;
}

.gp-create-info__rule-text {
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: 25px;
    color: #9fb3c8;
}

.gp-create-info__submit {
    height: 55px;
    max-width: 500px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
}

/* Create complete – success screen (step 3) */

.gp-create-complete {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 3rem;
    gap: 20px;
}

.gp-create-complete__icon {
    width: 55px;
    height: 55px;
    display: block;
}

.gp-create-complete__heading {
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 30px;
    line-height: 26px;
    color: #ffffff;
    text-align: center;
}

.gp-create-complete__desc {
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: 26px;
    color: #ffffff;
    text-align: center;
}

.gp-create-complete__info {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 40px;
    padding: 40px 30px;
    background-color: #020e1f;
    border: 1px solid #073269;
    border-radius: 10px;
}

.gp-create-complete__info-group {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 5px;
}

.gp-create-complete__info-label {
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: normal;
    color: #ffffff;
    opacity: 0.5;
}

.gp-create-complete__info-value {
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
}

.gp-create-complete__verified-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gp-create-complete__shield-icon {
    width: 26px;
    height: 26px;
    display: block;
}

.gp-create-complete__verified {
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: normal;
    color: #14ae5c;
}

.gp-create-card__login {
    display: flex;
    width: 100%;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    margin-top: 20px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
}

.gp-create-card__login-text {
    color: #829ab1;
}

.gp-create-card__login-link {
    color: #1caee7;
    text-decoration: underline;
    font-weight: 700;
}

.gp-create__placeholder {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    opacity: 0.65;
}

.gp-create__side {
    display: none;
    overflow: hidden;
    border-radius: 25px;
    min-height: 360px;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-create__side {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        min-height: 520px;
    }
}

.gp-create__side-img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

@media (min-width: 1024px) and (max-height: 800px) and (orientation: landscape) {
    .gp-create__inner {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .gp-create__title {
        font-size: 24px;
        margin-bottom: 14px;
    }

    .gp-create__card {
        min-height: auto;
    }

    .gp-create-card__content {
        padding: 0.75rem;
    }

    .gp-create-card__section {
        margin-top: 16px;
    }

    .gp-create-card__hint,
    .gp-create-card__prompt {
        font-size: 15px;
        margin-bottom: 10px;
    }

    .gp-create-card__field {
        gap: 6px;
    }

    .gp-create-card__input {
        height: 65px;
        padding: 10px 18px;
        font-size: 15px;
    }

    .gp-create-card__input--icon {
        padding-right: 48px;
    }

    .icon-input-wrong,
    .icon-input-check {
        right: 12px;
    }

    .gp-create-card__phone-input {
        height: 52px;
        padding: 10px 18px;
        font-size: 15px;
    }

    .gp-create-card__send-otp {
        height: 42px;
        margin-top: 10px;
        padding: 10px 14px;
        font-size: 14px;
    }

    .gp-create-card__divider {
        margin: 16px 0;
    }

    .gp-create-card__terms {
        gap: 8px;
        margin-top: 10px;
        margin-bottom: 14px;
    }

    .gp-create-card__terms-label {
        font-size: 14px;
    }

    .game-select-otp__code {
        gap: 10px;
        padding: 8px 12px;
    }

    .game-select-otp__digit {
        max-width: 40px;
        aspect-ratio: 40 / 56;
        font-size: 18px;
    }

    .game-select-otp__submit {
        height: 46px;
        font-size: 15px;
    }

    .gp-create-card__back {
        height: 46px;
        margin-top: 10px;
        font-size: 15px;
    }

    .gp-create-card__login {
        margin-top: 14px;
        font-size: 15px;
    }

    .gp-create-info__label {
        font-size: 16px;
    }

    .gp-create-info__helper,
    .gp-create-info__error {
        font-size: 12px;
    }

    .gp-create-info__rule-text {
        font-size: 11px;
    }

    .gp-create-info__rules {
        gap: 0px;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .gp-create-info__submit {
        height: 46px;
        font-size: 15px;
    }

    .gp-create-complete__icon {
        width: 55px;
        height: 55px;
    }

    .gp-create-complete__heading {
        font-size: 30px;
    }

    .gp-create-complete__desc {
        font-size: 15px;
    }

    .gp-create-complete__info {
        gap: 28px;
        padding: 28px 20px;
    }

    .gp-create-complete__info-value {
        font-size: 15px;
    }
}

.gp-footer {
    width: 100%;
    background-image: linear-gradient(-0.130594deg, rgb(23, 26, 33) 2.1216%, rgba(24, 26, 32, 0) 97.249%);
}

.gp-footer__inner {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    max-width: 1200px;
}

.gp-footer__credits {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    align-items: center;
    -moz-column-gap: 16px;
    column-gap: 16px;
    row-gap: 12px;
}

.gp-footer__brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration-line: none;
    grid-column: 1;
    grid-row: 2;
    width: 110px;
    height: auto;
}

.gp-footer__brand-logo {
    height: auto;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.gp-footer__brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    width: 62px;
    height: 62px;
    border-radius: 14px;
    background: rgba(28, 174, 231, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.gp-footer__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.75rem;
}

.gp-footer__links {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    grid-column: 2;
    grid-row: 1 / span 3;
    gap: 12px;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #e8e8e8;
}

.gp-footer__link {
    text-decoration-line: none;
}

    .gp-footer__link:hover {
        --tw-text-opacity: 1;
        color: rgb(95 196 238 / var(--tw-text-opacity, 1));
    }

.gp-footer__copyright {
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -0.14px;
    color: #4b89c9;
    text-align: center;
    margin: 0;
    margin-top: 16px;
}

@media (min-width: 768px) {
    .gp-footer__credits {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
    }

    .gp-footer__brand {
        grid-column: auto;
        grid-row: auto;
    }

    .gp-footer__links {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 1.5rem;
        grid-column: auto;
        grid-row: auto;
    }

    .gp-footer__copyright {
        text-align: right;
        margin-top: 0;
    }
}

/* My Account page (frame: Desktop Footer) - footer type2 */

.gp-footer--type2 .gp-footer__inner {
    padding-top: 2.5rem;
    padding-bottom: 8rem;
    padding-left: 30px;
    padding-right: 30px;
    max-width: 1920px;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-footer--type2 .gp-footer__inner {
        padding: 50px 100px;
    }
}

@media (min-width: 1440px) {
    .gp-footer--type2 .gp-footer__inner {
        padding-left: 200px;
        padding-right: 200px;
    }
}

/* Mobile/tablet: three columns in a row (Figma My Account Mobile – Footer) */

.gp-footer--type2 .gp-footer__menu {
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-height: 0;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-footer--type2 .gp-footer__menu {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 24px;
        min-height: 157px;
    }
}

.gp-footer--type2 .gp-footer__menu-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.gp-footer--type2 .gp-footer__menu-group--main {
    flex: 1 1 auto;
}

.gp-footer--type2 .gp-footer__menu-columns {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-footer--type2 .gp-footer__menu-columns {
        flex-direction: row;
        align-items: flex-start;
        gap: 120px;
    }
}

.gp-footer--type2 .gp-footer__menu-title {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    color: #1caee7;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-footer--type2 .gp-footer__menu-title {
        font-size: 16px;
    }
}

.gp-footer--type2 .gp-footer__menu-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.gp-footer--type2 .gp-footer__menu-link {
    font-family: "Google Sans", sans-serif;
    font-size: 12px;
    line-height: 1.4;
    color: #e8e8e8;
    text-decoration: none;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-footer--type2 .gp-footer__menu-link {
        font-size: 14px;
    }
}

.gp-footer--type2 .gp-footer__menu-link--red-link {
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    line-height: 1.4;
    color: #f45c43;
    background: linear-gradient(90deg, #f45c43 0%, #eb3349 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gp-footer--type2 .gp-footer__menu-link--serenade {
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    line-height: 1.4;
    color: #f5d6a3;
    background: linear-gradient(109.292deg, #ffddae 12.717%, #ffe1b2 24.803%, #f5d6a3 36.579%, #f6cf99 46.186%, #f9c597 56.103%, #e0a060 66.639%, #d99458 76.538%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gp-footer--type2 .gp-footer__menu-link:hover {
    color: #5fc4ee;
}

.gp-footer--type2 .gp-footer__menu-group--social {
    width: auto;
    align-items: flex-end;
}

.gp-footer--type2 .gp-footer__social {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, auto));
    gap: 15px;
    justify-items: center;
    align-items: center;
    width: auto;
    min-width: 96px;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-footer--type2 .gp-footer__social {
        align-items: center;
        display: flex;
        flex-wrap: nowrap;
        min-width: 0;
    }
}

.gp-footer--type2 .gp-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gp-footer--type2 .gp-footer__social-icon {
    width: 21px;
    height: 21px;
    -o-object-fit: contain;
    object-fit: contain;
}

/* Credits: reuse base footer grid on mobile/tablet (logo left, links + copyright right) */

.gp-footer--type2 .gp-footer__credits {
    margin-top: 2.5rem;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    align-items: center;
    -moz-column-gap: 16px;
    column-gap: 16px;
    row-gap: 12px;
}

.gp-footer--type2 .gp-footer__brand {
    padding: 0px;
    grid-column: 1;
    grid-row: 2;
    width: 110px;
    height: auto;
}

.gp-footer--type2 .gp-footer__meta {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 14px;
    grid-column: 2;
    grid-row: 1 / span 3;
}

.gp-footer--type2 .gp-footer__links {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    font-family: "Google Sans", sans-serif;
    font-size: 10px;
    line-height: 1.4;
    color: #bcccdc;
}

.gp-footer--type2 .gp-footer__copyright {
    margin: 0px;
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: -0.1px;
    color: #4b89c9;
    text-align: right;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-footer--type2 .gp-footer__credits {
        margin-top: 5rem;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        display: flex;
        grid-template-columns: none;
        row-gap: 0;
        -moz-column-gap: 0;
        column-gap: 0;
    }

    .gp-footer--type2 .gp-footer__brand {
        grid-column: auto;
        grid-row: auto;
    }

    .gp-footer--type2 .gp-footer__meta {
        width: auto;
        gap: 0.75rem;
        grid-column: auto;
        grid-row: auto;
    }

    .gp-footer--type2 .gp-footer__links {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 24px;
        font-size: 14px;
        color: #e8e8e8;
    }

    .gp-footer--type2 .gp-footer__copyright {
        font-size: 14px;
        letter-spacing: -0.14px;
        text-align: right;
    }
}

/* Desktop popup compact: scale down fonts and gaps when popup is narrow */

@container popup (max-width: 960px) {
    .game-select-popup__content {
        padding: 0.75rem;
    }

    .game-select-popup__close {
        top: 0.5rem;
        left: 0.5rem;
    }

    .game-select-popup__body {
        gap: 0.375rem;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .game-select-popup__title {
        font-size: 1.25rem;
        /* ~20px */
        line-height: 1.35;
    }

    .game-select-popup__footer {
        padding: 0.375rem;
    }

    .game-select-popup__support-icon {
        height: 1rem;
        width: 1rem;
    }

    .game-select-popup__support-text {
        font-size: 0.75rem;
        line-height: 1rem;
    }

    .game-select-popup__legal {
        -moz-column-gap: 0.375rem;
        column-gap: 0.375rem;
    }

    .game-select-popup__legal-link {
        font-size: 10px;
    }

    .game-select-popup__legal-divider {
        height: 0.625rem;
    }

    .game-select-login {
        gap: 0.75rem;
    }

    .game-select-login__social-list {
        gap: 0.75rem;
    }

    .game-select-login__social-button {
        height: 4rem;
        /* 48px */
        font-size: 1rem;
        /* 14px */
    }

    .game-select-login__social-icon img {
        height: 1.25rem;
        width: 1.25rem;
    }

    .game-select-login__divider {
        gap: 0.375rem;
    }

    .game-select-login__divider-text {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }

    .game-select-login__fields {
        gap: 1rem;
    }

    .game-select-login__field {
        gap: 0.625rem;
    }

    .game-select-login__label {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }

    .game-select-login__input-wrapper {
        height: 3rem;
        /* 48px */
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .game-select-login__input {
        font-size: 0.9375rem;
        /* 15px */
    }

    .game-select-login__password-toggle {
        height: 1rem;
        width: 1rem;
    }

        .game-select-login__password-toggle img {
            height: 100%;
            width: 100%;
        }

    .game-select-login__remember {
        margin-top: 0.25rem;
        gap: 0.25rem;
    }

    .game-select-login__remember-checkbox {
        height: 12px;
        width: 12px;
    }

    .game-select-login__remember-label {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }

    .game-select-login__forgot {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }

    .game-select-login__submit {
        margin-top: 0.375rem;
        font-size: 1rem;
        line-height: 1.5rem;
        height: 2.75rem;
        /* 44px */
    }

    .game-select-login__signup {
        margin-top: 0.25rem;
        font-size: 0.875rem;
        line-height: 1.25rem;
    }

    .game-select-otp {
        gap: 0.75rem;
    }

    .game-select-otp__hint {
        font-size: 0.875rem;
        line-height: 1.25rem;
        line-height: 1.5;
    }

    .game-select-otp__masked {
        font-size: 1.25rem;
        line-height: 1.5rem;
    }

    .game-select-otp__expire {
        font-size: 0.75rem;
        line-height: 1rem;
    }

    .game-select-otp__section {
        gap: 0.75rem;
    }

    .game-select-otp__prompt {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }

    .game-select-otp__code {
        gap: 10px;
        padding: 8px 12px;
    }

    .game-select-otp__digit {
        max-width: 40px;
        aspect-ratio: 40 / 56;
        font-size: 1.125rem;
    }

    .game-select-otp__resend {
        height: 42px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .game-select-otp__resend-label,
    .game-select-otp__resend-action {
        font-size: 0.75rem;
        line-height: 1rem;
    }

    .game-select-otp__submit {
        height: 42px;
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
}

@media (max-width: 767px) {
    .game-select-popup__legal {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        row-gap: 0.5rem;
    }

    .game-select-popup__legal-link {
        font-size: 14px;
    }

    .game-select-popup__legal-divider {
        display: none;
    }
}

/* -------------------------------------------------------------------------- */

/* Item code page — game head + redeem form (Figma: 1178:8738)                */

/* -------------------------------------------------------------------------- */

.gp-itemcode-head {
    margin-bottom: 10px;
    margin-top: 10px;
    width: 100%;
}

@media (min-width: 768px) {
    .gp-itemcode-head {
        margin-top: 40px;
    }
}

.gp-itemcode-head__shell {
    width: 100%;
    padding: 10px;
    border-radius: 15px;
    box-sizing: border-box;
    background: radial-gradient(136% 100% at 0% 0%, rgba(217, 217, 217, 0.2) 0%, rgba(217, 217, 217, 0.05) 70%);
}

.gp-itemcode-head__card {
    display: flex;
    min-height: 100px;
    width: 100%;
    align-items: center;
    gap: 20px;
    background-image: url("../images/itemcode-game-head-bg.webp");
    background-size: cover;
    background-position: left top;
    background-repeat: no-repeat;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 20px;
    padding-bottom: 20px;
}

@media (min-width: 768px) {
    .gp-itemcode-head__card {
        min-height: 150px;
    }
}

.gp-itemcode-head__card {
    border-radius: 10px;
    border: 1px solid #243b53;
    box-sizing: border-box;
    background-color: #0f1012;
    /* background-repeat: no-repeat; */
    /* background-position: top left; */
    /* background-size: 1280px auto; */
}

.gp-itemcode-head__game {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.gp-itemcode-head__avatar-wrap {
    flex-shrink: 0;
}

.gp-itemcode-head__avatar {
    display: block;
    width: 88px;
    height: 88px;
    border-radius: 6px;
    -o-object-fit: cover;
    object-fit: cover;
}

.gp-itemcode-head__meta {
    display: flex;
    min-width: 0px;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.gp-itemcode-head__game-name {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #9fb3c8;
}

@media (min-width: 768px) {
    .gp-itemcode-head__game-name {
        font-size: 18px;
    }
}

.gp-itemcode-head__user-id {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    color: #ffffff;
}

@media (min-width: 768px) {
    .gp-itemcode-head__user-id {
        font-size: 24px;
    }
}

.gp-itemcode-head__change-game {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 15px;
    border-radius: 20px;
    border: 1px solid #9fb3c8;
    background-image: linear-gradient( 107.29deg, #7a96ac 3.16%, #eaeff3 21.61%, #c2d4e1 35.44%, #ffffff 53.57%, #d4dee5 66.18%, #abbdc8 83.6%, #bccad7 101.02% );
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2;
    color: #020e1f;
    box-shadow: inset 0 4px 6px rgba(255, 255, 255, 0.35);
}

@media (min-width: 768px) {
    .gp-itemcode-head__change-game {
        font-size: 16px;
    }
}

.gp-itemcode-head__change-game:hover {
    filter: brightness(1.03);
}

.gp-itemcode-head__change-game-icon {
    width: 8px;
    height: 11px;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .gp-itemcode-head__card {
        flex-direction: column;
        align-items: stretch;
    }

    .gp-itemcode-head__game {
        flex-direction: row;
        align-items: center;
    }

    .gp-itemcode-head__avatar {
        width: 72px;
        height: 72px;
    }
}

/* ---- Item code redeem form (inside tab panel) ---- */

.gp-itemcode-form {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    border-radius: 10px;
    border: 1px solid #243b53;
    background-color: #1a1b1e;
    padding: 32px 20px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .gp-itemcode-form {
        padding: 50px 40px;
    }
}

.gp-itemcode-form__inner {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 30px;
    max-width: 820px;
    margin: 0 auto;
    align-self: center;
}

.gp-itemcode-form__group {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-itemcode-form__label {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #ffffff;
}

@media (min-width: 768px) {
    .gp-itemcode-form__label {
        font-size: 18px;
    }
}

.gp-itemcode-form__input {
    width: 100%;
    box-sizing: border-box;
    height: 60px;
    padding: 10px 15px;
    border-radius: 10px;
    border: 2px solid #1caee7;
    background-color: transparent;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #ffffff;
}

@media (min-width: 768px) {
    .gp-itemcode-form__input {
        font-size: 18px;
    }
}

.gp-itemcode-form__input::-moz-placeholder {
    color: #829ab1;
}

.gp-itemcode-form__input::placeholder {
    color: #829ab1;
}

.gp-itemcode-form__input:focus-visible {
    outline: 2px solid #52ceff;
    outline-offset: 2px;
}

.gp-itemcode-form__caution {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.2;
    color: #ff383c;
}

@media (min-width: 768px) {
    .gp-itemcode-form__caution {
        font-size: 16px;
    }
}

.gp-itemcode-form__select-field {
    width: 100%;
}

.gp-itemcode-form__select-wrap {
    position: relative;
    width: 100%;
}

.gp-itemcode-form__select {
    width: 100%;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 60px;
    border-radius: 10px;
    border: 1px solid #486581;
    background-color: transparent;
    padding: 10px 44px 10px 15px;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: 1;
    color: #ffffff;
}

@media (min-width: 768px) {
    .gp-itemcode-form__select {
        font-size: 18px;
    }
}

.gp-itemcode-form__select-caret {
    pointer-events: none;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    transition: transform 0.2s ease;
}

.gp-itemcode-form__select-wrap--custom .gp-itemcode-form__select {
    position: absolute;
    width: 100%;
    opacity: 0;
    pointer-events: none;
}

.gp-itemcode-form__select-trigger {
    display: flex;
    width: 100%;
    align-items: center;
    border-radius: 10px;
    height: 60px;
    padding: 10px 44px 10px 15px;
    border: 1px solid #486581;
    background-color: transparent;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: 1;
    color: #ffffff;
    text-align: left;
    cursor: pointer;
}

@media (min-width: 768px) {
    .gp-itemcode-form__select-trigger {
        font-size: 18px;
    }
}

.gp-itemcode-form__select-wrap--open .gp-itemcode-form__select-caret {
    transform: translateY(-50%) rotate(180deg);
}

.gp-itemcode-form__select-options {
    position: absolute;
    z-index: 25;
    width: 100%;
    border-radius: 10px;
    top: calc(100% + 6px);
    max-height: 240px;
    overflow-y: auto;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    border: 1px solid #486581;
    background-color: #363e4d;
}

.gp-itemcode-form__select-wrap--flip-up .gp-itemcode-form__select-options {
    top: auto;
    bottom: calc(100% + 6px);
}

.gp-itemcode-form__select-option {
    width: 100%;
    border: none;
    background: transparent;
    padding: 12px 14px;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: 1;
    color: #d9e2ec;
    text-align: left;
    cursor: pointer;
}

@media (min-width: 768px) {
    .gp-itemcode-form__select-option {
        font-size: 18px;
    }
}

.gp-itemcode-form__select-option:hover,
.gp-itemcode-form__select-option:focus-visible,
.gp-itemcode-form__select-option--active {
    background-color: #4b5667;
    color: #ffffff;
}

.gp-itemcode-form__actions {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
}

.gp-itemcode-form__submit {
    display: flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-style: none;
    height: 60px;
    padding: 10px;
    border-radius: 10px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    color: #ffffff;
    text-decoration: none;
    background-color: #1caee7;
    transition: filter 0.2s ease;
}

@media (min-width: 768px) {
    .gp-itemcode-form__submit {
        font-size: 18px;
    }
}

.gp-itemcode-form__submit:hover {
    filter: brightness(1.06);
}

.gp-itemcode-form__submit:active {
    filter: brightness(0.95);
}

.gp-itemcode-form__refresh {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.gp-itemcode-form__refresh-hint {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #829ab1;
}

@media (min-width: 768px) {
    .gp-itemcode-form__refresh-hint {
        font-size: 18px;
    }
}

.gp-itemcode-form__refresh-action {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    border-style: none;
    background-color: transparent;
    gap: 3px;
    padding: 3px 0;
    border-bottom: 2px solid #1caee7;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    color: #1caee7;
}

@media (min-width: 768px) {
    .gp-itemcode-form__refresh-action {
        font-size: 18px;
    }
}

.gp-itemcode-form__refresh-action:hover {
    filter: brightness(1.08);
}

.gp-itemcode-form__refresh-icon {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
}

/* ---- Item code confirm (Figma: 1206:11624) ---- */

.gp-itemcode-confirm {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    box-sizing: border-box;
    padding: 30px 16px;
    border-radius: 10px;
    border: 1px solid #243b53;
    background-color: #1a1b1e;
}

@media (min-width: 768px) {
    .gp-itemcode-confirm {
        padding: 30px 80px;
    }
}

@media (min-width: 1200px) {
    .gp-itemcode-confirm {
        padding: 30px 180px;
    }
}

.gp-itemcode-confirm__alert {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

@media (min-width: 768px) {
    .gp-itemcode-confirm__alert {
        padding: 30px;
    }
}

.gp-itemcode-confirm__alert {
    gap: 10px;
    min-height: 92px;
    border-radius: 10px;
    border: 1px solid #a80a0d;
    background: linear-gradient(123.595deg, #710d0f 21.121%, #3b1414 99.292%);
    box-sizing: border-box;
}

.gp-itemcode-confirm__alert-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}

.gp-itemcode-confirm__alert-text {
    margin: 0px;
    font-size: 11px;
    line-height: 1.25;
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}

@media (min-width: 768px) {
    .gp-itemcode-confirm__alert-text {
        font-size: 14px;
        line-height: 26px;
    }
}

.gp-itemcode-confirm__alert-text {
    font-family: "Google Sans", sans-serif;
}

.gp-itemcode-confirm__content {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-itemcode-confirm__details {
    display: flex;
    width: 100%;
    flex-direction: column;
    margin: 0;
    padding: 40px 20px;
    border-radius: 10px;
    border: 1px solid #243b53;
    background-color: #1a1b1e;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .gp-itemcode-confirm__details {
        padding: 40px 50px;
    }
}

.gp-itemcode-confirm__row {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 0;
}

.gp-itemcode-confirm__label,
.gp-itemcode-confirm__value {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .gp-itemcode-confirm__label,
    .gp-itemcode-confirm__value {
        font-size: 18px;
    }
}

.gp-itemcode-confirm__label {
    color: #bcccdc;
    flex-shrink: 0;
}

.gp-itemcode-confirm__row--emphasis .gp-itemcode-confirm__label {
    color: #d9e2ec;
}

.gp-itemcode-confirm__value {
    color: #1caee7;
    text-align: right;
}

.gp-itemcode-confirm__divider {
    width: 100%;
    height: 1px;
    background-color: #243b53;
    flex-shrink: 0;
}

.gp-itemcode-confirm__rewards {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
    padding: 30px;
    border-radius: 10px;
    border: 1px solid #243b53;
    background-color: #27292f;
    box-sizing: border-box;
}

.gp-itemcode-confirm__rewards-head {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.gp-itemcode-confirm__rewards-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.gp-itemcode-confirm__rewards-title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    color: #bcccdc;
}

.gp-itemcode-confirm__rewards-box {
    width: 100%;
    max-height: 230px;
    overflow-y: auto;
    padding: 10px;
    border-radius: 5px;
    scrollbar-width: thin;
    scrollbar-color: #bcccdc #3d4350;
}

    .gp-itemcode-confirm__rewards-box::-webkit-scrollbar {
        width: 8px;
    }

    .gp-itemcode-confirm__rewards-box::-webkit-scrollbar-track {
        background: #3d4350;
        border-radius: 2px;
    }

    .gp-itemcode-confirm__rewards-box::-webkit-scrollbar-thumb {
        background: #bcccdc;
        border-radius: 2px;
    }

.gp-itemcode-confirm__rewards-list {
    margin: 0;
    padding: 0 0 0 18px;
    list-style: disc;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gp-itemcode-confirm__rewards-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: 22px;
    color: #9fb3c8;
}

.gp-itemcode-confirm__rewards-qty {
    font-weight: 500;
    text-align: right;
}

.gp-itemcode-confirm__actions {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    min-height: 60px;
}

.gp-itemcode-confirm__back {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    text-decoration-line: none;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    width: 245px;
    height: 60px;
    padding: 10px 30px;
    border-radius: 10px;
    border: 1px solid #486581;
    background: transparent;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
    box-sizing: border-box;
}

    .gp-itemcode-confirm__back:hover {
        filter: brightness(1.1);
    }

.gp-itemcode-confirm__submit {
    display: inline-flex;
    min-width: 0px;
    flex: 1 1 0%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-style: none;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    height: 60px;
    padding: 10px;
    border-radius: 10px;
    background-color: #1caee7;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
}

    .gp-itemcode-confirm__submit:hover {
        filter: brightness(1.06);
    }

    .gp-itemcode-confirm__submit:active {
        filter: brightness(0.95);
    }

.gp-itemcode-confirm__legal {
    margin: 0;
    width: 100%;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    text-align: center;
    color: #ff383c;
}

@media (max-width: 767px) {
    .gp-itemcode-confirm__actions {
        flex-direction: column;
    }

    .gp-itemcode-confirm__back,
    .gp-itemcode-confirm__submit {
        width: 100%;
        flex: none;
    }

    .gp-itemcode-confirm__rewards {
        padding: 20px;
    }
}

/* ---- Item code success (Figma: 1212:12104) ---- */

.gp-itemcode-confirm--success {
    gap: 30px;
}

@media (min-width: 768px) {
    .gp-itemcode-confirm--success {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

.gp-itemcode-confirm__status {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.gp-itemcode-confirm__status-icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

.gp-itemcode-confirm__status-title {
    margin: 0;
    width: 100%;
    font-family: "Google Sans", sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    text-align: center;
    color: #ffffff;
}

.gp-itemcode-confirm__status-text {
    margin: 0;
    width: 100%;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    color: #ffffff;
}

.gp-itemcode-confirm__summary {
    display: flex;
    width: 100%;
    gap: 10px;
    min-height: 108px;
    padding: 30px;
    border-radius: 10px;
    border: 1px solid #243b53;
    background-color: #212326;
    box-sizing: border-box;
}

.gp-itemcode-confirm__summary-col {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.gp-itemcode-confirm__summary-label,
.gp-itemcode-confirm__summary-server {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
}

.gp-itemcode-confirm__summary-label {
    color: #829ab1;
}

.gp-itemcode-confirm__summary-value,
.gp-itemcode-confirm__summary-character {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gp-itemcode-confirm__summary-value {
    color: #ffffff;
}

.gp-itemcode-confirm__summary-col--recipient {
    align-items: flex-end;
    text-align: right;
}

.gp-itemcode-confirm__summary-server,
.gp-itemcode-confirm__summary-character {
    color: #1caee7;
}

.gp-itemcode-confirm__actions--single {
    width: 100%;
}

.gp-itemcode-confirm__submit--full {
    width: 100%;
    text-decoration-line: none;
    flex: none;
}

    .gp-itemcode-confirm__submit--full:hover {
        filter: brightness(1.06);
    }

    .gp-itemcode-confirm__submit--full:active {
        filter: brightness(0.95);
    }

@media (max-width: 767px) {
    .gp-itemcode-confirm--success {
        gap: 20px;
    }

    .gp-itemcode-confirm__summary {
        flex-direction: column;
        min-height: 0;
        padding: 20px;
    }

    .gp-itemcode-confirm__summary-col--recipient {
        align-items: flex-start;
        text-align: left;
    }
}

/* -------------------------------------------------------------------------- */

/* Gift section (Figma: 3415:32229 - "Inside")                                */

/* รับของขวัญ / ประวัติการรับของขวัญ tabs + grid of gift cards               */

/* -------------------------------------------------------------------------- */

.gp-gift {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0 40px;
}

/* ---- Tabs (top toggle bar) ---- */

.gp-gift__tabs {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0;
    padding: 5px;
    border-radius: 10px;
    background-color: rgba(217, 217, 217, 0.05);
    backdrop-filter: blur(9.5px);
    -webkit-backdrop-filter: blur(9.5px);
}

.gp-gift__tab {
    display: flex;
    flex: 1 1 0%;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 10px;
    height: 56px;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #9fb3c8;
    transition: background 0.2s ease, color 0.2s ease;
}

    .gp-gift__tab:hover {
        color: #ffffff;
    }

    .gp-gift__tab:is(:hover, .gp-gift__tab--active) {
        font-weight: 700;
        font-size: 18px;
        color: #ffffff;
        background-image: linear-gradient(122.91deg, #52ceff 5.7%, #1caee7 54.4%);
    }

.gp-gift__tab--active:hover {
    color: #ffffff;
}

.gp-gift__tab-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.gp-gift__tab-icon--active {
    display: none;
}

.gp-gift__tab:is(:hover, .gp-gift__tab--active) .gp-gift__tab-icon--default {
    display: none;
}

.gp-gift__tab:is(:hover, .gp-gift__tab--active) .gp-gift__tab-icon--active {
    display: inline-block;
}

.gp-gift__tab-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gp-gift__tab-text-sub {
    display: none;
}

@media (min-width: 768px) {
    .gp-gift__tab-text-sub {
        display: inline-block;
    }
}

/* ---- Shared gradient panel (ใช้ร่วมระหว่าง gift list / select / success) ---- */

.gp-panel--gradient {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
    padding: 10px;
    border-radius: 15px;
    background: radial-gradient(136% 100% at 0% 0%, rgba(217, 217, 217, 0.2) 0%, rgba(217, 217, 217, 0.05) 70%);
    box-shadow: 0 0 20px rgba(11, 77, 160, 0.2);
}

@media (max-width: 767px) {
    .gp-panel--gradient {
        gap: 12px;
        padding: 8px;
    }
}

/* Modifier: ปิด gap ของ gradient panel (opt-in) */

.gp-panel--gradient.gp-panel--nogap {
    gap: 0;
}

/* ---- Card grid ---- */

.gp-gift__grid {
    display: grid;
    width: 100%;
    gap: 20px;
    grid-template-columns: 1fr;
    margin: 0;
    padding: 5px;
}

.gp-gift__panel {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 0;
}

    .gp-gift__panel[hidden] {
        display: none;
    }

/* ---- Gift empty state (Figma 3403:30657) ---- */

.gp-gift-empty {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 305px;
    padding: 80px 20px;
    border-radius: 10px;
    border: 1px solid #243b53;
    background-color: #1a1b1e;
}

    .gp-gift-empty.gp-gift-empty--history {
        border-width: 0;
    }

    .gp-gift-empty.gp-redlink-empty--history {
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border-width: 0px;
        --tw-bg-opacity: 1;
        background-color: rgb(23 20 22 / var(--tw-bg-opacity, 1));
    }

.gp-gift-empty__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.gp-gift-empty__text {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: normal;
    color: #486581;
    text-align: center;
}

    .gp-gift-empty__text.gp-redlink-empty__text {
        color: #45383A;
    }

.gp-gift-empty__icon {
    width: 100px;
    height: 100px;
    display: block;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .gp-gift__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) and (orientation: portrait) {
    .gp-gift__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-gift__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .gp-gift__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---- Single gift card ---- */

.gp-gift-card {
    display: flex;
    width: 100%;
    flex-direction: column;
    background-color: #282a2f;
    border: 1px solid #52ceff;
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(11, 77, 160, 0.47);
    overflow: hidden;
}

.gp-gift-card__thumb-wrap {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    background: radial-gradient(120% 120% at 50% 100%, #013c86 15%, #06336b 33%, #0c2a50 52%, #112136 71%, #17181b 89%);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.gp-gift-card__thumb {
    width: 150px;
    height: 150px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 10px;
}

.gp-gift-card--mail-item .gp-gift-card__thumb,
.gp-gift-card--mail-code .gp-gift-card__thumb {
    cursor: pointer;
}

.gp-gift-card__body {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 20px;
}

.gp-gift-card__info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gp-gift-card__name {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    color: #ffffff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gp-gift-card__qty {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    color: #829ab1;
}

/* ---- "From" badge (sender chip) ---- */

.gp-gift-card__from {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 5px;
    height: 40px;
    padding: 5px 20px;
    border: 1px solid #0b4da0;
    border-radius: 10px;
    background-color: rgba(11, 77, 160, 0.2);
    max-width: 100%;
}

.gp-gift-card__from-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.gp-gift-card__from-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #3db9eb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Dates / warning ---- */

.gp-gift-card__dates {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: -15px;
}

.gp-gift-card__received {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.3;
    color: #bcccdc;
}

.gp-gift-card__warning {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.3;
    color: #ff5f57;
}

/* ---- Primary CTA ---- */

.gp-gift-card__cta {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 10px;
    border-radius: 10px;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1;
    color: #020e1f;
    text-decoration: none;
    background-image: linear-gradient(122.91deg, #52ceff 5.7%, #1caee7 54.4%);
    transition: filter 0.2s ease;
}

    .gp-gift-card__cta:hover {
        filter: brightness(1.05);
    }

    .gp-gift-card__cta:active {
        filter: brightness(0.95);
    }

/* -------------------------------------------------------------------------- */

/* Mail receive panel (Figma: 3415:32216)                                     */

/* -------------------------------------------------------------------------- */

.gp-mail-receive {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #243b53;
    background-color: #1a1b1e;
}

.gp-mail-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.gp-mail-filter__pill {
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    background-color: transparent;
    padding: 10px 25px;
    border-radius: 999px;
    border-color: #486581;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #ffffff;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.gp-mail-filter__pill--active {
    border-color: #0b4da0;
    background-color: #0b4da0;
    color: #b9e7f8;
}

.gp-gift-card--mail-item {
    border-color: #61e4e9;
    box-shadow: 0 5px 10px rgba(11, 77, 160, 0.47);
}

.gp-gift-card--mail-code {
    border-color: #6e74f6;
    box-shadow: 0 5px 10px rgba(11, 23, 160, 0.47);
}

    .gp-gift-card--mail-item .gp-gift-card__thumb-wrap,
    .gp-gift-card--mail-code .gp-gift-card__thumb-wrap {
        position: relative;
    }

.gp-mail-card__tag {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 5px;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    color: #061221;
}

    .gp-mail-card__tag img {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

.gp-mail-card__tag--item {
    background-color: #72cbda;
}

.gp-mail-card__tag--code {
    background-color: #969aff;
}

.gp-mail-card__info {
    position: absolute;
    z-index: 1;
    cursor: pointer;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    right: 20px;
    bottom: 10px;
    width: 24px;
    height: 24px;
}

    .gp-mail-card__info img {
        display: block;
        width: 24px;
        height: 24px;
    }

.gp-gift-card--mail-item .gp-gift-card__body,
.gp-gift-card--mail-code .gp-gift-card__body {
    gap: 20px;
}

.gp-gift-card__from--mail {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    height: auto;
    padding: 8px 10px;
    border-radius: 8px;
    max-width: 100%;
}

.gp-gift-card__from-main {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.gp-gift-card__from-label {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #3db9eb;
    white-space: nowrap;
}

.gp-gift-card__from-name {
    display: inline-flex;
    align-items: center;
    padding-left: 8px;
    border-left: 1px solid #0b4da0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #3db9eb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gp-gift-card--mail-item .gp-gift-card__warning,
.gp-gift-card--mail-code .gp-gift-card__warning {
    margin: 0;
}

@media (max-width: 767px) {
    .gp-mail-receive {
        padding: 12px;
        gap: 12px;
    }

    .gp-mail-filter__pill {
        padding: 8px 16px;
        font-size: 14px;
    }
}

/* ---- Mobile tweaks ---- */

@media (max-width: 767px) {
    .gp-gift__tabs {
        padding: 4px;
    }

    .gp-gift__tab {
        height: 48px;
        padding: 10px 12px;
        font-size: 14px;
        gap: 6px;
    }

    .gp-gift__tab--active {
        font-size: 15px;
    }

    .gp-gift__tab-icon {
        width: 18px;
        height: 18px;
    }

    .gp-gift__grid {
        gap: 12px;
        padding: 0;
    }

    .gp-gift-card__body {
        gap: 20px;
        padding: 16px;
    }

    .gp-gift-card__name {
        font-size: 16px;
    }
}

/* -------------------------------------------------------------------------- */

/* Gift history panel (Figma: 3412:31234 - history tab)                       */

/* -------------------------------------------------------------------------- */

.gp-gift-history {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #243b53;
    background-color: #1a1b1e;
}

.gp-gift-history__filter {
    position: relative;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.gp-gift-history__filter-left {
    display: flex;
    flex-shrink: 0;
    align-items: center;
}

.gp-gift-history__filter-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 15px;
    min-width: 0;
    --gp-gift-history-filter-control-h: 56px;
}

    .gp-gift-history__filter-right .gp-gift-history__date-range {
        width: auto;
        flex: 0 1 auto;
        min-width: 0;
        height: var(--gp-gift-history-filter-control-h);
    }

    .gp-gift-history__filter-right .gp-gift-history__filter-select-field {
        display: flex;
        width: auto;
        flex: 0 0 auto;
        height: var(--gp-gift-history-filter-control-h);
    }

    .gp-gift-history__filter-right .gp-gift-history__filter-select-wrap {
        width: auto;
        height: var(--gp-gift-history-filter-control-h);
    }

.gp-gift-history__filter-item {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    gap: 10px;
    min-width: 0;
}

.gp-gift-history__filter-item--search {
    flex: 1 1 0;
}

.gp-gift-history__filter-item:has(.gp-gift-history__date-range) {
    flex: 1 1 0;
    min-width: 0;
}

.gp-gift-history__filter-select-field--status {
    flex-shrink: 0;
    width: auto;
}

.gp-gift-history__filter-label {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: 1;
    color: #ffffff;
}

.gp-gift-history__filter-label--empty {
    visibility: hidden;
}

.gp-gift-history__filter-select-field {
    width: 100%;
}

.gp-gift-history__filter-select-wrap {
    position: relative;
    width: 100%;
}

.gp-gift-history__filter-select {
    width: 100%;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 60px;
    border-radius: 10px;
    border: 0.5px solid #4b89c9;
    background-color: transparent;
    padding: 10px 44px 10px 15px;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: 1;
    color: #ffffff;
}

.gp-gift-history__filter-select-caret {
    pointer-events: none;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    transition: transform 0.2s ease;
}

.gp-gift-history__filter-select-wrap--custom .gp-gift-history__filter-select {
    position: absolute;
    width: 100%;
    opacity: 0;
    pointer-events: none;
}

.gp-gift-history__filter-select-trigger {
    display: flex;
    width: 100%;
    align-items: center;
    border-radius: 10px;
    height: 60px;
    padding: 10px 44px 10px 15px;
    border: 0.5px solid #4b89c9;
    background-color: transparent;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: 1;
    color: #ffffff;
    text-align: left;
    cursor: pointer;
}

.gp-gift-history__filter-select-wrap--open .gp-gift-history__filter-select-trigger {
    color: #ffffff;
}

.gp-gift-history__filter-select-wrap--open .gp-gift-history__filter-select-caret {
    transform: translateY(-50%) rotate(180deg);
}

.gp-gift-history__filter-select-options {
    position: absolute;
    z-index: 25;
    width: 100%;
    border-radius: 10px;
    top: calc(100% + 6px);
    max-height: 240px;
    overflow-y: auto;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    border: 1px solid #4b89c9;
    background-color: #363e4d;
}

.gp-gift-history__filter-select-wrap--flip-up .gp-gift-history__filter-select-options {
    top: auto;
    bottom: calc(100% + 6px);
}

.gp-gift-history__filter-select-option {
    width: 100%;
    border: none;
    background: transparent;
    padding: 12px 14px;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: 16px;
    color: #d9e2ec;
    text-align: left;
    cursor: pointer;
}

    .gp-gift-history__filter-select-option:hover,
    .gp-gift-history__filter-select-option:focus-visible,
    .gp-gift-history__filter-select-option--active {
        background-color: #4b5667;
        color: #ffffff;
    }

.gp-gift-history__date-range {
    position: relative;
    width: 100%;
}

.gp-gift-history .gp-history__filter-btn {
    height: auto;
    min-height: 52px;
    padding: 15px;
    gap: 20px;
    border: 0.5px solid #4b89c9;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1;
    justify-content: space-between;
}

.gp-activity-history .gp-history__filter-btn {
    height: 60px;
    padding: 10px 15px;
    border: 0.5px solid #4b89c9;
    font-size: 14px;
    justify-content: space-between;
}

.gp-gift-history__filter-right .gp-history__filter-btn,
.gp-gift-history__filter-right .gp-gift-history__filter-select-trigger,
.gp-gift-history__filter-right .gp-gift-history__search {
    height: var(--gp-gift-history-filter-control-h);
    min-height: var(--gp-gift-history-filter-control-h);
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.gp-gift-history__filter-right .gp-history__filter-btn {
    width: auto;
    white-space: nowrap;
    padding: 0 15px;
    gap: 20px;
}

.gp-gift-history__filter-right .gp-gift-history__filter-select-trigger,
.gp-gift-history__filter-right .gp-gift-history__filter-select {
    padding: 0 44px 0 15px;
}

.gp-gift-history__filter-right .gp-gift-history__search {
    flex-shrink: 0;
    width: 225px;
    padding: 0 15px;
}

.gp-gift-history .gp-history__date-range-panel,
.gp-activity-history .gp-history__date-range-panel {
    left: 0;
    right: auto;
    width: min(600px, calc(100vw - 48px));
    max-width: calc(100vw - 48px);
    min-width: 0;
}

.gp-gift-history__search {
    display: flex;
    width: 100%;
    align-items: center;
    height: 60px;
    gap: 20px;
    padding: 10px 15px;
    border-radius: 10px;
    border: 0.5px solid #4b89c9;
    background-color: transparent;
}

.gp-gift-history__search-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-gift-history__search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: 1;
    color: #ffffff;
}

    .gp-gift-history__search-input::-moz-placeholder {
        color: #ffffff;
        opacity: 1;
    }

    .gp-gift-history__search-input::placeholder {
        color: #ffffff;
        opacity: 1;
    }

    .gp-gift-history__search-input:focus {
        outline: none;
    }

.gp-gift-history__table-wrap {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #627d98 #1f2126;
    border: 1px solid #243b53;
    border-radius: 10px;
}

    .gp-gift-history__table-wrap::-webkit-scrollbar {
        height: 6px;
    }

    .gp-gift-history__table-wrap::-webkit-scrollbar-track {
        background: #1f2126;
        border-radius: 4px;
    }

    .gp-gift-history__table-wrap::-webkit-scrollbar-thumb {
        background: #627d98;
        border-radius: 4px;
    }

.gp-gift-history__table {
    width: 100%;
    min-width: 900px;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}

.gp-gift-history__thead {
    background-color: #16171a;
}

.gp-gift-history__th {
    padding: 20px 10px 20px 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.25;
    color: #bcccdc;
    text-align: left;
    vertical-align: middle;
}

    .gp-gift-history__th:first-child {
        padding-left: 20px;
    }

    .gp-gift-history__th:last-child {
        padding-right: 20px;
    }

    .gp-gift-history__th:nth-child(1),
    .gp-gift-history__cell:nth-child(1) {
        width: 150px;
    }

    .gp-gift-history__th:nth-child(2),
    .gp-gift-history__cell:nth-child(2) {
        width: 90px;
    }

    .gp-gift-history__th:nth-child(3),
    .gp-gift-history__cell:nth-child(3) {
        width: 300px;
    }

    .gp-gift-history__th:nth-child(4),
    .gp-gift-history__cell:nth-child(4) {
        width: 60px;
    }

    .gp-gift-history__th:nth-child(5),
    .gp-gift-history__cell:nth-child(5) {
        width: 130px;
    }

    .gp-gift-history__th:nth-child(6),
    .gp-gift-history__cell:nth-child(6) {
        width: 80px;
    }

    .gp-gift-history__th:nth-child(7),
    .gp-gift-history__cell:nth-child(7) {
        width: 150px;
    }

    .gp-gift-history__th:nth-child(8),
    .gp-gift-history__cell:nth-child(8) {
        width: 120px;
    }

.gp-gift-history__tbody {
    background-color: #1a1b1e;
}

.gp-gift-history__row {
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: 1.25;
    color: #ffffff;
}

    .gp-gift-history__row + .gp-gift-history__row .gp-gift-history__cell {
        border-top: 1px solid #243b53;
    }

.gp-gift-history__cell {
    padding: 5px 10px 5px 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.gp-gift-history__tbody .gp-gift-history__row:last-child .gp-gift-history__cell {
    padding-bottom: 20px;
}

.gp-gift-history__cell:first-child {
    padding-left: 20px;
}

.gp-gift-history__cell:last-child {
    padding-right: 20px;
}

.gp-gift-history__cell--date {
    font-size: 14px;
    color: #829ab1;
}

.gp-gift-history__cell:has(.gp-gift-history__type-badge),
.gp-gift-history__cell:has(.gp-gift-history__detail),
.gp-gift-history__cell:has(.gp-gift-history__status) {
    overflow: visible;
    white-space: normal;
}

.gp-gift-history__type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.gp-gift-history__type-badge--item {
    background-color: rgba(19, 123, 123, 0.2);
    border-color: #1e5f6d;
}

    .gp-gift-history__type-badge--item .gp-gift-history__type-badge-text {
        color: #1ce7cf;
    }

.gp-gift-history__type-badge--code {
    background-color: rgba(61, 48, 173, 0.2);
    border-color: #414aad;
}

    .gp-gift-history__type-badge--code .gp-gift-history__type-badge-text {
        color: #96abff;
    }

.gp-gift-history__type-badge-icon {
    width: 14px;
    height: 13px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-gift-history__type-badge-text {
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: normal;
}

.gp-gift-history__detail {
    display: flex;
    width: 100%;
    min-width: 0px;
    flex-direction: column;
    gap: 5px;
    overflow: hidden;
}

.gp-gift-history__detail-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    line-height: normal;
    color: #ffffff;
}

.gp-gift-history__detail-code {
    display: flex;
    width: 100%;
    min-width: 0px;
    align-items: center;
    gap: 10px;
}

.gp-gift-history__detail-code-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    color: #c698ff;
    white-space: nowrap;
}

.gp-gift-history__detail-code-copy {
    flex-shrink: 0;
    cursor: pointer;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    width: 20px;
    height: 20px;
}

    .gp-gift-history__detail-code-copy img {
        display: block;
        width: 100%;
        height: 100%;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-gift-history__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 15px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: normal;
    white-space: nowrap;
}

.gp-gift-history__status--received {
    background-color: rgba(39, 200, 64, 0.2);
    border-color: #27c840;
    color: #4ced65;
}

.gp-gift-history__status--expired {
    background-color: rgba(200, 39, 39, 0.2);
    border-color: #ff5f57;
    color: #ff817b;
}

.gp-gift-history__table--itemcode .gp-gift-history__th:nth-child(1),
.gp-gift-history__table--itemcode .gp-gift-history__cell:nth-child(1),
.gp-gift-history__table--itemcode .gp-gift-history__th:nth-child(2),
.gp-gift-history__table--itemcode .gp-gift-history__cell:nth-child(2),
.gp-gift-history__table--itemcode .gp-gift-history__th:nth-child(4),
.gp-gift-history__table--itemcode .gp-gift-history__cell:nth-child(4),
.gp-gift-history__table--itemcode .gp-gift-history__th:nth-child(5),
.gp-gift-history__table--itemcode .gp-gift-history__cell:nth-child(5) {
    width: 16.67%;
}

.gp-gift-history__table--itemcode .gp-gift-history__th:nth-child(3),
.gp-gift-history__table--itemcode .gp-gift-history__cell:nth-child(3) {
    width: 33.33%;
}

@media (max-width: 991px) {
    .gp-gift-history__filter {
        flex-direction: column;
        align-items: stretch;
    }

    .gp-gift-history__filter-left,
    .gp-gift-history__filter-right {
        width: 100%;
        justify-content: flex-start;
    }

    .gp-gift-history__filter-right {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
    }

    .gp-gift-history .gp-history__date-range-panel,
    .gp-activity-history .gp-history__date-range-panel {
        min-width: min(100%, calc(100vw - 48px));
        max-width: calc(100vw - 24px);
    }
}

@media (max-width: 767px) {
    .gp-gift-history {
        padding: 16px;
        gap: 16px;
    }

    .gp-gift-history__filter {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .gp-gift-history__filter-left {
        width: 100%;
    }

        .gp-gift-history__filter-left .gp-mail-filter {
            width: 100%;
        }

        .gp-gift-history__filter-left .gp-mail-filter__pill {
            flex: 1 1 0;
            min-width: 0;
            text-align: center;
        }

    .gp-gift-history__filter-right {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        width: 100%;
        gap: 10px;
        --gp-gift-history-filter-control-h: 55px;
    }

        .gp-gift-history__filter-right .gp-gift-history__date-range {
            flex: none;
            width: 100%;
        }

        .gp-gift-history__filter-right .gp-history__filter-btn {
            width: 100%;
            white-space: nowrap;
            padding: 0 10px;
            font-size: 14px;
        }

        .gp-gift-history__filter-right .gp-gift-history__filter-select-field,
        .gp-gift-history__filter-right .gp-gift-history__filter-select-field--status {
            width: 100%;
        }

        .gp-gift-history__filter-right .gp-gift-history__filter-select-wrap {
            width: 100%;
        }

        .gp-gift-history__filter-right .gp-gift-history__filter-select-trigger,
        .gp-gift-history__filter-right .gp-gift-history__filter-select {
            padding: 0 44px 0 15px;
        }

        .gp-gift-history__filter-right .gp-gift-history__search {
            flex: none;
            width: 100%;
            padding: 0 15px;
        }

        .gp-gift-history__filter-right .gp-gift-history__search-icon {
            width: 14px;
            height: 14px;
        }

        .gp-gift-history__filter-right .gp-gift-history__search-input {
            font-size: 14px;
        }

    .gp-gift-history__filter-item,
    .gp-gift-history__filter-item--search {
        flex: 1 1 auto;
        width: 100%;
    }

    .gp-gift-history__filter-label--empty {
        display: none;
    }

    .gp-gift-history__th,
    .gp-gift-history__cell {
        padding-left: 16px;
        padding-right: 16px;
    }

        .gp-gift-history__th:first-child,
        .gp-gift-history__cell:first-child {
            padding-left: 16px;
        }

        .gp-gift-history__th:last-child,
        .gp-gift-history__cell:last-child {
            padding-right: 16px;
        }
}

/* -------------------------------------------------------------------------- */

/* Activity character banner (Figma: 3474:21041, 3530:44789)                  */

/* -------------------------------------------------------------------------- */

.gp-activity-character {
    width: 100%;
    margin-bottom: 10px;
}

.gp-activity-character__frame {
    width: 100%;
    padding: 10px;
    border-radius: 15px;
    background: radial-gradient(136% 100% at 0% 0%, rgba(217, 217, 217, 0.2) 0%, rgba(217, 217, 217, 0.05) 70%);
}

.gp-activity-character__panel {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border: 1px solid #196cd5;
    border-radius: 15px;
    background-color: rgba(11, 77, 160, 0.8);
}

.gp-activity-character__info {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    align-items: center;
    gap: 0;
}

.gp-activity-character__label {
    display: none;
    margin: 0;
    padding-left: 10px;
    border-left: 3px solid #1caee7;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    color: #5fc4ee;
    white-space: nowrap;
}

.gp-activity-character__values {
    display: flex;
    min-width: 0px;
    flex-direction: column;
    gap: 5px;
}

.gp-activity-character__server {
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}

.gp-activity-character__name {
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}

.gp-activity-character__change {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    margin-left: 12px;
    padding: 10px 20px;
    border: 1px solid #1caee7;
    border-radius: 99px;
    background-color: rgba(87, 126, 255, 0.2);
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    color: #5fc4ee;
    white-space: nowrap;
}

    .gp-activity-character__change:hover {
        background-color: rgba(87, 126, 255, 0.35);
    }

    .gp-activity-character__change:focus-visible {
        outline: 2px solid #5fc4ee;
        outline-offset: 2px;
    }

@media (min-width: 768px) and (max-width: 1023px) {
    .gp-activity-character__panel {
        padding: 20px 30px;
    }

    .gp-activity-character__info {
        gap: 30px;
    }

    .gp-activity-character__label {
        display: flex;
        align-items: center;
    }

    .gp-activity-character__values {
        flex-direction: row;
        align-items: center;
        gap: 0;
    }

    .gp-activity-character__server {
        font-size: 18px;
        font-weight: 700;
    }

    .gp-activity-character__name {
        padding-left: 15px;
        border-left: 1px solid #1caee7;
    }
}

@media (min-width: 1024px) and (orientation: portrait) {
    .gp-activity-character__panel {
        padding: 20px 30px;
    }

    .gp-activity-character__info {
        gap: 30px;
    }

    .gp-activity-character__label {
        display: flex;
        align-items: center;
    }

    .gp-activity-character__values {
        flex-direction: row;
        align-items: center;
        gap: 0;
    }

    .gp-activity-character__server {
        font-size: 18px;
        font-weight: 700;
    }

    .gp-activity-character__name {
        padding-left: 15px;
        border-left: 1px solid #1caee7;
    }
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-activity-character__panel {
        padding: 20px 30px;
    }

    .gp-activity-character__info {
        gap: 30px;
    }

    .gp-activity-character__label {
        display: flex;
        align-items: center;
    }

    .gp-activity-character__values {
        flex-direction: row;
        align-items: center;
        gap: 0;
    }

    .gp-activity-character__server {
        font-size: 18px;
        font-weight: 700;
        padding-right: 15px;
    }

    .gp-activity-character__name {
        padding-left: 15px;
        border-left: 2px solid #1caee7;
    }
}

/* -------------------------------------------------------------------------- */

/* Activity page (Figma: 3450:19123, 3513:19351)                              */

/* -------------------------------------------------------------------------- */

.gp-activity {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0 40px;
}

.gp-activity__grid {
    display: grid;
    width: 100%;
    gap: 20px;
    grid-template-columns: 1fr;
    margin: 0;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #243b53;
    background-color: #1a1b1e;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .gp-activity__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) and (orientation: portrait) {
    .gp-activity__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-activity__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .gp-activity__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.gp-activity-card {
    display: flex;
    width: 100%;
    flex-direction: column;
    background-color: #282a2f;
    border: 1px solid #243b53;
    border-radius: 10px;
    overflow: hidden;
}

.gp-activity-card__banner-wrap {
    width: 100%;
    overflow: hidden;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.gp-activity-card__banner {
    display: block;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    aspect-ratio: 692 / 362;
}

.gp-activity-card__body {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 20px;
}

.gp-activity-card__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: normal;
    color: #ffffff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gp-activity-card__meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gp-activity-card__period,
.gp-activity-card__claim {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    color: #829ab1;
}

.gp-activity-card__actions {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
}

.gp-activity-card__btn {
    display: inline-flex;
    flex: 1 1 0%;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 10px;
    border-radius: 99px;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: normal;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.gp-activity-card__btn--detail {
    border: 1px solid #9fb3c8;
    background-color: transparent;
    color: #9fb3c8;
}

    .gp-activity-card__btn--detail:hover {
        color: #ffffff;
        border-color: #ffffff;
    }

.gp-activity-card__btn--join {
    border: none;
    background-color: #5fc4ee;
    color: #020e1f;
    font-weight: 500;
}

    .gp-activity-card__btn--join:hover {
        background-color: #52ceff;
    }

.gp-activity-history {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #243b53;
    background-color: #1a1b1e;
}

.gp-activity-history__filter-item--action {
    position: relative;
    flex: 0 0 200px;
}

.gp-activity-history__filter-btn {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 20px;
    height: 60px;
    padding: 10px 20px;
    border: 0.5px solid #4b89c9;
    border-radius: 10px;
    background-color: transparent;
    cursor: pointer;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: 1;
    color: #ffffff;
    transition: border-color 0.2s ease;
}

    .gp-activity-history__filter-btn:hover {
        border-color: #52ceff;
    }

.gp-activity-history__filter-btn-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.gp-activity-history__filter-btn-text {
    white-space: nowrap;
}

.gp-gift-history__table--activity .gp-gift-history__th:nth-child(1),
.gp-gift-history__table--activity .gp-gift-history__cell:nth-child(1) {
    width: 150px;
}

.gp-gift-history__table--activity .gp-gift-history__th:nth-child(2),
.gp-gift-history__table--activity .gp-gift-history__cell:nth-child(2),
.gp-gift-history__table--activity .gp-gift-history__th:nth-child(3),
.gp-gift-history__table--activity .gp-gift-history__cell:nth-child(3),
.gp-gift-history__table--activity .gp-gift-history__th:nth-child(5),
.gp-gift-history__table--activity .gp-gift-history__cell:nth-child(5) {
    width: 18.75%;
}

.gp-gift-history__table--activity .gp-gift-history__th:nth-child(4),
.gp-gift-history__table--activity .gp-gift-history__cell:nth-child(4) {
    width: 25%;
}

.gp-gift-history__table--activity .gp-gift-history__th:nth-child(6),
.gp-gift-history__table--activity .gp-gift-history__cell:nth-child(6) {
    width: 10%;
}

@media (max-width: 1139px) {
    .gp-activity-history__filter-item--action {
        flex: 1 1 calc(50% - 10px);
    }
}

@media (max-width: 767px) {
    .gp-activity-history {
        padding: 16px;
        gap: 16px;
    }

    .gp-activity-history__filter-item--action {
        flex: 1 1 100%;
        width: 100%;
    }

    .gp-activity-card__body {
        gap: 30px;
    }

    .gp-activity-card__title {
        font-size: 18px;
    }
}

/* -------------------------------------------------------------------------- */

/* Gift SV Select page (Figma: 3355:34190)                                    */

/* -------------------------------------------------------------------------- */

.gp-gift-select {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0 40px;
}

.gp-gift-select__back {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    text-decoration: none;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: 1.2;
    color: #9fb3c8;
}

    .gp-gift-select__back img {
        width: 24px;
        height: 24px;
    }

.gp-gift-select__head {
    display: flex;
    width: 100%;
    min-height: 68px;
    padding: 15px 20px;
    border: 1px solid #073269;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(90deg, #0b58b9 0%, #122767 100%);
}

.gp-gift-select__head-main {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 20px;
}

.gp-gift-select__game-avatar {
    width: 38px;
    height: 38px;
    border-radius: 5px;
    -o-object-fit: cover;
    object-fit: cover;
}

.gp-gift-select__game-copy {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
}

.gp-gift-select__game-name {
    font-weight: 400;
}

.gp-gift-select__game-id {
    font-weight: 500;
}

.gp-gift-select__head-title-wrap {
    display: flex;
    flex: 1 1 0%;
    align-items: center;
    min-height: 25px;
    padding-left: 20px;
    border-left: 1px solid #627d98;
}

.gp-gift-select__head-title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #d9e2ec;
}

.gp-gift-select__body {
    display: flex;
    width: 100%;
    align-items: stretch;
    gap: 30px;
    padding: 30px;
    border: 1px solid #073269;
    border-top: none;
    border-radius: 0 0 10px 10px;
    background: #242424;
}

.gp-gift-select .gp-gift-card {
    width: 500px;
    flex-shrink: 0;
}

.gp-gift-select .gp-gift-card__body {
    gap: 20px;
}

.gp-gift-select__form-wrap {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    justify-content: space-between;
    gap: 50px;
    padding: 30px;
    border-radius: 10px;
    background: #1b1b1b;
}

.gp-gift-select__fields {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 40px;
}

.gp-gift-select__form-wrap .gp-shop-redeem-modal__select-field {
    gap: 10px;
}

.gp-gift-select__form-wrap .gp-shop-redeem-modal__select-trigger {
    min-height: 60px;
}

.gp-gift-select__submit {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 60px;
    border: none;
    border-radius: 10px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    color: #020e1f;
    background-image: linear-gradient(122.91deg, #52ceff 5.7%, #1caee7 54.4%);
}

@media (max-width: 1279px) {
    .gp-gift-select__head-main,
    .gp-gift-select__game-copy {
        font-size: 16px;
    }

    .gp-gift-select__head-main {
        gap: 12px;
    }

    .gp-gift-select__body {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }

    .gp-gift-select .gp-gift-card {
        width: 100%;
    }

    .gp-gift-select__form-wrap {
        padding: 20px;
        gap: 24px;
    }

    .gp-gift-select__fields {
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .gp-gift-select {
        padding-top: 10px;
        gap: 12px;
    }

    .gp-gift-select__back {
        font-size: 14px;
    }

    .gp-gift-select__head {
        padding: 12px;
    }

    .gp-gift-select__head-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .gp-gift-select__head-title-wrap {
        width: 100%;
        padding-left: 0;
        border-left: none;
    }

    .gp-gift-select__head-title {
        font-size: 14px;
    }

    .gp-gift-select .gp-gift-card__name {
        font-size: 20px;
    }

    .gp-gift-select .gp-gift-card__body,
    .gp-gift-select__form-wrap,
    .gp-gift-select__code-panel,
    .gp-gift-select__body {
        padding: 16px;
    }

    .gp-gift-select__submit {
        font-size: 16px;
    }
}

/* -------------------------------------------------------------------------- */

/* Mail item code page (Figma: 5009:33096 / 5009:36301)                     */

/* -------------------------------------------------------------------------- */

.gp-gift-select--mail-code .gp-gift-select__code-panel {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    justify-content: space-between;
    gap: 50px;
    padding: 30px;
    border-radius: 10px;
    background: #1b1b1b;
}

.gp-gift-select__code-main {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.gp-gift-select__code-label {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    color: #ffffff;
    text-align: center;
}

.gp-gift-select__code-reveal {
    display: flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    gap: 7px;
    padding: 20px 120px;
    border-radius: 10px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
    color: #d3b9ff;
    background-image: linear-gradient(124.81deg, #4f2ec5 6.07%, #5733a0 70.31%);
}

    .gp-gift-select__code-reveal:hover {
        filter: brightness(1.05);
    }

    .gp-gift-select__code-reveal:disabled {
        display: none;
    }

.gp-gift-select__code-reveal-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-gift-select__code-display {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 63px;
    padding: 20px;
    border: 1px dashed #6e46ff;
    border-radius: 10px;
    background: rgba(128, 55, 255, 0.2);
}

    .gp-gift-select__code-display[hidden] {
        display: none;
    }

.gp-gift-select__code-value {
    font-family: "Google Sans", sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 1px;
    color: #ffffff;
    white-space: nowrap;
}

.gp-gift-select__code-copy {
    flex-shrink: 0;
    cursor: pointer;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    width: 24px;
    height: 24px;
}

    .gp-gift-select__code-copy img {
        display: block;
        width: 100%;
        height: 100%;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-gift-select__code-caution {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.gp-gift-select__code-caution-row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.gp-gift-select__code-caution-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-gift-select__code-caution-text,
.gp-gift-select__code-caution-note {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #ffffff;
    text-align: center;
}

.gp-gift-select__code-history-link {
    color: #1caee7;
    text-decoration: underline;
    text-underline-position: from-font;
}

    .gp-gift-select__code-history-link:hover {
        color: #52ceff;
    }

.gp-gift-select__code-redeem {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 322px;
    height: 60px;
    padding: 10px;
    border-radius: 10px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
    color: #020e1f;
    text-decoration: none;
    background-image: linear-gradient(117.19deg, #52ceff 5.7%, #1caee7 54.37%);
}

    .gp-gift-select__code-redeem:hover {
        filter: brightness(1.05);
    }

.gp-gift-select--mail-code.gp-gift-select--code-revealed .gp-gift-select__code-reveal {
    display: none;
}

@media (max-width: 1279px) {
    .gp-gift-select--mail-code .gp-gift-select__code-panel {
        padding: 20px;
        gap: 24px;
    }

    .gp-gift-select__code-reveal {
        padding: 20px 40px;
    }
}

@media (max-width: 767px) {
    .gp-gift-select--mail-code .gp-gift-select__code-panel,
    .gp-gift-select--mail-code .gp-gift-select__code-main {
        gap: 20px;
    }

    .gp-gift-select__code-label {
        font-size: 16px;
    }

    .gp-gift-select__code-reveal {
        padding: 16px 24px;
        font-size: 16px;
    }

    .gp-gift-select__code-value {
        font-size: 18px;
    }

    .gp-gift-select__code-caution-text,
    .gp-gift-select__code-caution-note {
        font-size: 14px;
        line-height: 22px;
    }

    .gp-gift-select__code-redeem {
        max-width: none;
        font-size: 16px;
    }
}

/* -------------------------------------------------------------------------- */

/* Activity SV Select page (Figma: 3474:20037)                                */

/* -------------------------------------------------------------------------- */

.gp-activity-select {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0.625rem;
}

@media (min-width: 768px) {
    .gp-activity-select {
        gap: 0.625rem;
        padding-top: 1.25rem;
    }
}

.gp-activity-select {
    padding-bottom: 40px;
}

.gp-activity-select__back {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

@media (min-width: 768px) {
    .gp-activity-select__back {
        font-size: 1rem;
        line-height: 1.5rem;
    }
}

.gp-activity-select__back {
    gap: 6px;
    text-decoration: none;
    font-family: "Google Sans", sans-serif;
    line-height: 1;
    color: #9fb3c8;
}

    .gp-activity-select__back img {
        width: 24px;
        height: 24px;
    }

.gp-activity-select__head {
    display: flex;
    width: 100%;
    padding: 0.75rem;
}

@media (min-width: 768px) {
    .gp-activity-select__head {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        padding-top: 15px;
        padding-bottom: 15px;
    }
}

.gp-activity-select__head {
    min-height: 68px;
    border: 1px solid #243b53;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(90deg, #0b58b9 0%, #122767 100%);
}

.gp-activity-select__head--rounded {
    border-radius: 10px;
}

.gp-activity-select__head-main {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
}

.gp-activity-select__game-avatar {
    width: 38px;
    height: 38px;
    border-radius: 5px;
    -o-object-fit: cover;
    object-fit: cover;
    flex-shrink: 0;
}

.gp-activity-select__game-copy {
    display: flex;
    align-items: center;
    font-size: 1rem;
    line-height: 1.5rem;
    gap: 10px;
    font-family: "Google Sans", sans-serif;
    color: #ffffff;
}

.gp-activity-select__game-name {
    font-weight: 400;
}

.gp-activity-select__game-id {
    font-weight: 500;
}

.gp-activity-select__body {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

@media (min-width: 768px) {
    .gp-activity-select__body {
        gap: 1.25rem;
    }
}

.gp-activity-select__body {
    padding: 20px 16px;
    border: 1px solid #243b53;
    border-top: none;
    border-radius: 0 0 10px 10px;
    background-color: #1a1b1e;
}

.gp-activity-select__intro {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
}

.gp-activity-select__title {
    margin: 0px;
    font-size: 1.25rem;
    line-height: 1.75rem;
}

@media (min-width: 768px) {
    .gp-activity-select__title {
        font-size: 22px;
    }
}

.gp-activity-select__title {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    line-height: normal;
    color: #ffffff;
}

.gp-activity-select__subtitle {
    margin: 0px;
    font-size: 1rem;
    line-height: 1.5rem;
    line-height: 22px;
}

@media (min-width: 768px) {
    .gp-activity-select__subtitle {
        font-size: 1.125rem;
        line-height: 1.5rem;
    }
}

.gp-activity-select__subtitle {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    color: #ffffff;
}

.gp-activity-select__form-card {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

@media (min-width: 768px) {
    .gp-activity-select__form-card {
        padding: 30px;
    }
}

.gp-activity-select__form-card {
    border: 1px solid #243b53;
    border-radius: 10px;
    background-color: #212326;
}

.gp-activity-select__fields {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .gp-activity-select__fields {
        gap: 30px;
    }
}

.gp-activity-select__select-field {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-activity-select__select-label {
    font-size: 1rem;
    line-height: 1.5rem;
}

@media (min-width: 768px) {
    .gp-activity-select__select-label {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
}

.gp-activity-select__select-label {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    line-height: 13.248px;
    color: #9fb3c8;
}

.gp-activity-select__select-wrap {
    position: relative;
    width: 100%;
}

.gp-activity-select__select {
    width: 100%;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 1rem;
    line-height: 1.5rem;
}

@media (min-width: 768px) {
    .gp-activity-select__select {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
}

.gp-activity-select__select {
    height: 50px;
    border-radius: 10px;
    border: 1px solid #3a3c43;
    background-color: #27292f;
    padding: 10px 52px 10px 20px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    line-height: 13.248px;
    color: #829ab1;
}

.gp-activity-select__select-wrap--custom .gp-activity-select__select {
    position: absolute;
    width: 100%;
    opacity: 0;
    pointer-events: none;
}

.gp-activity-select__select-trigger {
    display: flex;
    width: 100%;
    align-items: center;
    border-radius: 10px;
    font-size: 1rem;
    line-height: 1.5rem;
}

@media (min-width: 768px) {
    .gp-activity-select__select-trigger {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
}

.gp-activity-select__select-trigger {
    height: 50px;
    border: 1px solid #3a3c43;
    background-color: #27292f;
    padding: 10px 52px 10px 20px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    line-height: 13.248px;
    color: #829ab1;
    text-align: left;
    cursor: pointer;
}

.gp-activity-select__select-wrap--selected .gp-activity-select__select-trigger {
    color: #ffffff;
}

.gp-activity-select__select-wrap--open .gp-activity-select__select-trigger {
    color: #ffffff;
}

.gp-activity-select__select-caret {
    pointer-events: none;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    transition: transform 0.2s ease;
}

.gp-activity-select__select-wrap--open .gp-activity-select__select-caret {
    transform: translateY(-50%) rotate(180deg);
}

.gp-activity-select__select-options {
    position: absolute;
    z-index: 25;
    width: 100%;
    border-radius: 10px;
    top: calc(100% + 8px);
    max-height: 240px;
    overflow-y: auto;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    border: 1px solid #3a3c43;
    background-color: #363e4d;
}

.gp-activity-select__select-wrap--flip-up .gp-activity-select__select-options {
    top: auto;
    bottom: calc(100% + 8px);
}

.gp-activity-select__select-option {
    width: 100%;
    font-size: 1rem;
    line-height: 1.5rem;
}

@media (min-width: 768px) {
    .gp-activity-select__select-option {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
}

.gp-activity-select__select-option {
    border: none;
    background: transparent;
    padding: 12px 20px;
    font-family: "Google Sans", sans-serif;
    line-height: 1.2;
    color: #d9e2ec;
    text-align: left;
    cursor: pointer;
}

    .gp-activity-select__select-option:hover,
    .gp-activity-select__select-option:focus-visible,
    .gp-activity-select__select-option--active {
        background-color: #4b5667;
        color: #ffffff;
    }

.gp-activity-select__actions {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
}

@media (min-width: 768px) {
    .gp-activity-select__actions {
        align-items: center;
    }
}

.gp-activity-select__btn {
    display: inline-flex;
    min-width: 0px;
    flex: 1 1 0%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-style: none;
    font-size: 1rem;
    line-height: 1.5rem;
}

@media (min-width: 768px) {
    .gp-activity-select__btn {
        width: auto;
        flex: none;
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
}

.gp-activity-select__btn {
    height: 60px;
    border-radius: 10px;
    font-family: "Google Sans", sans-serif;
    line-height: normal;
    transition: filter 0.2s ease;
}

.gp-activity-select__btn--cancel {
    min-width: 0px;
    flex: 1 1 0%;
    background-color: transparent;
}

@media (min-width: 768px) {
    .gp-activity-select__btn--cancel {
        width: 250px;
        flex: none;
        flex-shrink: 0;
    }
}

.gp-activity-select__btn--cancel {
    border: 1px solid #486581;
    color: #829ab1;
    font-weight: 400;
}

    .gp-activity-select__btn--cancel:hover {
        filter: brightness(1.1);
    }

.gp-activity-select__btn--confirm {
    min-width: 0px;
    flex: 1 1 0%;
}

@media (min-width: 768px) {
    .gp-activity-select__btn--confirm {
        flex: 1 1 0%;
    }
}

.gp-activity-select__btn--confirm {
    background-color: #1caee7;
    color: #020e1f;
    font-weight: 500;
}

    .gp-activity-select__btn--confirm:hover {
        filter: brightness(1.06);
    }

    .gp-activity-select__btn--confirm:active {
        filter: brightness(0.95);
    }

.gp-activity-select__refresh {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.gp-activity-select__refresh-hint {
    margin: 0px;
    font-size: 1rem;
    line-height: 1.5rem;
}

@media (min-width: 768px) {
    .gp-activity-select__refresh-hint {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
}

.gp-activity-select__refresh-hint {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    line-height: 1.2;
    color: #829ab1;
}

.gp-activity-select__refresh-action {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    border-style: none;
    background-color: transparent;
    font-size: 1rem;
    line-height: 1.5rem;
}

@media (min-width: 768px) {
    .gp-activity-select__refresh-action {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
}

.gp-activity-select__refresh-action {
    gap: 3px;
    padding: 3px 0;
    border-bottom: 2px solid #1caee7;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    line-height: 1.2;
    color: #1caee7;
}

    .gp-activity-select__refresh-action:hover {
        filter: brightness(1.08);
    }

.gp-activity-select__refresh-icon {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .gp-activity-select__body {
        padding: 30px;
    }
}

@media (min-width: 1024px) and (orientation: portrait) {
    .gp-activity-select__body {
        padding: 30px;
    }
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-activity-select__body {
        padding: 30px;
    }
}

@media (min-width: 1280px) and (orientation: landscape) {
    .gp-activity-select__body {
        padding: 50px 220px;
    }

    .gp-activity-select__game-copy {
        font-size: 18px;
    }
}

/* Activity Get Item page (Figma: 3477:34045) */

.gp-activity-select__head-main:has(.gp-activity-select__head-character) {
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 1023px), (min-width: 1024px) and (orientation: portrait) {
    .gp-activity-select__head-main:has(.gp-activity-select__change-character) {
        display: grid;
        grid-template-areas:
            "game game"
            "character button";
        grid-template-columns: 1fr auto;
        gap: 5px;
        align-items: center;
    }

        .gp-activity-select__head-main:has(.gp-activity-select__change-character) .gp-activity-select__head-game {
            grid-area: game;
        }

        .gp-activity-select__head-main:has(.gp-activity-select__change-character) .gp-activity-select__head-character {
            width: auto;
            grid-area: character;
            flex: 0 1 auto;
        }

        .gp-activity-select__head-main:has(.gp-activity-select__change-character) .gp-activity-select__change-character {
            width: auto;
            flex-shrink: 0;
            grid-area: button;
            padding: 7px 10px;
            font-size: 14px;
        }

        .gp-activity-select__head-main:has(.gp-activity-select__change-character) .gp-activity-select__character-values {
            gap: 10px;
        }

        .gp-activity-select__head-main:has(.gp-activity-select__change-character) .gp-activity-select__character-name {
            padding-left: 10px;
        }
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-activity-select__head-main:has(.gp-activity-select__change-character) .gp-activity-select__head-character {
        width: 400px;
        min-width: 400px;
    }
}

.gp-activity-select__head-game {
    display: flex;
    min-width: 0px;
    align-items: center;
    gap: 10px;
}

.gp-activity-select__head-character {
    display: flex;
    width: 100%;
    min-width: 0px;
    flex-shrink: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
}

.gp-activity-select__character-label {
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 13.248px;
    color: #5fc4ee;
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 1023px), (min-width: 1024px) and (orientation: portrait) {
    .gp-activity-select__character-label {
        display: none;
    }
}

.gp-activity-select__character-values {
    display: flex;
    width: 100%;
    min-width: 0px;
    align-items: center;
    gap: 15px;
}

.gp-activity-select__character-server {
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 13.248px;
    color: #ffffff;
    white-space: nowrap;
    flex-shrink: 0;
}

.gp-activity-select__character-name {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    padding-left: 15px;
    border-left: 1px solid #1caee7;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1em;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gp-activity-select__change-character {
    display: inline-flex;
    width: 100%;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-style: none;
}

@media (min-width: 768px) {
    .gp-activity-select__change-character {
        width: auto;
    }
}

.gp-activity-select__change-character {
    padding: 10px 20px;
    border: 1px solid #1caee7;
    border-radius: 99px;
    background-color: rgba(87, 126, 255, 0.2);
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 13.248px;
    color: #5fc4ee;
    white-space: nowrap;
}

    .gp-activity-select__change-character:hover {
        background-color: rgba(87, 126, 255, 0.35);
    }

    .gp-activity-select__change-character:focus-visible {
        outline: 2px solid #5fc4ee;
        outline-offset: 2px;
    }

/* Activity page item banner (Figma: 3425:45237) */

.gp-activity-banner {
    display: flex;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #243b53;
    background-color: #1a1b1e;
}

.gp-activity-banner__image {
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
}

    .gp-activity-banner__image img {
        display: block;
        height: 100%;
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        aspect-ratio: 494 / 258;
    }

.gp-activity-banner__info {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 16px;
}

.gp-activity-banner__copy {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
}

.gp-activity-banner__title {
    margin: 0px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
    color: #ffffff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gp-activity-banner__meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gp-activity-banner__meta-text {
    margin: 0px;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: #829ab1;
}

.gp-activity-banner__action {
    display: flex;
    width: 100%;
    align-items: center;
}

.gp-activity-banner__detail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 10px 40px;
    border: 1px solid #9fb3c8;
    border-radius: 99px;
    background-color: transparent;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: #9fb3c8;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

    .gp-activity-banner__detail-btn:hover {
        color: #ffffff;
        border-color: #ffffff;
    }

/* Activity achievements list (Figma mobile: 3535:45423, desktop: 3425:45227) */

.gp-activity-achievements {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 10px;
    border: 1px solid #243b53;
    border-top: none;
    border-radius: 0 0 10px 10px;
    background-color: #1a1b1e;
}

.gp-activity-achievement {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
    padding: 15px;
    border: 1px solid #243b53;
    border-radius: 10px;
    background-color: #1a1b1e;
}

.gp-activity-achievement__head {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-activity-achievement__badge {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    height: 50px;
    padding: 10px 15px;
    border-radius: 10px;
    background-color: #243b53;
}

.gp-activity-achievement__badge-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.gp-activity-achievement--claimed .gp-activity-achievement__badge-icon {
    width: 24px;
    height: 24px;
}

.gp-activity-achievement__title {
    margin: 0px;
    min-width: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
    color: #3db9eb;
}

.gp-activity-achievement__quota {
    margin: 0px;
    width: 100%;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: #829ab1;
}

.gp-activity-achievement__body {
    display: grid;
    width: 100%;
    gap: 20px;
    grid-template-areas:
        "items"
        "rewards"
        "action";
    grid-template-columns: 1fr;
}

.gp-activity-achievement__items {
    grid-area: items;
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #627d98 transparent;
}

    .gp-activity-achievement__items::-webkit-scrollbar {
        height: 6px;
    }

    .gp-activity-achievement__items::-webkit-scrollbar-thumb {
        background: #627d98;
        border-radius: 3px;
    }

.gp-activity-achievement__item {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
    border-radius: 10px;
    -o-object-fit: cover;
    object-fit: cover;
}

.gp-activity-achievement__item--desktop-only {
    display: none;
}

.gp-activity-achievement__rewards {
    grid-area: rewards;
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

/* Expandable reward item list (shared: activity achievements, milestone cards) */

.gp-reward-items {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-reward-items__toggle {
    display: flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    border: none;
    background: none;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: #829ab1;
}

.gp-reward-items__toggle-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.gp-reward-items__toggle[aria-expanded="true"] .gp-reward-items__toggle-icon {
    transform: rotate(180deg);
}

.gp-reward-items__panel {
    width: 100%;
    border: 1px solid #243b53;
    border-radius: 10px;
    background-color: #27292f;
    min-height: 160px;
    max-height: 160px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #627d98 #1f2126;
}

    .gp-reward-items__panel::-webkit-scrollbar {
        width: 8px;
    }

    .gp-reward-items__panel::-webkit-scrollbar-track {
        background: #1f2126;
        border-radius: 4px;
    }

    .gp-reward-items__panel::-webkit-scrollbar-thumb {
        background: #627d98;
        border-radius: 4px;
    }

    .gp-reward-items__panel[hidden] {
        display: none;
    }

.gp-reward-items__list {
    display: flex;
    width: 100%;
    flex-direction: column;
    margin: 0;
    padding: 10px;
    list-style: none;
    gap: 10px;
}

.gp-reward-items__row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 10px;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: #9fb3c8;
}

.gp-reward-items__name {
    min-width: 0px;
    flex: 1 1 0%;
    padding-left: 24px;
    list-style-position: outside;
}

.gp-reward-items__row .gp-reward-items__name::before {
    content: "•";
    margin-right: 10px;
    margin-left: -14px;
}

.gp-reward-items__qty {
    flex-shrink: 0;
    text-align: right;
}

.gp-milestone-card .gp-reward-items__toggle {
    justify-content: flex-start;
    padding: 0 20px;
}

.gp-activity-achievement__action {
    grid-area: action;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

/* Activity achievements – item code variant (Figma: 3522:43055) */

.gp-activity-achievements--code .gp-activity-achievement__action {
    flex-direction: column;
    align-items: center;
}

.gp-activity-achievement__action-col {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.gp-activity-achievement__code-note,
.gp-activity-achievement__code-history {
    margin: 0px;
    width: 100%;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    color: #1caee7;
}

.gp-activity-achievement__code-history-link {
    color: #1caee7;
    text-decoration: underline;
    text-underline-position: from-font;
}

    .gp-activity-achievement__code-history-link:hover {
        filter: brightness(1.1);
    }

.gp-activity-achievement__claim-btn {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    border-style: none;
    height: 50px;
    padding: 10px;
    border-radius: 10px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.gp-activity-achievement__claim-btn--available {
    background: linear-gradient(110.95deg, #52ceff 5.7%, #1caee7 54.4%);
    color: #020e1f;
}

    .gp-activity-achievement__claim-btn--available:hover {
        filter: brightness(1.06);
    }

.gp-activity-achievement__claim-btn--claimed,
.gp-activity-achievement__claim-btn--locked {
    border: 1px solid #333333;
    background-color: #333333;
    color: #848484;
    cursor: not-allowed;
}

.gp-activity-select__intro--success {
    gap: 20px;
}

.gp-activity-select__intro-icon {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.gp-activity-select__reward-list {
    display: flex;
    width: 100%;
    flex-direction: column;
    margin: 0;
    padding: 0 0 0 24px;
    list-style: disc;
    gap: 10px;
}

.gp-activity-select__reward-row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: #9fb3c8;
}

.gp-activity-select__reward-name {
    min-width: 0;
    flex: 1 1 auto;
}

.gp-activity-select__reward-qty {
    flex-shrink: 0;
    text-align: right;
}

.gp-activity-select__actions--solo {
    width: 100%;
}

    .gp-activity-select__actions--solo .gp-activity-select__btn {
        width: 100%;
        flex: none;
    }

.gp-activity-select__actions--below-panel {
    justify-content: center;
    margin-top: 20px;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .gp-activity-select__actions--below-panel .gp-activity-select__btn--cancel {
        width: auto;
        min-width: 245px;
        flex: none;
    }
}

@media (min-width: 1024px) and (orientation: portrait) {
    .gp-activity-select__actions--below-panel .gp-activity-select__btn--cancel {
        width: auto;
        min-width: 245px;
        flex: none;
    }
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-activity-select__actions--below-panel .gp-activity-select__btn--cancel {
        width: auto;
        min-width: 245px;
        flex: none;
    }
}

/* Activity Get Code page (Figma: 3522:23833) */

.gp-activity-select__code-card {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 30px;
    border: 1px solid #243b53;
    border-radius: 10px;
    background-color: #161d32;
}

.gp-activity-select__code-main {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-height: 53px;
}

.gp-activity-select__code-label {
    margin: 0px;
    text-align: center;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: #bcccdc;
}

.gp-activity-select__code-value {
    margin: 0px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    font-family: "Google Sans", sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: normal;
    color: #ffffff;
    white-space: nowrap;
}

.gp-activity-select__code-expiry {
    margin: 0px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    border: 1px solid #febc2f;
    border-radius: 9999px;
    background-color: rgba(195, 115, 23, 0.31);
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: #febc2f;
}

.gp-activity-select__code-hint {
    margin: 0px;
    text-align: center;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: #bcccdc;
}

a.gp-activity-select__btn--confirm {
    text-decoration: none;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .gp-activity-banner {
        flex-direction: row;
        align-items: stretch;
        min-height: 258px;
    }

    .gp-activity-banner__image {
        width: 42%;
        max-width: 494px;
    }

        .gp-activity-banner__image img {
            aspect-ratio: auto;
            min-height: 258px;
        }

    .gp-activity-banner__info {
        flex: 1 1 0%;
        gap: 20px;
        padding: 30px 24px;
    }

    .gp-activity-banner__title {
        font-size: 20px;
    }

    .gp-activity-banner__meta-text {
        font-size: 16px;
    }

    .gp-activity-banner__action {
        width: auto;
    }

    .gp-activity-banner__detail-btn {
        padding: 10px 80px;
    }

    .gp-activity-achievements {
        padding: 30px;
    }

    .gp-activity-achievement {
        padding: 30px;
    }

    .gp-activity-achievement--compact {
        padding: 20px;
    }

    .gp-activity-achievement__head {
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }

    .gp-activity-achievement__badge {
        width: auto;
        flex-shrink: 0;
        height: auto;
        min-height: 44px;
    }

    .gp-activity-achievement__badge-icon {
        width: 24px;
        height: 24px;
    }

    .gp-activity-achievement__title {
        font-size: 20px;
    }

    .gp-activity-achievement__quota {
        width: auto;
        flex-shrink: 0;
    }

    .gp-activity-achievement__body {
        grid-template-areas:
            "items action"
            "rewards rewards";
        grid-template-columns: 1fr auto;
        -moz-column-gap: 30px;
        column-gap: 30px;
        align-items: center;
    }

    .gp-activity-achievement__items {
        flex-wrap: wrap;
        overflow: visible;
        padding: 0 20px;
    }

    .gp-activity-achievement__item {
        width: 95px;
        height: 95px;
    }

    .gp-activity-achievement__item--desktop-only {
        display: block;
    }

    .gp-activity-achievement__rewards {
        align-items: flex-start;
        padding: 0 20px;
    }

        .gp-activity-achievement__rewards .gp-reward-items__toggle {
            justify-content: flex-start;
        }

    .gp-activity-achievement__action {
        width: auto;
        flex-shrink: 0;
        align-items: center;
        justify-content: flex-end;
        align-self: center;
    }

    .gp-activity-achievement__claim-btn {
        width: 200px;
    }

    .gp-activity-achievements--code .gp-activity-achievement__action {
        align-items: flex-end;
    }

    .gp-activity-achievement__action-col {
        width: auto;
        align-items: flex-end;
        width: 200px;
    }

    .gp-activity-achievement__code-note,
    .gp-activity-achievement__code-history {
        text-align: right;
    }

    .gp-activity-select__body--get-item,
    .gp-activity-select__body--get-code {
        padding: 30px;
    }
}

@media (min-width: 1024px) and (orientation: portrait) {
    .gp-activity-banner {
        flex-direction: row;
        align-items: stretch;
        min-height: 258px;
    }

    .gp-activity-banner__image {
        width: 42%;
        max-width: 494px;
    }

        .gp-activity-banner__image img {
            aspect-ratio: auto;
            min-height: 258px;
        }

    .gp-activity-banner__info {
        flex: 1 1 0%;
        gap: 20px;
        padding: 30px 24px;
    }

    .gp-activity-banner__title {
        font-size: 20px;
    }

    .gp-activity-banner__meta-text {
        font-size: 16px;
    }

    .gp-activity-banner__detail-btn {
        padding: 10px 80px;
    }

    .gp-activity-achievements {
        padding: 30px;
    }

    .gp-activity-achievement {
        padding: 30px;
    }

    .gp-activity-achievement--compact {
        padding: 20px;
    }

    .gp-activity-achievement__head {
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }

    .gp-activity-achievement__badge {
        width: auto;
        flex-shrink: 0;
        height: auto;
        min-height: 44px;
    }

    .gp-activity-achievement__badge-icon {
        width: 24px;
        height: 24px;
    }

    .gp-activity-achievement__title {
        font-size: 20px;
    }

    .gp-activity-achievement__quota {
        width: auto;
        flex-shrink: 0;
    }

    .gp-activity-achievement__body {
        grid-template-areas:
            "items action"
            "rewards rewards";
        grid-template-columns: 1fr auto;
        -moz-column-gap: 30px;
        column-gap: 30px;
        align-items: center;
    }

    .gp-activity-achievement__items {
        flex-wrap: wrap;
        overflow: visible;
        padding: 0 20px;
    }

    .gp-activity-achievement__item {
        width: 95px;
        height: 95px;
    }

    .gp-activity-achievement__item--desktop-only {
        display: block;
    }

    .gp-activity-achievement__rewards {
        align-items: flex-start;
        padding: 0 20px;
    }

        .gp-activity-achievement__rewards .gp-reward-items__toggle {
            justify-content: flex-start;
        }

    .gp-activity-achievement__action {
        width: auto;
        flex-shrink: 0;
        align-items: center;
        justify-content: flex-end;
        align-self: center;
    }

    .gp-activity-achievement__claim-btn {
        width: 200px;
    }

    .gp-activity-achievements--code .gp-activity-achievement__action {
        align-items: flex-end;
    }

    .gp-activity-achievement__action-col {
        width: auto;
        align-items: flex-end;
        width: 200px;
    }

    .gp-activity-achievement__code-note,
    .gp-activity-achievement__code-history {
        text-align: right;
    }

    .gp-activity-select__body--get-item,
    .gp-activity-select__body--get-code {
        padding: 30px;
    }
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-activity-select__change-character {
        width: auto;
        margin-left: auto;
    }

    .gp-activity-banner {
        flex-direction: row;
        align-items: stretch;
        min-height: 258px;
    }

    .gp-activity-banner__image {
        width: 42%;
        max-width: 494px;
    }

        .gp-activity-banner__image img {
            aspect-ratio: auto;
            min-height: 258px;
        }

    .gp-activity-banner__info {
        flex: 1 1 0%;
        gap: 20px;
        padding: 30px 24px;
    }

    .gp-activity-banner__title {
        font-size: 20px;
    }

    .gp-activity-banner__meta-text {
        font-size: 16px;
    }

    .gp-activity-banner__detail-btn {
        padding: 10px 80px;
    }

    .gp-activity-achievements {
        padding: 30px;
    }

    .gp-activity-achievement {
        padding: 30px;
    }

    .gp-activity-achievement--compact {
        padding: 20px;
    }

    .gp-activity-achievement__head {
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }

    .gp-activity-achievement__badge {
        width: auto;
        flex-shrink: 0;
        height: auto;
        min-height: 44px;
    }

    .gp-activity-achievement__badge-icon {
        width: 24px;
        height: 24px;
    }

    .gp-activity-achievement__title {
        font-size: 20px;
    }

    .gp-activity-achievement__quota {
        width: auto;
        flex-shrink: 0;
    }

    .gp-activity-achievement__body {
        grid-template-areas:
            "items action"
            "rewards rewards";
        grid-template-columns: 1fr auto;
        -moz-column-gap: 30px;
        column-gap: 30px;
        align-items: center;
    }

    .gp-activity-achievement__items {
        flex-wrap: wrap;
        overflow: visible;
        padding: 0 20px;
    }

    .gp-activity-achievement__item {
        width: 95px;
        height: 95px;
    }

    .gp-activity-achievement__item--desktop-only {
        display: block;
    }

    .gp-activity-achievement__rewards {
        align-items: flex-start;
        padding: 0 20px;
    }

        .gp-activity-achievement__rewards .gp-reward-items__toggle {
            justify-content: flex-start;
        }

    .gp-activity-achievement__action {
        width: auto;
        flex-shrink: 0;
        align-items: center;
        justify-content: flex-end;
        align-self: center;
    }

    .gp-activity-achievement__claim-btn {
        width: 200px;
    }

    .gp-activity-achievements--code .gp-activity-achievement__action {
        align-items: flex-end;
    }

    .gp-activity-achievement__action-col {
        width: auto;
        align-items: flex-end;
        width: 200px;
    }

    .gp-activity-achievement__code-note,
    .gp-activity-achievement__code-history {
        text-align: right;
    }

    .gp-activity-select__body--get-item,
    .gp-activity-select__body--get-code {
        padding: 30px;
    }
}

@media (min-width: 1280px) and (orientation: landscape) {
    .gp-activity-select__head-main:has(.gp-activity-select__head-character) {
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 20px;
    }

    .gp-activity-select__head-game {
        flex: 0 1 auto;
        min-width: 0;
    }

    .gp-activity-select__head-character {
        width: auto;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        flex: 0 1 auto;
        min-width: 0;
        margin-left: auto;
        flex-wrap: nowrap;
        gap: 20px;
        overflow: hidden;
    }

    .gp-activity-select__change-character {
        width: auto;
        flex-shrink: 0;
        margin-left: 0;
    }

    .gp-activity-select__character-label,
    .gp-activity-select__character-server,
    .gp-activity-select__character-name {
        font-size: 18px;
    }

    .gp-activity-select__character-values {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
    }

    .gp-activity-select__character-name {
        flex: 1 1 auto;
        min-width: 14ch;
        max-width: min(32ch, 100%);
    }

    .gp-activity-banner__info {
        padding: 30px 40px;
    }

    .gp-activity-select__body--get-item {
        padding: 50px 220px;
    }

    .gp-activity-select__body--get-code {
        padding: 50px 200px;
    }
}

/* Gift Success page */

.gp-gift-success {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0 40px;
}

.gp-gift-success__back {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    text-decoration: none;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: 1.2;
    color: #9fb3c8;
}

    .gp-gift-success__back img {
        width: 24px;
        height: 24px;
    }

.gp-gift-success__head {
    display: flex;
    width: 100%;
    align-items: center;
    min-height: 68px;
    gap: 20px;
    padding: 15px 20px;
    border: 1px solid #073269;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(90deg, #0b58b9 0%, #122767 100%);
}

.gp-gift-success__game-avatar {
    width: 38px;
    height: 38px;
    border-radius: 5px;
    -o-object-fit: cover;
    object-fit: cover;
    flex-shrink: 0;
}

.gp-gift-success__game-copy {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
}

.gp-gift-success__game-name {
    font-weight: 400;
}

.gp-gift-success__game-id {
    font-weight: 500;
}

.gp-gift-success__body {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 40px 30px;
    border: 1px solid #073269;
    border-top: none;
    border-radius: 0 0 10px 10px;
    background: #1a1b1e;
}

.gp-gift-success__status {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.gp-gift-success__status-icon {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.gp-gift-success__status-copy {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
}

.gp-gift-success__status-title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    text-align: center;
}

.gp-gift-success__status-text {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color: #ffffff;
    text-align: center;
}

.gp-gift-success__item-card {
    display: flex;
    width: 100%;
    flex-direction: column;
    max-width: 700px;
    gap: 10px;
    padding: 30px;
    border: 1px solid #243b53;
    border-radius: 10px;
    background: #212326;
}

.gp-gift-success__item-row {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 10px;
}

.gp-gift-success__item-thumb {
    width: 100px;
    height: 100px;
    border-radius: 6px;
    -o-object-fit: cover;
    object-fit: cover;
    flex-shrink: 0;
}

.gp-gift-success__item-info {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 10px;
}

.gp-gift-success__item-name {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: normal;
    color: #f0f4f8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gp-gift-success__item-qty {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    color: #829ab1;
}

.gp-gift-success__item-recipient {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 10px;
    padding: 0 20px;
    font-family: "Google Sans", sans-serif;
}

.gp-gift-success__recipient-label {
    font-size: 14px;
    color: #829ab1;
}

.gp-gift-success__recipient-server {
    font-size: 16px;
    color: #1caee7;
}

.gp-gift-success__recipient-name {
    font-size: 18px;
    color: #1caee7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gp-gift-success__items {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.gp-gift-success__items-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    color: #829ab1;
}

.gp-gift-success__items-toggle-icon {
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease;
}

.gp-gift-success__items-toggle[aria-expanded="true"] .gp-gift-success__items-toggle-icon {
    transform: rotate(180deg);
}

.gp-gift-success__items-panel {
    display: flex;
    width: 100%;
    border: 1px solid #243b53;
    border-radius: 10px;
    background: #27292f;
}

.gp-gift-success__items-list {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #627d98 #1f2126;
}

    .gp-gift-success__items-list::-webkit-scrollbar {
        width: 8px;
    }

    .gp-gift-success__items-list::-webkit-scrollbar-track {
        background: #1f2126;
        border-radius: 4px;
    }

    .gp-gift-success__items-list::-webkit-scrollbar-thumb {
        background: #627d98;
        border-radius: 4px;
    }

.gp-gift-success__items-row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: normal;
    color: #9fb3c8;
    padding: 0 10px;
}

    .gp-gift-success__items-row > span:first-child::before {
        content: "•";
        margin-right: 10px;
    }

    .gp-gift-success__items-row > span:last-child {
        text-align: right;
    }

.gp-gift-success__actions {
    display: flex;
    width: 100%;
    align-items: stretch;
    max-width: 700px;
    gap: 20px;
    min-height: 60px;
}

.gp-gift-success__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 10px 30px;
    border-radius: 10px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
    transition: filter 0.2s ease;
}

.gp-gift-success__btn--ghost {
    width: 225px;
    flex-shrink: 0;
    border: 1px solid #486581;
    background: transparent;
    color: #627d98;
    font-weight: 400;
}

    .gp-gift-success__btn--ghost:hover {
        filter: brightness(1.1);
    }

.gp-gift-success__btn--primary {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    padding: 10px;
    background: #1caee7;
    color: #020e1f;
    font-weight: 500;
}

    .gp-gift-success__btn--primary:hover {
        filter: brightness(0.95);
    }

    .gp-gift-success__btn--primary:active {
        filter: brightness(0.9);
    }

.gp-gift-success__cta {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    max-width: 700px;
    height: 60px;
    padding: 10px;
    border-radius: 10px;
    background: #1caee7;
    color: #020e1f;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: filter 0.2s ease;
}

    .gp-gift-success__cta:hover {
        filter: brightness(0.95);
    }

    .gp-gift-success__cta:active {
        filter: brightness(0.9);
    }

@media (max-width: 1279px) {
    .gp-gift-success__head {
        gap: 12px;
    }

    .gp-gift-success__game-copy {
        font-size: 16px;
    }

    .gp-gift-success__body {
        padding: 30px 20px;
        gap: 24px;
    }

    .gp-gift-success__item-card {
        padding: 20px;
    }

    .gp-gift-success__item-recipient {
        padding: 0 12px;
    }
}

@media (max-width: 767px) {
    .gp-gift-success {
        padding: 10px 0 24px;
        gap: 12px;
    }

    .gp-gift-success__back {
        font-size: 14px;
    }

    .gp-gift-success__head {
        padding: 12px;
        flex-wrap: wrap;
    }

    .gp-gift-success__body {
        padding: 24px 16px;
        gap: 20px;
    }

    .gp-gift-success__status-title {
        font-size: 20px;
    }

    .gp-gift-success__status-text {
        font-size: 16px;
        line-height: 22px;
    }

    .gp-gift-success__item-card {
        padding: 16px;
    }

    .gp-gift-success__item-row {
        flex-direction: column;
        gap: 12px;
    }

    .gp-gift-success__item-thumb {
        width: 80px;
        height: 80px;
    }

    .gp-gift-success__item-recipient {
        padding: 0;
    }

    .gp-gift-success__items-list {
        padding: 16px;
        max-height: 220px;
    }

    .gp-gift-success__items-row {
        font-size: 14px;
        padding: 0 4px;
    }

    .gp-gift-success__actions {
        flex-direction: column;
        gap: 12px;
        min-height: 0;
    }

    .gp-gift-success__btn {
        width: 100%;
        min-height: 50px;
        font-size: 16px;
    }

    .gp-gift-success__btn--ghost {
        width: 100%;
    }

    .gp-gift-success__btn--primary {
        flex: none;
    }

    .gp-gift-success__cta {
        height: 50px;
        font-size: 16px;
    }
}

/* Subscribe pack detail modal (Figma: 1073:7431 desktop, 1814:6453 mobile) */

.gp-subscribe-detail-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 70;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-subscribe-detail-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.6);
    cursor: pointer;
    pointer-events: auto;
}

.gp-subscribe-detail-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 746px;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-subscribe-detail-modal__dialog {
    display: flex;
    width: 100%;
    min-width: 0px;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    background-color: #1a1b1e;
    border: 1px solid #243b53;
    border-radius: 10px;
}

.gp-subscribe-detail-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-subscribe-detail-modal__header {
    display: flex;
    flex-shrink: 0;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 14px 32px;
}

.gp-subscribe-detail-modal__close {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

    .gp-subscribe-detail-modal__close img {
        width: 100%;
        height: auto;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-subscribe-detail-modal__body {
    display: flex;
    min-height: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 14px;
    padding: 0 16px 32px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #bcccdc #3d4350;
}

    .gp-subscribe-detail-modal__body::-webkit-scrollbar {
        width: 8px;
    }

    .gp-subscribe-detail-modal__body::-webkit-scrollbar-track {
        background: #3d4350;
        border-radius: 2px;
    }

    .gp-subscribe-detail-modal__body::-webkit-scrollbar-thumb {
        background: #bcccdc;
        border-radius: 2px;
    }

.gp-subscribe-detail-modal__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: normal;
    color: #ffffff;
}

.gp-subscribe-detail-modal__summary {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.gp-subscribe-detail-modal__thumb-wrap {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    width: 170px;
    height: 170px;
    border-radius: 6px;
}

.gp-subscribe-detail-modal__thumb {
    display: block;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 6px;
}

.gp-subscribe-detail-modal__meta {
    display: flex;
    width: 100%;
    min-width: 0px;
    flex-direction: column;
    gap: 20px;
    padding: 0 10px 10px;
}

.gp-subscribe-detail-modal__pack {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 5px;
}

.gp-subscribe-detail-modal__pack-name {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
    word-break: break-word;
}

.gp-subscribe-detail-modal__pack-desc {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #829ab1;
    word-break: break-word;
}

.gp-subscribe-detail-modal__progress {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 5px;
}

.gp-subscribe-detail-modal__progress-head {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: normal;
    white-space: nowrap;
}

.gp-subscribe-detail-modal__progress-label {
    font-weight: 400;
    color: #ffffff;
}

.gp-subscribe-detail-modal__progress-day {
    font-weight: 600;
    color: #1caee7;
}

.gp-subscribe-detail-modal__progress-bar {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 10px;
    border-radius: 99px;
    background-color: #243b53;
}

.gp-subscribe-detail-modal__progress-fill {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 28.75%;
    border-radius: 99px;
    background-color: #1caee7;
}

.gp-subscribe-detail-modal__timeline {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 0;
}

.gp-subscribe-detail-modal__day {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 10px;
}

.gp-subscribe-detail-modal__day--past,
.gp-subscribe-detail-modal__day--future {
    padding: 10px 0;
}

.gp-subscribe-detail-modal__day--current {
    width: 100%;
}

.gp-subscribe-detail-modal__day-rail {
    position: relative;
    flex-shrink: 0;
    width: 8px;
    min-height: 105px;
}

.gp-subscribe-detail-modal__day-line {
    position: absolute;
    left: 3px;
    top: 0;
    width: 2px;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient( 180deg, #1caee7 64.25%, #1caee7 80.83%, rgba(16, 97, 129, 0) 100% );
}

.gp-subscribe-detail-modal__day-dot {
    position: absolute;
    left: 0;
    top: 23px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #1caee7;
}

.gp-subscribe-detail-modal__day-content {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 10px 20px;
}

.gp-subscribe-detail-modal__day--current .gp-subscribe-detail-modal__day-content {
    width: 100%;
    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
    padding: 30px;
    background-color: rgba(11, 77, 160, 0.5);
    border-color: #0b4da0;
    box-shadow: 0 0 8px rgba(15, 116, 155, 0.5);
}

.gp-subscribe-detail-modal__day-head {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.gp-subscribe-detail-modal__day-label {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    white-space: nowrap;
}

.gp-subscribe-detail-modal__day--past .gp-subscribe-detail-modal__day-label {
    color: #627d98;
}

.gp-subscribe-detail-modal__day--current .gp-subscribe-detail-modal__day-label {
    font-weight: 600;
    color: #1caee7;
}

.gp-subscribe-detail-modal__day--future .gp-subscribe-detail-modal__day-label {
    color: #9fb3c8;
}

.gp-subscribe-detail-modal__badge {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 99px;
    border-width: 1px;
    border-style: solid;
    padding: 3px 8px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: normal;
    white-space: nowrap;
}

.gp-subscribe-detail-modal__badge--received {
    background-color: #243b53;
    border-color: #243b53;
    color: #627d98;
}

.gp-subscribe-detail-modal__badge--active {
    padding: 3px 10px;
    background-color: #1caee7;
    border-color: #3db9eb;
    color: #020e1f;
}

.gp-subscribe-detail-modal__badge--upcoming {
    background-color: #0a5674;
    border-color: #0f749b;
    color: #1caee7;
}

.gp-subscribe-detail-modal__items {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    word-break: break-word;
}

    .gp-subscribe-detail-modal__items li {
        position: relative;
        padding-left: 21px;
    }

        .gp-subscribe-detail-modal__items li::before {
            content: "";
            position: absolute;
            left: 8px;
            top: 0.55em;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background-color: currentColor;
        }

.gp-subscribe-detail-modal__day--past .gp-subscribe-detail-modal__items {
    color: #627d98;
}

.gp-subscribe-detail-modal__day--current .gp-subscribe-detail-modal__items {
    color: #ffffff;
}

.gp-subscribe-detail-modal__day--future .gp-subscribe-detail-modal__items {
    color: #9fb3c8;
}

.gp-subscribe-detail-modal__divider {
    width: 100%;
    flex-shrink: 0;
    height: 1px;
    background-color: #243b53;
}

.gp-subscribe-detail-modal__info {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
}

.gp-subscribe-detail-modal__info-row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.gp-subscribe-detail-modal__info-row--full {
    justify-content: center;
}

.gp-subscribe-detail-modal__info-item {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.gp-subscribe-detail-modal__info-label {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #829ab1;
    word-break: break-word;
}

.gp-subscribe-detail-modal__info-value {
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: normal;
    color: #ffffff;
    white-space: nowrap;
}

.gp-subscribe-detail-modal__info-value--expiry {
    color: #facc15;
}

body.gp-subscribe-detail-modal-open {
    overflow: hidden;
}

@media (min-width: 768px) {
    .gp-subscribe-detail-modal__body {
        gap: 16px;
        padding: 0 32px 32px;
    }

    .gp-subscribe-detail-modal__title {
        font-size: 18px;
    }

    .gp-subscribe-detail-modal__summary {
        flex-direction: row;
        align-items: flex-start;
        gap: 0;
    }

    .gp-subscribe-detail-modal__thumb-wrap {
        align-self: flex-start;
    }

    .gp-subscribe-detail-modal__meta {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 20px 20px;
    }

    .gp-subscribe-detail-modal__pack-name {
        font-size: 20px;
    }

    .gp-subscribe-detail-modal__progress-head {
        font-size: 16px;
    }

    .gp-subscribe-detail-modal__progress-fill {
        width: 26.4%;
    }

    .gp-subscribe-detail-modal__day-label {
        font-size: 16px;
    }

    .gp-subscribe-detail-modal__items {
        font-size: 14px;
    }

        .gp-subscribe-detail-modal__items li {
            padding-left: 24px;
        }

    .gp-subscribe-detail-modal__info-label,
    .gp-subscribe-detail-modal__info-value {
        font-size: 16px;
    }
}

/* -------------------------------------------------------------------------- */

/* Serenade detail page — Top/Back (Figma: 3946:25446)                        */

/* -------------------------------------------------------------------------- */

.gp-shop__inner--serenade-detail {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 0 40px;
    overflow: visible;
}

.gp-serenade-detail {
    display: flex;
    width: 100%;
    flex-direction: column;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    gap: 10px;
    overflow: visible;
}

.gp-serenade-detail__back {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0;
    text-decoration: none;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: 1;
    color: #9fb3c8;
}

    .gp-serenade-detail__back:hover {
        color: #bcccdc;
    }

.gp-serenade-detail__back-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.gp-serenade-detail__back-text {
    font-weight: 400;
}

/* -------------------------------------------------------------------------- */

/* Serenade ranking page — content wrap (mockup)                               */

/* -------------------------------------------------------------------------- */

.gp-serenade-ranking__wrap {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 10px;
    border-radius: 15px;
    background: radial-gradient( 132% 100% at 0% 0%, rgba(217, 217, 217, 0.2) 0%, rgba(217, 217, 217, 0.05) 70% );
}

.gp-serenade-ranking__wrap-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    min-height: 1000px;
    border: 1px solid #554127;
    border-radius: 10px;
    background-color: #190E0E;
}

.gp-serenade-ranking__wrap-bg {
    pointer-events: none;
    position: absolute;
    inset: 0px;
    background-image: url('../images/serenade-bg-mobile.jpg');
}

@media (min-width: 768px) {
    .gp-serenade-ranking__wrap-bg {
        background-image: url('../images/serenade-bg.jpg');
    }
}

.gp-serenade-ranking__wrap-bg {
    z-index: 0;
    border-radius: inherit;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
}

.gp-serenade-ranking__header {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 16px 0;
}

.gp-serenade-ranking__head-title-row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.gp-serenade-ranking__head-dec {
    width: 30px;
    height: 20px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-serenade-ranking__head-dec--right {
    transform: rotate(180deg) scaleY(-1);
}

.gp-serenade-ranking__head-title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff;
    text-align: center;
    text-shadow: 0 0 15.7px rgba(255, 85, 85, 0.74);
}

.gp-serenade-ranking__head-desc {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.3;
    color: #ffffff;
    text-align: center;
    text-shadow: 0 0 15.7px rgba(255, 97, 97, 0.74);
}

.gp-serenade-ranking__round {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 16px 0;
}

.gp-serenade-ranking__round-label {
    display: none;
}

@media (min-width: 1024px) {
    .gp-serenade-ranking__round-label {
        display: block;
    }
}

.gp-serenade-ranking__round-label {
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: #ffffff;
    white-space: nowrap;
}

.gp-serenade-ranking__round-dropdown {
    position: relative;
    border-radius: 10px;
    min-height: 50px;
    min-width: 300px;
    background: rgba(167, 34, 1, 0.6);
}

.gp-serenade-ranking__round-dropdown-select {
    width: 100%;
    min-height: 50px;
    padding: 12px 44px 12px 13px;
    border: 1px solid #e63131;
    border-radius: 10px;
    background: transparent;
    box-sizing: border-box;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: #ffffff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.gp-serenade-ranking__round-dropdown--custom .gp-serenade-ranking__round-dropdown-select {
    position: absolute;
    width: 100%;
    opacity: 0;
    pointer-events: none;
}

.gp-serenade-ranking__round-dropdown-trigger {
    display: flex;
    width: 100%;
    align-items: center;
    border-radius: 10px;
    min-height: 50px;
    padding: 12px 44px 12px 13px;
    border: 1px solid #e63131;
    background: transparent;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: #ffffff;
    text-align: left;
    cursor: pointer;
}

.gp-serenade-ranking__round-dropdown-select:focus {
    outline: none;
}

.gp-serenade-ranking__round-dropdown-select option {
    color: #ffffff;
    background: #5f160f;
}

.gp-serenade-ranking__round-dropdown-options {
    position: absolute;
    z-index: 99;
    width: 100%;
    border-radius: 10px;
    top: calc(100% + 6px);
    max-height: 240px;
    overflow-y: auto;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    border: 1px solid #e63131;
    background: #5f160f;
}

.gp-serenade-ranking__round-dropdown--flip-up .gp-serenade-ranking__round-dropdown-options {
    top: auto;
    bottom: calc(100% + 6px);
}

.gp-serenade-ranking__round-dropdown-option {
    width: 100%;
    border: none;
    background: transparent;
    padding: 10px 13px;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: #ffffff;
    text-align: left;
    cursor: pointer;
}

    .gp-serenade-ranking__round-dropdown-option:hover,
    .gp-serenade-ranking__round-dropdown-option:focus-visible,
    .gp-serenade-ranking__round-dropdown-option--active {
        background: rgba(230, 49, 49, 0.24);
    }

.gp-serenade-ranking__round-dropdown-caret {
    pointer-events: none;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.gp-serenade-ranking__round-dropdown--open .gp-serenade-ranking__round-dropdown-caret {
    transform: translateY(-50%) rotate(180deg);
}

.gp-serenade-ranking__top3 {
    position: relative;
    z-index: 0;
    width: 100%;
    padding: 30px 20px 0;
}

.gp-serenade-ranking__top3-podium {
    pointer-events: none;
    position: absolute;
    bottom: 0px;
}

@media (min-width: 768px) {
    .gp-serenade-ranking__top3-podium {
        bottom: 60px;
    }
}

@media (min-width: 1024px) {
    .gp-serenade-ranking__top3-podium {
        bottom: 0px;
    }
}

.gp-serenade-ranking__top3-podium {
    left: 50%;
    z-index: 0;
    width: min(100%, 1020px);
    transform: translateX(-50%);
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-serenade-ranking__top3-cards {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    align-items: flex-end;
    justify-content: center;
    gap: 24px;
    min-height: 400px;
}

.gp-serenade-ranking__top3-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 290px;
    padding: 0 20px 24px;
}

.gp-serenade-ranking__top3-card--crown1 {
    margin-bottom: 30px;
}

.gp-serenade-ranking__top3-card-pic {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 210px;
    height: 170px;
    margin-bottom: 36px;
}

.gp-serenade-ranking__top3-card-avatar {
    width: 110px;
    height: 110px;
    border: 2px solid #c2cad5;
    border-radius: 9999px;
    -o-object-fit: cover;
    object-fit: cover;
}

.gp-serenade-ranking__top3-card-olive {
    width: 60px;
    height: 60px;
    margin: 0 -8px 22px;
    opacity: 0.95;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-serenade-ranking__top3-card-olive--right {
    transform: scaleX(1);
}

.gp-serenade-ranking__top3-card-badge {
    position: absolute;
    top: 25px;
    left: 50%;
    width: 58px;
    height: 58px;
    transform: translateX(-50%);
    -o-object-fit: contain;
    object-fit: contain;
}

    .gp-serenade-ranking__top3-card-badge.badge__gold {
        width: 72px;
        height: 72px;
        top: 15px;
    }

.gp-serenade-ranking__top3-card-flare {
    pointer-events: none;
    position: absolute;
    top: 6px;
    left: 56%;
    width: 28px;
    height: 28px;
    mix-blend-mode: color-dodge;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-serenade-ranking__top3-card-info {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.gp-serenade-ranking__top3-card-name {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    text-align: center;
    transform-origin: center;
}

.gp-serenade-ranking__top3-card-tier {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    color: #ffffff;
    white-space: nowrap;
    text-shadow: 0 0 8.8px rgba(29, 67, 255, 0.25);
    transform-origin: center;
}

.gp-serenade-ranking__top3-card-divider {
    width: 100%;
    max-width: 186px;
    height: 1px;
    border-radius: 9999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.06));
}

.gp-serenade-ranking__top3-card-reward {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.gp-serenade-ranking__top3-card-reward-label {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #ffffff;
    white-space: nowrap;
    text-shadow: 0 0 8.8px rgba(29, 67, 255, 0.25);
    transform-origin: center;
}

.gp-serenade-ranking__top3-card-reward-badge {
    margin: 0;
    min-width: 148px;
    padding: 8px 20px;
    border: 1px solid #4d4d4d;
    border-radius: 10px;
    box-shadow: inset -2px -2px 6.9px rgba(255, 255, 255, 0.86);
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.26;
    color: #000000;
    text-align: center;
    white-space: nowrap;
    transform-origin: center;
}

.gp-serenade-ranking__top3-card--crown1 .gp-serenade-ranking__top3-card-pic {
    width: 230px;
    height: 190px;
}

.gp-serenade-ranking__top3-card--crown1 .gp-serenade-ranking__top3-card-avatar {
    width: 120px;
    height: 120px;
    border-color: #ffddae;
}

.gp-serenade-ranking__top3-card--crown1 .gp-serenade-ranking__top3-card-olive {
    margin-bottom: 0px;
}

@media (min-width: 768px) {
    .gp-serenade-ranking__top3-card--crown1 .gp-serenade-ranking__top3-card-olive {
        margin-bottom: 24px;
    }
}

.gp-serenade-ranking__top3-card--crown1 .gp-serenade-ranking__top3-card-olive {
    width: 60px;
}

.gp-serenade-ranking__top3-card--crown1 .gp-serenade-ranking__top3-card-name {
    background: linear-gradient(130deg, #ffddae 12%, #ffe1b2 29%, #f5d6a3 45%, #f6cf99 58%, #f9c597 72%, #e0a060 86%, #d99458 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gp-serenade-ranking__top3-card--crown1 .gp-serenade-ranking__top3-card-reward-badge {
    min-width: 166px;
    border-color: #41352c;
    background: linear-gradient(106deg, #ffddae 13%, #ffe1b2 25%, #f5d6a3 37%, #f6cf99 46%, #f9c597 56%, #e0a060 67%, #d99458 77%);
}

.gp-serenade-ranking__top3-card--crown2 .gp-serenade-ranking__top3-card-name {
    background: linear-gradient(130deg, #c2cad5 12%, #b8bed0 40%, #c1c7d3 62%, #c9d0d9 80%, #b3bdce 92%, #babecc 112%, #898f9d 130%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gp-serenade-ranking__top3-card--crown2 .gp-serenade-ranking__top3-card-reward-badge {
    border-color: #4d4d4d;
    background: linear-gradient(78deg, #abbdd5 38%, #bac7d9 51%, #c1cbea 61%, #ccd8f6 70%, #95b0ca 81%, #6b7a99 93%);
}

.gp-serenade-ranking__top3-card--crown3 .gp-serenade-ranking__top3-card-avatar {
    border-color: #eac2c2;
}

.gp-serenade-ranking__top3-card--crown3 .gp-serenade-ranking__top3-card-name {
    background: linear-gradient(121deg, #eacbc2 13%, #dbc4b5 41%, #f9d9d1 62%, #f4ccbf 81%, #e4b9ac 93%, #ccaea5 113%, #8c7165 132%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gp-serenade-ranking__top3-card--crown3 .gp-serenade-ranking__top3-card-reward-badge {
    min-width: 158px;
    border-color: #784d49;
    background: linear-gradient(100deg, #ead0c2 13%, #dbc3b5 37%, #f9d9d1 55%, #f4cfbf 71%, #e4bbac 81%, #ccaea5 98%, #8c7165 114%);
}

.gp-serenade-ranking__post-top3 {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 0 100px 40px;
}

.gp-serenade-ranking__countdown {
    display: flex;
    width: 100%;
    justify-content: center;
}

.gp-serenade-ranking__countdown-body {
    display: flex;
    width: 100%;
    max-width: 440px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.gp-serenade-ranking__countdown-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-serenade-ranking__countdown-label {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    color: #ffffff;
    text-align: center;
}

.gp-serenade-ranking__countdown-value {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    color: #ff6e6e;
    text-align: center;
    text-shadow: 0 0 8.8px rgba(29, 67, 255, 0.25);
}

.gp-serenade-ranking__countdown-note {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    color: #ffffff;
    text-align: center;
}

.gp-serenade-ranking__countdown-link {
    --tw-text-opacity: 1;
    color: rgb(28 174 231 / var(--tw-text-opacity, 1));
    text-decoration-line: underline;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

    .gp-serenade-ranking__countdown-link:hover {
        --tw-text-opacity: 1;
        color: rgb(95 196 238 / var(--tw-text-opacity, 1));
    }

    .gp-serenade-ranking__countdown-link:focus-visible {
        outline: 2px solid transparent;
        outline-offset: 2px;
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
        --tw-ring-opacity: 1;
        --tw-ring-color: rgb(34 211 238 / var(--tw-ring-opacity, 1));
        --tw-ring-offset-width: 2px;
        --tw-ring-offset-color: #190e0e;
    }

.gp-serenade-ranking__section-divider {
    width: min(100%, 502px);
    height: auto;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-serenade-ranking__list {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    max-width: 900px;
    flex-direction: column;
    gap: 18px;
    padding: 20px 0 0;
}

.gp-serenade-ranking__list-head,
.gp-serenade-ranking__list-row {
    display: grid;
    grid-template-columns: minmax(0, 0.25fr) minmax(0, 0.75fr) minmax(0, 1fr) minmax(0, 1fr);
    -moz-column-gap: 10px;
    column-gap: 10px;
    align-items: center;
}

.gp-serenade-ranking__list-head {
    padding: 0 15px;
}

.gp-serenade-ranking__list-col {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    color: #ffffff;
}

.gp-serenade-ranking__list-body {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 8px;
}

.gp-serenade-ranking__list-row {
    min-height: 52px;
    padding: 10px 15px;
    border-radius: 12px;
    background-color: #291e17;
}

.gp-serenade-ranking__list-row--current {
    background-color: #570d0d;
}

.gp-serenade-ranking__list-rank {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    color: #ffffff;
}

.gp-serenade-ranking__list-tier {
    display: flex;
    align-items: center;
    gap: 5px;
}

.gp-serenade-ranking__list-tier-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-serenade-ranking__list-tier-name {
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    color: #ffffff;
    white-space: nowrap;
}

.gp-serenade-ranking__list-id {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gp-serenade-ranking__list-id-avatar {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 9999px;
    -o-object-fit: cover;
    object-fit: cover;
}

.gp-serenade-ranking__list-id-name {
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    color: #ffffff;
    white-space: nowrap;
}

.gp-serenade-ranking__list-reward {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    color: #ffffff;
    white-space: nowrap;
}

.gp-serenade-ranking__list-current-label {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    color: #ffffff;
}

@media (max-width: 991px) {
    .gp-serenade-ranking__head-title {
        font-size: 26px;
    }

    .gp-serenade-ranking__head-desc {
        font-size: 22px;
    }

    .gp-serenade-ranking__round {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .gp-serenade-ranking__round-dropdown {
        width: 100%;
        max-width: 400px;
    }

    .gp-serenade-ranking__round-dropdown-select {
        white-space: normal;
    }

    .gp-serenade-ranking__round-dropdown-trigger {
        white-space: normal;
    }

    .gp-serenade-ranking__top3 {
        padding: 20px 14px 0;
    }

    .gp-serenade-ranking__top3-cards {
        gap: 10px;
    }

    .gp-serenade-ranking__top3-card {
        width: 240px;
        padding: 0 10px 20px;
    }

    .gp-serenade-ranking__top3-card-pic {
        width: 170px;
        height: 150px;
    }

    .gp-serenade-ranking__top3-card--crown1 .gp-serenade-ranking__top3-card-pic {
        width: 188px;
        height: 164px;
    }

    .gp-serenade-ranking__top3-card-avatar {
        width: 90px;
        height: 90px;
    }

    .gp-serenade-ranking__top3-card--crown1 .gp-serenade-ranking__top3-card-avatar {
        width: 98px;
        height: 98px;
    }

    .gp-serenade-ranking__top3-card-name {
        font-size: 18px;
    }

    .gp-serenade-ranking__top3-card-tier {
        font-size: 16px;
    }

    .gp-serenade-ranking__top3-card-reward-label {
        font-size: 14px;
    }

    .gp-serenade-ranking__top3-card-reward-badge {
        font-size: 18px;
        min-width: 136px;
        padding: 7px 16px;
    }

    .gp-serenade-ranking__post-top3 {
        padding: 0 60px 20px;
    }

    .gp-serenade-ranking__list {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .gp-serenade-ranking__list-head,
    .gp-serenade-ranking__list-row {
        min-width: 600px;
    }

    .gp-serenade-ranking__list-col,
    .gp-serenade-ranking__list-rank,
    .gp-serenade-ranking__list-tier-name,
    .gp-serenade-ranking__list-id-name,
    .gp-serenade-ranking__list-reward,
    .gp-serenade-ranking__list-current-label {
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    .gp-serenade-ranking__header {
        padding: 20px 12px 0;
        gap: 10px;
    }

    .gp-serenade-ranking__head-title-row {
        gap: 8px;
    }

    .gp-serenade-ranking__head-dec {
        width: 22px;
        height: 14px;
    }

    .gp-serenade-ranking__head-title {
        font-size: 24px;
    }

    .gp-serenade-ranking__head-desc {
        font-size: 18px;
    }

    .gp-serenade-ranking__round {
        padding: 14px 12px 0;
    }

    .gp-serenade-ranking__top3 {
        min-height: auto;
        padding: 24px 12px 26px;
    }

    .gp-serenade-ranking__top3-podium {
        display: none;
    }

    .gp-serenade-ranking__top3-cards {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        min-height: auto;
    }

    .gp-serenade-ranking__top3-card--crown1 {
        order: 1;
    }

    .gp-serenade-ranking__top3-card--crown2 {
        order: 2;
    }

    .gp-serenade-ranking__top3-card--crown3 {
        order: 3;
    }

    .gp-serenade-ranking__top3-card,
    .gp-serenade-ranking__top3-card--crown1 {
        flex-direction: row;
        align-items: center;
        width: 100%;
        max-width: 100%;
        margin-bottom: 0;
        padding: 16px;
        gap: 12px;
        border-radius: 20px;
        background: rgba(25, 14, 14, 0.72);
    }

    .gp-serenade-ranking__top3-card--crown1 {
        border: 0.5px solid #8c421d;
        background: conic-gradient(from 330deg at 55% 100%, #3f2410 0%, #6a3e0c 25%, #965708 50%, #c17104 75%, #ed8a00 100%);
        box-shadow: 0px 0px 12.6px rgba(217, 148, 88, 0.78), inset 0px 0px 7.3px rgba(255, 164, 60, 0.74);
    }

    .gp-serenade-ranking__top3-card--crown2 {
        border: 0.5px solid #c2cad5;
        background: conic-gradient(from 330deg at 55% 100%, #242424 0%, #414141 100%);
        box-shadow: 0px 0px 12.6px rgba(105, 105, 105, 0.78), inset 0px 0px 7.3px rgba(134, 134, 134, 0.74);
    }

    .gp-serenade-ranking__top3-card--crown3 {
        border: 0.5px solid #eac2c2;
        background: conic-gradient(from 330deg at 55% 100%, #2a1e17 0%, #452a1f 50%, #603726 100%);
        box-shadow: 0px 0px 12.6px rgba(217, 118, 88, 0.78), inset 0px 0px 7.3px rgba(173, 93, 64, 0.74);
    }

    .gp-serenade-ranking__top3-card-pic,
    .gp-serenade-ranking__top3-card--crown1 .gp-serenade-ranking__top3-card-pic {
        width: 105px;
        height: 84px;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .gp-serenade-ranking__top3-card-avatar,
    .gp-serenade-ranking__top3-card--crown1 .gp-serenade-ranking__top3-card-avatar {
        width: 60px;
        height: 60px;
    }

    .gp-serenade-ranking__top3-card--crown2 .gp-serenade-ranking__top3-card-avatar,
    .gp-serenade-ranking__top3-card--crown3 .gp-serenade-ranking__top3-card-avatar {
        width: 56px;
        height: 56px;
    }

    .gp-serenade-ranking__top3-card-olive {
        width: 17px;
        height: 40px;
        margin: 0 -3px 0;
    }

    .gp-serenade-ranking__top3-card-badge {
        top: 4px;
    }

    @media (min-width: 768px) {
        .gp-serenade-ranking__top3-card-badge {
            top: -2px;
        }
    }

    .gp-serenade-ranking__top3-card-badge {
        width: 32px;
        height: 32px;
    }

        .gp-serenade-ranking__top3-card-badge.badge__gold {
            top: 0px;
        }

    @media (min-width: 768px) {
        .gp-serenade-ranking__top3-card-badge.badge__gold {
            top: -2px;
        }
    }

    .gp-serenade-ranking__top3-card-badge.badge__gold {
        width: 32px;
        height: 32px;
    }

    .gp-serenade-ranking__top3-card-info {
        gap: 9px;
    }

    .gp-serenade-ranking__top3-card-name {
        font-size: 18px;
    }

    .gp-serenade-ranking__top3-card-tier {
        font-size: 14px;
    }

    .gp-serenade-ranking__top3-card-reward-label {
        display: none;
    }

    .gp-serenade-ranking__top3-card-reward-badge,
    .gp-serenade-ranking__top3-card--crown1 .gp-serenade-ranking__top3-card-reward-badge,
    .gp-serenade-ranking__top3-card--crown3 .gp-serenade-ranking__top3-card-reward-badge {
        min-width: 0;
        width: auto;
        max-width: none;
        font-size: 12px;
        padding: 5px 10px;
        border-radius: 10px;
        white-space: nowrap;
    }

    .gp-serenade-ranking__round-dropdown-select {
        font-size: 14px;
    }

    .gp-serenade-ranking__round-dropdown-trigger,
    .gp-serenade-ranking__round-dropdown-option {
        font-size: 14px;
    }

    .gp-serenade-ranking__post-top3 {
        gap: 24px;
        padding: 0px 12px 20px;
    }

    .gp-serenade-ranking__countdown-value {
        font-size: 16px;
    }

    .gp-serenade-ranking__countdown-note {
        font-size: 12px;
        max-width: 320px;
    }

    .gp-serenade-ranking__list {
        padding-top: 16px;
    }

    .gp-serenade-ranking__list-col,
    .gp-serenade-ranking__list-rank,
    .gp-serenade-ranking__list-tier-name,
    .gp-serenade-ranking__list-id-name,
    .gp-serenade-ranking__list-reward,
    .gp-serenade-ranking__list-current-label {
        font-size: 14px;
    }

    .gp-serenade-ranking__list-reward,
    .gp-serenade-ranking__list-current-label {
        white-space: normal;
    }
}

/* Serenade detail hero — Figma mobile 4398:27497, desktop 4085:23925 */

.gp-serenade-detail__hero {
    position: relative;
    width: 100%;
    overflow: visible;
    padding-top: 12px;
    padding-bottom: 16px;
}

.gp-serenade-detail__hero-card {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    overflow: visible;
    min-height: 157px;
    padding: 20px 30px;
    border: 2px solid #edc89e;
    border-radius: 20px;
    box-shadow: 0 11px 21.3px rgba(255, 131, 23, 0.42);
}

.gp-serenade-detail__hero-bg {
    pointer-events: none;
    position: absolute;
    inset: 0px;
    overflow: hidden;
    opacity: 0.5;
    border-radius: inherit;
    background: radial-gradient( ellipse 50% 120% at 50% 0%, #f5d52b 0%, #3D2917 100% );
}

.gp-serenade-detail__hero-glow {
    pointer-events: none;
    position: absolute;
    inset: 0px;
    border-radius: inherit;
    box-shadow: inset 0 0 111px rgba(255, 113, 37, 0.8);
    z-index: 1;
}

.gp-serenade-detail__hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    padding-right: 110px;
}

@media (min-width: 768px) {
    .gp-serenade-detail__hero-inner {
        padding-right: 130px;
    }
}

.gp-serenade-detail__hero-inner {
    gap: 16px;
    min-height: 117px;
}

.gp-serenade-detail__hero-copy {
    z-index: 4;
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}

.gp-serenade-detail__hero-title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.1em;
    background-image: linear-gradient( 194deg, #FFDDAE 0%, #FFE1B2 19%, #F5D6A3 37%, #F6CF99 67%, #E0A060 84%, #D99458 100% );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.gp-serenade-detail__hero-desc {
    margin: 0px;
    font-size: 0.75rem;
    line-height: 1rem;
    line-height: 1.5;
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}

@media (min-width: 768px) {
    .gp-serenade-detail__hero-desc {
        font-size: 16px;
    }
}

.gp-serenade-detail__hero-desc {
    text-shadow: 0 0 8.8px rgba(255, 255, 255, 0.36);
}

.gp-serenade-detail__hero-desc-line--desktop {
    display: none;
}

.gp-serenade-detail__hero-desc-line--mobile {
    display: block;
}

.gp-serenade-detail__hero-media {
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 50%;
    z-index: 3;
    width: 153px;
    height: 117px;
    overflow: visible;
    transform: translateY(-50%);
}

.gp-serenade-detail__hero-crown {
    position: absolute;
    display: block;
    height: auto;
    max-width: none;
    -o-object-fit: contain;
    object-fit: contain;
    width: 10rem;
    left: 50%;
    top: 50%;
    transform: translate(-42%, -54%);
    filter: drop-shadow(0 0 6.9px rgba(183, 130, 62, 0.9));
}

@media (min-width: 1024px) and (orientation: portrait) {
    .gp-serenade-detail__hero-desc-line--desktop {
        display: block;
    }

    .gp-serenade-detail__hero-desc-line--mobile {
        display: none;
    }

    .gp-serenade-detail__hero-crown {
        width: 20rem;
        right: 0;
        transform: translate(-80%, -50%);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .gp-serenade-detail__hero-desc-line--desktop {
        display: block;
    }

    .gp-serenade-detail__hero-desc-line--mobile {
        display: none;
    }

    .gp-serenade-detail__hero-crown {
        width: 20rem;
        right: 0;
        transform: translate(-80%, -50%);
    }
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-serenade-detail__hero {
        padding-top: 24px;
        padding-bottom: 32px;
    }

    .gp-serenade-detail__hero-card {
        min-height: 220px;
        padding: 30px 20px;
        box-shadow: 0 16px 23.3px rgba(255, 131, 23, 0.61);
    }

    .gp-serenade-detail__hero-bg::after {
        opacity: 0.5;
    }

    .gp-serenade-detail__hero-glow {
        box-shadow: inset 0 0 117.7px #ff7125;
    }

    .gp-serenade-detail__hero-inner {
        gap: 40px;
        min-height: 160px;
        padding-left: 100px;
        padding-right: 440px;
    }

    .gp-serenade-detail__hero-copy {
        gap: 15px;
    }

    .gp-serenade-detail__hero-title {
        font-size: 30px;
        line-height: 1em;
        /* background-image: linear-gradient(
      156deg,
      rgb(255, 221, 174) 12.7%,
      rgb(255, 225, 178) 24.8%,
      rgb(245, 214, 163) 36.6%,
      rgb(246, 207, 153) 46.2%,
      rgb(249, 197, 151) 56.1%,
      rgb(224, 160, 96) 66.6%,
      rgb(217, 148, 88) 76.5%
    ); */
    }

    .gp-serenade-detail__hero-desc {
        font-weight: 400;
        font-size: 22px;
        max-width: none;
    }

    .gp-serenade-detail__hero-desc-line--mobile {
        display: none;
    }

    .gp-serenade-detail__hero-desc-line--desktop {
        display: block;
    }

    .gp-serenade-detail__hero-media {
        right: 40px;
        width: 432px;
        height: 160px;
    }

    .gp-serenade-detail__hero-crown {
        width: 20rem;
        transform: translate(-45%, -50%);
    }
}

/* Serenade detail content wrap  */

/* Serenade detail content wrap — Figma: Main 4800:73100, Inside 4800:73101 */

.gp-serenade-detail__content {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 10px;
    border-radius: 15px;
    background: radial-gradient( 132% 100% at 0% 0%, rgba(217, 217, 217, 0.2) 0%, rgba(217, 217, 217, 0.05) 70% );
}

.gp-serenade-detail__content-inner {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}

@media (min-width: 768px) {
    .gp-serenade-detail__content-inner {
        padding: 16px;
    }
}

.gp-serenade-detail__content-inner {
    gap: 30px;
    border: 1px solid #554127;
    border-radius: 10px;
    overflow: hidden;
}

.gp-serenade-detail__content-bg {
    pointer-events: none;
    position: absolute;
    inset: 0px;
    z-index: 0;
    border-radius: inherit;
    background: linear-gradient( to bottom, #17181b 0%, #17181b 90%, #533a29 100% );
}

.gp-serenade-detail__intro,
.gp-serenade-detail__body {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* Intro — Figma 4800:73102 */

.gp-serenade-detail__intro-card {
    position: relative;
    width: 100%;
    overflow: visible;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background: linear-gradient(0deg,rgba(23, 24, 27, 1) 50%, rgba(120, 76, 43, 1) 100%);
}

.gp-serenade-detail__intro-inner {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 0px;
    gap: 20px;
}

.gp-serenade-detail__intro-copy {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.gp-serenade-detail__section-head {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.gp-serenade-detail__section-head-dec {
    width: 22px;
    height: 14px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-serenade-detail__section-head-title {
    font-size: 16px;
    font-weight: 700;
}

@media (min-width: 768px) {
    .gp-serenade-detail__section-head-title {
        font-size: 18px;
    }
}

.gp-serenade-detail__section-head-title {
    color: #ffffff;
    text-align: center;
    text-shadow: 0 0 7.9px rgba(255, 255, 255, 0.18);
    line-height: 24px;
}

.gp-serenade-detail__section-head--intro .gp-serenade-detail__section-head-title {
    font-size: 24px;
}

.gp-serenade-detail__intro-desc {
    margin: 0;
    max-width: 704px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #ffffff;
    text-align: center;
}

.gp-serenade-detail__intro-media {
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    width: 140px;
    height: 120px;
    overflow: visible;
    opacity: 0.2;
}

.gp-serenade-detail__intro-crown {
    position: absolute;
    display: block;
    height: auto;
    max-width: none;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    filter: blur(2.25px);
}

/* Body — Figma 4800:73121 */

.gp-serenade-detail__body {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 0 0 10px;
}

.gp-serenade-detail__tiers,
.gp-serenade-detail__howto {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.gp-serenade-panel {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
}

@media (min-width: 768px) {
    .gp-serenade-panel {
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

.gp-serenade-panel {
    gap: 30px;
    border: 1px solid #554127;
    border-radius: 10px;
    background: linear-gradient(to bottom, #17181b 63.503%, #d07a3d 304.88%);
}

.gp-serenade-detail__tiers-row {
    display: flex;
    width: 100%;
    max-width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    padding-bottom: 4px;
}

@media (min-width: 768px) {
    .gp-serenade-detail__tiers-row {
        justify-content: center;
    }
}

.gp-serenade-detail__tiers-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

    .gp-serenade-detail__tiers-row::-webkit-scrollbar {
        display: none;
    }

.gp-serenade-detail__tier {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    scroll-snap-align: start;
    gap: 5px;
    width: 72px;
}

.gp-serenade-detail__tier-icon {
    width: 50px;
    height: 50px;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-serenade-detail__tier-name {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.gp-serenade-detail__tier-name--seed {
    background-image: linear-gradient( 109.75deg, #52ceff 5.7%, #92e71c 54.37% );
}

.gp-serenade-detail__tier-name--bronze,
.gp-serenade-detail__tier-name--gold {
    background-image: linear-gradient( 103.66deg, #ffddae 12.72%, #ffe1b2 24.8%, #f5d6a3 36.58%, #f6cf99 46.19%, #f9c597 56.1%, #e0a060 66.64%, #d99458 76.54% );
}

.gp-serenade-detail__tier-name--silver {
    background-image: linear-gradient( 110.03deg, #c2cad5 12.72%, #b8bed0 27.9%, #c1c7d3 39.37%, #c9d0d9 49.29%, #b3bdce 55.79%, #babecd 66.64%, #898f9d 76.54% );
}

.gp-serenade-detail__tier-name--platinum {
    background-image: linear-gradient( 108.79deg, #d18ffe 3.64%, #a7b5ff 16%, #a1fff7 40.69%, #ddff8d 59.2%, #ffe386 77.16%, #fb8568 95.68%, #ef5659 111.91% );
}

.gp-serenade-detail__tier-name--crown {
    background-image: linear-gradient( 117.41deg, #ff6c53 2.94%, #ff1f1f 94.32% );
}

.gp-serenade-detail__tier-arrow {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 8px;
    height: 8px;
}

    .gp-serenade-detail__tier-arrow img {
        width: 100%;
        height: auto;
        -o-object-fit: cover;
        object-fit: cover;
    }

/* Howto — Figma 4800:73169 */

.gp-serenade-detail__howto-steps {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 16px;
}

.gp-serenade-detail__step {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 20px;
    border: 1px solid #41352c;
    border-radius: 10px;
    background: rgba(66, 32, 6, 0.1);
    box-shadow: 0 0 10px rgba(173, 96, 45, 0.11);
}

.gp-serenade-detail__step-icon {
    width: 70px;
    height: 70px;
    -o-object-fit: contain;
    object-fit: contain;
    flex-shrink: 0;
}

.gp-serenade-detail__step-icon--benefits {
    width: 75px;
    height: 75px;
}

.gp-serenade-detail__step-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    text-align: center;
}

.gp-serenade-detail__step-label {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-image: linear-gradient(to bottom, #ffeccd, #a8987d);
}

.gp-serenade-detail__step-text {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
}

.gp-serenade-detail__note {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #ffffff;
    text-align: center;
}

.gp-serenade-detail__note-highlight {
    color: #ff3c3c;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Serenade panel (reusable) — Figma 3946:25789 */

.gp-serenade-panel__intro {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.gp-serenade-panel__desc {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #ffffff;
    text-align: center;
}

.gp-serenade-panel__table {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    isolation: isolate;
}

.gp-serenade-panel__table-badge {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    max-width: 230px;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 16px;
    padding-right: 16px;
}

@media (min-width: 768px) {
    .gp-serenade-panel__table-badge {
        max-width: 340px;
    }
}

.gp-serenade-panel__table-badge {
    margin-bottom: -20px;
    border: 1px solid #41352c;
    border-radius: 10px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 24px;
    color: #17181b;
    text-align: center;
    background-image: linear-gradient( 128.565deg, #ffddae 12.717%, #ffe1b2 24.803%, #f5d6a3 36.579%, #f6cf99 46.186%, #f9c597 56.103%, #e0a060 66.639%, #d99458 76.538% );
}

.gp-serenade-panel__table-panel {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    max-width: 500px;
    flex-direction: column;
    align-items: center;
    padding-top: 26px;
    padding-bottom: 26px;
    padding-left: 16px;
    padding-right: 16px;
}

@media (min-width: 768px) {
    .gp-serenade-panel__table-panel {
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 30px;
        padding-right: 30px;
    }
}

.gp-serenade-panel__table-panel {
    gap: 20px;
    border: 1px solid #41352c;
    border-radius: 10px;
    background: #21150c;
    box-shadow: 0 0 10px rgba(173, 96, 45, 0.11);
}

.gp-serenade-panel__table-columns {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #927562;
    text-align: center;
}

.gp-serenade-panel__rows {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}

.gp-serenade-panel__row {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.gp-serenade-panel__row-tier {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.gp-serenade-panel__row-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-serenade-panel__row-name {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #ffffff;
    white-space: nowrap;
}

.gp-serenade-panel__row-amount {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    color: #feddae;
    text-align: right;
    white-space: nowrap;
}

.gp-serenade-panel__divider {
    width: 100%;
    flex-shrink: 0;
    height: 1px;
    background: rgba(65, 53, 44, 0.8);
}

.gp-serenade-panel__table-panel--benefits {
    width: 100%;
    max-width: none;
    padding-top: 40px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 30px;
}

@media (min-width: 768px) {
    .gp-serenade-panel__table-panel--benefits {
        padding-left: 30px;
        padding-right: 30px;
    }
}

.gp-serenade-panel__table-panel--benefits {
    gap: 0;
}

.gp-serenade-benefits {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
}

.gp-serenade-benefits__scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.gp-serenade-benefits__table {
    width: 100%;
    min-width: 550px;
    table-layout: fixed;
    border-collapse: separate;
    --tw-border-spacing-x: 0px;
    --tw-border-spacing-y: 0px;
    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
}

@media (min-width: 768px) {
    .gp-serenade-benefits__table {
        min-width: 700px;
        table-layout: auto;
    }
}

.gp-serenade-benefits__th,
.gp-serenade-benefits__td {
    padding: 0;
    vertical-align: middle;
    border: none;
}

.gp-serenade-benefits__th--label {
    min-width: 140px;
    max-width: 140px;
    text-align: left;
}

@media (min-width: 768px) {
    .gp-serenade-benefits__th--label {
        min-width: 200px;
        max-width: 300px;
    }
}

.gp-serenade-benefits__th--label {
    padding-right: 20px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #ffddae;
    white-space: nowrap;
}

.gp-serenade-benefits__th--tier {
    width: 70px;
    max-width: 70px;
}

@media (min-width: 768px) {
    .gp-serenade-benefits__th--tier {
        width: 110px;
        max-width: 110px;
    }
}

.gp-serenade-benefits__th--tier {
    text-align: center;
}

.gp-serenade-benefits__tier {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .gp-serenade-benefits__tier {
        flex-direction: row;
    }
}

.gp-serenade-benefits__tier {
    gap: 5px;
}

.gp-serenade-benefits__tier-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-serenade-benefits__tier-name {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    color: #ffffff;
    white-space: nowrap;
}

.gp-serenade-benefits__th--tier ~ .gp-serenade-benefits__th--tier,
.gp-serenade-benefits__td--status ~ .gp-serenade-benefits__td--status {
    padding-left: 20px;
}

.gp-serenade-benefits__table thead .gp-serenade-benefits__th {
    padding-bottom: 10px;
}

.gp-serenade-benefits__table tbody tr:not(:last-child) .gp-serenade-benefits__td {
    border-bottom: 1px solid rgba(65, 53, 44, 0.8);
}

.gp-serenade-benefits__table tbody .gp-serenade-benefits__td,
.gp-serenade-benefits__table tbody .gp-serenade-benefits__td--benefit {
    padding-top: 10px;
    padding-bottom: 10px;
}

.gp-serenade-benefits__td--benefit {
    min-width: 140px;
    max-width: 140px;
    text-align: left;
    font-weight: 400;
}

@media (min-width: 768px) {
    .gp-serenade-benefits__td--benefit {
        min-width: 200px;
        max-width: 300px;
    }
}

.gp-serenade-benefits__td--benefit {
    padding-right: 20px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 24px;
    color: #ffffff;
    white-space: normal;
}

.gp-serenade-benefits__td--status {
    width: 60px;
    max-width: 60px;
}

@media (min-width: 768px) {
    .gp-serenade-benefits__td--status {
        width: 90px;
        max-width: 90px;
    }
}

.gp-serenade-benefits__td--status {
    text-align: center;
}

    .gp-serenade-benefits__td--status .gp-serenade-benefits__status-icon {
        display: inline-block;
        vertical-align: middle;
    }

.gp-serenade-benefits__status-icon {
    width: 18px;
    height: 18px;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-serenade-benefits__highlight {
    color: #facc15;
}

/* Sticky first column on mobile (below 1024px) */

.gp-serenade-benefits__th--label,
.gp-serenade-benefits__td--benefit {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #21150c;
}

.gp-serenade-benefits__table thead .gp-serenade-benefits__th--label {
    z-index: 3;
}

.gp-serenade-benefits__th--label::after,
.gp-serenade-benefits__td--benefit::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 8px;
    pointer-events: none;
}

@media (min-width: 1024px) and (orientation: portrait) {
    .gp-serenade-detail__intro-inner {
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
        padding-bottom: 0px;
    }

    .gp-serenade-detail__intro-desc {
        font-size: 16px;
        line-height: 24px;
    }

    .gp-serenade-detail__intro-media {
        width: 200px;
        height: 160px;
    }

    .gp-serenade-detail__body {
        gap: 30px;
        padding: 0px;
    }

    .gp-serenade-detail__tier {
        width: 80px;
    }

    .gp-serenade-detail__tier-name {
        font-size: 16px;
    }

    .gp-serenade-detail__tiers-row {
        justify-content: center;
        overflow-x: visible;
        scroll-snap-type: none;
    }

    .gp-serenade-panel__desc {
        font-size: 16px;
        line-height: 24px;
    }

    .gp-serenade-panel__table-badge {
        font-size: 16px;
        padding: 8px 30px;
    }

    .gp-serenade-panel__table-columns {
        font-size: 16px;
    }

    .gp-serenade-panel__row-name,
    .gp-serenade-panel__row-amount {
        font-size: 16px;
    }

    .gp-serenade-benefits__th--label,
    .gp-serenade-benefits__td--benefit,
    .gp-serenade-benefits__tier-name {
        font-size: 14px;
    }

    .gp-serenade-benefits__th--label,
    .gp-serenade-benefits__td--benefit {
        position: static;
        z-index: auto;
        background: transparent;
    }

        .gp-serenade-benefits__th--label::after,
        .gp-serenade-benefits__td--benefit::after {
            display: none;
        }
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-serenade-detail__section-head-title {
        white-space: nowrap;
    }

    .gp-serenade-detail__intro-inner {
        min-height: 116px;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
        padding-bottom: 0px;
    }

    .gp-serenade-detail__intro-copy {
        padding: 40px;
    }

    .gp-serenade-detail__intro-desc {
        font-size: 18px;
        line-height: 26px;
    }

    .gp-serenade-detail__intro-media {
        width: 26rem;
        height: auto;
        right: -100px;
        top: 40px;
    }

    .gp-serenade-detail__intro-crown {
        left: 7px;
        top: 33px;
        width: 284px;
        height: 264px;
        opacity: 0.3;
    }

    .gp-serenade-detail__tier {
        width: 90px;
    }

    .gp-serenade-detail__tier-name {
        font-size: 18px;
    }

    .gp-serenade-detail__howto-steps {
        flex-direction: row;
        align-items: stretch;
        gap: 20px;
        min-height: 232px;
    }

    .gp-serenade-detail__step {
        width: 250px;
        min-height: 232px;
        padding: 30px;
        flex: 0 0 250px;
    }

    .gp-serenade-detail__note {
        font-size: 16px;
    }

    .gp-serenade-panel__desc {
        font-size: 16px;
        line-height: 24px;
    }

    .gp-serenade-panel__table-badge {
        font-size: 16px;
        padding: 8px 30px;
    }

    .gp-serenade-panel__table-columns {
        font-size: 16px;
    }

    .gp-serenade-panel__row-name,
    .gp-serenade-panel__row-amount {
        font-size: 16px;
    }

    .gp-serenade-benefits__th--label,
    .gp-serenade-benefits__td--benefit,
    .gp-serenade-benefits__tier-name {
        font-size: 14px;
    }

    .gp-serenade-benefits__th--label,
    .gp-serenade-benefits__td--benefit {
        position: static;
        z-index: auto;
        background: transparent;
    }

        .gp-serenade-benefits__th--label::after,
        .gp-serenade-benefits__td--benefit::after {
            display: none;
        }
}

/* Crown upgrade promo — Figma 3946:25805 */

.gp-serenade-crown-upgrade {
    width: 100%;
    border: 1px solid #554127;
    border-radius: 10px;
    background: linear-gradient(to bottom, #17181b 63.503%, #d07a3d 304.88%);
}

.gp-serenade-crown-upgrade__inner {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    padding: 20px 16px;
}

.gp-serenade-crown-upgrade__content {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 1024px) {
    .gp-serenade-crown-upgrade__content {
        align-items: flex-start;
    }
}

.gp-serenade-crown-upgrade__content {
    gap: 20px;
}

.gp-serenade-crown-upgrade__intro {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
}

.gp-serenade-crown-upgrade__copy {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 1024px) {
    .gp-serenade-crown-upgrade__copy {
        align-items: flex-start;
    }
}

.gp-serenade-crown-upgrade__copy {
    gap: 5px;
}

    .gp-serenade-crown-upgrade__copy p {
        text-align: center;
    }

@media (min-width: 1024px) {
    .gp-serenade-crown-upgrade__copy p {
        text-align: left;
    }
}

.gp-serenade-crown-upgrade__lead,
.gp-serenade-crown-upgrade__fallback {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
}

.gp-serenade-crown-upgrade__fallback {
    text-align: center;
}

@media (min-width: 1024px) {
    .gp-serenade-crown-upgrade__fallback {
        text-align: left;
    }
}

.gp-serenade-crown-upgrade__emphasis {
    font-weight: 700;
    color: #ffde2d;
}

.gp-serenade-crown-upgrade__highlight {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #ffde2d;
}

.gp-serenade-crown-upgrade__notes {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #b9b9b9;
}

.gp-serenade-crown-upgrade__divider {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-serenade-crown-upgrade__aside {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.gp-serenade-crown-upgrade__illustration {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-serenade-crown-upgrade__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

    .gp-serenade-crown-upgrade__cta:hover {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

    .gp-serenade-crown-upgrade__cta:active {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-serenade-crown-upgrade__cta {
    gap: 10px;
    padding: 10px 20px;
    border: 1px solid #d80004;
    border-radius: 99px;
    background: linear-gradient(90deg, #8c0d00 0%, #eb1f22 67.31%, #e25c14 97.12%);
    box-shadow: inset 0 0 1.6px rgba(255, 255, 255, 0.96);
    text-decoration: none;
    cursor: pointer;
}

.gp-serenade-crown-upgrade__cta-leaf {
    width: 12px;
    height: auto;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-serenade-crown-upgrade__cta-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    white-space: nowrap;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-image: linear-gradient( 90deg, #ead7c2 12.753%, #b9a693 39.737%, #ead7c1 60.113%, #f6e2cc 77.736%, #cab195 100%, #4d433b 160% );
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-serenade-crown-upgrade__inner {
        flex-direction: row;
        align-items: center;
        padding: 40px 50px;
    }

    .gp-serenade-crown-upgrade__content {
        flex: 1 1 0%;
        min-width: 0;
    }

    .gp-serenade-crown-upgrade__aside {
        width: 385px;
        max-width: 385px;
    }

    .gp-serenade-crown-upgrade .gp-serenade-detail__section-head-title {
        font-size: 20px;
    }
}

/* FAQ — Figma 3946:25812 */

.gp-serenade-faq {
    width: 100%;
    border: 1px solid #554127;
    border-radius: 10px;
    background: rgba(22, 23, 26, 0.8);
}

.gp-serenade-faq__inner {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 20px 16px;
}

.gp-serenade-faq__list {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.gp-serenade-faq__item {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.gp-serenade-faq__question {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
}

.gp-serenade-faq__answer {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #d9e2ec;
}

.gp-serenade-faq__answer--muted {
    color: #bcccdc;
}

.gp-serenade-faq__emphasis {
    color: #ff4343;
}

.gp-serenade-faq__link {
    color: #1caee7;
    text-decoration: underline;
    text-underline-offset: 2px;
}

    .gp-serenade-faq__link:hover {
        color: #52ceff;
    }

.gp-serenade-faq__divider {
    width: 100%;
    flex-shrink: 0;
    height: 1px;
    background: rgba(65, 53, 44, 0.8);
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-serenade-faq__inner {
        padding: 40px 30px;
    }

    .gp-serenade-faq .gp-serenade-detail__section-head-title {
        font-size: 20px;
    }
}

/* Additional terms — Figma 3946:25830 */

.gp-serenade-terms {
    width: 100%;
    border: 1px solid #554127;
    border-radius: 10px;
    background: rgba(22, 23, 26, 0.8);
}

.gp-serenade-terms__inner {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px 16px;
}

.gp-serenade-terms__list {
    margin: 0px;
    display: flex;
    width: 100%;
    list-style-type: disc;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 24px;
}

.gp-serenade-terms__item {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #d9e2ec;
}

    .gp-serenade-terms__item:not(:last-child) {
        margin-bottom: 0;
    }

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-serenade-terms__inner {
        padding: 40px 30px;
    }

    .gp-serenade-terms .gp-serenade-detail__section-head-title {
        font-size: 20px;
    }
}

/* -------------------------------------------------------------------------- */

/* Serenade page — state card + shop (Figma: Main 4165:25655)                 */

/* -------------------------------------------------------------------------- */

.gp-shop__inner--serenade {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding-bottom: 24px;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-shop__inner--serenade {
        gap: 30px;
        padding-bottom: 40px;
    }
}

/* Serenade State */

.gp-serenade-state {
    margin-top: 1.5rem;
    display: flex;
    width: 100%;
    flex-direction: column;
}

@media (min-width: 1024px) {
    .gp-serenade-state {
        margin-top: 5rem;
    }
}

.gp-serenade-state {
    gap: 20px;
}

.gp-serenade-state__header {
    display: flex;
    width: 100%;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

@media (min-width: 768px) {
    .gp-serenade-state__header {
        flex-direction: row;
    }
}

.gp-serenade-state__header {
    gap: 20px;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-serenade-state__header {
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }
}

.gp-serenade-state__heading {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

@media (min-width: 768px) {
    .gp-serenade-state__heading {
        width: -moz-fit-content;
        width: fit-content;
        justify-content: center;
    }
}

.gp-serenade-state__heading {
    gap: 4px;
}

.gp-serenade-state__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 14px;
    color: #ffffff;
    text-transform: uppercase;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-serenade-state__title {
        font-size: 20px;
    }
}

.gp-serenade-state__date {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1em;
    color: #829ab1;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-serenade-state__date {
        font-size: 14px;
    }
}

.gp-serenade-state__actions {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
}

@media (min-width: 768px) {
    .gp-serenade-state__actions {
        width: -moz-fit-content;
        width: fit-content;
        justify-content: flex-end;
    }
}

.gp-serenade-state__actions {
    gap: 10px;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-serenade-state__actions {
        width: auto;
        flex-shrink: 0;
    }
}

.gp-serenade-state__action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

    .gp-serenade-state__action-btn:hover {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

    .gp-serenade-state__action-btn:active {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-serenade-state__action-btn {
    gap: 6px;
    padding: 8px 10px;
    border-radius: 99px;
    border: 1px solid #1caee7;
    background: rgba(87, 126, 255, 0.2);
    text-decoration: none;
    cursor: pointer;
}

.gp-serenade-state__action-btn-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
    color: #ffffff;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-serenade-state__action-btn-text {
        font-size: 16px;
    }
}

.gp-serenade-state__action-btn-caret {
    width: 14px;
    height: 14px;
    -o-object-fit: contain;
    object-fit: contain;
    flex-shrink: 0;
}

.gp-serenade-state__action-btn--ranking {
    flex-grow: 1;
    padding: 8px 10px;
    border: 1px solid #e6411a;
    border-radius: 20px;
    background: linear-gradient(90deg, #8c0d00 0%, #eb1f22 67.31%, #e25c14 97.12%);
}

    .gp-serenade-state__action-btn--ranking .gp-serenade-state__action-btn-text {
        text-transform: none;
    }

.gp-serenade-state__card {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 4px solid transparent;
    border-radius: 30px;
}

.gp-serenade-state__card--gold {
    box-shadow: 0 4px 16.5px rgba(255, 168, 45, 0.33), inset 0 0 45.4px #ffc97c;
    background: linear-gradient(164.28deg, #d97809 25.48%, #efaa2b 68.65%, #ffd54c 102.17%) padding-box,linear-gradient(150deg, #8C421D 0%, #FBE67B 33%, #FCFBE7 54%, #F7D14E 77%, #D4A041 100%) border-box;
}

.gp-serenade-state__card--seed {
    box-shadow: 0 4px 16.5px rgba(45, 87, 255, 0.33), inset 0 0 45.4px #7c96ff;
    background: linear-gradient(164.28deg, #275dd4 25.48%, #3a6cdb 77.12%, #76d6ff 109%) padding-box, linear-gradient(-45deg, #275dd4 0%, #3a6cdb 50%, #76d6ff 100%) border-box;
}

.gp-serenade-state__card--bronze {
    box-shadow: 0 4px 16.5px rgba(255, 119, 45, 0.33), inset 0 0 45.4px #ffb27c;
    background: linear-gradient(164.28deg, #ae5636 25.48%, #df864f 77.12%, #ffa382 109%) padding-box,linear-gradient(45deg, #EAC2C2 0%, #DBB5B5 24%, #F9D1D1 41%, #F4BFBF 57%, #E4ACAC 67%,#CCA7A5 84%, #8C6965 100%) border-box;
}

.gp-serenade-state__card--silver {
    box-shadow: 0 4px 16.5px rgba(137, 165, 217, 0.33), inset 0 0 45.4px #a1abb1;
    background: linear-gradient(164.28deg, #4b5970 25.48%, #9da6be 77.12%, #ffffff 109%) padding-box,linear-gradient(45deg, #C2CAD5 0%, #B8BED0 24%, #C1C7D3 41%, #C9D0D9 57%, #B3BDCE 67%,#BABECD 84%, #898F9D 100%) border-box;
}

.gp-serenade-state__card--platinum {
    box-shadow: 0 4px 16.5px rgba(133, 45, 255, 0.33), inset 0 0 45.4px #8b71ff;
    background: linear-gradient( 150.78deg, #7a24f6 46.16%, #6940ff 56.46%, #2989d8 68.44%, #44cc94 80.45%, #ffd650 92.18%, #fe5353 103.12%) padding-box,linear-gradient(120deg, #FF8BBF 0%, #F488FF 27%, #7EF359 50%, #FFDE2D 75%, #1BB1E7 90%) border-box;
}

.gp-serenade-state__card--crown {
    box-shadow: 0 4px 16.5px rgba(255, 52, 45, 0.33), inset 0 0 30px #d53333;
    background: linear-gradient(164.28deg, #272121 30%, #a60000 60%, #FFDE5C 100%) padding-box,linear-gradient(150deg, #FFEFD2 0%, #FBE67B 33%, #FCFBE7 54%, #F7D14E 77%, #D4A041 100%) border-box;
}

.gp-serenade-state__card-bg {
    pointer-events: none;
    position: absolute;
    inset: 0px;
    overflow: hidden;
    border-radius: inherit;
}

    .gp-serenade-state__card-bg img {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: auto;
        right: 0;
        width: 35rem;
        max-width: none;
        height: auto;
        -o-object-fit: cover;
        object-fit: cover;
    }

.gp-serenade-state__card-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 28px 24px;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-serenade-state__card-inner {
        padding: 35px 80px;
    }
}

.gp-serenade-state__card-top {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-height: 98px;
    padding-right: 120px;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-serenade-state__card-top {
        padding-right: 160px;
    }
}

.gp-serenade-state__card-tier-label {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #ffffff;
    text-transform: capitalize;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-serenade-state__card-tier-label {
        font-size: 18px;
    }
}

.gp-serenade-state__card-tier-name {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 28px;
    line-height: normal;
    color: #ffffff;
    text-transform: uppercase;
}

.gp-serenade-state__card--gold .gp-serenade-state__card-tier-name {
    text-shadow: 0 0 18px rgba(229, 180, 19, 0.64);
}

.gp-serenade-state__card--seed .gp-serenade-state__card-tier-name {
    text-shadow: 0 0 18px rgba(19, 135, 229, 0.64);
}

.gp-serenade-state__card--bronze .gp-serenade-state__card-tier-name {
    text-shadow: 0 0 18px rgba(255, 153, 64, 0.64);
}

.gp-serenade-state__card--silver .gp-serenade-state__card-tier-name {
    text-shadow: 0 0 18px rgba(221, 221, 221, 0.64);
}

.gp-serenade-state__card--platinum .gp-serenade-state__card-tier-name {
    text-shadow: 0 0 18px rgba(190, 152, 255, 0.64);
}

.gp-serenade-state__card--crown .gp-serenade-state__card-tier-name {
    text-shadow: 0 0 18px rgba(255, 70, 70, 0.64);
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-serenade-state__card-tier-name {
        font-size: 35px;
    }
}

.gp-serenade-state__card-user {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #ffeba1;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-serenade-state__card-user {
        font-size: 18px;
    }
}

.gp-serenade-state__card-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 110px;
    height: 110px;
}

.gp-serenade-state__card-icon-wrap {
    position: absolute;
    top: 0;
    right: 0;
    width: 110px;
    height: 110px;
}

.gp-serenade-state__card-icon.card-icon--crown {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: 100%;
    isolation: isolate;
}

.gp-serenade-state__card-icon-flare {
    pointer-events: none;
    position: absolute;
    z-index: 0;
    width: 89.41%;
    height: 89.41%;
    left: -18.24%;
    top: -18.82%;
    mix-blend-mode: screen;
    transform-origin: center center;
    animation: gp-crown-flare-spin 24s linear infinite;
}

    .gp-serenade-state__card-icon-flare img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

.gp-serenade-state__card-icon-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .gp-serenade-state__card-icon-wrap {
        width: 180px;
        height: 180px;
    }
}

@media (min-width: 1024px) and (orientation: portrait) {
    .gp-serenade-state__card-icon-wrap {
        width: 180px;
        height: 180px;
    }
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-serenade-state__card-icon {
        top: 0px;
        right: 0px;
        width: 140px;
        height: 140px;
    }

    .gp-serenade-state__card-icon-wrap {
        top: 0px;
        right: 0px;
        width: 180px;
        height: 180px;
    }
}

.gp-serenade-state__card-icon img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-serenade-state__card--bronze .gp-serenade-state__card-icon img {
    -o-object-fit: cover;
    object-fit: cover;
}

.gp-serenade-state__card--silver .gp-serenade-state__card-icon img {
    -o-object-fit: cover;
    object-fit: cover;
}

.gp-serenade-state__card--platinum .gp-serenade-state__card-icon img {
    -o-object-fit: cover;
    object-fit: cover;
}

.gp-serenade-state__card--silver .gp-serenade-state__card-gauge-fill {
    width: 20%;
}

.gp-serenade-state__card--platinum .gp-serenade-state__card-gauge-fill {
    width: 100%;
}

.gp-serenade-state__card-gauge {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-serenade-state__card-gauge-numbers {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    color: #fff050;
}

    .gp-serenade-state__card-gauge-numbers span {
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
    }

.gp-serenade-state__card--crown .gp-serenade-state__card-gauge-numbers {
    font-weight: 700;
    font-size: 18px;
    color: #fff050;
}

    .gp-serenade-state__card--crown .gp-serenade-state__card-gauge-numbers span {
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
    }

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-serenade-state__card-gauge-numbers {
        font-size: 22px;
    }

        .gp-serenade-state__card-gauge-numbers span {
            font-size: 20px;
        }

    .gp-serenade-state__card--crown .gp-serenade-state__card-gauge-numbers {
        font-size: 22px;
    }

        .gp-serenade-state__card--crown .gp-serenade-state__card-gauge-numbers span {
            font-size: 20px;
        }
}

.gp-serenade-state__card-gauge-divider {
    width: 100%;
    flex-shrink: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.35);
}

    .gp-serenade-state__card-gauge-divider.card-gauge-divider--crown {
        width: 100%;
    }

@media (min-width: 768px) {
    .gp-serenade-state__card-gauge-divider.card-gauge-divider--crown {
        width: 60%;
    }
}

.gp-serenade-state__card-gauge-bar {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 10px;
    border-radius: 99px;
    background: rgba(0, 0, 0, 1);
}

.gp-serenade-state__card-gauge-fill {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 33.33%;
    border-radius: inherit;
    background: #FACC15;
}

.gp-serenade-state__card-gauge-desc {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #ffffff;
}

    .gp-serenade-state__card-gauge-desc strong {
        font-weight: 700;
    }

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-serenade-state__card-gauge-desc {
        font-size: 18px;
    }
}

/* Serenade Shop tab header */

.gp-shop-tab {
    display: flex;
    width: 100%;
}

.gp-shop-tab__item {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 64px;
    padding: 20px 10px;
    border: 0.5px solid #102a43;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 0 6.8px rgba(16, 58, 112, 0.08);
    background: linear-gradient(138.84deg, #0b4da0 6.53%, #05244d 95.31%);
}

    .gp-shop-tab__item::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: inherit;
        box-shadow: inset 0 0 18.8px -1px rgba(14, 52, 100, 0.22);
    }

.gp-shop-tab__text {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    color: #ffffff;
    text-align: center;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-shop-tab__item {
        height: 64px;
    }

    .gp-shop-tab__text {
        font-size: 20px;
    }
}

.gp-shop-main--serenade {
    gap: 20px;
    padding-bottom: 0;
}

    .gp-shop-main--serenade .gp-shop-main__header {
        gap: 0;
    }

    .gp-shop-main--serenade .gp-shop-sort-bar {
        border-radius: 0;
    }

/* Serenade filter sidebar */

.gp-shop-filter-sidebar--serenade {
    background: #1b1b1b;
    border: 0.5px solid #ff8bbf;
}

/* Serenade package card */

.gp-shop-package-card--serenade {
    background: #242424;
    border: 0.5px solid #eac2c2;
}

    .gp-shop-package-card--serenade.gp-shop-package-card--serenade-bronze {
        border: 0.5px solid transparent;
        background: linear-gradient(#242424, #242424) padding-box, linear-gradient( 90deg, #eac2c2 0%, #dbb5b5 24%, #f9d1d1 41%, #f4bfbf 57%, #e4acac 67%, #cca7a5 84%, #8c6965 100% ) border-box;
    }

    .gp-shop-package-card--serenade.gp-shop-package-card--serenade-silver {
        border: 0.5px solid transparent;
        background: linear-gradient(#242424, #242424) padding-box, linear-gradient( 90deg, #C2CAD5 0%, #B8BED0 24%, #C1C7D3 41%, #C9D0D9 57%, #B3BDCE 67%, #BABECD 84%, #898F9D 100% ) border-box;
    }

    .gp-shop-package-card--serenade.gp-shop-package-card--serenade-gold {
        border: 0.5px solid transparent;
        background: linear-gradient(#242424, #242424) padding-box, linear-gradient( 90deg, #FFDDAE 0%, #FFE1B2 24%, #F5D6A3 41%, #F6CF99 57%, #F9C597 67%, #E0A060 84%, #D99458 100% ) border-box;
    }

    .gp-shop-package-card--serenade.gp-shop-package-card--serenade-platinum {
        border: 0.5px solid transparent;
        background: linear-gradient(#242424, #242424) padding-box, linear-gradient( 90deg, #D18FFE 0%, #A7B5FF 17%, #A1FFF7 38%, #DDFF8D 54%, #FFE386 68%, #FB8568 85%, #EF5659 100% ) border-box;
    }

    .gp-shop-package-card--serenade.gp-shop-package-card--serenade-crown {
        border: 0.5px solid transparent;
        background: linear-gradient(#242424, #242424) padding-box, linear-gradient( 90deg, #CD1C1F 0%, #FD1D1D 50%, #FCB045 100% ) border-box;
    }

    .gp-shop-package-card__labels .gp-shop-package-card__badge--serenade,
    .gp-shop-package-card--serenade .gp-shop-package-card__badge--serenade {
        border-radius: 0 0 5px 0;
        background-color: #0b4da0;
        color: #ffffff;
        font-weight: 500;
    }

    .gp-shop-package-card--serenade .gp-shop-package-card__thumb-wrap .gp-shop-package-card__overlay:not(.gp-shop-package-card__overlay--locked) {
        position: absolute;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        inset: 0;
        z-index: 3;
        padding: 11px;
        pointer-events: none;
    }

    .gp-shop-package-card--serenade .gp-shop-package-card__overlay--locked {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        inset: 0;
        z-index: 2;
        padding: 0;
        border-radius: 6.5px;
        pointer-events: none;
    }

.gp-shop-package-card__lock {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border: 1px solid #9fb3c8;
    border-radius: 20px;
    background: rgba(26, 26, 26, 0.9);
    box-shadow: 0 3px 4.9px rgba(0, 0, 0, 0.36);
    backdrop-filter: blur(2px);
}

    .gp-shop-package-card__lock img {
        width: 30px;
        height: 30px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-shop-package-card__tier {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    overflow: hidden;
    padding: 8px 10px;
    border-radius: 5px;
    box-shadow: inset 0 0 1.6px rgba(255, 255, 255, 0.96);
}

.gp-shop-package-card__tier-text {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: normal;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-shop-package-card__tier-text {
        font-size: 14px;
    }
}

.gp-shop-package-card__tier--bronze {
    background: linear-gradient( 121.59deg, #eaccc2 12.72%, #dbc1b5 27.9%, #f9e1d1 39.37%, #f4cfbf 49.29%, #e4c2ac 55.79%, #ccb0a5 66.64%, #8c7165 76.54% );
}

    .gp-shop-package-card__tier--bronze .gp-shop-package-card__tier-text {
        color: #411a1a;
    }

.gp-shop-package-card__tier--silver {
    background: linear-gradient( 121.59deg, #c2cad5 12.72%, #b8bed0 27.9%, #c1c7d3 39.37%, #c9d0d9 49.29%, #b3bdce 55.79%, #babecd 66.64%, #898f9d 76.54% );
}

    .gp-shop-package-card__tier--silver .gp-shop-package-card__tier-text {
        color: #1a1a1a;
    }

.gp-shop-package-card__tier--gold {
    background: linear-gradient( 121.59deg, #ffddae 12.72%, #ffe1b2 24.8%, #f5d6a3 36.58%, #f6cf99 46.19%, #f9c597 56.1%, #e0a060 66.64%, #d99458 76.54% );
}

    .gp-shop-package-card__tier--gold .gp-shop-package-card__tier-text {
        color: #352907;
    }

.gp-shop-package-card__tier--platinum {
    background: linear-gradient( 110.06deg, #d18ffe 11.88%, #a7b5ff 25.57%, #a1fff7 42.79%, #ddff8d 55.71%, #ffe386 68.23%, #fb8568 81.15%, #ef5659 92.47% );
}

    .gp-shop-package-card__tier--platinum .gp-shop-package-card__tier-text {
        color: #1c1a41;
    }

.gp-shop-package-card__tier--crown {
    border: 1px solid #ed213a;
    background: linear-gradient(90deg, #8c0d00 0%, #eb1f22 67.31%, #e25c14 97.12%);
    box-shadow: 0 0 2px 2px rgba(163, 42, 48, 0.25);
}

    .gp-shop-package-card__tier--crown .gp-shop-package-card__tier-text {
        color: #ffedaf;
    }

.gp-shop-package-card--serenade .gp-shop-package-card__limit {
    height: 35px;
    padding: 0 10px;
    gap: 7px;
    border-width: 0.56px;
}

.gp-shop-package-card--serenade .gp-shop-package-card__limit-divider {
    height: 20px;
    padding-left: 7px;
    border-left: 1px solid #5f4e37;
    background: transparent;
    width: auto;
}

.gp-shop-package-card--serenade .gp-shop-package-card__limit-count {
    font-weight: 500;
}

.gp-shop-package-card--serenade .gp-shop-package-card__discount {
    width: 50px;
    height: 50px;
    border-radius: 5.6px;
}

.gp-shop-package-card--serenade .gp-shop-package-card__qty {
    height: 50px;
    padding: 0 20px;
}

.gp-shop-package-card--serenade .gp-shop-package-card__qty-controls {
    gap: 15px;
}

.gp-shop-package-card--serenade .gp-shop-package-card__qty-value {
    font-size: 18px;
}

.gp-shop-package-card--serenade .gp-shop-package-card__btns {
    height: 50px;
}

.gp-shop-package-card--serenade .gp-shop-package-card__cta {
    flex: 1 1 0%;
    height: 50px;
    font-size: 16px;
}

    .gp-shop-package-card--serenade .gp-shop-package-card__cta img {
        width: 18px;
        height: 18px;
    }

.gp-shop-package-card--serenade .gp-shop-package-card__cta--locked {
    border-color: #333333;
    background-color: #333333;
    color: #6e6e6e;
    cursor: not-allowed;
}

    .gp-shop-package-card--serenade .gp-shop-package-card__cta--locked img {
        display: none;
    }

/* Cart toast notification (Figma: cart-noti) */

.gp-cart-toast-stack {
    pointer-events: none;
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    top: 10px;
    right: 10px;
    z-index: 100;
    max-width: min(100vw - 32px, 320px);
}

.gp-cart-toast {
    pointer-events: auto;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
    padding: 10px 10px 26px;
    background-color: #1a1b1e;
    border-color: #34c759;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.gp-cart-toast--enter {
    animation: gp-cart-toast-enter 0.25s ease forwards;
}

.gp-cart-toast--exit {
    opacity: 0;
    transform: translateX(12px);
}

.gp-cart-toast__header {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    align-items: flex-start;
    justify-content: flex-end;
}

.gp-cart-toast__close {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    width: 12px;
    height: 12px;
}

    .gp-cart-toast__close img {
        display: block;
        height: 100%;
        width: 100%;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-cart-toast__body {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.gp-cart-toast__icon {
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
    width: 40px;
    height: 40px;
}

.gp-cart-toast__text {
    min-width: 0px;
    flex: 1 1 0%;
    overflow-wrap: break-word;
    font-size: 16px;
    line-height: 22px;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    font-family: "Google Sans", sans-serif;
}

.gp-cart-toast--error {
    border-color: #e84d4d;
}

@keyframes gp-cart-toast-enter {
    from {
        opacity: 0;
        transform: translateX(16px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* -------------------------------------------------------------------------- */

/* Gacha box activity (Figma: 3484:19095) – index-genplay-activity-gachabox   */

/* -------------------------------------------------------------------------- */

.gp-gacha {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding-top: 10px;
    padding-bottom: 40px;
}

@media (min-width: 768px) {
    .gp-gacha {
        gap: 50px;
        padding-top: 20px;
        padding-bottom: 50px;
    }
}

.gp-gacha__hero {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.gp-gacha__title {
    margin: 0px;
    font-size: 1.25rem;
    line-height: 1.75rem;
    line-height: 1.5;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 0 4px #0b4da0;
}

@media (min-width: 768px) {
    .gp-gacha__title {
        font-size: 28px;
    }
}

.gp-gacha__desc {
    margin: 0px;
    font-size: 1rem;
    line-height: 1.5rem;
    line-height: 1.5;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    color: #ffffff;
    text-shadow: 0 0 4px #0b4da0;
}

@media (min-width: 768px) {
    .gp-gacha__desc {
        font-size: 18px;
    }
}

.gp-gacha__balance-wrap {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.gp-gacha__balance {
    display: flex;
    width: 100%;
    max-width: 320px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@media (min-width: 640px) {
    .gp-gacha__balance {
        flex-direction: row;
    }
}

@media (min-width: 768px) {
    .gp-gacha__balance {
        max-width: 400px;
    }
}

.gp-gacha__balance {
    gap: 10px;
    padding: 25px 30px;
    border: 2px solid #196cd5;
    border-radius: 15px;
    background: rgba(11, 77, 160, 0.6);
    box-shadow: 0 8px 22px 0 #0b4da0;
}

.gp-gacha__balance-label {
    font-family: "Google Sans", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 13.248px;
    color: #5fc4ee;
    white-space: nowrap;
}

.gp-gacha__balance-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.gp-gacha__balance-amount {
    font-family: "Google Sans", sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 13.248px;
    color: #ffffff;
}

.gp-gacha__balance-icon {
    width: 24px;
    height: 24px;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-gacha__condition {
    margin: 0px;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5rem;
    line-height: 1.5;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    color: #829ab1;
}

.gp-gacha__boxes {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.gp-gacha__boxes-title {
    margin: 0px;
    text-align: center;
    font-size: 1.25rem;
    line-height: 1.75rem;
    line-height: 1.5;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    color: #ffeba1;
}

@media (min-width: 768px) {
    .gp-gacha__boxes-title {
        font-size: 24px;
    }
}

.gp-gacha__boxes-grid {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.25rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 0px;
}

    .gp-gacha__boxes-grid::-webkit-scrollbar {
        display: none;
    }

@media (min-width: 768px) {
    .gp-gacha__boxes-grid {
        justify-content: center;
        overflow: visible;
        flex-wrap: wrap;
        gap: 20px;
        scroll-snap-type: none;
    }
}

.gp-gacha-box {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 166px;
    scroll-snap-align: start;
}

.gp-gacha-box__wrap {
    position: relative;
    width: 100%;
    cursor: pointer;
    height: 150px;
    border-radius: 20px;
}

.gp-gacha-box__img {
    position: absolute;
    left: 50%;
    z-index: 1;
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    -o-object-fit: cover;
    object-fit: cover;
    top: 4px;
    width: 76px;
    height: auto;
    aspect-ratio: 500 / 543;
    pointer-events: none;
}

.gp-gacha-box__card {
    position: absolute;
    bottom: 0px;
    left: 0px;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 121px;
    padding: 20px;
    border-radius: 20px;
    box-shadow: inset 0 0 45.4px 0 rgba(25, 98, 255, 0.33);
}

.gp-gacha-box--selected .gp-gacha-box__card {
    border: 2px solid #5fc4ee;
    box-shadow: 0 10px 9.9px #0b4da0, inset 0 0 45.4px 0 #1962ff;
}

.gp-gacha-box__name {
    margin: 0px;
    text-align: center;
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 18px;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    color: #8cd6f3;
}

.gp-gacha-box__link {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-decoration-line: none;
    gap: 5px;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: #829ab1;
}

    .gp-gacha-box__link img {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    .gp-gacha-box__link:hover {
        color: #9fb3c8;
    }

.gp-gacha__actions {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

@media (min-width: 768px) {
    .gp-gacha__actions {
        flex-direction: row;
    }
}

.gp-gacha__actions-title {
    margin: 0px;
    width: 100%;
    text-align: center;
}

@media (min-width: 768px) {
    .gp-gacha__actions-title {
        display: none;
    }
}

.gp-gacha__actions-title {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: normal;
    color: #ffeba1;
}

.gp-gacha-btn {
    display: flex;
    width: 100%;
    max-width: 300px;
    flex-direction: column;
    align-items: center;
}

.gp-gacha-btn__main {
    margin-bottom: -10px;
    display: flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    height: 63px;
    padding: 20px 10px;
    border-radius: 10px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
}

.gp-gacha-btn--outline .gp-gacha-btn__main {
    background: rgba(11, 77, 160, 0.31);
    border: 1px solid #52ceff;
    color: #8cd6f3;
}

    .gp-gacha-btn--outline .gp-gacha-btn__main:hover {
        background: rgba(11, 77, 160, 0.5);
    }

.gp-gacha-btn--primary .gp-gacha-btn__main {
    background: #1caee7;
    color: #020e1f;
    transition: background-color 0.2s ease;
}

    .gp-gacha-btn--primary .gp-gacha-btn__main:hover {
        background: #3bc0f0;
    }

    .gp-gacha-btn--primary .gp-gacha-btn__main:active {
        background: #19a5d4;
    }

.gp-gacha-btn__cost {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px 20px;
    border: 1px solid #52ceff;
    border-radius: 99px;
    background: linear-gradient(103deg, #0b4da0 6.53%, #05244d 95.31%);
    box-shadow: 0 -2px 1px rgba(0, 0, 0, 0.14);
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: #ffeba1;
}

    .gp-gacha-btn__cost img {
        width: 15px;
        height: 15px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-gacha-guarantee {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 534px;
    margin: 0 auto;
    padding-top: 22px;
    padding-bottom: 33px;
}

.gp-gacha-guarantee__decor {
    pointer-events: none;
    position: absolute;
    inset: 0px;
}

.gp-gacha-guarantee__decor-top {
    position: absolute;
    left: 50%;
    top: 20px;
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    width: 204px;
    height: 22px;
    border-radius: 5px;
    background: linear-gradient( 177deg, #ff8bbf 3.96%, #f488ff 21.21%, #7ef359 35.73%, #ffde2d 50.86%, #1bb1e7 66.9% );
}

.gp-gacha-guarantee__decor-bottom {
    position: absolute;
    bottom: 26px;
    left: 50%;
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    width: min(446px, 96%);
    height: 33px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background: linear-gradient( 180deg, #ff8bbf 0%, #1bb1e7 100% );
}

.gp-gacha-guarantee__card {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 3px;
    padding: 25px 20px;
    border: 1px solid transparent;
    border-radius: 20px;
    background: linear-gradient( 180deg, #014586 14.9%, #063a6b 33.53%, #0c2f50 52.16%, #112336 70.79%, #17181b 89.42% ) padding-box, linear-gradient(135deg, #ff8bbf, #f488ff, #7ef359, #ffde2d, #1bb1e7) border-box;
    box-shadow: 0 14px 15.25px rgba(11, 71, 160, 0.71);
}

@media (min-width: 768px) {
    .gp-gacha-guarantee__card {
        padding: 25px 60px;
    }
}

.gp-gacha-guarantee__img {
    width: 58px;
    height: 62px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
    filter: drop-shadow(0 8px 7.3px rgba(0, 0, 0, 0.25));
}

.gp-gacha-guarantee__copy {
    display: flex;
    min-width: 0px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.gp-gacha-guarantee__title {
    margin: 0px;
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 1.5;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    color: #8cd6f3;
}

.gp-gacha-guarantee__desc {
    margin: 0px;
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .gp-gacha-guarantee__desc {
        font-size: 18px;
    }
}

.gp-gacha-guarantee__desc {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    color: #ffdf72;
}

/* Milestone Reward */

.gp-milestone {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.gp-milestone__head {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    min-height: 68px;
    padding: 15px 20px;
    border-radius: 10px;
    background: linear-gradient(90deg, #0b58b9 0%, #122767 100%);
}

@media (min-width: 768px) {
    .gp-milestone__head {
        flex-direction: row;
        align-items: center;
        gap: 0;
    }
}

.gp-milestone__head-caption {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

@media (min-width: 768px) {
    .gp-milestone__head-caption {
        display: none;
    }
}

.gp-milestone__head-caption-row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.gp-milestone__head-caption-title,
.gp-milestone__head-caption-desc {
    margin: 0px;
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 1.5;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    color: #fff;
}

.gp-milestone__head-caption-desc {
    width: 100%;
    text-align: center;
}

.gp-milestone__head-left {
    display: none;
    align-items: center;
}

@media (min-width: 768px) {
    .gp-milestone__head-left {
        display: flex;
    }
}

.gp-milestone__head-left {
    gap: 10px;
}

.gp-milestone__head-icon,
.gp-milestone__head-caption-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.gp-milestone__head-text {
    margin: 0px;
    font-size: 1.25rem;
    line-height: 1.75rem;
    line-height: 1.5;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    color: #fff;
}

.gp-milestone__head-right {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .gp-milestone__head-right {
        width: -moz-fit-content;
        width: fit-content;
        justify-content: flex-end;
    }
}

.gp-milestone__head-right {
    gap: 10px;
    font-family: "Google Sans", sans-serif;
    font-size: 22px;
}

.gp-milestone__head-count-label {
    color: #5fc4ee;
}

.gp-milestone__head-count-value {
    font-weight: 700;
    color: #fff;
}

.gp-milestone__body {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    border-radius: 10px;
    background: #1a1b1e;
}

.gp-milestone-card {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
    padding: 30px;
    border: 1px solid #243b53;
    border-radius: 10px;
    background: #1a1b1e;
}

.gp-milestone-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.gp-milestone-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    border-radius: 10px;
    background: #243b53;
}

.gp-milestone-card__badge-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.gp-milestone-card--completed .gp-milestone-card__badge-icon {
    width: 24px;
    height: 24px;
}

.gp-milestone-card__badge-text {
    font-family: "Google Sans", sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: normal;
    color: #3db9eb;
    white-space: nowrap;
}

.gp-milestone-card__limit {
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: #829ab1;
}

.gp-milestone-card__content {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 0 20px;
}

@media (min-width: 768px) {
    .gp-milestone-card__content {
        flex-direction: row;
        align-items: center;
        gap: 30px;
    }
}

.gp-milestone-card__items {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    gap: 10px;
    max-width: 620px;
}

.gp-milestone-card__item {
    width: 95px;
    height: 95px;
    flex-shrink: 0;
    border-radius: 10px;
    -o-object-fit: cover;
    object-fit: cover;
}

.gp-milestone-card__action {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}

@media (min-width: 768px) {
    .gp-milestone-card__action {
        align-items: flex-end;
    }
}

.gp-milestone-card__btn {
    display: flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    height: 50px;
    padding: 10px;
    border-radius: 10px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .gp-milestone-card__btn {
        width: 200px;
    }
}

.gp-milestone-card__btn--primary {
    background: linear-gradient(111deg, #52ceff 5.7%, #1caee7 54.37%);
    color: #020e1f;
    transition: filter 0.2s ease;
}

    .gp-milestone-card__btn--primary:hover {
        filter: brightness(1.08);
    }

.gp-milestone-card__btn--disabled {
    background: #333;
    border: 1px solid #333;
    color: #848484;
    cursor: not-allowed;
}

/* Gacha draw success modal (Figma: node 4937-33812) – index-genplay-activity-gachabox */

.gp-gacha-draw-success-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 73;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-gacha-draw-success-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-gacha-draw-success-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.7);
    cursor: pointer;
    pointer-events: auto;
}

.gp-gacha-draw-success-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 529px;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-gacha-draw-success-modal__dialog {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    background-color: #1a1b1e;
    border: 1px solid #243b53;
    border-radius: 10px;
    box-sizing: border-box;
}

.gp-gacha-draw-success-modal__close-row {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    padding: 10px;
    flex-shrink: 0;
}

.gp-gacha-draw-success-modal__close {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

    .gp-gacha-draw-success-modal__close img {
        width: 100%;
        height: auto;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .gp-gacha-draw-success-modal__close:focus-visible {
        outline: 2px solid #1caee7;
        outline-offset: 2px;
        border-radius: 4px;
    }

.gp-gacha-draw-success-modal__body {
    display: flex;
    width: 100%;
    min-width: 0px;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 0 30px 30px;
}

.gp-gacha-draw-success-modal__hero {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.gp-gacha-draw-success-modal__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
}

    .gp-gacha-draw-success-modal__icon img {
        width: 60px;
        height: 60px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-gacha-draw-success-modal__hero-text {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.gp-gacha-draw-success-modal__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 20px;
    color: #14ae5c;
}

.gp-gacha-draw-success-modal__subtitle {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
}

.gp-gacha-draw-success-modal__reward {
    display: flex;
    width: 100%;
    justify-content: center;
}

.gp-gacha-draw-success-modal__item-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #323438;
    background-color: #24262a;
    box-sizing: border-box;
}

.gp-gacha-draw-success-modal__item-img {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    -o-object-fit: cover;
    object-fit: cover;
    flex-shrink: 0;
}

.gp-gacha-draw-success-modal__item-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
}

.gp-gacha-draw-success-modal__item-name {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: normal;
    color: #9fb3c8;
}

.gp-gacha-draw-success-modal__item-qty {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #5fc4ee;
}

.gp-gacha-draw-success-modal__actions {
    display: flex;
    width: 100%;
}

.gp-gacha-draw-success-modal__back {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 10px 80px;
    border-radius: 10px;
    border: 1px solid #486581;
    background: transparent;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

    .gp-gacha-draw-success-modal__back:hover {
        background-color: rgba(72, 101, 129, 0.2);
    }

    .gp-gacha-draw-success-modal__back:focus-visible {
        outline: 2px solid #1caee7;
        outline-offset: 2px;
    }

body.gp-gacha-draw-success-modal-open {
    overflow: hidden;
}

/* Gacha draw ten success modal (Figma: node 4937-34144) – index-genplay-activity-gachabox */

.gp-gacha-draw-ten-success-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 73;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-gacha-draw-ten-success-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-gacha-draw-ten-success-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.7);
    cursor: pointer;
    pointer-events: auto;
}

.gp-gacha-draw-ten-success-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    max-width: 100%;
    justify-content: center;
}

@media (min-width: 768px) {
    .gp-gacha-draw-ten-success-modal__dialog-wrap {
        max-width: 600px;
    }
}

.gp-gacha-draw-ten-success-modal__dialog-wrap {
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-gacha-draw-ten-success-modal__dialog {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    background-color: #1a1b1e;
    border: 1px solid #243b53;
    border-radius: 10px;
    box-sizing: border-box;
}

.gp-gacha-draw-ten-success-modal__close-row {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    justify-content: flex-end;
    padding: 10px;
}

.gp-gacha-draw-ten-success-modal__close {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

    .gp-gacha-draw-ten-success-modal__close img {
        width: 100%;
        height: 100%;
        -o-object-fit: contain;
        object-fit: contain;
    }

    .gp-gacha-draw-ten-success-modal__close:focus-visible {
        outline: 2px solid #1caee7;
        outline-offset: 2px;
        border-radius: 4px;
    }

.gp-gacha-draw-ten-success-modal__body {
    display: flex;
    min-height: 0px;
    width: 100%;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 0 10px 20px;
}

.gp-gacha-draw-ten-success-modal__hero {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.gp-gacha-draw-ten-success-modal__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
}

    .gp-gacha-draw-ten-success-modal__icon img {
        width: 60px;
        height: 60px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-gacha-draw-ten-success-modal__hero-text {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.gp-gacha-draw-ten-success-modal__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 20px;
    color: #14ae5c;
}

.gp-gacha-draw-ten-success-modal__subtitle {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
}

.gp-gacha-draw-ten-success-modal__rewards {
    width: 100%;
    min-width: 0px;
    flex-shrink: 0;
}

.gp-gacha-draw-ten-success-modal__rewards-scroll {
    width: 100%;
}

.gp-gacha-draw-ten-success-modal__rows {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-gacha-draw-ten-success-modal__row {
    display: flex;
    width: 100%;
    gap: 10px;
}

.gp-gacha-draw-ten-success-modal__item-card {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #323438;
    background-color: #24262a;
    box-sizing: border-box;
}

.gp-gacha-draw-ten-success-modal__item-img {
    width: 100%;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    -o-object-fit: cover;
    object-fit: cover;
}

.gp-gacha-draw-ten-success-modal__item-meta {
    display: flex;
    width: 100%;
    min-width: 0px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
}

.gp-gacha-draw-ten-success-modal__item-name {
    margin: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: normal;
    color: #9fb3c8;
}

.gp-gacha-draw-ten-success-modal__item-qty {
    margin: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #5fc4ee;
}

.gp-gacha-draw-ten-success-modal__actions {
    display: flex;
    width: 100%;
    flex-shrink: 0;
}

.gp-gacha-draw-ten-success-modal__back {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 10px 80px;
    border-radius: 10px;
    border: 1px solid #486581;
    background: transparent;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

    .gp-gacha-draw-ten-success-modal__back:hover {
        background-color: rgba(72, 101, 129, 0.2);
    }

    .gp-gacha-draw-ten-success-modal__back:focus-visible {
        outline: 2px solid #1caee7;
        outline-offset: 2px;
    }

@media (max-width: 767px) {
    .gp-gacha-draw-ten-success-modal__body {
        flex: 1;
        min-height: 0;
        gap: 20px;
        padding: 0 30px 30px;
    }

    .gp-gacha-draw-ten-success-modal__rewards {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .gp-gacha-draw-ten-success-modal__rewards-scroll {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-right: 4px;
    }

        .gp-gacha-draw-ten-success-modal__rewards-scroll::-webkit-scrollbar {
            width: 8px;
        }

        .gp-gacha-draw-ten-success-modal__rewards-scroll::-webkit-scrollbar-track {
            background: #3d4350;
            border-radius: 2px;
        }

        .gp-gacha-draw-ten-success-modal__rewards-scroll::-webkit-scrollbar-thumb {
            background: #bcccdc;
            border-radius: 2px;
        }

    .gp-gacha-draw-ten-success-modal__rows {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .gp-gacha-draw-ten-success-modal__row {
        display: contents;
    }

    .gp-gacha-draw-ten-success-modal__item-card {
        flex: none;
        min-width: 0;
        gap: 6px;
        padding: 8px;
    }

    .gp-gacha-draw-ten-success-modal__item-name {
        font-size: 12px;
    }

    .gp-gacha-draw-ten-success-modal__item-qty {
        font-size: 12px;
    }
}

body.gp-gacha-draw-ten-success-modal-open {
    overflow: hidden;
}

/* Gacha box items modal (Figma: node 4929-33734) */

.gp-gacha-box-items-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 74;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-gacha-box-items-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-gacha-box-items-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.7);
    cursor: pointer;
    pointer-events: auto;
}

.gp-gacha-box-items-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 529px;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-gacha-box-items-modal__dialog {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    border: 1px solid #243b53;
    border-radius: 10px;
    box-sizing: border-box;
    background: radial-gradient( ellipse 60% 40% at 50% 0%, #0b4da0 0%, #0e407e 25%, #11325c 50%, #142539 75%, #171717 100% );
}

.gp-gacha-box-items-modal__close-row {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    padding: 10px;
    flex-shrink: 0;
}

.gp-gacha-box-items-modal__close {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

    .gp-gacha-box-items-modal__close img {
        width: 100%;
        height: auto;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .gp-gacha-box-items-modal__close:focus-visible {
        outline: 2px solid #1caee7;
        outline-offset: 2px;
        border-radius: 4px;
    }

.gp-gacha-box-items-modal__body {
    display: flex;
    width: 100%;
    min-width: 0px;
    flex-direction: column;
    gap: 20px;
    padding: 0 20px 20px;
}

.gp-gacha-box-items-modal__hero {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.gp-gacha-box-items-modal__box-img {
    width: 70px;
    height: 76px;
    -o-object-fit: cover;
    object-fit: cover;
    flex-shrink: 0;
}

.gp-gacha-box-items-modal__hero-text {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.gp-gacha-box-items-modal__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 20px;
    color: #8cd6f3;
    word-break: break-word;
}

.gp-gacha-box-items-modal__desc {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #ffffff;
}

.gp-gacha-box-items-modal__desc-break {
    display: none;
}

@media (min-width: 768px) {
    .gp-gacha-box-items-modal__desc-break {
        display: block;
    }
}

.gp-gacha-box-items-modal__items-shell {
    width: 100%;
    border: 1px solid #243b53;
    border-radius: 10px;
    background-color: #27292f;
    max-height: 240px;
    overflow: hidden;
}

.gp-gacha-box-items-modal__items-scroll {
    max-height: 240px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #bcccdc #27292f;
    padding: 10px;
}

    .gp-gacha-box-items-modal__items-scroll::-webkit-scrollbar {
        width: 8px;
    }

    .gp-gacha-box-items-modal__items-scroll::-webkit-scrollbar-track {
        background: #27292f;
        border-radius: 2px;
    }

    .gp-gacha-box-items-modal__items-scroll::-webkit-scrollbar-thumb {
        background: #bcccdc;
        border-radius: 2px;
    }

.gp-gacha-box-items-modal__list {
    display: flex;
    width: 100%;
    flex-direction: column;
    margin: 0;
    padding: 10px;
    list-style: none;
    gap: 10px;
}

.gp-gacha-box-items-modal__row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: #9fb3c8;
}

.gp-gacha-box-items-modal__name {
    min-width: 0px;
    flex: 1 1 0%;
    padding-left: 24px;
    position: relative;
}

.gp-gacha-box-items-modal__row .gp-gacha-box-items-modal__name::before {
    content: "•";
    position: absolute;
    left: 4px;
}

.gp-gacha-box-items-modal__qty {
    flex: 1 1 0;
    min-width: 0;
    text-align: right;
}

body.gp-gacha-box-items-modal-open {
    overflow: hidden;
}

/* Activity join blocked modal (Figma: node 3465-19538 "Pop up เข้าร่วมไม่ได้") */

.gp-activity-join-blocked-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 73;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-activity-join-blocked-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-activity-join-blocked-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.7);
    cursor: default;
    pointer-events: auto;
}

.gp-activity-join-blocked-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 667px;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-activity-join-blocked-modal__dialog {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    background-color: #1a1b1e;
    border-radius: 20px;
    padding: 40px 30px;
    gap: 40px;
}

.gp-activity-join-blocked-modal__hero {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.gp-activity-join-blocked-modal__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
}

    .gp-activity-join-blocked-modal__icon img {
        width: 60px;
        height: 60px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-activity-join-blocked-modal__hero-text {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.gp-activity-join-blocked-modal__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: normal;
    color: #ffffff;
}

.gp-activity-join-blocked-modal__subtitle {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #ffffff;
}

.gp-activity-join-blocked-modal__actions {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    max-width: 350px;
    margin: 0 auto;
    gap: 10px;
}

.gp-activity-join-blocked-modal__confirm,
.gp-activity-join-blocked-modal__cancel {
    display: inline-flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    line-height: 1.75rem;
    height: 60px;
    border-radius: 10px;
    font-family: "Google Sans", sans-serif;
    line-height: normal;
    transition: filter 0.2s ease;
}

.gp-activity-join-blocked-modal__confirm {
    background-color: #1caee7;
    color: #020e1f;
    font-weight: 500;
    text-decoration: none;
}

    .gp-activity-join-blocked-modal__confirm:hover {
        filter: brightness(1.06);
    }

    .gp-activity-join-blocked-modal__confirm:active {
        filter: brightness(0.95);
    }

.gp-activity-join-blocked-modal__cancel {
    border: 1px solid #486581;
    background-color: transparent;
    color: #829ab1;
    font-weight: 400;
    text-decoration: none;
}

    .gp-activity-join-blocked-modal__cancel:hover {
        filter: brightness(1.1);
    }

body.gp-activity-join-blocked-modal-open {
    overflow: hidden;
}

/* Mail pack detail modal (Figma: node 5065-36961 "info - รายละเอียดไอเทม") */

.gp-mail-pack-detail-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 70;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-mail-pack-detail-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.6);
    cursor: pointer;
    pointer-events: auto;
}

.gp-mail-pack-detail-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 529px;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-mail-pack-detail-modal__dialog {
    display: flex;
    width: 100%;
    min-width: 0px;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    background-color: #1a1b1e;
    border: 1px solid #243b53;
    border-radius: 10px;
}

.gp-mail-pack-detail-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-mail-pack-detail-modal__header {
    display: flex;
    flex-shrink: 0;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 10px;
}

.gp-mail-pack-detail-modal__close {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

    .gp-mail-pack-detail-modal__close img {
        width: 14px;
        height: 14px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-mail-pack-detail-modal__body {
    display: flex;
    min-height: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 20px;
    padding: 0 20px 20px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.gp-mail-pack-detail-modal__summary {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
}

.gp-mail-pack-detail-modal__media {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    width: 170px;
    height: 170px;
    border-radius: 6px;
}

.gp-mail-pack-detail-modal__pack-img {
    position: absolute;
    inset: 0px;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 6px;
}

.gp-mail-pack-detail-modal__media .gp-mail-card__tag {
    border-top-left-radius: 6px;
}

.gp-mail-pack-detail-modal__meta {
    display: flex;
    min-height: 0px;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: 20px;
}

.gp-mail-pack-detail-modal__pack {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-mail-pack-detail-modal__pack-name {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin: 0;
    width: 100%;
    min-width: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
}

.gp-mail-pack-detail-modal__pack-qty {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #829ab1;
}

.gp-mail-pack-detail-modal__warning {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #ff5f57;
    word-break: break-word;
}

.gp-mail-pack-detail-modal__items-block {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

    .gp-mail-pack-detail-modal__items-block[hidden] {
        display: none;
    }

.gp-mail-pack-detail-modal__items-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gp-mail-pack-detail-modal__items-head-icon {
    width: 20px;
    height: 20px;
    -o-object-fit: contain;
    object-fit: contain;
    flex-shrink: 0;
}

.gp-mail-pack-detail-modal__items-head-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #bcccdc;
}

.gp-mail-pack-detail-modal__items-shell {
    display: flex;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
    border-radius: 10px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(36 59 83 / var(--tw-border-opacity, 1));
    background-color: #27292f;
}

.gp-mail-pack-detail-modal__items-scroll {
    max-height: min(180px, 38vh);
    overflow-y: auto;
    padding: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #bcccdc #3d4350;
}

    .gp-mail-pack-detail-modal__items-scroll::-webkit-scrollbar {
        width: 8px;
    }

    .gp-mail-pack-detail-modal__items-scroll::-webkit-scrollbar-track {
        background: #3d4350;
        border-radius: 2px;
    }

    .gp-mail-pack-detail-modal__items-scroll::-webkit-scrollbar-thumb {
        background: #bcccdc;
        border-radius: 2px;
    }

.gp-mail-pack-detail-modal__items-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gp-mail-pack-detail-modal__item-row {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #9fb3c8;
}

.gp-mail-pack-detail-modal__item-name {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 16px;
    position: relative;
}

    .gp-mail-pack-detail-modal__item-name::before {
        content: "";
        position: absolute;
        left: 4px;
        top: 0.45em;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: #9fb3c8;
    }

.gp-mail-pack-detail-modal__item-qty {
    flex: 1 1 0;
    min-width: 0;
    text-align: right;
}

body.gp-mail-pack-detail-modal-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .gp-mail-pack-detail-modal__summary {
        flex-direction: column;
        align-items: center;
    }

    .gp-mail-pack-detail-modal__meta {
        width: 100%;
    }
}

/* Mail item confirm modal (Figma: node 5039-35269 "Gift Redeem Comfirmation/Default") */

.gp-mail-confirm-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 73;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-mail-confirm-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-mail-confirm-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.7);
    cursor: default;
    pointer-events: auto;
}

.gp-mail-confirm-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 690px;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-mail-confirm-modal__dialog {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    background-color: #1a1b1e;
    border: 1px solid #243b53;
    border-radius: 20px;
    padding: 30px;
    gap: 20px;
}

.gp-mail-confirm-modal__head {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.gp-mail-confirm-modal__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
}

    .gp-mail-confirm-modal__icon img {
        width: 50px;
        height: 50px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-mail-confirm-modal__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    color: #ffffff;
}

.gp-mail-confirm-modal__body {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
}

.gp-mail-confirm-modal__section {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
}

.gp-mail-confirm-modal__section-divider {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.gp-mail-confirm-modal__section-line {
    flex: 1 1 0;
    min-width: 0;
    height: 1px;
    background-color: #627d98;
}

.gp-mail-confirm-modal__section-text {
    flex-shrink: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 14px;
    color: #627d98;
    text-transform: capitalize;
    white-space: nowrap;
}

.gp-mail-confirm-modal__detail-card {
    display: flex;
    width: 100%;
    flex-direction: column;
    background-color: #212326;
    border-radius: 10px;
}

.gp-mail-confirm-modal__server-char-row {
    display: flex;
    width: 100%;
    gap: 10px;
    padding: 20px;
}

.gp-mail-confirm-modal__field {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 10px;
}

.gp-mail-confirm-modal__field-label {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 13.248px;
    color: #829ab1;
}

.gp-mail-confirm-modal__field-value {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 5px 20px;
    border: 1px solid #0b4da0;
    border-radius: 10px;
    background-color: rgba(11, 77, 160, 0.2);
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 13.248px;
    color: #1caee7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gp-mail-confirm-modal__pack-card {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

.gp-mail-confirm-modal__pack-row {
    display: flex;
    width: 100%;
    gap: 20px;
}

.gp-mail-confirm-modal__pack-thumb {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    border-radius: 6px;
    -o-object-fit: cover;
    object-fit: cover;
}

.gp-mail-confirm-modal__pack-info {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 20px;
}

.gp-mail-confirm-modal__pack-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gp-mail-confirm-modal__pack-name {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.gp-mail-confirm-modal__pack-qty {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 13.248px;
    color: #829ab1;
}

.gp-mail-confirm-modal__pack-extra {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.gp-mail-confirm-modal__pack-warning {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #ff5f57;
}

.gp-mail-confirm-modal__actions {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
}

.gp-mail-confirm-modal__cancel,
.gp-mail-confirm-modal__confirm {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    height: 60px;
    border-radius: 10px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
}

.gp-mail-confirm-modal__cancel {
    background-color: transparent;
    width: 250px;
    flex-shrink: 0;
    padding: 10px 80px;
    border: 1px solid #486581;
    color: #829ab1;
    font-weight: 400;
}

    .gp-mail-confirm-modal__cancel:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-mail-confirm-modal__confirm {
    min-width: 0px;
    flex: 1 1 0%;
    padding: 10px;
    background-color: #1caee7;
    color: #020e1f;
    font-weight: 500;
    text-decoration: none;
}

    .gp-mail-confirm-modal__confirm:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

body.gp-mail-confirm-modal-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .gp-mail-confirm-modal__dialog {
        padding: 20px 16px;
    }

    .gp-mail-confirm-modal__server-char-row {
        flex-direction: column;
    }

    .gp-mail-confirm-modal__pack-row {
        flex-direction: column;
    }

    .gp-mail-confirm-modal__pack-thumb {
        width: 80px;
        height: 80px;
    }

    .gp-mail-confirm-modal__actions {
        flex-direction: column-reverse;
    }

    .gp-mail-confirm-modal__cancel,
    .gp-mail-confirm-modal__confirm {
        width: 100%;
        flex: none;
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* -------------------------------------------------------------------------- */

/* Red Link Dashboard (Figma: node 4951-33738)                                */

/* -------------------------------------------------------------------------- */

.gp-redlink-dash {
    margin-bottom: 2.5rem;
    margin-top: 20px;
}

.gp-redlink-dash__shell {
    display: flex;
    width: 100%;
    flex-direction: column;
    box-sizing: border-box;
    min-height: auto;
    gap: 50px;
    padding: 12px 16px;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    background: linear-gradient(-27.43deg, #17181b 57.7%, #17181b 82.6%, #511111 97.5%);
}

@media (min-width: 768px) {
    .gp-redlink-dash__shell {
        padding: 20px 30px;
    }
}

.gp-redlink-dash__head {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 40px;
    padding-top: 30px;
}

.gp-redlink-dash__profile-row {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

@media (min-width: 768px) {
    .gp-redlink-dash__profile-row {
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
    }
}

.gp-redlink-dash__profile {
    display: flex;
    width: 100%;
    min-width: 0px;
    flex: 1 1 0%;
    align-items: flex-start;
    gap: 20px;
}

.gp-redlink-dash__logo {
    display: none;
    height: auto;
    width: 90px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

@media (min-width: 1024px) {
    .gp-redlink-dash__logo {
        display: block;
    }
}

.gp-redlink-dash__profile-body {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.gp-redlink-dash__name {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.4;
    color: #ffffff;
    text-transform: capitalize;
    word-break: break-word;
}

@media (min-width: 768px) {
    .gp-redlink-dash__name {
        font-size: 24px;
        line-height: 40px;
    }
}

.gp-redlink-dash__meta {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.gp-redlink-dash__tier {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #ff4e50;
    text-transform: capitalize;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .gp-redlink-dash__tier {
        font-size: 20px;
    }
}

.gp-redlink-dash__benefits {
    display: inline-flex;
    align-items: center;
    text-decoration-line: none;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

    .gp-redlink-dash__benefits:hover {
        opacity: 0.8;
    }

.gp-redlink-dash__benefits {
    gap: 5px;
    padding: 5px 10px;
    border-radius: 99px;
}

.gp-redlink-dash__benefits-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #9fb3c8;
    text-align: center;
    text-transform: capitalize;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .gp-redlink-dash__benefits-text {
        font-size: 16px;
    }
}

.gp-redlink-dash__benefits-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-redlink-dash__code {
    display: flex;
    width: 100%;
    max-width: 430px;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    padding: 15px 20px;
    border: 1px solid #cf2323;
    border-radius: 10px;
    background: rgba(87, 10, 10, 0.28);
    box-sizing: border-box;
}

.gp-redlink-dash__code-label {
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
    text-transform: capitalize;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .gp-redlink-dash__code-label {
        font-size: 18px;
    }
}

.gp-redlink-dash__code-divider {
    width: 1px;
    height: 26px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.2);
}

.gp-redlink-dash__code-value-wrap {
    display: inline-flex;
    align-items: center;
    gap: 33px;
}

.gp-redlink-dash__code-value {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #ff383c;
    text-transform: capitalize;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .gp-redlink-dash__code-value {
        font-size: 20px;
    }
}

.gp-redlink-dash__code-copy {
    flex-shrink: 0;
    cursor: pointer;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    width: 24px;
    height: 24px;
}

    .gp-redlink-dash__code-copy img {
        display: block;
        width: 100%;
        height: 100%;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-redlink-dash__actions {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
}

@media (min-width: 768px) {
    .gp-redlink-dash__actions {
        width: auto;
        align-items: flex-end;
    }
}

.gp-redlink-dash__upgrade {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    text-decoration-line: none;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

    .gp-redlink-dash__upgrade:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-redlink-dash__upgrade {
    gap: 10px;
    padding: 15px 30px;
    border: 1px solid #ffaf53;
    border-radius: 99px;
    background: linear-gradient(78.83deg, #ff8c1a 8.15%, #ffb53f 102.03%);
    box-shadow: 0 0 10px rgba(255, 150, 2, 0.42);
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .gp-redlink-dash__upgrade {
        width: 280px;
    }
}

.gp-redlink-dash__upgrade-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #000000;
    text-align: center;
    text-transform: capitalize;
    white-space: nowrap;
}

.gp-redlink-dash__upgrade-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-redlink-dash__action {
    display: inline-flex;
    width: 100%;
    align-items: center;
    text-decoration-line: none;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

    .gp-redlink-dash__action:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-redlink-dash__action {
    padding: 15px 30px;
    border: 1px solid #fd432a;
    border-radius: 99px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .gp-redlink-dash__action {
        width: 280px;
    }
}

.gp-redlink-dash__action--exchange {
    justify-content: space-between;
    background: linear-gradient(77.74deg, #d81b0a 8.15%, #ff4e0d 102.03%);
    box-shadow: 0 0 10px rgba(255, 53, 2, 0.42);
}

.gp-redlink-dash__action--exchange-history {
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 0 20px rgba(255, 53, 2, 0.42);
}

.gp-redlink-dash__action-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: normal;
    color: #ffffff;
    text-align: center;
    text-transform: capitalize;
    white-space: nowrap;
}

.gp-redlink-dash__action-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-redlink-dash__stats {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.gp-redlink-dash__divider {
    width: 100%;
    height: 1px;
    flex-shrink: 0;
    background: #2a2a2a;
}

.gp-redlink-dash__stat-grid {
    display: grid;
    width: 100%;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .gp-redlink-dash__stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-redlink-dash__stat-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.gp-redlink-dash__stat {
    display: flex;
    min-height: 171px;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    padding: 30px 20px;
    border: 1px solid #981b1d;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(123, 25, 25, 0.41) 0%, rgba(27, 18, 19, 0.41) 100%);
    box-shadow: 0 0 18.6px rgba(222, 22, 22, 0.3);
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .gp-redlink-dash__stat {
        padding: 40px 20px;
    }
}

.gp-redlink-dash__stat--current {
    border-color: #ffa719;
    background: linear-gradient(180deg, rgba(254, 167, 6, 0.65) 0%, rgba(27, 18, 19, 0.65) 100%);
    box-shadow: 0 0 18.6px rgba(255, 155, 16, 0.3);
}

.gp-redlink-dash__stat-copy {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.gp-redlink-dash__stat-title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: normal;
    color: #ffffff;
}

@media (min-width: 768px) {
    .gp-redlink-dash__stat-title {
        font-size: 18px;
    }
}

.gp-redlink-dash__stat-desc {
    margin: 0px;
    font-size: 12px;
    line-height: 1.5;
    --tw-text-opacity: 1;
    color: rgb(188 204 220 / var(--tw-text-opacity, 1));
}

@media (min-width: 768px) {
    .gp-redlink-dash__stat-desc {
        font-size: 14px;
    }
}

.gp-redlink-dash__stat-desc {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
}

.gp-redlink-dash__stat-value {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: normal;
    color: #ffffff;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .gp-redlink-dash__stat-value {
        font-size: 28px;
    }
}

.gp-redlink-dash__stat--current .gp-redlink-dash__stat-value {
    color: #ffdf72;
}

.gp-redlink-dash__progress-row {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
}

@media (min-width: 768px) {
    .gp-redlink-dash__progress-row {
        flex-direction: row;
        align-items: stretch;
    }
}

.gp-redlink-dash__progress-card {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 30px 20px;
    border: 1px solid #4e3331;
    border-radius: 20px;
    background: #221f1f;
    box-sizing: border-box;
}

.gp-redlink-dash__progress-card--exclusive {
    border-color: #403723;
}

.gp-redlink-dash__progress-card-body {
    display: flex;
    width: 100%;
    max-width: 485px;
    flex-direction: column;
    gap: 30px;
}

.gp-redlink-dash__progress-card-head {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.gp-redlink-dash__progress-card-head-left {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 5px;
}

.gp-redlink-dash__progress-card-head-right {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 5px;
}

.gp-redlink-dash__progress-card-title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
    white-space: nowrap;
}

.gp-redlink-dash__progress-card-subtitle {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #bcccdc;
}

.gp-redlink-dash__progress-card--tier .gp-redlink-dash__progress-card-subtitle-value {
    font-weight: 700;
    color: #ff5f57;
}

.gp-redlink-dash__progress-card--exclusive .gp-redlink-dash__progress-card-subtitle-value {
    font-weight: 700;
    color: #febc2f;
}

.gp-redlink-dash__progress-card-meta-label {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #bcccdc;
    white-space: nowrap;
}

.gp-redlink-dash__progress-card-meta-value {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: normal;
    white-space: nowrap;
}

.gp-redlink-dash__progress-card--tier .gp-redlink-dash__progress-card-meta-value {
    color: #ff5f57;
}

.gp-redlink-dash__progress-card--exclusive .gp-redlink-dash__progress-card-meta-value {
    color: #febc2f;
}

.gp-redlink-dash__progress-card-gauge {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-redlink-dash__progress-card-gauge-bar {
    position: relative;
    width: 100%;
    overflow: visible;
    height: 10px;
    border-radius: 99px;
    background: #3a3a3a;
}

.gp-redlink-dash__progress-card-gauge-fill {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: var(--gp-redlink-dash-gauge-fill, 0%);
    border-radius: inherit;
}

.gp-redlink-dash__progress-card--tier .gp-redlink-dash__progress-card-gauge-fill {
    background: linear-gradient(90deg, #ff5f57 0%, #ff383c 100%);
}

.gp-redlink-dash__progress-card--exclusive .gp-redlink-dash__progress-card-gauge-fill {
    background: linear-gradient(90deg, #febc2f 0%, #ffaf53 100%);
}

.gp-redlink-dash__progress-card-gauge-marker {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 14px;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.9);
}

.gp-redlink-dash__progress-card-gauge-labels {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    text-align: center;
    gap: 8px;
}

.gp-redlink-dash__progress-card-gauge-labels--dual {
    align-items: center;
}

.gp-redlink-dash__progress-card-gauge-label {
    width: 70px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    color: #6d6d6d;
}

.gp-redlink-dash__progress-card-gauge-labels--dual .gp-redlink-dash__progress-card-gauge-label {
    width: auto;
    line-height: 24px;
}

.gp-redlink-dash__progress-card-notice {
    margin: 0px;
    width: 100%;
    max-width: 485px;
    padding: 15px;
    border-radius: 10px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    text-transform: capitalize;
    box-sizing: border-box;
}

.gp-redlink-dash__progress-card--tier .gp-redlink-dash__progress-card-notice {
    border: 1px solid #602f2d;
    background: #2b2828;
    color: #ff7d77;
}

.gp-redlink-dash__progress-card--exclusive .gp-redlink-dash__progress-card-notice {
    border: 1px solid #4d4128;
    background: #322f28;
    color: #ffffff;
    line-height: 25px;
}

.gp-redlink-dash__link-shop {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 20px;
    border: 1px solid #5d3f00;
    border-radius: 10px;
    background: #1d1a1a;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .gp-redlink-dash__link-shop {
        padding: 40px;
    }
}

.gp-redlink-dash__link-shop-head {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.gp-redlink-dash__link-shop-title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: normal;
    color: #febc2f;
    text-transform: capitalize;
    word-break: break-word;
}

.gp-redlink-dash__link-shop-desc {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #9fb3c8;
    white-space: nowrap;
}

.gp-redlink-dash__link-shop-box {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 20px;
    border: 1px solid #78602e;
    border-radius: 10px;
    background: #1d1a1c;
    box-sizing: border-box;
}

.gp-redlink-dash__link-shop-url {
    margin: 0px;
    min-width: 0px;
    flex: 1 1 0%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: normal;
    color: #febc2f;
    text-align: left;
}

.gp-redlink-dash__link-shop-copy {
    flex-shrink: 0;
    cursor: pointer;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    width: 24px;
    height: 24px;
}

    .gp-redlink-dash__link-shop-copy img {
        display: block;
        width: 100%;
        height: 100%;
        -o-object-fit: contain;
        object-fit: contain;
    }

/* Red Link Dashboard – Link Shop (Recommended packs) */

.gp-redlink-dash__link-shop-divider {
    width: 100%;
    height: 1px;
    background: #382826;
}

.gp-redlink-dash__link-shop-packs {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.gp-redlink-dash__link-shop-packs-head {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.gp-redlink-dash__link-shop-packs-title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: normal;
    color: #febc2f;
    text-transform: capitalize;
    word-break: break-word;
}

.gp-redlink-dash__link-shop-packs-desc {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #9fb3c8;
}

.gp-redlink-dash__link-shop-packs-list {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.gp-redlink-dash__link-shop-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
}

.gp-redlink-dash__link-shop-item-box {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border: 1px solid #78602e;
    border-radius: 10px;
    background: #261e1e;
    box-sizing: border-box;
}

.gp-redlink-dash__link-shop-item--editing .gp-redlink-dash__link-shop-item-box {
    border-color: #d5a744;
    background: #37302c;
}

.gp-redlink-dash__link-shop-item-number {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 99px;
    border: 1px solid #866713;
    background: rgba(255, 155, 56, 0.2);
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: normal;
    color: #febc2f;
}

.gp-redlink-dash__link-shop-item-input {
    min-width: 0px;
    flex: 1 1 0%;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: normal;
    color: #ffffff;
    outline: none;
}

.gp-redlink-dash__link-shop-item--editing .gp-redlink-dash__link-shop-item-input {
    color: #febc2f;
}

.gp-redlink-dash__link-shop-item-input::-moz-placeholder {
    color: #8e7f5e;
}

.gp-redlink-dash__link-shop-item-input::placeholder {
    color: #8e7f5e;
}

.gp-redlink-dash__link-shop-item-copy {
    flex-shrink: 0;
    cursor: pointer;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    width: 24px;
    height: 24px;
}

    .gp-redlink-dash__link-shop-item-copy img {
        display: block;
        width: 100%;
        height: 100%;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-redlink-dash__link-shop-item-actions {
    flex-shrink: 0;
    display: none;
    gap: 10px;
}

.gp-redlink-dash__link-shop-item--editing .gp-redlink-dash__link-shop-item-actions {
    display: flex;
    align-items: center;
}

.gp-redlink-dash__link-shop-item--editing .gp-redlink-dash__link-shop-item-copy {
    display: none;
}

.gp-redlink-dash__link-shop-item-save {
    cursor: pointer;
    border-width: 0px;
    width: 100px;
    padding: 17px 20px;
    border-radius: 10px;
    background: #febc2f;
    box-sizing: border-box;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: normal;
    text-align: center;
    color: #261e1e;
}

.gp-redlink-dash__link-shop-item-cancel {
    cursor: pointer;
    width: 100px;
    padding: 17px 20px;
    border-radius: 10px;
    border: 1px solid #78602e;
    background: #261e1e;
    box-sizing: border-box;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: normal;
    text-align: center;
    color: #8e7f5e;
}

@media (max-width: 767px) {
    .gp-redlink-dash__link-shop-item {
        flex-direction: column;
        align-items: stretch;
    }

    .gp-redlink-dash__link-shop-item-box {
        width: 100%;
        flex: none;
    }

    .gp-redlink-dash__link-shop-item--editing .gp-redlink-dash__link-shop-item-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .gp-redlink-dash__link-shop-item-save,
    .gp-redlink-dash__link-shop-item-cancel {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* Red Link Dashboard – Credit History */

.gp-redlink-dash__history {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    border: 1px solid #382826;
    border-radius: 10px;
    background: #171416;
    box-sizing: border-box;
    overflow: visible;
}

.gp-redlink-dash__history-head {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .gp-redlink-dash__history-head {
        padding-left: 30px;
        padding-right: 30px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

.gp-redlink-dash__history-head {
    border-left: 1px solid #382826;
    border-right: 1px solid #382826;
    border-top: 1px solid #382826;
    background: #171416;
    box-sizing: border-box;
}

@media (max-width: 991px) {
    .gp-redlink-dash__history-head {
        flex-direction: column;
        align-items: stretch;
        position: relative;
    }
}

.gp-redlink-dash__history-title-wrap {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.gp-redlink-dash__history-title {
    margin: 0px;
    min-width: 0px;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: normal;
    color: #ffffff;
    text-transform: capitalize;
    word-break: break-word;
}

.gp-redlink-dash__history-filter {
    display: flex;
    flex-shrink: 0;
    align-items: flex-end;
    justify-content: flex-end;
}

.gp-redlink-dash__history-filter-hint {
    margin: 0px;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: normal;
    color: #685c62;
}

.gp-redlink-dash__history-sum {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .gp-redlink-dash__history-sum {
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 20px;
    }
}

.gp-redlink-dash__history-sum {
    border-left: 1px solid #382826;
    border-right: 1px solid #382826;
    background: #171416;
    box-sizing: border-box;
}

.gp-redlink-dash__history-sum-heading {
    margin: 0px;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    color: #bcccdc;
}

.gp-redlink-dash__history-sum-grid {
    display: grid;
    width: 100%;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .gp-redlink-dash__history-sum-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.gp-redlink-dash__history-sum-card {
    display: flex;
    min-width: 0px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
    border-radius: 10px;
    padding: 30px;
    border: 1px solid #382826;
    background: #1e1a1c;
    box-sizing: border-box;
}

.gp-redlink-dash__history-sum-label {
    margin: 0px;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    color: #bcccdc;
}

.gp-redlink-dash__history-sum-value {
    margin: 0px;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: normal;
}

.gp-redlink-dash__history-sum-value--positive {
    color: #27c840;
}

.gp-redlink-dash__history-sum-value--negative {
    color: #ff5f57;
}

.gp-redlink-dash__history-sum-value--net {
    color: #febc2f;
}

.gp-redlink-dash__history-sum-meta {
    margin: 0px;
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: normal;
    color: #bcccdc;
}

.gp-redlink-dash__history .gp-history__date-range {
    width: auto;
}

.gp-redlink-dash__history .gp-history__filter-btn {
    width: auto;
    height: 50px;
    padding: 12px 20px;
    gap: 20px;
    border-color: #583d3a;
    font-size: 16px;
    line-height: 13px;
    white-space: nowrap;
}

.gp-redlink-dash__history .gp-history__date-range-panel {
    left: auto;
    right: 0;
}

@media (max-width: 991px) {
    .gp-redlink-dash__history .gp-history__date-range {
        width: 100%;
        position: static;
    }

    .gp-redlink-dash__history .gp-history__filter-btn {
        width: 100%;
    }

    .gp-redlink-dash__history .gp-history__date-range-panel {
        position: absolute;
        top: 100%;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(600px, calc(100vw - 48px));
        max-width: calc(100vw - 48px);
    }
}

.gp-redlink-dash__history-table-wrap {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #583d3a #171416;
}

    .gp-redlink-dash__history-table-wrap::-webkit-scrollbar {
        height: 6px;
    }

    .gp-redlink-dash__history-table-wrap::-webkit-scrollbar-track {
        background: #171416;
        border-radius: 4px;
    }

    .gp-redlink-dash__history-table-wrap::-webkit-scrollbar-thumb {
        background: #583d3a;
        border-radius: 4px;
    }

.gp-redlink-dash__history-table {
    width: 100%;
    min-width: 700px;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}

.gp-redlink-dash__history-thead {
    background-color: #1e1a1c;
}

.gp-redlink-dash__history-th {
    padding: 20px 10px 20px 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: normal;
    color: #bcccdc;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

    .gp-redlink-dash__history-th:first-child {
        padding-left: 30px;
    }

    .gp-redlink-dash__history-th:last-child {
        padding-right: 30px;
    }

    .gp-redlink-dash__history-th:nth-child(1),
    .gp-redlink-dash__history-cell:nth-child(1) {
        width: 23.5%;
    }

    .gp-redlink-dash__history-th:nth-child(2),
    .gp-redlink-dash__history-cell:nth-child(2) {
        width: 17.6%;
    }

    .gp-redlink-dash__history-th:nth-child(3),
    .gp-redlink-dash__history-cell:nth-child(3) {
        width: 23.5%;
    }

    .gp-redlink-dash__history-th:nth-child(4),
    .gp-redlink-dash__history-cell:nth-child(4) {
        width: 17.6%;
    }

    .gp-redlink-dash__history-th:nth-child(5),
    .gp-redlink-dash__history-cell:nth-child(5) {
        width: 17.8%;
    }

.gp-redlink-dash__history-tbody {
    background-color: #171416;
}

.gp-redlink-dash__history-row {
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: normal;
    color: #ffffff;
}

    .gp-redlink-dash__history-row + .gp-redlink-dash__history-row .gp-redlink-dash__history-cell {
        border-top: 1px solid #382826;
    }

.gp-redlink-dash__history-cell {
    padding: 10px 10px 10px 0;
    min-width: 0;
    vertical-align: middle;
    white-space: nowrap;
}

.gp-redlink-dash__history-tbody .gp-redlink-dash__history-row:last-child .gp-redlink-dash__history-cell {
    padding-bottom: 20px;
}

.gp-redlink-dash__history-cell:first-child {
    padding-left: 30px;
}

.gp-redlink-dash__history-cell:last-child {
    padding-right: 30px;
}

.gp-redlink-dash__history-cell--amount-positive {
    color: #27c840;
}

.gp-redlink-dash__history-cell--amount-negative {
    color: #ff5f57;
}

.gp-shop-pagination--redlink .gp-shop-pagination__page {
    color: #9e9e9e;
}

.gp-shop-pagination--redlink .gp-shop-pagination__page--active {
    color: #ffffff;
    background-color: #c94b4b;
}

.gp-redlink-dash__history .gp-shop-pagination--redlink {
    padding: 20px 10px;
}

.gp-redlink-dash__history .gp-history__date-range-panel {
    border-color: #583d3a;
    background-color: #1e1a1c;
}

.gp-redlink-dash__history .gp-history__date-range-nav:hover,
.gp-redlink-dash__history .gp-history__date-range-nav:focus-visible {
    background-color: #382826;
}

.gp-redlink-dash__history .gp-history__date-range-day:hover:not(:disabled) {
    background-color: #382826;
}

.gp-redlink-dash__history .gp-history__date-range-day:focus-visible {
    outline-color: #c94b4b;
}

.gp-redlink-dash__history .gp-history__date-range-day--today:not(.gp-history__date-range-day--selected) {
    box-shadow: inset 0 0 0 1px rgba(201, 75, 75, 0.85);
}

.gp-redlink-dash__history .gp-history__date-range-day--in-range {
    background-color: rgba(201, 75, 75, 0.2);
}

    .gp-redlink-dash__history .gp-history__date-range-day--in-range:hover {
        background-color: rgba(201, 75, 75, 0.35);
    }

.gp-redlink-dash__history .gp-history__date-range-day--selected {
    background-color: #c94b4b;
}

    .gp-redlink-dash__history .gp-history__date-range-day--selected:hover {
        background-color: #d65a5a;
    }

.gp-redlink-dash__history .gp-history__date-range-day--range-start.gp-history__date-range-day--in-range,
.gp-redlink-dash__history .gp-history__date-range-day--range-end.gp-history__date-range-day--in-range {
    background-color: #c94b4b;
}

/* Red Link Partner upgrade modal (Figma: node 5077-37633) */

.gp-redlink-upgrade-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 73;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-redlink-upgrade-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-redlink-upgrade-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.7);
    cursor: default;
    pointer-events: auto;
}

.gp-redlink-upgrade-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 840px;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-redlink-upgrade-modal__dialog {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    background-color: #1a1b1e;
    border: 1px solid #243b53;
    border-radius: 20px;
    padding: 10px;
    box-sizing: border-box;
}

.gp-redlink-upgrade-modal__header {
    display: flex;
    flex-shrink: 0;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 10px;
}

.gp-redlink-upgrade-modal__close {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

    .gp-redlink-upgrade-modal__close img {
        width: 16px;
        height: 16px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-redlink-upgrade-modal__body {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
    padding: 0 30px 30px;
}

.gp-redlink-upgrade-modal__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    color: #ffffff;
    text-align: center;
}

.gp-redlink-upgrade-modal__options {
    display: flex;
    width: 100%;
    gap: 20px;
    min-height: 337px;
}

.gp-redlink-upgrade-modal__option {
    position: relative;
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    gap: 15px;
    min-width: 0;
    padding: 40px 20px;
    border-radius: 10px;
    border: 1px solid transparent;
    box-sizing: border-box;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.gp-redlink-upgrade-modal__option--active {
    background-color: #2f1112;
    border-color: #600f11;
}

    .gp-redlink-upgrade-modal__option--active:hover,
    .gp-redlink-upgrade-modal__option--active:active,
    .gp-redlink-upgrade-modal__option--active:focus-visible {
        background-color: #381314;
        border-color: #7b1518;
        box-shadow: inset 0 0 38.3px 0 rgba(255, 28, 28, 0.27);
    }

        .gp-redlink-upgrade-modal__option--active:hover .gp-redlink-upgrade-modal__option-divider,
        .gp-redlink-upgrade-modal__option--active:active .gp-redlink-upgrade-modal__option-divider,
        .gp-redlink-upgrade-modal__option--active:focus-visible .gp-redlink-upgrade-modal__option-divider {
            background-color: #7b1518;
        }

.gp-redlink-upgrade-modal__option--disabled {
    background-color: #212121;
    border-color: #2a2a2a;
    cursor: not-allowed;
}

.gp-redlink-upgrade-modal__option-icon {
    width: 60px;
    height: 60px;
    flex: 0 0 auto;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-redlink-upgrade-modal__option-content {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.gp-redlink-upgrade-modal__option-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
}

.gp-redlink-upgrade-modal__option-subtitle {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
}

.gp-redlink-upgrade-modal__option-title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: normal;
}

.gp-redlink-upgrade-modal__option--active .gp-redlink-upgrade-modal__option-subtitle,
.gp-redlink-upgrade-modal__option--active .gp-redlink-upgrade-modal__option-title {
    color: #ffffff;
}

.gp-redlink-upgrade-modal__option--disabled .gp-redlink-upgrade-modal__option-subtitle,
.gp-redlink-upgrade-modal__option--disabled .gp-redlink-upgrade-modal__option-title {
    color: #666666;
}

.gp-redlink-upgrade-modal__option-divider {
    width: 100%;
    flex-shrink: 0;
    height: 1px;
    border: 0;
    margin: 0;
}

.gp-redlink-upgrade-modal__option--active .gp-redlink-upgrade-modal__option-divider {
    background-color: #600f11;
}

.gp-redlink-upgrade-modal__option--disabled .gp-redlink-upgrade-modal__option-divider {
    background-color: #2a2a2a;
}

.gp-redlink-upgrade-modal__option-conditions {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
}

.gp-redlink-upgrade-modal__option-conditions-label {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: normal;
    letter-spacing: 0.7px;
    text-transform: capitalize;
}

.gp-redlink-upgrade-modal__option-conditions-text {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
}

.gp-redlink-upgrade-modal__option--active .gp-redlink-upgrade-modal__option-conditions-label {
    color: #da3a40;
}

.gp-redlink-upgrade-modal__option--active .gp-redlink-upgrade-modal__option-conditions-text {
    color: #ffffff;
}

.gp-redlink-upgrade-modal__option--disabled .gp-redlink-upgrade-modal__option-conditions-label {
    color: #808080;
}

.gp-redlink-upgrade-modal__option--disabled .gp-redlink-upgrade-modal__option-conditions-text {
    color: #666666;
}

.gp-redlink-upgrade-modal__status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 99px;
    border: 1px solid transparent;
}

.gp-redlink-upgrade-modal__status-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-redlink-upgrade-modal__status-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    white-space: nowrap;
}

.gp-redlink-upgrade-modal__status--pass {
    background-color: rgba(39, 200, 64, 0.2);
    border-color: #27c840;
}

    .gp-redlink-upgrade-modal__status--pass .gp-redlink-upgrade-modal__status-text {
        color: #27c840;
    }

.gp-redlink-upgrade-modal__status--dim {
    background-color: rgba(183, 183, 183, 0.2);
    border-color: #505050;
}

    .gp-redlink-upgrade-modal__status--dim .gp-redlink-upgrade-modal__status-text {
        color: #adadad;
    }

.gp-redlink-upgrade-modal__status--fail {
    background-color: rgba(255, 95, 87, 0.2);
    border-color: #ff5f57;
}

    .gp-redlink-upgrade-modal__status--fail .gp-redlink-upgrade-modal__status-text {
        color: #ff5f57;
    }

body.gp-redlink-upgrade-modal-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .gp-redlink-upgrade-modal__body {
        padding: 0 16px 24px;
    }

    .gp-redlink-upgrade-modal__options {
        flex-direction: column;
        min-height: 0;
    }

    .gp-redlink-upgrade-modal__option {
        padding: 30px 20px;
    }
}

/* -------------------------------------------------------------------------- */

/* Red Link Partner Registration Form (Figma: node 5136-39492)                */

/* -------------------------------------------------------------------------- */

.gp-redlink-dash__shell--regist-form {
    align-items: center;
    gap: 30px;
    padding: 30px 16px;
}

@media (min-width: 768px) {
    .gp-redlink-dash__shell--regist-form {
        padding: 50px;
    }
}

.gp-redlink-regist-form {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 30px;
}

.gp-redlink-regist-form__head {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.gp-redlink-regist-form__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.4;
    color: #ffffff;
    text-transform: capitalize;
}

.gp-redlink-regist-form__subtitle {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #d9e2ec;
    text-transform: capitalize;
}

.gp-redlink-regist-form__box {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
    padding: 24px 16px;
    border: 1px solid #262626;
    border-radius: 10px;
    background: rgba(22, 23, 26, 0.8);
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .gp-redlink-regist-form__box {
        padding: 40px;
    }
}

.gp-redlink-regist-form__section-head {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 5px;
}

.gp-redlink-regist-form__section-head-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.gp-redlink-regist-form__section-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-redlink-regist-form__section-title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.4;
    color: #ffffff;
    text-transform: capitalize;
}

.gp-redlink-regist-form__section-desc {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #9fb3c8;
    text-transform: capitalize;
}

.gp-redlink-regist-form__divider {
    width: 100%;
    height: 1px;
    background: #262626;
}

.gp-redlink-regist-form__fields {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 40px;
    padding-top: 20px;
}

.gp-redlink-regist-form__field {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 15px;
}

.gp-redlink-regist-form__upload-label {
    display: flex;
    width: 100%;
    cursor: pointer;
    flex-direction: column;
    gap: 15px;
}

.gp-redlink-regist-form__field--half {
    min-width: 0px;
    flex: 1 1 0%;
}

.gp-redlink-regist-form__label {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.4;
    color: #ffffff;
    text-transform: capitalize;
}

.gp-redlink-regist-form__required {
    color: #ff3d3d;
}

.gp-redlink-regist-form__input {
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid #3b3b3b;
    border-radius: 10px;
    background-color: #1f2024;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #ffffff;
}

    .gp-redlink-regist-form__input::-moz-placeholder {
        color: #829ab1;
    }

    .gp-redlink-regist-form__input::placeholder {
        color: #829ab1;
    }

    .gp-redlink-regist-form__input:focus-visible {
        outline: 2px solid #1caee7;
        outline-offset: 2px;
    }

.gp-redlink-regist-form__row {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 40px;
}

@media (min-width: 768px) {
    .gp-redlink-regist-form__row {
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
    }
}

.gp-redlink-regist-form__upload {
    position: relative;
    display: block;
    width: 100%;
    cursor: pointer;
}

.gp-redlink-regist-form__upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.gp-redlink-regist-form__upload-inner {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    padding: 20px;
    border: 1px dashed #3b3b3b;
    border-radius: 10px;
    background-color: #1f2024;
    box-sizing: border-box;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.gp-redlink-regist-form__upload:hover .gp-redlink-regist-form__upload-inner,
.gp-redlink-regist-form__upload:focus-within .gp-redlink-regist-form__upload-inner {
    border-color: #829ab1;
}

.gp-redlink-regist-form__upload-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-redlink-regist-form__upload-text {
    min-width: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #829ab1;
    text-transform: capitalize;
    word-break: break-word;
}

.gp-redlink-regist-form__upload--has-file .gp-redlink-regist-form__upload-text {
    color: #ffffff;
}

.gp-redlink-regist-form__hint {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #ff3d3d;
    text-transform: capitalize;
}

.gp-redlink-regist-form__field--error .gp-redlink-regist-form__input {
    border-color: #ff5f57;
}

    .gp-redlink-regist-form__field--error .gp-redlink-regist-form__input:focus-visible {
        outline-color: #ff5f57;
    }

.gp-redlink-regist-form__error {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #ff3d3d;
    text-transform: capitalize;
}

.gp-redlink-regist-form .gp-shop-redeem-modal__select-field {
    gap: 0;
}

.gp-redlink-regist-form .gp-shop-redeem-modal__select {
    height: auto;
    min-height: 68px;
    padding: 20px 52px 20px 20px;
    border: 1px solid #3b3b3b;
    border-radius: 10px;
    background-color: #1f2024;
    box-shadow: none;
    font-size: 16px;
    line-height: 28px;
    color: #829ab1;
    background-image: none;
}

.gp-redlink-regist-form .gp-shop-redeem-modal__select-trigger {
    min-height: 68px;
    padding: 20px 52px 20px 20px;
    border: 1px solid #3b3b3b;
    border-radius: 10px;
    background-color: #1f2024;
    box-shadow: none;
    font-size: 16px;
    line-height: 28px;
    color: #829ab1;
}

.gp-redlink-regist-form .gp-shop-redeem-modal__select-wrap--selected .gp-shop-redeem-modal__select-trigger {
    color: #ffffff;
}

.gp-redlink-regist-form .gp-shop-redeem-modal__select-wrap--open .gp-shop-redeem-modal__select-trigger {
    color: #ffffff;
}

.gp-redlink-regist-form .gp-shop-redeem-modal__select-caret {
    width: 28px;
    height: 28px;
    right: 20px;
}

.gp-redlink-regist-form .gp-shop-redeem-modal__select-options {
    border: 1px solid #3b3b3b;
    background-color: #1f2024;
}

.gp-redlink-regist-form .gp-shop-redeem-modal__select-option {
    color: #829ab1;
}

    .gp-redlink-regist-form .gp-shop-redeem-modal__select-option:hover,
    .gp-redlink-regist-form .gp-shop-redeem-modal__select-option:focus-visible,
    .gp-redlink-regist-form .gp-shop-redeem-modal__select-option--active {
        color: #ffffff;
        background-color: rgba(255, 255, 255, 0.08);
    }

.gp-redlink-regist-form__pdpa {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    border: 1px solid #262626;
    border-radius: 10px;
    background: rgba(22, 23, 26, 0.8);
    box-sizing: border-box;
}

.gp-redlink-regist-form__pdpa-copy {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 5px;
}

.gp-redlink-regist-form__pdpa-title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 28px;
    color: #1caee7;
    text-transform: capitalize;
}

.gp-redlink-regist-form__pdpa-body {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #d9e2ec;
    text-transform: capitalize;
}

    .gp-redlink-regist-form__pdpa-body > p {
        margin: 0;
    }

.gp-redlink-regist-form__pdpa-em {
    font-weight: 700;
    color: #ffffff;
}

.gp-redlink-regist-form__pdpa-list {
    margin: 0;
    padding-left: 24px;
    list-style-type: disc;
}

    .gp-redlink-regist-form__pdpa-list > li {
        margin: 0;
        padding-left: 0;
    }

.gp-redlink-regist-form__pdpa-consent {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 20px;
}

.gp-redlink-regist-form__pdpa-check {
    display: flex;
    flex-shrink: 0;
    cursor: pointer;
}

.gp-redlink-regist-form__pdpa-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.gp-redlink-regist-form__pdpa-checkbox-ui {
    display: block;
    flex-shrink: 0;
    width: 21px;
    height: 21px;
    border-radius: 5px;
    border: 1px solid #4d413f;
    box-sizing: border-box;
    background: #d9d9d9;
}

.gp-redlink-regist-form__pdpa-checkbox:checked + .gp-redlink-regist-form__pdpa-checkbox-ui {
    background: #c93a3a url("../images/icon-cart-check.svg") center / 14px 14px no-repeat;
    border-color: #ff4a4d;
}

.gp-redlink-regist-form__pdpa-checkbox:focus-visible + .gp-redlink-regist-form__pdpa-checkbox-ui {
    outline: 2px solid #1caee7;
    outline-offset: 2px;
}

.gp-redlink-regist-form__pdpa-consent-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #d9e2ec;
    text-transform: capitalize;
}

.gp-redlink-regist-form__pdpa-link {
    color: #1caee7;
    text-decoration: underline;
    text-underline-offset: 2px;
}

    .gp-redlink-regist-form__pdpa-link:hover {
        opacity: 0.85;
    }

.gp-redlink-regist-form__submit {
    width: 100%;
    cursor: pointer;
    border-width: 0px;
    padding: 20px 30px;
    border: 1px solid #ff4a4d;
    border-radius: 10px;
    background-color: #c93a3a;
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 25px;
    color: #ffffff;
    text-align: center;
    text-transform: capitalize;
    transition: opacity 0.15s ease;
}

    .gp-redlink-regist-form__submit:hover {
        opacity: 0.9;
    }

    .gp-redlink-regist-form__submit:focus-visible {
        outline: 2px solid #ff4a4d;
        outline-offset: 2px;
    }

    .gp-redlink-regist-form__submit--disabled,
    .gp-redlink-regist-form__submit[aria-disabled="true"] {
        --tw-border-opacity: 1;
        border-color: rgb(67 67 67 / var(--tw-border-opacity, 1));
        --tw-bg-opacity: 1;
        background-color: rgb(45 45 45 / var(--tw-bg-opacity, 1));
        cursor: not-allowed;
        pointer-events: none;
        opacity: 1;
    }

.gp-redlink-regist-form__support {
    width: 100%;
    text-align: center;
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-transform: capitalize;
}

.gp-redlink-regist-form__support-muted {
    color: #829ab1;
}

.gp-redlink-regist-form__support-link {
    color: #1caee7;
    text-decoration: underline;
    text-underline-offset: 2px;
}

    .gp-redlink-regist-form__support-link:hover {
        opacity: 0.85;
    }

@media (max-width: 767px) {
    .gp-redlink-regist-form__title {
        font-size: 18px;
    }

    .gp-redlink-regist-form__subtitle {
        font-size: 16px;
        line-height: 24px;
    }

    .gp-redlink-regist-form__label {
        font-size: 16px;
    }

    .gp-redlink-regist-form__submit {
        font-size: 18px;
    }
}

/* Red Link regist confirm modal (Figma: node 5118:38227 "Pop up ยืนยันอัปโหลดเอกสาร") */

.gp-redlink-regist-confirm-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 73;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-redlink-regist-confirm-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-redlink-regist-confirm-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.7);
    cursor: default;
    pointer-events: auto;
}

.gp-redlink-regist-confirm-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 658px;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-redlink-regist-confirm-modal__dialog {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    background-color: #1a1b1e;
    border: 1px solid #343537;
    border-radius: 10px;
    box-sizing: border-box;
}

.gp-redlink-regist-confirm-modal__head {
    position: relative;
    display: flex;
    width: 100%;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 25px 30px;
    border: 1px solid #801111;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(-25.34deg, #17181b 31.875%, #911212 65.249%);
    box-shadow: inset 0 0 41.7px 0 rgba(201, 11, 11, 0.29);
}

.gp-redlink-regist-confirm-modal__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 14px;
    color: #ffffff;
    text-transform: capitalize;
}

.gp-redlink-regist-confirm-modal__subtitle {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #d9e2ec;
}

.gp-redlink-regist-confirm-modal__body {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 20px;
    padding: 30px;
    border: 1px solid #801111;
    border-top: none;
    border-radius: 0 0 10px 10px;
    background-color: #1a1b1e;
    box-sizing: border-box;
}

.gp-redlink-regist-confirm-modal__summary {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #bcccdc #3d4350;
}

    .gp-redlink-regist-confirm-modal__summary::-webkit-scrollbar {
        width: 8px;
    }

    .gp-redlink-regist-confirm-modal__summary::-webkit-scrollbar-track {
        background: #3d4350;
        border-radius: 2px;
    }

    .gp-redlink-regist-confirm-modal__summary::-webkit-scrollbar-thumb {
        background: #bcccdc;
        border-radius: 2px;
    }

.gp-redlink-regist-confirm-modal__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 16px;
}

.gp-redlink-regist-confirm-modal__row-label {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    line-height: 28px;
    color: #829ab1;
    text-transform: capitalize;
}

.gp-redlink-regist-confirm-modal__row-value {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    line-height: 14px;
    color: #ffffff;
    text-align: right;
    word-break: break-word;
}

.gp-redlink-regist-confirm-modal__divider {
    height: 1px;
    width: 100%;
    flex-shrink: 0;
    background-color: #334e68;
    opacity: 0.9;
}

.gp-redlink-regist-confirm-modal__notice {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
    padding: 15px;
    border: 1px solid #febc2f;
    border-radius: 10px;
    background: rgba(254, 188, 47, 0.1);
    box-sizing: border-box;
}

.gp-redlink-regist-confirm-modal__notice-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-redlink-regist-confirm-modal__notice-text {
    margin: 0;
    flex: 1 1 0;
    min-width: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #febc2f;
    text-transform: capitalize;
}

.gp-redlink-regist-confirm-modal__actions {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    flex-direction: column;
    gap: 10px;
}

.gp-redlink-regist-confirm-modal__confirm,
.gp-redlink-regist-confirm-modal__cancel {
    display: inline-flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    height: 60px;
    border-radius: 10px;
    padding: 10px 30px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    text-align: center;
    box-sizing: border-box;
}

.gp-redlink-regist-confirm-modal__confirm {
    background-color: #1caee7;
    color: #020e1f;
    font-weight: 500;
}

    .gp-redlink-regist-confirm-modal__confirm:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-redlink-regist-confirm-modal__cancel {
    background-color: transparent;
    border: 1px solid #486581;
    color: #829ab1;
    font-weight: 400;
}

    .gp-redlink-regist-confirm-modal__cancel:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

body.gp-redlink-regist-confirm-modal-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .gp-redlink-regist-confirm-modal__body {
        padding: 20px;
    }

    .gp-redlink-regist-confirm-modal__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .gp-redlink-regist-confirm-modal__row-value {
        text-align: left;
    }
}

/* Red Link exchange confirm modal (Figma: node 5121:70848 "Pop up ยืนยันแลกเงิน") */

.gp-redlink-exchange-confirm-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 73;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-redlink-exchange-confirm-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-redlink-exchange-confirm-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.7);
    cursor: default;
    pointer-events: auto;
}

.gp-redlink-exchange-confirm-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 658px;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-redlink-exchange-confirm-modal__dialog {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    background-color: #1a1b1e;
    border: 1px solid #343537;
    border-radius: 10px;
    box-sizing: border-box;
}

.gp-redlink-exchange-confirm-modal__head {
    position: relative;
    display: flex;
    width: 100%;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 25px 30px;
    border: 1px solid #801111;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(-25.34deg, #17181b 31.875%, #911212 65.249%);
    box-shadow: inset 0 0 41.7px 0 rgba(201, 11, 11, 0.29);
}

.gp-redlink-exchange-confirm-modal__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 14px;
    color: #ffffff;
    text-transform: capitalize;
}

.gp-redlink-exchange-confirm-modal__subtitle {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #d9e2ec;
}

.gp-redlink-exchange-confirm-modal__body {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 20px;
    padding: 30px;
    border: 1px solid #801111;
    border-top: none;
    border-radius: 0 0 10px 10px;
    background-color: #1a1b1e;
    box-sizing: border-box;
}

.gp-redlink-exchange-confirm-modal__summary {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #bcccdc #3d4350;
}

    .gp-redlink-exchange-confirm-modal__summary::-webkit-scrollbar {
        width: 8px;
    }

    .gp-redlink-exchange-confirm-modal__summary::-webkit-scrollbar-track {
        background: #3d4350;
        border-radius: 2px;
    }

    .gp-redlink-exchange-confirm-modal__summary::-webkit-scrollbar-thumb {
        background: #bcccdc;
        border-radius: 2px;
    }

.gp-redlink-exchange-confirm-modal__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 16px;
}

.gp-redlink-exchange-confirm-modal__row-label {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    line-height: 28px;
    color: #829ab1;
    text-transform: capitalize;
}

.gp-redlink-exchange-confirm-modal__row-value {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    line-height: 14px;
    color: #ffffff;
    text-align: right;
    word-break: break-word;
}

.gp-redlink-exchange-confirm-modal__row-value--credit {
    color: #ff5f57;
}

.gp-redlink-exchange-confirm-modal__row-value--money {
    color: #27c840;
}

.gp-redlink-exchange-confirm-modal__divider {
    height: 1px;
    width: 100%;
    flex-shrink: 0;
    background-color: #334e68;
    opacity: 0.9;
}

.gp-redlink-exchange-confirm-modal__notice {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
    padding: 15px;
    border: 1px solid #febc2f;
    border-radius: 10px;
    background: rgba(254, 188, 47, 0.1);
    box-sizing: border-box;
}

.gp-redlink-exchange-confirm-modal__notice-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-redlink-exchange-confirm-modal__notice-text {
    margin: 0;
    flex: 1 1 0;
    min-width: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #febc2f;
    text-transform: capitalize;
}

.gp-redlink-exchange-confirm-modal__actions {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    flex-direction: column;
    gap: 10px;
}

.gp-redlink-exchange-confirm-modal__confirm,
.gp-redlink-exchange-confirm-modal__cancel {
    display: inline-flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    height: 60px;
    border-radius: 10px;
    padding: 10px 30px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    text-align: center;
    box-sizing: border-box;
}

.gp-redlink-exchange-confirm-modal__confirm {
    background-color: #1caee7;
    color: #020e1f;
    font-weight: 500;
}

    .gp-redlink-exchange-confirm-modal__confirm:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-redlink-exchange-confirm-modal__cancel {
    background-color: transparent;
    border: 1px solid #486581;
    color: #829ab1;
    font-weight: 400;
}

    .gp-redlink-exchange-confirm-modal__cancel:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

body.gp-redlink-exchange-confirm-modal-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .gp-redlink-exchange-confirm-modal__body {
        padding: 20px;
    }

    .gp-redlink-exchange-confirm-modal__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .gp-redlink-exchange-confirm-modal__row-value {
        text-align: left;
    }
}

/* Red Link exchange success modal (Figma: node 5121:71161 "Pop up ยื่นคำขอแลกเงินสำเร็จ") */

.gp-redlink-exchange-success-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 74;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-redlink-exchange-success-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-redlink-exchange-success-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.7);
    cursor: default;
    pointer-events: auto;
}

.gp-redlink-exchange-success-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 644px;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-redlink-exchange-success-modal__dialog {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    gap: 30px;
    padding: 40px 30px;
    background-color: #1a1b1e;
    border: 1px solid #343537;
    border-radius: 10px;
    box-sizing: border-box;
}

.gp-redlink-exchange-success-modal__hero {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.gp-redlink-exchange-success-modal__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
}

    .gp-redlink-exchange-success-modal__icon img {
        width: 60px;
        height: 60px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-redlink-exchange-success-modal__hero-text {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.gp-redlink-exchange-success-modal__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: normal;
    color: #ffffff;
    text-align: center;
}

.gp-redlink-exchange-success-modal__subtitle {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #ffffff;
    text-align: center;
}

.gp-redlink-exchange-success-modal__actions {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 350px;
}

.gp-redlink-exchange-success-modal__primary,
.gp-redlink-exchange-success-modal__secondary {
    display: inline-flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    text-decoration-line: none;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    height: 60px;
    border-radius: 10px;
    padding: 10px 30px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    text-align: center;
    box-sizing: border-box;
}

.gp-redlink-exchange-success-modal__primary {
    background-color: #1caee7;
    color: #020e1f;
    font-weight: 500;
    border: 0;
}

    .gp-redlink-exchange-success-modal__primary:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-redlink-exchange-success-modal__secondary {
    background-color: transparent;
    border: 1px solid #486581;
    color: #829ab1;
    font-weight: 400;
}

    .gp-redlink-exchange-success-modal__secondary:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

body.gp-redlink-exchange-success-modal-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .gp-redlink-exchange-success-modal__dialog {
        padding: 30px 20px;
    }

    .gp-redlink-exchange-success-modal__title {
        font-size: 20px;
    }

    .gp-redlink-exchange-success-modal__subtitle {
        font-size: 16px;
        line-height: 24px;
    }
}

/* Red Link regist success modal (Figma: node 5118:37763 "Pop up ยื่นคำขออัปเกรดสำเร็จ") */

.gp-redlink-regist-success-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 74;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-redlink-regist-success-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-redlink-regist-success-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.7);
    cursor: default;
    pointer-events: auto;
}

.gp-redlink-regist-success-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 644px;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-redlink-regist-success-modal__dialog {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    gap: 30px;
    padding: 40px 30px;
    background-color: #1a1b1e;
    border: 1px solid #343537;
    border-radius: 10px;
    box-sizing: border-box;
}

.gp-redlink-regist-success-modal__hero {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.gp-redlink-regist-success-modal__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
}

    .gp-redlink-regist-success-modal__icon img {
        width: 60px;
        height: 60px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-redlink-regist-success-modal__hero-text {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.gp-redlink-regist-success-modal__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: normal;
    color: #ffffff;
    text-align: center;
}

.gp-redlink-regist-success-modal__subtitle {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #ffffff;
    text-align: center;
}

.gp-redlink-regist-success-modal__actions {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 350px;
}

.gp-redlink-regist-success-modal__primary,
.gp-redlink-regist-success-modal__secondary {
    display: inline-flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    text-decoration-line: none;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    height: 60px;
    border-radius: 10px;
    padding: 10px 30px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    text-align: center;
    box-sizing: border-box;
}

.gp-redlink-regist-success-modal__primary {
    background-color: #1caee7;
    color: #020e1f;
    font-weight: 500;
    border: 0;
}

    .gp-redlink-regist-success-modal__primary:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-redlink-regist-success-modal__secondary {
    background-color: transparent;
    border: 1px solid #486581;
    color: #829ab1;
    font-weight: 400;
}

    .gp-redlink-regist-success-modal__secondary:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

body.gp-redlink-regist-success-modal-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .gp-redlink-regist-success-modal__dialog {
        padding: 30px 20px;
    }

    .gp-redlink-regist-success-modal__title {
        font-size: 20px;
    }

    .gp-redlink-regist-success-modal__subtitle {
        font-size: 16px;
        line-height: 24px;
    }
}

/* Red Link activate modal (Figma: node 5129:38496 "Comfirmation popup เปิดใช้งาน Red Link") */

.gp-redlink-activate-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 74;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-redlink-activate-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-redlink-activate-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.7);
    cursor: default;
    pointer-events: auto;
}

.gp-redlink-activate-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 740px;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-redlink-activate-modal__dialog {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    gap: 30px;
    padding: 30px;
    background-color: #1a1b1e;
    border-radius: 20px;
    box-sizing: border-box;
}

.gp-redlink-activate-modal__hero {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.gp-redlink-activate-modal__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
}

    .gp-redlink-activate-modal__icon img {
        width: 60px;
        height: 60px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-redlink-activate-modal__hero-text {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.gp-redlink-activate-modal__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: normal;
    color: #ffffff;
    text-align: center;
}

.gp-redlink-activate-modal__subtitle {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #ffffff;
    text-align: center;
}

.gp-redlink-activate-modal__actions {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-redlink-activate-modal__confirm,
.gp-redlink-activate-modal__cancel {
    display: inline-flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    height: 60px;
    border-radius: 10px;
    padding: 10px 30px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    text-align: center;
    box-sizing: border-box;
}

.gp-redlink-activate-modal__confirm {
    background-color: #1caee7;
    color: #020e1f;
    font-weight: 500;
}

    .gp-redlink-activate-modal__confirm:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-redlink-activate-modal__cancel {
    background-color: transparent;
    border: 1px solid #486581;
    color: #829ab1;
    font-weight: 400;
}

    .gp-redlink-activate-modal__cancel:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-redlink-activate-modal__note {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    letter-spacing: 0.28px;
    color: #fff;
    text-align: center;
}

body.gp-redlink-activate-modal-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .gp-redlink-activate-modal__dialog {
        padding: 30px 20px;
    }

    .gp-redlink-activate-modal__title {
        font-size: 20px;
    }

    .gp-redlink-activate-modal__subtitle {
        font-size: 16px;
        line-height: 24px;
    }
}

/* -------------------------------------------------------------------------- */

/* Red Link Partner Registration Agreement (Figma: node 4656-32439)           */

/* -------------------------------------------------------------------------- */

.gp-redlink-dash__shell--agreement {
    align-items: center;
    gap: 30px;
    padding: 30px 16px;
}

@media (min-width: 768px) {
    .gp-redlink-dash__shell--agreement {
        padding: 50px 30px;
    }
}

.gp-redlink-regist-agreement {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 30px;
}

.gp-redlink-regist-agreement__head {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.gp-redlink-regist-agreement__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 14px;
    color: #ffffff;
    text-transform: capitalize;
}

.gp-redlink-regist-agreement__subtitle {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #ffffff;
    text-transform: capitalize;
}

.gp-redlink-regist-agreement__box {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
    padding: 30px;
    border: 1px solid #382826;
    border-radius: 10px;
    background: rgba(22, 23, 26, 0.8);
    box-sizing: border-box;
}

.gp-redlink-regist-agreement__item {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
    padding: 30px;
    border-radius: 10px;
    background: #241e1d;
    box-sizing: border-box;
}

.gp-redlink-regist-agreement__item--important {
    border: 1px solid #e81b1b;
    background: rgba(104, 27, 17, 0.7);
}

.gp-redlink-regist-agreement__item--rate {
    gap: 30px;
    align-items: center;
}

.gp-redlink-regist-agreement__item-body {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.gp-redlink-regist-agreement__item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.gp-redlink-regist-agreement__item-title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 14px;
    color: #ffffff;
    text-transform: capitalize;
}

.gp-redlink-regist-agreement__badge {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 99px;
    background: rgba(131, 66, 57, 0.91);
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 14px;
    color: #ffdddd;
    text-transform: capitalize;
}

.gp-redlink-regist-agreement__item-text {
    margin: 0;
    text-indent: 1rem;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #d9e2ec;
    text-transform: capitalize;
}

.gp-redlink-regist-agreement__em {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    color: #ffffff;
}

.gp-redlink-regist-agreement__list {
    display: flex;
    width: 100%;
    flex-direction: column;
    margin: 0;
    padding: 0 0 0 24px;
    list-style: disc;
    gap: 0;
}

.gp-redlink-regist-agreement__list-item {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #d9e2ec;
    text-transform: capitalize;
}

.gp-redlink-regist-agreement__table-wrap {
    width: 100%;
}

@media (min-width: 1024px) {
    .gp-redlink-regist-agreement__table-wrap {
        max-width: 600px;
    }
}

.gp-redlink-regist-agreement__table-wrap {
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #627d98 #1f2126;
    border: 1px solid #554846;
    border-radius: 10px;
    box-sizing: border-box;
}

    .gp-redlink-regist-agreement__table-wrap::-webkit-scrollbar {
        height: 6px;
    }

    .gp-redlink-regist-agreement__table-wrap::-webkit-scrollbar-track {
        background: #1f2126;
        border-radius: 4px;
    }

    .gp-redlink-regist-agreement__table-wrap::-webkit-scrollbar-thumb {
        background: #627d98;
        border-radius: 4px;
    }

.gp-redlink-regist-agreement__table {
    width: 100%;
    min-width: 400px;
}

@media (min-width: 1024px) {
    .gp-redlink-regist-agreement__table {
        max-width: 600px;
    }
}

.gp-redlink-regist-agreement__table {
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}

.gp-redlink-regist-agreement__table-head {
    background: #2b1d21;
}

.gp-redlink-regist-agreement__table-body {
    background: #171416;
}

.gp-redlink-regist-agreement__table-th,
.gp-redlink-regist-agreement__table-td {
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: normal;
    white-space: nowrap;
    box-sizing: border-box;
    vertical-align: middle;
}

.gp-redlink-regist-agreement__table-th {
    padding: 20px 30px;
    font-weight: 600;
    color: #d9e2ec;
    text-align: left;
}

.gp-redlink-regist-agreement__table-th--end {
    text-align: right;
}

.gp-redlink-regist-agreement__table-td {
    padding: 18px 30px;
    font-weight: 400;
    color: #ffffff;
    text-align: left;
    border-top: 1px solid #382826;
}

.gp-redlink-regist-agreement__table-td--amount {
    color: #27c840;
    text-align: right;
}

.gp-redlink-regist-agreement__table-body .gp-redlink-regist-agreement__table-row:first-child .gp-redlink-regist-agreement__table-td {
    border-top: none;
}

.gp-redlink-regist-agreement__consent {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 30px;
    border: 1px solid #382826;
    border-radius: 10px;
    background: rgba(36, 30, 29, 0.8);
    box-sizing: border-box;
}

.gp-redlink-regist-agreement__consent-check {
    display: flex;
    flex-shrink: 0;
    cursor: pointer;
}

.gp-redlink-regist-agreement__checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.gp-redlink-regist-agreement__checkbox-ui {
    display: block;
    flex-shrink: 0;
    width: 21px;
    height: 21px;
    margin-top: 4px;
    border-radius: 5px;
    border: 1px solid #4d413f;
    box-sizing: border-box;
    background: #d9d9d9;
}

.gp-redlink-regist-agreement__checkbox:checked + .gp-redlink-regist-agreement__checkbox-ui {
    background: #c93a3a url("../images/icon-cart-check.svg") center / 14px 14px no-repeat;
    border-color: #ff4a4d;
}

.gp-redlink-regist-agreement__consent-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #d9e2ec;
    text-transform: capitalize;
}

.gp-redlink-regist-agreement__consent-highlight {
    color: #1caee7;
    text-decoration: none;
}

.gp-redlink-regist-agreement__submit {
    display: inline-flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    text-decoration-line: none;
    gap: 50px;
    padding: 20px 30px;
    border: 1px solid #ff4a4d;
    border-radius: 10px;
    background-color: #c93a3a;
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 25px;
    color: #ffffff;
    text-align: center;
    text-transform: capitalize;
    transition: opacity 0.15s ease;
    box-sizing: border-box;
}

    .gp-redlink-regist-agreement__submit:hover {
        opacity: 0.9;
    }

    .gp-redlink-regist-agreement__submit:focus-visible {
        outline: 2px solid #ff4a4d;
        outline-offset: 2px;
    }

.gp-redlink-regist-agreement__submit-icon {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-redlink-regist-agreement__submit--disabled,
.gp-redlink-regist-agreement__submit[aria-disabled="true"] {
    --tw-border-opacity: 1;
    border-color: rgb(67 67 67 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(45 45 45 / var(--tw-bg-opacity, 1));
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 767px) {
    .gp-redlink-regist-agreement__box,
    .gp-redlink-regist-agreement__item,
    .gp-redlink-regist-agreement__consent {
        padding: 20px 16px;
    }

    .gp-redlink-regist-agreement__submit {
        gap: 20px;
        font-size: 18px;
    }
}

/* -------------------------------------------------------------------------- */

/* Red Link Doc Check Guild                         */

/* -------------------------------------------------------------------------- */

.gp-redlink-dash__shell--doc-check {
    align-items: center;
    gap: 30px;
    padding: 30px 16px;
}

@media (min-width: 768px) {
    .gp-redlink-dash__shell--doc-check {
        padding: 50px 30px;
    }
}

.gp-redlink-doc-check {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 30px;
}

.gp-redlink-doc-check__head {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.gp-redlink-doc-check__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 14px;
    color: #ffffff;
    text-transform: capitalize;
}

.gp-redlink-doc-check__subtitle {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #d9e2ec;
    text-transform: capitalize;
}

.gp-redlink-doc-check__box {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 30px;
    padding: 24px 16px;
    border: 1px solid #262626;
    border-radius: 10px;
    background: rgba(22, 23, 26, 0.8);
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .gp-redlink-doc-check__box {
        padding: 40px;
    }
}

.gp-redlink-doc-check__notice {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    border: 1px solid #febc2f;
    border-radius: 10px;
    background: rgba(254, 188, 47, 0.1);
    box-sizing: border-box;
}

.gp-redlink-doc-check__notice-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-redlink-doc-check__notice-text {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #febc2f;
    text-transform: capitalize;
}

.gp-redlink-doc-check__divider {
    width: 100%;
    height: 1px;
    background: #262626;
}

.gp-redlink-doc-check__docs {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
}

.gp-redlink-doc-check__doc-card {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
    border: 1px solid #febc2f;
    border-radius: 10px;
    background: rgba(254, 188, 47, 0.16);
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .gp-redlink-doc-check__doc-card {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }
}

.gp-redlink-doc-check__doc-main {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    align-items: center;
    gap: 10px;
}

.gp-redlink-doc-check__doc-icon-wrap {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 10px;
    border-radius: 10px;
    background: #504327;
    box-sizing: border-box;
}

.gp-redlink-doc-check__doc-icon {
    width: 24px;
    height: 24px;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-redlink-doc-check__doc-copy {
    display: flex;
    min-width: 0px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}

.gp-redlink-doc-check__doc-title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
    text-transform: capitalize;
}

.gp-redlink-doc-check__doc-meta {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #8f8f8f;
    text-transform: capitalize;
}

.gp-redlink-doc-check__doc-badge {
    display: inline-flex;
    width: 100%;
    flex-shrink: 0;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .gp-redlink-doc-check__doc-badge {
        width: -moz-fit-content;
        width: fit-content;
        flex-grow: 0;
    }
}

.gp-redlink-doc-check__doc-badge {
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid #febc2f;
    border-radius: 99px;
    background: rgba(254, 188, 47, 0.13);
    box-sizing: border-box;
}

.gp-redlink-doc-check__doc-badge-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-redlink-doc-check__doc-badge-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: normal;
    color: #febc2f;
    text-transform: capitalize;
    white-space: nowrap;
}

.gp-redlink-doc-check__fields {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 40px;
}

.gp-redlink-doc-check__field {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 15px;
}

.gp-redlink-doc-check__field--half {
    min-width: 0px;
    flex: 1 1 0%;
}

.gp-redlink-doc-check__label {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 14px;
    color: #ffffff;
    text-transform: capitalize;
}

.gp-redlink-doc-check__input {
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid #2d2d2d;
    border-radius: 10px;
    background-color: #1f2024;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #ffffff;
    text-transform: capitalize;
}

    .gp-redlink-doc-check__input:disabled {
        opacity: 1;
        cursor: default;
    }

        .gp-redlink-doc-check__input:disabled:focus-visible {
            outline: none;
        }

.gp-redlink-doc-check__row {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 40px;
}

@media (min-width: 768px) {
    .gp-redlink-doc-check__row {
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
    }
}

.gp-redlink-doc-check__foot {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 28px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-transform: capitalize;
    text-align: center;
}

.gp-redlink-doc-check__foot-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.gp-redlink-doc-check__foot-muted {
    color: #829ab1;
}

.gp-redlink-doc-check__foot-link {
    color: #1caee7;
    text-decoration: underline;
    text-underline-offset: 2px;
}

    .gp-redlink-doc-check__foot-link:hover {
        opacity: 0.85;
    }

.gp-redlink-doc-check__foot-divider {
    width: 1px;
    height: 20px;
    flex-shrink: 0;
    background: #262626;
}

@media (max-width: 767px) {
    .gp-redlink-doc-check__title {
        font-size: 18px;
    }

    .gp-redlink-doc-check__subtitle {
        font-size: 16px;
        line-height: 24px;
    }

    .gp-redlink-doc-check__foot-divider {
        display: none;
    }

    .gp-redlink-doc-check__foot {
        flex-direction: column;
        gap: 8px;
    }
}

.gp-redlink-doc-check__notice--error {
    border-color: #882925;
    background: rgba(255, 95, 87, 0.1);
}

    .gp-redlink-doc-check__notice--error .gp-redlink-doc-check__notice-text {
        color: #ff5f57;
    }

.gp-redlink-doc-check__doc-card--pass {
    border-color: #1d842d;
    background: rgba(39, 200, 64, 0.15);
}

@media (min-width: 768px) {
    .gp-redlink-doc-check__doc-card--pass {
        flex-direction: row;
        align-items: center;
    }
}

.gp-redlink-doc-check__doc-card--fail {
    border-color: #ff5f57;
    background: rgba(255, 95, 87, 0.1);
    gap: 20px;
}

@media (min-width: 768px) {
    .gp-redlink-doc-check__doc-card--fail {
        flex-direction: column;
        align-items: stretch;
    }
}

.gp-redlink-doc-check__doc-card--fail .gp-redlink-doc-check__doc-head {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

@media (min-width: 768px) {
    .gp-redlink-doc-check__doc-card--fail .gp-redlink-doc-check__doc-head {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }
}

.gp-redlink-doc-check__doc-icon-wrap--pass {
    background: #275032;
}

.gp-redlink-doc-check__doc-icon-wrap--fail {
    background: rgba(255, 56, 60, 0.16);
}

.gp-redlink-doc-check__doc-badge--pass {
    border-color: #27c840;
    background: rgba(39, 200, 64, 0.1);
}

    .gp-redlink-doc-check__doc-badge--pass .gp-redlink-doc-check__doc-badge-text {
        color: #27c840;
    }

.gp-redlink-doc-check__doc-badge--fail {
    border-color: #ff5f57;
    background: rgba(255, 56, 60, 0.16);
}

    .gp-redlink-doc-check__doc-badge--fail .gp-redlink-doc-check__doc-badge-text {
        color: #ff5f57;
    }

.gp-redlink-doc-check__doc-badge-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    flex-shrink: 0;
}

.gp-redlink-doc-check__doc-badge-note {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #ff5f57;
    text-transform: capitalize;
    text-align: right;
    white-space: nowrap;
}

.gp-redlink-doc-check__doc-upload {
    position: relative;
    display: block;
    width: 100%;
    cursor: pointer;
}

.gp-redlink-doc-check__doc-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.gp-redlink-doc-check__doc-upload-inner {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    padding: 20px;
    border: 1px dashed #3b3b3b;
    border-radius: 10px;
    background-color: #1f2024;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.gp-redlink-doc-check__doc-upload:hover .gp-redlink-doc-check__doc-upload-inner,
.gp-redlink-doc-check__doc-upload:focus-within .gp-redlink-doc-check__doc-upload-inner {
    border-color: #829ab1;
}

.gp-redlink-doc-check__doc-upload-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-redlink-doc-check__doc-upload-text {
    min-width: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #829ab1;
    text-transform: capitalize;
    word-break: break-word;
}

.gp-redlink-doc-check__doc-fail-group {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-redlink-doc-check__doc-hint {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #ff3d3d;
    text-transform: capitalize;
}

.gp-redlink-doc-check__verified {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid #2d2d2d;
    border-radius: 10px;
    background-color: #1f2024;
}

.gp-redlink-doc-check__verified-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: normal;
    color: #27c840;
    text-transform: capitalize;
}

.gp-redlink-doc-check__verified-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-redlink-doc-check__label-required {
    color: #ff3d3d;
}

.gp-redlink-doc-check__input::-moz-placeholder {
    color: #829ab1;
}

.gp-redlink-doc-check__input::placeholder {
    color: #829ab1;
}

.gp-redlink-doc-check__input:focus-visible {
    outline: 2px solid #1caee7;
    outline-offset: 2px;
}

.gp-redlink-doc-check__field--error .gp-redlink-doc-check__input {
    border-color: #ff5f57;
}

    .gp-redlink-doc-check__field--error .gp-redlink-doc-check__input:focus-visible {
        outline-color: #ff5f57;
    }

.gp-redlink-doc-check .gp-shop-redeem-modal__select-trigger {
    min-height: 68px;
    padding: 20px 52px 20px 20px;
    border: 1px solid #3b3b3b;
    border-radius: 10px;
    background-color: #1f2024;
    box-shadow: none;
    font-size: 16px;
    line-height: 28px;
    color: #829ab1;
}

.gp-redlink-doc-check .gp-shop-redeem-modal__select-wrap--selected .gp-shop-redeem-modal__select-trigger {
    color: #ffffff;
}

.gp-redlink-doc-check .gp-shop-redeem-modal__select-wrap--open .gp-shop-redeem-modal__select-trigger {
    color: #ffffff;
}

.gp-redlink-doc-check .gp-shop-redeem-modal__select-caret {
    width: 28px;
    height: 28px;
    right: 20px;
}

.gp-redlink-doc-check .gp-shop-redeem-modal__select-options {
    border: 1px solid #3b3b3b;
    background-color: #1f2024;
}

.gp-redlink-doc-check .gp-shop-redeem-modal__select-option {
    color: #829ab1;
}

    .gp-redlink-doc-check .gp-shop-redeem-modal__select-option:hover,
    .gp-redlink-doc-check .gp-shop-redeem-modal__select-option:focus-visible,
    .gp-redlink-doc-check .gp-shop-redeem-modal__select-option--active {
        color: #ffffff;
        background-color: rgba(255, 255, 255, 0.08);
    }

.gp-redlink-doc-check__field--error .gp-shop-redeem-modal__select-trigger {
    border-color: #ff5f57;
}

    .gp-redlink-doc-check__field--error .gp-shop-redeem-modal__select-trigger:focus-visible {
        outline-color: #ff5f57;
    }

.gp-redlink-doc-check__alert {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    padding: 20px;
    border: 1px solid #ff5f57;
    border-radius: 10px;
    background: rgba(255, 95, 87, 0.1);
    box-sizing: border-box;
}

.gp-redlink-doc-check__alert-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-redlink-doc-check__alert-text {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #ff5f57;
    text-transform: capitalize;
}

.gp-redlink-doc-check__submit {
    width: 100%;
    cursor: pointer;
    border-width: 0px;
    padding: 20px 30px;
    border: 1px solid #ff4a4d;
    border-radius: 10px;
    background-color: #c93a3a;
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 25px;
    color: #ffffff;
    text-align: center;
    text-transform: capitalize;
    transition: opacity 0.15s ease;
}

    .gp-redlink-doc-check__submit:hover {
        opacity: 0.9;
    }

    .gp-redlink-doc-check__submit:focus-visible {
        outline: 2px solid #ff4a4d;
        outline-offset: 2px;
    }

@media (max-width: 767px) {
    .gp-redlink-doc-check__doc-badge-note {
        white-space: normal;
        text-align: left;
    }

    .gp-redlink-doc-check__doc-badge-wrap {
        width: 100%;
        align-items: flex-start;
    }

    .gp-redlink-doc-check__alert-text {
        font-size: 16px;
    }

    .gp-redlink-doc-check__submit {
        font-size: 18px;
    }
}

/* -------------------------------------------------------------------------- */

/* Red Link Exchange (Figma: node 4690-31403)                                 */

/* -------------------------------------------------------------------------- */

.gp-redlink-dash__shell--exchange {
    align-items: center;
    gap: 30px;
    padding: 30px 16px;
}

@media (min-width: 768px) {
    .gp-redlink-dash__shell--exchange {
        padding: 50px 30px;
    }
}

.gp-redlink-exchange {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 30px;
}

.gp-redlink-exchange__head {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 0;
}

.gp-redlink-exchange__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 14px;
    color: #ffffff;
    text-transform: capitalize;
}

.gp-redlink-exchange__balance {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    min-height: 108px;
    padding: 30px;
    border: 1px solid #981b1d;
    border-radius: 10px;
    background: linear-gradient(to bottom, rgba(123, 25, 25, 0.2), rgba(27, 18, 19, 0.2));
    box-sizing: border-box;
}

.gp-redlink-exchange__balance-copy {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.gp-redlink-exchange__balance-title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
}

.gp-redlink-exchange__balance-desc {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #bcccdc;
}

.gp-redlink-exchange__balance-value-wrap {
    display: flex;
    width: 100%;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

.gp-redlink-exchange__balance-value {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: normal;
    color: #ffffff;
}

.gp-redlink-exchange__balance-unit {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #bcccdc;
}

.gp-redlink-exchange__box {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
    padding: 24px 16px;
    border-radius: 10px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .gp-redlink-exchange__box {
        padding: 40px;
    }
}

.gp-redlink-exchange__box--amount {
    border: 1px solid #451919;
    background: rgba(39, 18, 19, 0.8);
}

.gp-redlink-exchange__box--account {
    border: 1px solid #262626;
    background: rgba(22, 23, 26, 0.8);
}

.gp-redlink-exchange__box-head {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 5px;
}

.gp-redlink-exchange__box-head-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.gp-redlink-exchange__box-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-redlink-exchange__box-title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 14px;
    color: #ffffff;
    text-transform: capitalize;
}

.gp-redlink-exchange__box-desc {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #9fb3c8;
    text-transform: capitalize;
}

.gp-redlink-exchange__divider {
    width: 100%;
    height: 1px;
    background: #262626;
}

.gp-redlink-exchange__box--amount .gp-redlink-exchange__divider {
    background: #451919;
}

.gp-redlink-exchange__box-body {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 30px;
    padding-top: 20px;
}

.gp-redlink-exchange__field {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 15px;
}

.gp-redlink-exchange__field--half {
    min-width: 0px;
    flex: 1 1 0%;
}

.gp-redlink-exchange__label {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 30px;
    color: #ffffff;
    text-transform: capitalize;
}

.gp-redlink-exchange__required {
    color: #ff3d3d;
}

.gp-redlink-exchange__exchange-row {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
}

@media (min-width: 768px) {
    .gp-redlink-exchange__exchange-row {
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
    }
}

.gp-redlink-exchange__input {
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid #3c3030;
    border-radius: 10px;
    background-color: #282020;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #ffffff;
    text-transform: capitalize;
}

    .gp-redlink-exchange__input:focus-visible {
        outline: 2px solid #1caee7;
        outline-offset: 2px;
    }

.gp-redlink-exchange__input--readonly {
    border-color: #2d2d2d;
    background-color: #1f2024;
    color: #828282;
}

    .gp-redlink-exchange__input--readonly:disabled {
        opacity: 1;
        cursor: default;
    }

        .gp-redlink-exchange__input--readonly:disabled:focus-visible {
            outline: none;
        }

.gp-redlink-exchange__amount-col {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

@media (min-width: 768px) {
    .gp-redlink-exchange__amount-col {
        min-width: 0px;
        flex: 1 1 0%;
        max-width: 477.5px;
    }
}

.gp-redlink-exchange__select-wrap {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.gp-redlink-exchange__select {
    width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 20px 52px 20px 20px;
    border: 1px solid #3c3030;
    border-radius: 10px;
    background-color: #282020;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #ffffff;
    text-transform: capitalize;
}

.gp-redlink-exchange__select-wrap--custom .gp-redlink-exchange__select {
    position: absolute;
    width: 100%;
    opacity: 0;
    pointer-events: none;
}

.gp-redlink-exchange__select-trigger {
    display: flex;
    width: 100%;
    align-items: center;
    box-sizing: border-box;
    min-height: 68px;
    padding: 20px 52px 20px 20px;
    border: 1px solid #3c3030;
    border-radius: 10px;
    background-color: #282020;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #ffffff;
    text-align: left;
    text-transform: capitalize;
    cursor: pointer;
}

    .gp-redlink-exchange__select-trigger:focus-visible {
        outline: 2px solid #1caee7;
        outline-offset: 2px;
    }

.gp-redlink-exchange__select-wrap--open .gp-redlink-exchange__select-trigger {
    color: #ffffff;
}

.gp-redlink-exchange__select-caret {
    pointer-events: none;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.gp-redlink-exchange__select-wrap--open .gp-redlink-exchange__select-caret {
    transform: translateY(-50%) rotate(180deg);
}

.gp-redlink-exchange__select-options {
    position: absolute;
    width: 100%;
    z-index: 20;
    top: calc(100% + 8px);
    max-height: 240px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #554846;
    border-radius: 10px;
    background-color: #171416;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: #554846 #171416;
}

    .gp-redlink-exchange__select-options::-webkit-scrollbar {
        width: 8px;
    }

    .gp-redlink-exchange__select-options::-webkit-scrollbar-track {
        background: #171416;
        border-radius: 10px;
    }

    .gp-redlink-exchange__select-options::-webkit-scrollbar-thumb {
        background: #554846;
        border-radius: 10px;
    }

        .gp-redlink-exchange__select-options::-webkit-scrollbar-thumb:hover {
            background: #3c3030;
        }

.gp-redlink-exchange__select-wrap--flip-up .gp-redlink-exchange__select-options {
    top: auto;
    bottom: calc(100% + 8px);
}

.gp-redlink-exchange__select-option {
    width: 100%;
    border: none;
    border-bottom: 1px solid #382826;
    background: transparent;
    padding: 18px 30px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #ffffff;
    text-align: left;
    text-transform: capitalize;
    cursor: pointer;
}

    .gp-redlink-exchange__select-option:last-child {
        border-bottom: none;
    }

    .gp-redlink-exchange__select-option:hover,
    .gp-redlink-exchange__select-option:focus-visible,
    .gp-redlink-exchange__select-option--active {
        background-color: #2b1d21;
    }

.gp-redlink-exchange__arrow {
    display: none;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .gp-redlink-exchange__arrow {
        display: flex;
    }
}

.gp-redlink-exchange__arrow {
    width: 25px;
    height: 68px;
}

.gp-redlink-exchange__arrow-icon {
    width: 25px;
    height: 25px;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-redlink-exchange__result-col {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

@media (min-width: 768px) {
    .gp-redlink-exchange__result-col {
        max-width: 477.5px;
    }
}

.gp-redlink-exchange__result {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 20px;
    border: 1px solid #147122;
    border-radius: 10px;
    background: rgba(39, 200, 64, 0.1);
    box-sizing: border-box;
}

.gp-redlink-exchange__result-label {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #ffffff;
    text-transform: capitalize;
}

.gp-redlink-exchange__result-value {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    color: #27c840;
    text-transform: capitalize;
    white-space: nowrap;
}

.gp-redlink-exchange__tax-rows {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
}

.gp-redlink-exchange__tax-row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.gp-redlink-exchange__tax-label,
.gp-redlink-exchange__tax-value {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #a4a4a4;
    text-transform: capitalize;
}

.gp-redlink-exchange__note {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.gp-redlink-exchange__note-title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #9fb3c8;
    text-transform: capitalize;
}

.gp-redlink-exchange__note-list {
    margin: 0;
    padding-left: 24px;
    list-style: disc;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    color: #9fb3c8;
    text-transform: capitalize;
}

    .gp-redlink-exchange__note-list li + li {
        margin-top: 0;
    }

.gp-redlink-exchange__note-link {
    color: #1caee7;
    text-decoration: underline;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none;
}

    .gp-redlink-exchange__note-link:hover {
        color: #4bc4ef;
    }

.gp-redlink-exchange__fields {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 40px;
}

.gp-redlink-exchange__row {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 40px;
}

@media (min-width: 768px) {
    .gp-redlink-exchange__row {
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
    }
}

.gp-redlink-exchange__submit {
    display: inline-flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 20px 30px;
    border: 1px solid #ff4a4d;
    border-radius: 10px;
    background-color: #c93a3a;
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 25px;
    color: #ffffff;
    text-align: center;
    text-transform: capitalize;
    transition: opacity 0.15s ease;
    box-sizing: border-box;
}

    .gp-redlink-exchange__submit:hover {
        opacity: 0.9;
    }

    .gp-redlink-exchange__submit:focus-visible {
        outline: 2px solid #ff4a4d;
        outline-offset: 2px;
    }

.gp-redlink-exchange__foot {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 28px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-transform: capitalize;
    text-align: center;
}

.gp-redlink-exchange__foot-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.gp-redlink-exchange__foot-muted {
    color: #829ab1;
}

.gp-redlink-exchange__foot-link {
    color: #1caee7;
    text-decoration: underline;
    text-underline-offset: 2px;
}

    .gp-redlink-exchange__foot-link:hover {
        opacity: 0.85;
    }

.gp-redlink-exchange__foot-divider {
    width: 1px;
    height: 20px;
    flex-shrink: 0;
    background: #262626;
}

.gp-redlink-exchange__field--error .gp-redlink-exchange__input,
.gp-redlink-exchange__field--error .gp-redlink-exchange__select-trigger {
    border-color: #ff5f57;
}

    .gp-redlink-exchange__field--error .gp-redlink-exchange__input:focus-visible,
    .gp-redlink-exchange__field--error .gp-redlink-exchange__select-trigger:focus-visible {
        outline-color: #ff5f57;
    }

.gp-redlink-exchange__error {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #ff3d3d;
    text-transform: capitalize;
}

@media (min-width: 768px) {
    .gp-redlink-exchange__field--error .gp-redlink-exchange__exchange-row {
        align-items: center;
    }
}

.gp-redlink-exchange__alert {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    padding: 20px;
    border: 1px solid #ff5f57;
    border-radius: 10px;
    background: rgba(255, 95, 87, 0.1);
    box-sizing: border-box;
}

.gp-redlink-exchange__alert-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-redlink-exchange__alert-text {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #ff5f57;
    text-transform: capitalize;
}

@media (max-width: 767px) {
    .gp-redlink-exchange__title {
        font-size: 18px;
    }

    .gp-redlink-exchange__balance {
        flex-direction: column;
        align-items: flex-start;
        min-height: 0;
        padding: 20px;
    }

    .gp-redlink-exchange__balance-value-wrap {
        align-items: flex-end;
    }

    .gp-redlink-exchange__foot-divider {
        display: none;
    }

    .gp-redlink-exchange__foot {
        flex-direction: column;
        gap: 8px;
    }

    .gp-redlink-exchange__submit {
        font-size: 18px;
    }

    .gp-redlink-exchange__alert-text {
        font-size: 16px;
    }
}

/* -------------------------------------------------------------------------- */

/* Red Link Exchange History (Figma: node 4660-33467)                         */

/* -------------------------------------------------------------------------- */

.gp-redlink-exchange-hist {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 30px;
}

.gp-redlink-exchange-hist__head {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.gp-redlink-exchange-hist__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 14px;
    color: #ffffff;
    text-transform: capitalize;
}

.gp-redlink-exchange-hist__desc {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #9fb3c8;
}

.gp-redlink-exchange-hist__history {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    border: 1px solid #382826;
    border-radius: 10px;
    background: #171416;
    box-sizing: border-box;
    overflow: visible;
}

.gp-redlink-exchange-hist__table-wrap {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #583d3a #171416;
}

    .gp-redlink-exchange-hist__table-wrap::-webkit-scrollbar {
        height: 6px;
    }

    .gp-redlink-exchange-hist__table-wrap::-webkit-scrollbar-track {
        background: #171416;
        border-radius: 4px;
    }

    .gp-redlink-exchange-hist__table-wrap::-webkit-scrollbar-thumb {
        background: #583d3a;
        border-radius: 4px;
    }

.gp-redlink-exchange-hist__table {
    width: 100%;
    min-width: 900px;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}

.gp-redlink-exchange-hist__thead {
    background-color: #1e1a1c;
}

.gp-redlink-exchange-hist__thead-row .gp-redlink-exchange-hist__th {
    border-bottom: 1px solid #382826;
}

.gp-redlink-exchange-hist__th {
    padding: 20px 10px 20px 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: normal;
    color: #bcccdc;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

    .gp-redlink-exchange-hist__th:first-child {
        padding-left: 30px;
    }

    .gp-redlink-exchange-hist__th:last-child {
        padding-right: 30px;
    }

    .gp-redlink-exchange-hist__th:nth-child(1),
    .gp-redlink-exchange-hist__cell:nth-child(1) {
        width: 17%;
    }

    .gp-redlink-exchange-hist__th:nth-child(2),
    .gp-redlink-exchange-hist__cell:nth-child(2) {
        width: 17%;
    }

    .gp-redlink-exchange-hist__th:nth-child(3),
    .gp-redlink-exchange-hist__cell:nth-child(3) {
        width: 17%;
    }

    .gp-redlink-exchange-hist__th:nth-child(4),
    .gp-redlink-exchange-hist__cell:nth-child(4) {
        width: 17%;
    }

    .gp-redlink-exchange-hist__th:nth-child(5),
    .gp-redlink-exchange-hist__cell:nth-child(5) {
        width: 32%;
    }

.gp-redlink-exchange-hist__tbody {
    background-color: #171416;
}

.gp-redlink-exchange-hist__row {
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    line-height: normal;
    color: #ffffff;
}

    .gp-redlink-exchange-hist__row + .gp-redlink-exchange-hist__row .gp-redlink-exchange-hist__cell {
        border-top: 1px solid #382826;
    }

.gp-redlink-exchange-hist__cell {
    padding: 10px 10px 10px 0;
    min-width: 0;
    vertical-align: middle;
    white-space: nowrap;
}

.gp-redlink-exchange-hist__tbody .gp-redlink-exchange-hist__row:last-child .gp-redlink-exchange-hist__cell {
    padding-bottom: 20px;
}

.gp-redlink-exchange-hist__cell:first-child {
    padding-left: 30px;
}

.gp-redlink-exchange-hist__cell:last-child {
    padding-right: 30px;
}

.gp-redlink-exchange-hist__cell--money {
    font-weight: 600;
    color: #27c840;
}

.gp-redlink-exchange-hist__status-wrap {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.gp-redlink-exchange-hist__status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 13px;
    border: 1px solid transparent;
    border-radius: 99px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    white-space: nowrap;
}

.gp-redlink-exchange-hist__status-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-redlink-exchange-hist__status--pending {
    background-color: rgba(254, 188, 47, 0.2);
    border-color: #febc2f;
    color: #febc2f;
}

    .gp-redlink-exchange-hist__status--pending .gp-redlink-exchange-hist__status-icon {
        width: 16px;
        height: 16px;
    }

.gp-redlink-exchange-hist__status--approved {
    background-color: rgba(39, 200, 64, 0.2);
    border-color: #27c840;
    color: #27c840;
}

.gp-redlink-exchange-hist__status--rejected {
    background-color: rgba(255, 95, 87, 0.2);
    border-color: #ff5f57;
    color: #ff5f57;
}

.gp-redlink-exchange-hist__contact-link {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #1caee7;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

    .gp-redlink-exchange-hist__contact-link:hover {
        opacity: 0.85;
    }

.gp-redlink-exchange-hist .gp-shop-pagination--redlink {
    padding: 20px 10px;
}

@media (max-width: 767px) {
    .gp-redlink-exchange-hist__title {
        font-size: 18px;
    }
}

/* -------------------------------------------------------------------------- */

/* Red Link Detail Head (Figma: node 4265-27195 desktop, 4701-31390 mobile)   */

/* -------------------------------------------------------------------------- */

.gp-redlink-dash__shell--detail {
    align-items: center;
    gap: 20px;
    padding: 10px 20px;
    overflow: visible;
    background-image: linear-gradient(0deg,rgba(205, 22, 22, 1) -40%, rgba(23, 24, 27, 1) 35%, rgba(23, 24, 27, 1) 76%, rgba(81, 17, 17, 1) 100%);
}

@media (min-width: 1024px) {
    .gp-redlink-dash__shell--detail {
        gap: 30px;
        padding: 30px 26px;
    }
}

.gp-redlink-detail-head {
    position: relative;
    width: 100%;
    border-radius: 10px;
}

.gp-redlink-detail-head__decor {
    pointer-events: none;
    position: absolute;
    inset: 0px;
    overflow: visible;
    display: none;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-head__decor {
        display: block;
    }
}

.gp-redlink-detail-head__glow {
    pointer-events: none;
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
}

.gp-redlink-detail-head__glow--1 {
    left: 244px;
    top: 98px;
    width: 483px;
    height: 280px;
    background: radial-gradient( ellipse at center, rgba(255, 42, 42, 0.55) 0%, rgba(255, 42, 42, 0.15) 70%, rgba(255, 42, 42, 0) 100% );
}

.gp-redlink-detail-head__glow--2 {
    left: 463px;
    top: 109px;
    width: 118px;
    height: 230px;
    background: radial-gradient( ellipse at center, rgba(255, 61, 61, 0.5) 0%, rgba(255, 61, 61, 0.12) 65%, rgba(255, 61, 61, 0) 100% );
}

.gp-redlink-detail-head__inner {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    padding: 26px 16px;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-head__inner {
        gap: 30px;
        padding: 30px 100px;
    }
}

.gp-redlink-detail-head__copy {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.gp-redlink-detail-head__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 25px;
    color: #ffffff;
    text-align: center;
    text-transform: capitalize;
    word-break: break-word;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-head__title {
        font-size: 30px;
        line-height: 40px;
    }
}

.gp-redlink-detail-head__title-accent {
    color: #ff3d3d;
}

.gp-redlink-detail-head__title-accent--credit {
    color: #ff3c3c;
}

.gp-redlink-detail-head__title-rest {
    color: #ffffff;
}

.gp-redlink-detail-head__title-tagline {
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    color: #ffffff;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-head__title-tagline {
        font-size: 30px;
        line-height: 40px;
    }
}

.gp-redlink-detail-head__title-accent--credit {
    font-weight: 700;
}

.gp-redlink-detail-head__br--mobile {
    display: inline;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-head__br--mobile {
        display: none;
    }
}

.gp-redlink-detail-head__title-variant--mobile {
    display: inline;
}

.gp-redlink-detail-head__title-variant--desktop {
    display: none;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-head__title-variant--mobile {
        display: none;
    }

    .gp-redlink-detail-head__title-variant--desktop {
        display: inline;
    }
}

.gp-redlink-detail-head__desc {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #d9e2ec;
    text-align: center;
    text-transform: capitalize;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-head__desc {
        font-size: 18px;
        line-height: 28px;
    }
}

.gp-redlink-detail-head__desc-variant--mobile {
    display: inline;
}

.gp-redlink-detail-head__desc-variant--desktop {
    display: none;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-head__desc-variant--mobile {
        display: none;
    }

    .gp-redlink-detail-head__desc-variant--desktop {
        display: inline;
    }
}

.gp-redlink-detail-head__cta {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-width: 1px;
    border-style: solid;
    text-decoration-line: none;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

    .gp-redlink-detail-head__cta:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-redlink-detail-head__cta {
    gap: 10px;
    padding: 12px 30px;
    border-color: #d7191c;
    border-radius: 99px;
    background-color: #b50012;
    box-shadow: 0 0 10px rgba(255, 2, 2, 0.42);
    box-sizing: border-box;
    cursor: pointer;
}

.gp-redlink-detail-head__cta-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 25px;
    color: #ffffff;
    text-align: center;
    text-transform: capitalize;
    white-space: nowrap;
}

.gp-redlink-detail-head__cta-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

/* -------------------------------------------------------------------------- */

/* Red Link Detail What (Figma: node 4265-27221 desktop, 4701-31403 mobile)   */

/* -------------------------------------------------------------------------- */

.gp-redlink-detail-what {
    position: relative;
    width: 100%;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-what {
        margin-left: auto;
        margin-right: auto;
        width: 900px;
    }
}

.gp-redlink-detail-what {
    border: 1px solid #8b2e2e;
    border-radius: 20px;
    box-shadow: 0 -72px 250px rgba(254, 0, 0, 0.39), inset 0 0 39.4px rgba(179, 0, 0, 0.23);
    box-sizing: border-box;
    overflow: visible;
}

.gp-redlink-detail-what__overlay {
    pointer-events: none;
    position: absolute;
    inset: 0px;
    border-radius: 20px;
    background: linear-gradient( 0deg, rgba(219, 28, 32, 0.5) 10%, rgba(23, 24, 27, 0.6) 90% );
}

.gp-redlink-detail-what__inner {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 30px;
    padding-bottom: 70px;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-what__inner {
        min-height: 296px;
        flex-direction: row;
        align-items: center;
        padding: 35px 30px;
        padding-bottom: 35px;
    }
}

.gp-redlink-detail-what__copy {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-what__copy {
        gap: 30px;
        max-width: 671px;
        padding-left: 10px;
    }
}

.gp-redlink-detail-what__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 14px;
    color: #ffffff;
    text-align: left;
    text-transform: capitalize;
    word-break: break-word;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-what__title {
        font-size: 22px;
    }
}

.gp-redlink-detail-what__body--mobile {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.gp-redlink-detail-what__body--desktop {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 20px;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-what__body--mobile {
        display: none;
    }

    .gp-redlink-detail-what__body--desktop {
        display: flex;
    }
}

.gp-redlink-detail-what__paragraph {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #ffffff;
    text-align: left;
    text-transform: capitalize;
    word-break: break-word;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-what__paragraph {
        font-size: 18px;
        line-height: 28px;
    }
}

.gp-redlink-detail-what__paragraph-accent {
    color: #ffc525;
}

.gp-redlink-detail-what__cta {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-width: 1px;
    border-style: solid;
    text-decoration-line: none;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

    .gp-redlink-detail-what__cta:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-redlink-detail-what__cta {
    gap: 20px;
    height: 45px;
    padding: 8px 20px;
    border-color: #ff2f2f;
    border-radius: 99px;
    background: radial-gradient( ellipse 260% 100% at 0% 0%, rgba(244, 16, 16, 0.32) 0%, rgba(255, 33, 33, 0.18) 70% );
    box-shadow: inset 0 1px 42px rgba(255, 48, 48, 0.22);
    box-sizing: border-box;
    cursor: pointer;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-what__cta {
        gap: 30px;
        height: auto;
        padding: 12px 25px;
    }
}

.gp-redlink-detail-what__cta-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    color: #ffffff;
    text-align: center;
    text-transform: capitalize;
    white-space: nowrap;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-what__cta-text {
        font-size: 18px;
    }
}

.gp-redlink-detail-what__cta-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-what__cta-icon {
        width: 22px;
        height: 22px;
    }
}

.gp-redlink-detail-what__media {
    pointer-events: none;
    position: absolute;
    right: 0;
    bottom: -30px;
    width: 107px;
    height: auto;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-what__media {
        right: 40px;
        top: 50%;
        bottom: auto;
        width: 140px;
        height: auto;
        transform: translateY(-50%);
    }
}

.gp-redlink-detail-what__coin-shadow {
    position: absolute;
    display: none;
    -o-object-fit: cover;
    object-fit: cover;
    left: 50%;
    top: 50%;
    width: 144px;
    height: 135px;
    opacity: 0.2;
    filter: blur(7.1px);
    transform: translate(-40%, -20%) scaleY(-1) rotate(19.75deg);
}

@media (min-width: 1024px) {
    .gp-redlink-detail-what__coin-shadow {
        display: block;
    }
}

.gp-redlink-detail-what__coin {
    position: absolute;
    display: block;
    height: auto;
    max-width: none;
    -o-object-fit: cover;
    object-fit: cover;
}

.gp-redlink-detail-what__coin--desktop {
    display: none;
    right: 0;
    top: 50%;
    width: 140px;
    height: auto;
    transform: translateY(-50%);
}

.gp-redlink-detail-what__coin--mobile {
    right: 0;
    bottom: 0;
    width: 88px;
    height: auto;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-what__coin--desktop {
        display: block;
    }

    .gp-redlink-detail-what__coin--mobile {
        display: none;
    }
}

.gp-redlink-detail-how {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 20px 0;
    border-radius: 10px;
    box-sizing: border-box;
}

.gp-redlink-detail-how__head {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.gp-redlink-detail-how__eyebrow {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0.8px;
    color: #da3a40;
    text-transform: capitalize;
    word-break: break-word;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-how__eyebrow {
        font-size: 18px;
        letter-spacing: 0.9px;
    }
}

.gp-redlink-detail-how__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 14px;
    color: #ffffff;
    text-transform: capitalize;
    word-break: break-word;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-how__title {
        font-size: 20px;
    }
}

.gp-redlink-detail-how__steps {
    display: grid;
    width: 100%;
    list-style-type: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-how__steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.gp-redlink-detail-how__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 50px 20px;
    border: 1px solid #7b1518;
    border-radius: 10px;
    background: #221718;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-how__step {
        gap: 30px;
    }
}

.gp-redlink-detail-how__badge {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 8px 10px;
    border: 1px solid #861913;
    border-radius: 99px;
    background: rgba(255, 56, 60, 0.2);
    box-sizing: border-box;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: normal;
    color: #ff3b30;
    text-align: center;
    text-transform: capitalize;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-how__badge {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
}

.gp-redlink-detail-how__step-copy {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.gp-redlink-detail-how__step-title {
    font-size: 14px;
}

@media (min-width: 768px) {
    .gp-redlink-detail-how__step-title {
        font-size: 16px;
    }
}

.gp-redlink-detail-how__step-title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    line-height: 14px;
    color: #ffffff;
    text-transform: capitalize;
    word-break: break-word;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-how__step-title {
        font-size: 18px;
    }
}

.gp-redlink-detail-how__step-desc {
    font-size: 11px;
}

@media (min-width: 768px) {
    .gp-redlink-detail-how__step-desc {
        font-size: 14px;
    }
}

.gp-redlink-detail-how__step-desc {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    line-height: normal;
    color: #bcccdc;
    text-align: center;
    text-transform: capitalize;
    word-break: break-word;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-how__step-desc {
        font-size: 16px;
    }
}

/* -------------------------------------------------------------------------- */

/* Red Link Detail Condition (Figma: node 5443-99965 desktop, 5443-99966 mobile) */

/* -------------------------------------------------------------------------- */

.gp-redlink-detail-condition {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-radius: 10px;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-condition {
        gap: 30px;
    }
}

.gp-redlink-detail-condition__head {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.gp-redlink-detail-condition__eyebrow {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0.8px;
    color: #da3a40;
    text-transform: capitalize;
    word-break: break-word;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-condition__eyebrow {
        font-size: 18px;
        letter-spacing: 0.9px;
    }
}

.gp-redlink-detail-condition__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 14px;
    color: #ffffff;
    text-transform: capitalize;
    word-break: break-word;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-condition__title {
        font-size: 20px;
    }
}

.gp-redlink-detail-condition__cards {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-condition__cards {
        flex-direction: row;
    }
}

.gp-redlink-detail-condition__card {
    display: flex;
    width: 100%;
    flex: 1 1 0%;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    padding: 30px 20px;
    border-radius: 10px;
    background: #16171a;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-condition__card {
        gap: 50px;
        padding: 30px;
    }
}

.gp-redlink-detail-condition__card--seller {
    border: 1px solid #829ab1;
}

.gp-redlink-detail-condition__card--partner {
    border: 1px solid #febc2f;
}

.gp-redlink-detail-condition__card-main {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
}

.gp-redlink-detail-condition__card-head {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.gp-redlink-detail-condition__card-title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 14px;
    color: #ffffff;
    text-transform: capitalize;
    word-break: break-word;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-condition__card-title {
        font-size: 20px;
    }
}

.gp-redlink-detail-condition__card-title-accent {
    font-weight: 700;
}

.gp-redlink-detail-condition__card-title-accent--partner {
    color: #febc2f;
}

.gp-redlink-detail-condition__card-subtitle {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 14px;
    color: #d9e2ec;
    text-transform: capitalize;
    word-break: break-word;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-condition__card-subtitle {
        font-size: 18px;
    }
}

.gp-redlink-detail-condition__tier {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.gp-redlink-detail-condition__tier-head,
.gp-redlink-detail-condition__tier-row {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr) minmax(0, 0.5fr);
    gap: 5px;
}

.gp-redlink-detail-condition__tier-head-cell {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #829ab1;
    text-transform: capitalize;
    word-break: break-word;
}

.gp-redlink-detail-condition__tier-head-cell--rate {
    text-align: right;
}

.gp-redlink-detail-condition__tier-body {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.gp-redlink-detail-condition__tier-name,
.gp-redlink-detail-condition__tier-rate,
.gp-redlink-detail-condition__tier-user {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    text-transform: capitalize;
    word-break: break-word;
}

.gp-redlink-detail-condition__tier-name {
    color: #ffffff;
}

.gp-redlink-detail-condition__tier-rate--seller {
    color: #27c840;
    text-align: right;
}

.gp-redlink-detail-condition__tier-rate--partner {
    color: #febc2f;
    text-align: right;
}

.gp-redlink-detail-condition__tier-user {
    color: #ffffff;
    text-align: right;
}

.gp-redlink-detail-condition__tier-divider {
    width: 100%;
    border-width: 0px;
    margin: 0;
    border-top: 1px solid #2d3748;
}

.gp-redlink-detail-condition__benefits {
    display: flex;
    width: 100%;
    list-style-type: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.gp-redlink-detail-condition__benefit {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 5px;
}

.gp-redlink-detail-condition__benefit-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-redlink-detail-condition__benefit-text {
    flex: 1 1 0;
    min-width: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #ffffff;
    text-transform: capitalize;
    word-break: break-word;
}

/* -------------------------------------------------------------------------- */

/* Red Link Detail Partner Apply (Figma: 4626-28937 desktop, 4701-31591 mobile) */

/* -------------------------------------------------------------------------- */

.gp-redlink-detail-partner-apply {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-partner-apply {
        margin-left: auto;
        margin-right: auto;
        width: 900px;
    }
}

.gp-redlink-detail-partner-apply {
    border-radius: 10px;
    box-sizing: border-box;
}

.gp-redlink-detail-partner-apply__frame {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 30px 0;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-partner-apply__frame {
        align-items: flex-start;
        min-height: 430px;
        padding: 0;
    }
}

.gp-redlink-detail-partner-apply__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 14px;
    color: #ffffff;
    text-align: center;
    text-shadow: 0 0 10px rgba(255, 71, 71, 0.42);
    text-transform: capitalize;
    word-break: break-word;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-partner-apply__title {
        position: absolute;
        left: 35px;
        top: 64px;
        text-align: left;
    }
}

.gp-redlink-detail-partner-apply__card {
    position: relative;
    width: 100%;
    min-height: 280px;
    border-radius: 20px;
    box-shadow: 0 16px 33.05px rgba(163, 2, 2, 0.75), inset -2px -2px 21.1px rgba(255, 34, 34, 0.51);
    box-sizing: border-box;
    overflow: visible;
    background-image: radial-gradient( circle at left top, rgba(163, 2, 2, 0.5) 0%, rgba(163, 2, 2, 0.2) 70% );
}

@media (min-width: 1024px) {
    .gp-redlink-detail-partner-apply__card {
        min-height: 269px;
        margin-top: 91px;
        margin-left: 0;
        width: 100%;
    }
}

.gp-redlink-detail-partner-apply__card-content {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 40px 30px 70px;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-partner-apply__card-content {
        gap: 15px;
        padding: 50px 40px;
        padding-right: 0px;
    }
}

.gp-redlink-detail-partner-apply__card-desc {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #f0f4f8;
    text-transform: capitalize;
    word-break: break-word;
}

.gp-redlink-detail-partner-apply__card-desc--mobile {
    display: block;
    line-height: 25px;
}

.gp-redlink-detail-partner-apply__card-desc--desktop {
    display: none;
    line-height: 25px;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-partner-apply__card-desc {
        font-size: 16px;
        line-height: 30px;
    }

    .gp-redlink-detail-partner-apply__card-desc--mobile {
        display: none;
    }

    .gp-redlink-detail-partner-apply__card-desc--desktop {
        display: block;
        line-height: 25px;
    }
}

.gp-redlink-detail-partner-apply__card-conditions {
    display: flex;
    width: 100%;
    list-style-type: disc;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin: 0;
    padding: 0 0 0 24px;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-partner-apply__card-conditions {
        gap: 5px;
        padding-left: 30px;
    }
}

.gp-redlink-detail-partner-apply__card-condition {
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    color: #facc15;
    text-transform: capitalize;
    word-break: break-word;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-partner-apply__card-condition {
        font-weight: 600;
        font-size: 16px;
        line-height: 30px;
    }

    .gp-redlink-detail-partner-apply__card-conditions .gp-redlink-detail-partner-apply__card-condition:last-child {
        line-height: 25px;
    }
}

.gp-redlink-detail-partner-apply__icon-wrap {
    pointer-events: none;
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: -100px;
    width: 190px;
    height: auto;
    transform: translateX(-50%);
}

@media (min-width: 1024px) {
    .gp-redlink-detail-partner-apply__icon-wrap {
        left: auto;
        right: -40px;
        top: 50%;
        bottom: auto;
        width: 360px;
        height: auto;
        transform: translateY(calc(-50% - 20px));
    }
}

.gp-redlink-detail-partner-apply__icon-img {
    display: block;
    height: 100%;
    width: 100%;
    max-width: none;
    -o-object-fit: contain;
    object-fit: contain;
}

/* -------------------------------------------------------------------------- */

/* Red Link Detail 25K Benefit (Figma: 4329-26569 desktop, 4701-31613 mobile) */

/* -------------------------------------------------------------------------- */

.gp-redlink-detail-25k {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    padding-top: 32px;
}

@media (min-width: 768px) {
    .gp-redlink-detail-25k {
        padding-top: 40px;
    }
}

.gp-redlink-detail-25k {
    border-radius: 10px;
    box-sizing: border-box;
}

.gp-redlink-detail-25k__frame {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-25k__frame {
        gap: 26px;
        max-width: 1080px;
        min-height: 340px;
        padding-top: 0;
    }
}

.gp-redlink-detail-25k__gradient {
    pointer-events: none;
    position: absolute;
    display: none;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-25k__gradient {
        display: block;
        left: 50%;
        top: 20%;
        z-index: 0;
        width: 100%;
        height: 80%;
        transform: translate(-50%, -50%);
        background: radial-gradient( ellipse at center, rgba(161, 31, 5, 0.55) 0%, rgba(161, 31, 5, 0.2) 40%, rgba(161, 31, 5, 0) 70% );
    }
}

.gp-redlink-detail-25k__head {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.gp-redlink-detail-25k__eyebrow {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0.8px;
    color: #da3a40;
    text-transform: capitalize;
    word-break: break-word;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-25k__eyebrow {
        font-size: 18px;
        letter-spacing: 0.9px;
    }
}

.gp-redlink-detail-25k__copy {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.gp-redlink-detail-25k__subtitle {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #ffffff;
    text-transform: capitalize;
    word-break: break-word;
}

.gp-redlink-detail-25k__subtitle-line--mobile {
    display: block;
}

.gp-redlink-detail-25k__subtitle-line--desktop {
    display: none;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-25k__subtitle {
        font-size: 20px;
    }

    .gp-redlink-detail-25k__subtitle-line--mobile {
        display: none;
    }

    .gp-redlink-detail-25k__subtitle-line--desktop {
        display: block;
    }
}

.gp-redlink-detail-25k__highlight {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    text-transform: capitalize;
    word-break: break-word;
}

.gp-redlink-detail-25k__highlight-text {
    color: #ffffff;
}

.gp-redlink-detail-25k__highlight-accent {
    color: #febc2f;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-25k__highlight {
        font-size: 20px;
    }

    .gp-redlink-detail-25k__highlight-accent {
        font-size: 22px;
    }
}

.gp-redlink-detail-25k__card {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 330px;
    border: 1px solid #fd5f0a;
    border-radius: 20px;
    box-sizing: border-box;
    overflow: visible;
    background-image: linear-gradient( 203.35deg, rgba(34, 15, 16, 0.39) 29.333%, rgba(217, 65, 0, 0.84) 108.14% );
}

@media (min-width: 1024px) {
    .gp-redlink-detail-25k__card {
        width: 790px;
        min-height: 224px;
        margin: 0 auto;
        background-image: linear-gradient( 187.606deg, rgba(34, 15, 16, 0.39) 29.333%, rgba(217, 65, 0, 0.84) 108.14% );
    }
}

.gp-redlink-detail-25k__card-body {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 29px 29px 190px;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-25k__card-body {
        gap: 20px;
        max-width: 484px;
        margin-left: 223px;
        padding: 71px 0 0;
    }
}

.gp-redlink-detail-25k__card-title {
    margin: 0;
    width: 100%;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 25px;
    color: #ffffff;
    text-align: center;
    text-shadow: 0 0 11.1px rgba(255, 125, 75, 0.59);
    text-transform: capitalize;
    word-break: break-word;
}

.gp-redlink-detail-25k__card-title-line--mobile {
    display: block;
}

.gp-redlink-detail-25k__card-title-line--desktop {
    display: none;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-25k__card-title {
        font-size: 22px;
        line-height: 14px;
        text-align: left;
    }

    .gp-redlink-detail-25k__card-title-line--mobile {
        display: none;
    }

    .gp-redlink-detail-25k__card-title-line--desktop {
        display: block;
    }
}

.gp-redlink-detail-25k__card-item {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 10px;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-25k__card-item {
        align-items: center;
    }
}

.gp-redlink-detail-25k__card-item-icon {
    display: block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.gp-redlink-detail-25k__card-item-text {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    flex-direction: column;
}

.gp-redlink-detail-25k__card-item-desc {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #ffffff;
    text-transform: capitalize;
    word-break: break-word;
}

.gp-redlink-detail-25k__card-item-desc--mobile {
    display: block;
}

.gp-redlink-detail-25k__card-item-desc--desktop {
    display: none;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-25k__card-item-desc {
        font-size: 18px;
    }

    .gp-redlink-detail-25k__card-item-desc--mobile {
        display: none;
    }

    .gp-redlink-detail-25k__card-item-desc--desktop {
        display: block;
    }
}

.gp-redlink-detail-25k__shop-wrap {
    pointer-events: none;
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: -95px;
    width: 300px;
    height: 300px;
    transform: translateX(-50%);
}

.gp-redlink-detail-25k__shop-img {
    display: block;
    height: 100%;
    width: 100%;
    max-width: none;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-redlink-detail-25k__shop-img--desktop {
    display: none;
    filter: drop-shadow(9px 15px 63.8px rgba(255, 90, 26, 0.63));
}

.gp-redlink-detail-25k__shop-img--mobile {
    display: block;
    filter: drop-shadow(7.476px 12.461px 53px rgba(255, 90, 26, 0.63));
}

@media (min-width: 1024px) {
    .gp-redlink-detail-25k__shop-wrap {
        left: -100px;
        bottom: auto;
        top: -20px;
        width: 340px;
        height: 340px;
        transform: none;
    }

    .gp-redlink-detail-25k__shop-img--desktop {
        display: block;
    }

    .gp-redlink-detail-25k__shop-img--mobile {
        display: none;
    }
}

.gp-redlink-detail-25k__dec {
    pointer-events: none;
    position: absolute;
    z-index: 3;
    display: block;
    max-width: none;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-redlink-detail-25k__dec--desktop {
    display: none;
}

.gp-redlink-detail-25k__dec--mobile-left {
    display: block;
    top: 20px;
    left: 26px;
    width: 32px;
    height: 32px;
}

.gp-redlink-detail-25k__dec--mobile-right {
    display: block;
    top: -20px;
    right: 0px;
    width: 58px;
    height: 58px;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-25k__dec--desktop {
        display: block;
        top: -30px;
        right: -40px;
        width: 80px;
        height: auto;
    }

    .gp-redlink-detail-25k__dec--mobile-left,
    .gp-redlink-detail-25k__dec--mobile-right {
        display: none;
    }
}

/* -------------------------------------------------------------------------- */

/* Red Link Detail FAQ (Figma: 4271-46910) */

/* -------------------------------------------------------------------------- */

.gp-redlink-detail-faq {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    padding: 60px 15px 20px;
    border-radius: 20px;
    background: rgba(40, 14, 13, 0.2);
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-faq {
        padding: 20px;
    }
}

.gp-redlink-detail-faq__frame {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-faq__frame {
        gap: 30px;
    }
}

.gp-redlink-detail-faq__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 14px;
    color: #ffffff;
    text-align: center;
    width: 100%;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-faq__title {
        font-size: 20px;
    }
}

.gp-redlink-detail-faq__list {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.gp-redlink-detail-faq__item {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    border-radius: 10px;
}

.gp-redlink-detail-faq__item-header {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px;
    background: #3f1618;
    border: 1px solid #672429;
    border-radius: 10px 10px 0 0;
    box-sizing: border-box;
}

.gp-redlink-detail-faq__item:not(.gp-redlink-detail-faq__item--open) .gp-redlink-detail-faq__item-header {
    border-radius: 10px;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-faq__item-header {
        padding: 20px;
    }
}

.gp-redlink-detail-faq__item-question {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: normal;
    color: #ffffff;
    text-align: left;
    word-break: break-word;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-faq__item-question {
        font-size: 18px;
    }
}

.gp-redlink-detail-faq__item-toggle {
    position: relative;
    display: block;
    flex-shrink: 0;
    cursor: pointer;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    width: 14px;
    height: 14px;
}

.gp-redlink-detail-faq__item-toggle-icon {
    display: block;
    height: 100%;
    width: 100%;
    max-width: none;
    transition: transform 150ms ease;
}

.gp-redlink-detail-faq__item:not(.gp-redlink-detail-faq__item--open) .gp-redlink-detail-faq__item-toggle-icon {
    transform: rotate(-45deg);
}

.gp-redlink-detail-faq__item-body {
    width: 100%;
    flex-shrink: 0;
    padding: 15px 20px;
    background: #2a0e0f;
    border: 1px solid #672429;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    box-sizing: border-box;
}

.gp-redlink-detail-faq__item:not(.gp-redlink-detail-faq__item--open) .gp-redlink-detail-faq__item-body {
    display: none;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-faq__item-body {
        padding: 20px 30px;
    }
}

.gp-redlink-detail-faq__item-answer {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #bebebe;
    word-break: break-word;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-faq__item-answer {
        font-size: 18px;
    }
}

.gp-redlink-detail-faq__item-answer-link {
    color: #1caee7;
    text-decoration: underline;
    text-underline-position: from-font;
}

    .gp-redlink-detail-faq__item-answer-link:hover {
        opacity: 0.9;
    }

.gp-redlink-detail-faq__item-answer-strong {
    font-weight: 700;
    color: #fff;
}

.gp-redlink-detail-faq__item-answer-text {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #bebebe;
    word-break: break-word;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-faq__item-answer-text {
        font-size: 18px;
    }
}

.gp-redlink-detail-faq__item-answer-list {
    display: flex;
    width: 100%;
    list-style-type: disc;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin: 10px 0;
    padding-left: 27px;
}

.gp-redlink-detail-faq__item-answer-list--ordered {
    list-style-type: decimal;
}

.gp-redlink-detail-faq__item-answer-list-item {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #bebebe;
    word-break: break-word;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-faq__item-answer-list-item {
        font-size: 18px;
    }
}

/* -------------------------------------------------------------------------- */

/* Red Link Detail CTA (Figma: 4271-46441)                                    */

/* -------------------------------------------------------------------------- */

.gp-redlink-detail-cta {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    scroll-margin-top: 80px;
    border: 1px solid #ba0000;
    border-radius: 10px;
    box-sizing: border-box;
    overflow: hidden;
}

.gp-redlink-detail-cta__backdrop {
    pointer-events: none;
    position: absolute;
    inset: 0px;
    overflow: hidden;
    border-radius: 10px;
}

.gp-redlink-detail-cta__gradient {
    position: absolute;
    inset: 0px;
    border-radius: 10px;
    background: linear-gradient(0deg, #17181b -20%, #911212 80%);
    z-index: 1;
}

.gp-redlink-detail-cta__bg-wrap {
    position: absolute;
    inset: 0px;
    display: block;
    z-index: 2;
}

.gp-redlink-detail-cta__bg {
    display: block;
    height: 100%;
    width: 100%;
    max-width: none;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 10px;
    opacity: 0.28;
    mix-blend-mode: overlay;
}

.gp-redlink-detail-cta__glow {
    pointer-events: none;
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    box-shadow: inset 0 0 41.7px rgba(201, 11, 11, 0.8);
    z-index: 3;
}

.gp-redlink-detail-cta__inner {
    position: relative;
    z-index: 4;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 40px 30px;
    box-sizing: border-box;
}

.gp-redlink-detail-cta__copy {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.gp-redlink-detail-cta__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 14px;
    color: #ffffff;
    text-align: center;
    text-transform: capitalize;
    word-break: break-word;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-cta__title {
        font-size: 22px;
    }
}

.gp-redlink-detail-cta__desc {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    color: #ffffff;
    text-align: center;
    text-transform: capitalize;
    word-break: break-word;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-cta__desc {
        font-size: 18px;
        max-width: 660px;
    }
}

.gp-redlink-detail-cta__button {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 1px;
    border-style: solid;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

    .gp-redlink-detail-cta__button:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-redlink-detail-cta__button {
    height: 55px;
    padding: 15px 40px;
    border-color: #ff3033;
    border-radius: 99px;
    background-color: #dd0a1f;
    box-shadow: 0 0 10px rgba(255, 2, 2, 0.42);
    box-sizing: border-box;
}

.gp-redlink-detail-cta__button-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
    text-align: center;
    text-transform: capitalize;
    word-break: break-word;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-cta__button-text {
        font-size: 20px;
    }
}

.gp-redlink-detail-cta__note {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    color: #ffffff;
    text-align: center;
    text-transform: capitalize;
    word-break: break-word;
}

@media (min-width: 1024px) {
    .gp-redlink-detail-cta__note {
        font-size: 18px;
        max-width: 660px;
    }
}

.gp-redlink-detail-disclaimer {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #ffdede;
    word-break: break-word;
}

/* -------------------------------------------------------------------------- */

/* LINE VIP (index-genplay-line-vip.html)                                     */

/* -------------------------------------------------------------------------- */

.gp-shop__inner--line-vip {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 40px;
}

.gp-line-vip {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-line-vip__back {
    display: inline-flex;
    align-items: center;
    text-decoration-line: none;
    width: -moz-fit-content;
    width: fit-content;
    gap: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: 1;
    color: #9fb3c8;
}

    .gp-line-vip__back:hover {
        color: #bcccdc;
    }

.gp-line-vip__back-icon {
    width: 24px;
    height: 24px;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-line-vip__frame {
    width: 100%;
    padding: 5px;
    border-radius: 15px;
    background: radial-gradient(circle at 0 0, rgba(217, 217, 217, 0.2) 0%, rgba(217, 217, 217, 0.05) 70%);
    box-sizing: border-box;
}

.gp-line-vip__panel {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    gap: 20px;
    padding: 30px 20px;
    border: 1px solid #073269;
    border-radius: 10px;
    box-sizing: border-box;
}

.gp-line-vip__panel-bg {
    pointer-events: none;
    position: absolute;
    inset: 0px;
    overflow: hidden;
    border-radius: 10px;
}

.gp-line-vip__panel-gradient {
    position: absolute;
    inset: 0px;
    border-radius: 10px;
    background: linear-gradient(180deg, #0b4da0 0.638%, #242424 45.608%, #242424 100%);
}

.gp-line-vip__panel-texture {
    position: absolute;
    inset: 0px;
    height: 100%;
    width: 100%;
    border-radius: 10px;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 0.4;
    mix-blend-mode: overlay;
}

.gp-line-vip__panel-overlay {
    position: absolute;
    inset: 0px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(0, 89, 200, 0.2) 0%, rgba(11, 77, 160, 0) 38.49%);
}

.gp-line-vip__head,
.gp-line-vip__divider,
.gp-line-vip__steps,
.gp-line-vip__submit,
.gp-line-vip__caution {
    position: relative;
    z-index: 1;
}

.gp-line-vip__head {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
}

.gp-line-vip__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 19px;
    line-height: normal;
    color: #ffffff;
    text-shadow: 0 0 19.4px #1577f3;
    word-break: break-word;
}

.gp-line-vip__title-accent {
    color: #ff6d6d;
}

.gp-line-vip__subtitle {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #ffffff;
    word-break: break-word;
}

.gp-line-vip__divider {
    display: none;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(28, 174, 231, 0) 0%, rgba(28, 174, 231, 0.8) 50%, rgba(28, 174, 231, 0) 100%);
}

.gp-line-vip__steps {
    display: flex;
    width: 100%;
    list-style-type: none;
    flex-direction: column;
    margin: 0;
    padding: 0;
    gap: 15px;
}

.gp-line-vip__step {
    display: flex;
    width: 100%;
}

.gp-line-vip__step-left {
    display: none;
}

.gp-line-vip__step-right {
    display: flex;
    width: 100%;
    min-width: 0px;
}

.gp-line-vip__step-card {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 30px 20px;
    border: 1px solid #243b53;
    border-radius: 10px;
    background-color: #27292f;
    box-sizing: border-box;
}

.gp-line-vip__step-card--split {
    gap: 20px;
}

.gp-line-vip__step-copy {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

.gp-line-vip__step-label {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: normal;
    color: #1caee7;
}

.gp-line-vip__step-title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: normal;
    color: #ffffff;
}

.gp-line-vip__step-desc {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #ffffff;
    word-break: break-word;
}

    .gp-line-vip__step-desc strong {
        font-weight: 700;
    }

.gp-line-vip__input {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-line-vip__input-field {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 15px;
    min-height: 60px;
    padding: 15px;
    border: 1px solid #334e68;
    border-radius: 10px;
    background-color: #1f2024;
    box-sizing: border-box;
}

.gp-line-vip__input-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-line-vip__input-divider {
    width: 1px;
    height: 20px;
    flex-shrink: 0;
    background-color: #334e68;
}

.gp-line-vip__input-control {
    min-width: 0px;
    flex: 1 1 0%;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    outline: 2px solid transparent;
    outline-offset: 2px;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #ffffff;
}

    .gp-line-vip__input-control::-moz-placeholder {
        color: #627d98;
    }

    .gp-line-vip__input-control::placeholder {
        color: #627d98;
    }

.gp-line-vip__input-hint {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #ff5f57;
    text-align: center;
}

.gp-line-vip__input-body {
    display: flex;
    min-width: 0px;
    flex: 1 1 0%;
    align-items: center;
    justify-content: space-between;
}

.gp-line-vip__input-value {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #06c755;
    white-space: nowrap;
}

.gp-line-vip__input-check {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-line-vip__step-visual {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.gp-line-vip__qr {
    display: none;
}

.gp-line-vip__line-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration-line: none;
    gap: 5px;
    padding: 10px 20px;
    border-radius: 99px;
    background-color: #06c755;
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
}

.gp-line-vip__line-btn-icon {
    width: 20px;
    height: 20px;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-line-vip__chat-bubble {
    display: block;
    width: 100%;
    max-width: 226px;
    height: auto;
}

.gp-line-vip__verify-icon {
    display: block;
    width: 92px;
    height: 92px;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-line-vip__submit {
    display: flex;
    width: 100%;
    justify-content: center;
}

.gp-line-vip__submit-btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    width: 100%;
    max-width: 360px;
    min-height: 60px;
    padding: 10px;
    border-radius: 10px;
    background-color: #1caee7;
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: normal;
    color: #020e1f;
}

    .gp-line-vip__submit-btn:hover {
        filter: brightness(1.06);
    }

.gp-line-vip__caution {
    display: flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    border: 1px solid #124372;
    border-radius: 10px;
    background-color: rgba(20, 62, 114, 0.44);
    box-sizing: border-box;
}

.gp-line-vip__caution-checkbox {
    flex-shrink: 0;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    margin: 0;
    border: 1px solid #1caee7;
    border-radius: 5px;
    background-color: #ffffff;
}

    .gp-line-vip__caution-checkbox:checked {
        background-color: #1caee7;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5.2L4.4 8.6L11 1.4' stroke='%23020e1f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 12px 10px;
    }

.gp-line-vip__caution-text {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #d9e2ec;
    word-break: break-word;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .gp-shop__inner--line-vip {
        gap: 20px;
        padding-top: 20px;
        padding-bottom: 60px;
    }

    .gp-line-vip {
        gap: 20px;
    }

    .gp-line-vip__frame {
        padding: 10px;
    }

    .gp-line-vip__panel {
        gap: 20px;
        padding: 50px 30px;
    }

    .gp-line-vip__title {
        font-size: 24px;
        line-height: 33px;
    }

    .gp-line-vip__divider {
        display: block;
    }

    .gp-line-vip__steps {
        gap: 0;
        max-width: 820px;
        margin: 0 auto;
    }

    .gp-line-vip__step {
        align-items: stretch;
        gap: 30px;
        min-height: 230px;
    }

    .gp-line-vip__step--first {
        min-height: 256px;
    }

    .gp-line-vip__step-left {
        display: flex;
        flex-shrink: 0;
        flex-direction: column;
        align-items: center;
        width: 40px;
    }

    .gp-line-vip__step--first .gp-line-vip__step-left {
        padding-top: 110px;
    }

    .gp-line-vip__step--last .gp-line-vip__step-left {
        padding-bottom: 110px;
    }

    .gp-line-vip__step-number {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 1px solid #1caee7;
        border-radius: 99px;
        background-color: #243b53;
        font-family: "Google Sans", sans-serif;
        font-weight: 600;
        font-size: 20px;
        line-height: normal;
        color: #1caee7;
    }

    .gp-line-vip__step-line {
        display: block;
        width: 1px;
        flex: 1 1 0%;
        --tw-bg-opacity: 1;
        background-color: rgb(28 174 231 / var(--tw-bg-opacity, 1));
        min-height: 20px;
    }

    .gp-line-vip__step-line--before {
        flex: 1 1 auto;
    }

    .gp-line-vip__step-right {
        display: flex;
        flex: 1 1 0%;
        align-items: center;
        padding: 15px 0;
    }

    .gp-line-vip__step--first .gp-line-vip__step-right {
        padding-bottom: 15px;
    }

    .gp-line-vip__step-card {
        align-items: stretch;
        gap: 15px;
        padding: 30px 40px;
    }

    .gp-line-vip__step-card--split {
        flex-direction: row;
        align-items: center;
        gap: 15px;
        min-height: 230px;
    }

    .gp-line-vip__step-copy {
        flex: 1 1 0%;
        text-align: left;
        gap: 10px;
    }

    .gp-line-vip__step-title {
        font-size: 18px;
    }

    .gp-line-vip__input-hint {
        text-align: left;
    }

    .gp-line-vip__step-visual {
        flex-shrink: 0;
        justify-content: center;
        width: 230px;
        gap: 10px;
    }

    .gp-line-vip__step-visual--qr {
        justify-content: flex-end;
        height: 170px;
    }

    .gp-line-vip__qr {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 160px;
        height: 160px;
        padding: 7px;
        border: 3px solid #06c755;
        border-radius: 20px;
        background-color: #ffffff;
        box-sizing: border-box;
    }

    .gp-line-vip__qr-image {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 10px;
        -o-object-fit: contain;
        object-fit: contain;
    }

    .gp-line-vip__line-btn {
        gap: 10px;
        padding: 8px 20px;
        font-size: 20px;
    }

    .gp-line-vip__line-btn-icon {
        width: 24px;
        height: 24px;
    }

    .gp-line-vip__chat-bubble {
        max-width: 226px;
    }

    .gp-line-vip__verify-icon {
        width: 130px;
        height: 130px;
    }

    .gp-line-vip__submit {
        max-width: 820px;
        margin: 0 auto;
        padding: 0 80px;
        box-sizing: border-box;
    }

    .gp-line-vip__submit-btn {
        max-width: 624px;
        min-height: 60px;
    }

    .gp-line-vip__caution {
        gap: 10px;
        width: auto;
        max-width: 100%;
    }

    .gp-line-vip__caution-text {
        line-height: 28px;
        white-space: nowrap;
    }
}

/* LINE VIP dismiss modal (Figma: node 5338-85406 "Pop up ยืนยันไม่แจ้งเตือน") */

.gp-line-vip-dismiss-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 74;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-line-vip-dismiss-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-line-vip-dismiss-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.7);
    cursor: default;
    pointer-events: auto;
}

.gp-line-vip-dismiss-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 746px;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-line-vip-dismiss-modal__dialog {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    background-color: #1a1b1e;
    border: 1px solid #243b53;
    border-radius: 20px;
    padding: 40px 30px;
    gap: 40px;
    box-sizing: border-box;
}

.gp-line-vip-dismiss-modal__head {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.gp-line-vip-dismiss-modal__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
}

    .gp-line-vip-dismiss-modal__icon img {
        width: 60px;
        height: 60px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-line-vip-dismiss-modal__text {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.gp-line-vip-dismiss-modal__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: normal;
    color: #ffffff;
}

.gp-line-vip-dismiss-modal__message {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: #ffffff;
}

.gp-line-vip-dismiss-modal__actions {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
}

.gp-line-vip-dismiss-modal__cancel,
.gp-line-vip-dismiss-modal__confirm {
    display: inline-flex;
    min-width: 0px;
    flex: 1 1 0%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    height: 60px;
    border-radius: 10px;
    padding: 10px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    white-space: nowrap;
}

.gp-line-vip-dismiss-modal__cancel {
    background-color: transparent;
    border: 1px solid #486581;
    color: #829ab1;
    font-weight: 400;
}

    .gp-line-vip-dismiss-modal__cancel:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-line-vip-dismiss-modal__confirm {
    background-color: #1caee7;
    color: #020e1f;
    font-weight: 500;
}

    .gp-line-vip-dismiss-modal__confirm:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

body.gp-line-vip-dismiss-modal-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .gp-line-vip-dismiss-modal__dialog {
        padding: 30px 20px;
        gap: 30px;
    }

    .gp-line-vip-dismiss-modal__actions {
        flex-direction: column-reverse;
    }

    .gp-line-vip-dismiss-modal__cancel,
    .gp-line-vip-dismiss-modal__confirm {
        width: 100%;
        flex: none;
        white-space: normal;
        text-align: center;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* LINE VIP submit success modal (Figma: node 5338-85108 "Pop up ส่งข้อมูลสำเร็จ") */

.gp-line-vip-submit-success-modal {
    position: fixed;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 74;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gp-line-vip-submit-success-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gp-line-vip-submit-success-modal__backdrop {
    position: absolute;
    inset: 0px;
    background: rgba(4, 12, 24, 0.7);
    cursor: default;
    pointer-events: auto;
}

.gp-line-vip-submit-success-modal__dialog-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 644px;
    max-height: min(100dvh - 32px, 100vh - 32px);
    pointer-events: none;
}

.gp-line-vip-submit-success-modal__dialog {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
    max-height: min(100dvh - 32px, 100vh - 32px);
    gap: 30px;
    padding: 40px 30px;
    background-color: #1a1b1e;
    border: 1px solid #343537;
    border-radius: 10px;
    box-sizing: border-box;
}

.gp-line-vip-submit-success-modal__hero {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.gp-line-vip-submit-success-modal__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
}

    .gp-line-vip-submit-success-modal__icon img {
        width: 60px;
        height: 60px;
        -o-object-fit: contain;
        object-fit: contain;
    }

.gp-line-vip-submit-success-modal__hero-text {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.gp-line-vip-submit-success-modal__title {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: normal;
    color: #ffffff;
    text-align: center;
}

.gp-line-vip-submit-success-modal__subtitle {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #ffffff;
    text-align: center;
}

.gp-line-vip-submit-success-modal__actions {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 350px;
}

.gp-line-vip-submit-success-modal__primary,
.gp-line-vip-submit-success-modal__secondary {
    display: inline-flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    text-decoration-line: none;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    height: 60px;
    border-radius: 10px;
    padding: 10px 30px;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    line-height: normal;
    text-align: center;
    box-sizing: border-box;
}

.gp-line-vip-submit-success-modal__primary {
    background-color: #1caee7;
    color: #020e1f;
    font-weight: 500;
    border: 0;
}

    .gp-line-vip-submit-success-modal__primary:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-line-vip-submit-success-modal__secondary {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: 1px solid #486581;
    color: #829ab1;
    font-weight: 400;
}

    .gp-line-vip-submit-success-modal__secondary:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

body.gp-line-vip-submit-success-modal-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .gp-line-vip-submit-success-modal__dialog {
        padding: 30px 20px;
    }

    .gp-line-vip-submit-success-modal__title {
        font-size: 20px;
    }

    .gp-line-vip-submit-success-modal__subtitle {
        font-size: 16px;
        line-height: 24px;
    }
}

/* Maintenance page (Figma: node 5587-123414 "MA Full") */

.gp-ma {
    position: relative;
    display: flex;
    width: 100%;
    flex: 1 1 0%;
    flex-direction: column;
    align-items: center;
    padding: 80px 20px 100px;
    z-index: 0;
}

.gp-ma__bg {
    pointer-events: none;
    position: absolute;
    inset: 0px;
    overflow: hidden;
    z-index: 0;
}

.gp-ma__bg-texture {
    position: absolute;
    inset: 0px;
    opacity: 0.33;
    background-image: url("../images/star-pattern.webp");
    background-position: top left;
    background-size: 323px 242px;
}

.gp-ma__bg-glow {
    position: absolute;
    bottom: -400px;
    left: 50%;
    display: block;
    max-width: none;
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    -o-object-fit: fill;
    object-fit: fill;
    width: min(1922px, 200%);
    height: 1080px;
}

.gp-ma__mascot {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    -o-object-fit: contain;
    object-fit: contain;
    aspect-ratio: 400 / 225;
}

.gp-ma__head {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    max-width: 692px;
    flex-direction: column;
    align-items: center;
    overflow: visible;
    min-height: 182px;
}

    .gp-ma__head::before {
        content: "";
        pointer-events: none;
        position: absolute;
        inset: 0px;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        background: radial-gradient( ellipse 120% 180% at 50% 100%, rgba(0, 121, 249, 1) 0%, rgba(46, 105, 255, 0.01) 70% );
        box-shadow: 0 35px 65px #0a76ff;
        z-index: 0;
    }

.gp-ma__head-inner {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 50px 100px;
}

.gp-ma__title {
    margin: 0px;
    text-align: center;
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: normal;
    color: #8cd6f3;
}

.gp-ma__subtitle {
    margin: 0px;
    text-align: center;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
}

.gp-ma__schedule {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    max-width: 756px;
    flex-direction: column;
    gap: 25px;
    border-radius: 20px;
    border-width: 1px;
    border-style: solid;
    padding: 30px;
    border-color: #073269;
    background-color: rgba(16, 18, 27, 0.8);
    backdrop-filter: blur(2px);
}

.gp-ma__schedule-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gp-ma__schedule-icon {
    height: 1.25rem;
    width: 1.25rem;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.gp-ma__schedule-label {
    font-family: "Google Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    color: #6fa2d3;
}

.gp-ma__schedule-body {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.gp-ma__schedule-row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.gp-ma__schedule-field {
    font-family: "Google Sans", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    color: #4b89c9;
}

.gp-ma__schedule-value {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #ffffff;
    text-align: right;
}

.gp-ma__schedule-divider {
    height: 1px;
    width: 100%;
    flex-shrink: 0;
    background-color: rgba(73, 101, 139, 0.45);
}

.gp-ma__support {
    position: relative;
    z-index: 1;
    margin: 0px;
    margin-top: 4rem;
    text-align: center;
    text-transform: capitalize;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #d9e2ec;
}

.gp-ma__support-link {
    color: #ffdf72;
    text-decoration: underline;
    text-underline-offset: 2px;
}

    .gp-ma__support-link:hover {
        color: #ffe999;
    }

/* 404 Not Found page (Figma: node 5587-123474) */

.gp-ma--not-found {
    gap: 30px;
}

.gp-ma__head--not-found {
    min-height: auto;
    filter: drop-shadow(0 42px 64.65px #0068ea);
}

    .gp-ma__head--not-found::before {
        content: none;
    }

.gp-ma__head-inner--not-found {
    padding: 50px 100px 0px;
}

.gp-ma__title--not-found {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 0 15.3px rgba(40, 133, 255, 0.53);
}

.gp-ma__subtitle--not-found {
    font-size: 20px;
    line-height: 24px;
    color: #ffffff;
}

.gp-ma__action {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration-line: none;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    min-width: 245px;
    height: 60px;
    padding: 10px;
    border-radius: 10px;
    background-color: #1caee7;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #ffffff;
}

    .gp-ma__action:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }

.gp-ma__code {
    position: relative;
    z-index: 1;
    margin: 0px;
    text-align: center;
    font-family: "Google Sans", sans-serif;
    font-weight: 600;
    font-size: 200px;
    line-height: normal;
    opacity: 0.8;
    background: linear-gradient(179.57deg, #036ae8 14.34%, rgba(5, 85, 185, 0.5) 60.63%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 62px 130.1px #0068ea;
}

@media (max-width: 767px) {
    .gp-ma {
        padding-top: 48px;
        padding-bottom: 72px;
    }

    .gp-ma__head::before {
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }

    .gp-ma__head-inner {
        padding: 32px 20px;
    }

    .gp-ma__title {
        font-size: 22px;
    }

    .gp-ma__subtitle {
        font-size: 16px;
    }

    .gp-ma__schedule {
        padding: 20px;
        gap: 20px;
    }

    .gp-ma__schedule-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .gp-ma__schedule-value {
        text-align: left;
    }

    .gp-ma__support {
        margin-top: 40px;
        font-size: 14px;
        line-height: 24px;
    }

    .gp-ma--not-found {
        gap: 20px;
    }

    .gp-ma__head-inner--not-found {
        padding: 32px 20px;
    }

    .gp-ma__title--not-found {
        font-size: 22px;
    }

    .gp-ma__subtitle--not-found {
        font-size: 16px;
        line-height: 22px;
    }

    .gp-ma__action {
        min-width: 200px;
        height: 50px;
        font-size: 16px;
    }

    .gp-ma__code {
        font-size: 130px;
    }
}

/* ============================================================
   Serenade Blank State
   – แสดงเมื่อ user มีระดับต่ำกว่าที่ Serenade Shop กำหนด
   ============================================================ */

.serenade-blank {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(36 59 83 / var(--tw-border-opacity, 1));
    min-height: 640px;
}

.serenade-blank__bg {
    position: absolute;
    inset: 0px;
    display: block;
    height: 100%;
    width: 100%;
}

    .serenade-blank__bg img {
        height: 100%;
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: top;
        object-position: top;
    }

.serenade-blank__overlay {
    position: absolute;
    inset: 0px;
    background-color: rgba(26, 27, 30, 0.2);
}

.serenade-blank__content {
    position: absolute;
    inset: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

.serenade-blank__text-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.serenade-blank__heading {
    font-weight: 700;
    line-height: 1.4;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    font-size: 18px;
}

.serenade-blank__sub {
    font-weight: 400;
    line-height: 1.6;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    font-size: 14px;
}

.serenade-blank__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(9 63 133 / var(--tw-border-opacity, 1));
    font-weight: 400;
    --tw-text-opacity: 1;
    color: rgb(2 14 31 / var(--tw-text-opacity, 1));
    text-decoration-line: none;
    background-image: linear-gradient(107.49deg, #52ceff 5.7%, #1caee7 54.37%);
    box-shadow: 0px 4px 16.15px rgba(0, 90, 204, 0.5);
    padding: 15px 40px;
    font-size: 16px;
    line-height: 1;
}

@media (min-width: 768px) {
    .serenade-blank {
        min-height: 700px;
    }

    .serenade-blank__heading {
        font-size: 20px;
    }

    .serenade-blank__sub {
        font-size: 16px;
    }
}

@media (min-width: 1024px) {
    .serenade-blank {
        min-height: 760px;
    }

    .serenade-blank__heading {
        font-size: 22px;
    }

    .serenade-blank__sub {
        font-size: 18px;
    }

    .serenade-blank__cta {
        font-size: 20px;
    }
}

.hover\:scale-100:hover {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-95:hover {
    --tw-scale-x: .95;
    --tw-scale-y: .95;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:border-gpPrimaryHover:hover {
    --tw-border-opacity: 1;
    border-color: rgb(95 196 238 / var(--tw-border-opacity, 1));
}

.hover\:bg-gpPrimaryHover:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(95 196 238 / var(--tw-bg-opacity, 1));
}

.hover\:text-gpPrimaryHover:hover {
    --tw-text-opacity: 1;
    color: rgb(95 196 238 / var(--tw-text-opacity, 1));
}

.hover\:opacity-80:hover {
    opacity: 0.8;
}

.hover\:brightness-100:hover {
    --tw-brightness: brightness(1);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.hover\:brightness-110:hover {
    --tw-brightness: brightness(1.1);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.focus-visible\:ring-2:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.active\:bg-gpPrimaryHover:active {
    --tw-bg-opacity: 1;
    background-color: rgb(95 196 238 / var(--tw-bg-opacity, 1));
}

.active\:brightness-100:active {
    --tw-brightness: brightness(1);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.active\:brightness-110:active {
    --tw-brightness: brightness(1.1);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

@media (min-width: 640px) {
    .sm\:block {
        display: block;
    }

    .sm\:flex-row {
        flex-direction: row;
    }
}

@media (min-width: 768px) {
    .md\:bottom-\[10px\] {
        bottom: 10px;
    }

    .md\:bottom-\[60px\] {
        bottom: 60px;
    }

    .md\:right-\[10px\] {
        right: 10px;
    }

    .md\:right-\[4px\] {
        right: 4px;
    }

    .md\:top-\[-2px\] {
        top: -2px;
    }

    .md\:top-\[4px\] {
        top: 4px;
    }

    .md\:mx-\[40px\] {
        margin-left: 40px;
        margin-right: 40px;
    }

    .md\:mb-\[24px\] {
        margin-bottom: 24px;
    }

    .md\:mt-\[20px\] {
        margin-top: 20px;
    }

    .md\:mt-\[40px\] {
        margin-top: 40px;
    }

    .md\:block {
        display: block;
    }

    .md\:inline {
        display: inline;
    }

    .md\:flex {
        display: flex;
    }

    .md\:inline-flex {
        display: inline-flex;
    }

    .md\:hidden {
        display: none;
    }

    .md\:h-\[110px\] {
        height: 110px;
    }

    .md\:h-\[150px\] {
        height: 150px;
    }

    .md\:h-\[24px\] {
        height: 24px;
    }

    .md\:h-\[25px\] {
        height: 25px;
    }

    .md\:h-\[26px\] {
        height: 26px;
    }

    .md\:h-\[30px\] {
        height: 30px;
    }

    .md\:h-\[33px\] {
        height: 33px;
    }

    .md\:h-\[40px\] {
        height: 40px;
    }

    .md\:h-\[50px\] {
        height: 50px;
    }

    .md\:min-h-\[120px\] {
        min-height: 120px;
    }

    .md\:min-h-\[150px\] {
        min-height: 150px;
    }

    .md\:w-10 {
        width: 2.5rem;
    }

    .md\:w-\[110px\] {
        width: 110px;
    }

    .md\:w-\[150px\] {
        width: 150px;
    }

    .md\:w-\[160px\] {
        width: 160px;
    }

    .md\:w-\[24px\] {
        width: 24px;
    }

    .md\:w-\[250px\] {
        width: 250px;
    }

    .md\:w-\[40px\] {
        width: 40px;
    }

    .md\:w-\[50px\] {
        width: 50px;
    }

    .md\:w-\[60\%\] {
        width: 60%;
    }

    .md\:w-\[61px\] {
        width: 61px;
    }

    .md\:w-\[75px\] {
        width: 75px;
    }

    .md\:w-\[83px\] {
        width: 83px;
    }

    .md\:w-\[86px\] {
        width: 86px;
    }

    .md\:w-\[90px\] {
        width: 90px;
    }

    .md\:w-auto {
        width: auto;
    }

    .md\:w-fit {
        width: -moz-fit-content;
        width: fit-content;
    }

    .md\:min-w-\[150px\] {
        min-width: 150px;
    }

    .md\:min-w-\[200px\] {
        min-width: 200px;
    }

    .md\:min-w-\[450px\] {
        min-width: 450px;
    }

    .md\:min-w-\[700px\] {
        min-width: 700px;
    }

    .md\:max-w-\[100px\] {
        max-width: 100px;
    }

    .md\:max-w-\[110px\] {
        max-width: 110px;
    }

    .md\:max-w-\[300px\] {
        max-width: 300px;
    }

    .md\:max-w-\[340px\] {
        max-width: 340px;
    }

    .md\:max-w-\[400px\] {
        max-width: 400px;
    }

    .md\:max-w-\[600px\] {
        max-width: 600px;
    }

    .md\:max-w-\[90px\] {
        max-width: 90px;
    }

    .md\:max-w-\[calc\(100\%-80px\)\] {
        max-width: calc(100% - 80px);
    }

    .md\:flex-none {
        flex: none;
    }

    .md\:shrink-0 {
        flex-shrink: 0;
    }

    .md\:grow-0 {
        flex-grow: 0;
    }

    .md\:-translate-x-1\/2 {
        --tw-translate-x: -50%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:flex-row {
        flex-direction: row;
    }

    .md\:flex-col {
        flex-direction: column;
    }

    .md\:items-center {
        align-items: center;
    }

    .md\:justify-end {
        justify-content: flex-end;
    }

    .md\:justify-center {
        justify-content: center;
    }

    .md\:gap-2\.5 {
        gap: 0.625rem;
    }

    .md\:gap-\[10px\] {
        gap: 10px;
    }

    .md\:gap-\[16px\] {
        gap: 16px;
    }

    .md\:gap-\[30px\] {
        gap: 30px;
    }

    .md\:bg-\[url\(\'\.\.\/images\/serenade-bg\.jpg\'\)\] {
        background-image: url('../images/serenade-bg.jpg');
    }

    .md\:p-0 {
        padding: 0px;
    }

    .md\:p-\[15px\] {
        padding: 15px;
    }

    .md\:p-\[16px\] {
        padding: 16px;
    }

    .md\:p-\[20px\] {
        padding: 20px;
    }

    .md\:p-\[30px\] {
        padding: 30px;
    }

    .md\:px-2 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .md\:px-5 {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .md\:px-\[16px\] {
        padding-left: 16px;
        padding-right: 16px;
    }

    .md\:px-\[20px\] {
        padding-left: 20px;
        padding-right: 20px;
    }

    .md\:px-\[30px\] {
        padding-left: 30px;
        padding-right: 30px;
    }

    .md\:py-\[15px\] {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .md\:py-\[20px\] {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .md\:py-\[40px\] {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .md\:pb-\[20px\] {
        padding-bottom: 20px;
    }

    .md\:pr-\[130px\] {
        padding-right: 130px;
    }

    .md\:pt-\[40px\] {
        padding-top: 40px;
    }

    .md\:text-\[12px\] {
        font-size: 12px;
    }

    .md\:text-\[14px\] {
        font-size: 14px;
    }

    .md\:text-\[16px\] {
        font-size: 16px;
    }

    .md\:text-\[18px\] {
        font-size: 18px;
    }

    .md\:text-\[22px\] {
        font-size: 22px;
    }

    .md\:text-\[26px\] {
        font-size: 26px;
    }

    .md\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }

    .md\:leading-\[12px\] {
        line-height: 12px;
    }

    .md\:leading-\[26px\] {
        line-height: 26px;
    }
}

@media (min-width: 1024px) {
    .lg\:block {
        display: block;
    }

    .lg\:inline {
        display: inline;
    }

    .lg\:w-\[900px\] {
        width: 900px;
    }

    .lg\:max-w-\[600px\] {
        max-width: 600px;
    }

    .lg\:shrink-0 {
        flex-shrink: 0;
    }

    .lg\:flex-row {
        flex-direction: row;
    }

    .lg\:items-center {
        align-items: center;
    }

    .lg\:justify-start {
        justify-content: flex-start;
    }
}