/*
    START: RESET
    Josh's Custom CSS Reset (with customization)
    https://www.joshwcomeau.com/css/custom-css-reset/
*/
:root {
    /* Colors */
    --color-black: #3F4040;
    --color-pink: #F8B9BA;
    --color-pink-10: #F8B9BA1A;
    --color-dark-pink: #DD9498;
    --color-white: #FFFFFF;

    --color-gray-2: #828282;
    --color-gray-4: #BDBDBD;
    --color-gray-100: #F3F4F6;
    --color-gray-200: #E5E7EB;
    --color-gray-500: #6B7280;
    --color-gray-600: #4B5563;
    --color-success: #27AE60;
    --shadow: #AA4F5461;

    --color-gold: #E1790A;
    --color-dark-gold: #CA810A;
    --color-green: #12341D;
    --color-green-dark: #112E1C;
    --color-cream: #F3E9E2;

    --linear-gradient-primary: linear-gradient(90deg, #CA810A 0%, #E8B460 48.56%, #CA810A 100%);


    /* Theme colors */
    --color-primary: var(--color-black);
    --color-text-primary: white;
    --color-secondary: var(--color-gold);
    --color-accent: var(--color-dark-pink);
    --color-text-muted: #999999;

    /* Font Family */
    --font-baskerville-bold: 'Libre Baskerville Bold', serif;
    --font-figtree-bold: 'Figtree Bold', sans-serif;
    --font-figtree-semibold: 'Figtree SemiBold', sans-serif;
    --font-figtree-medium: 'Figtree Medium', sans-serif;
    --font-figtree-regular: 'Figtree Regular', sans-serif;
}

/* START: KEYFRAMES */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0,100%,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes fadeOutDown {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0,100%,0)
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes fadeOutDown {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0,100%,0)
    }
}

@keyframes slideInBounceLeft {
    0% {
        opacity: 0;
        transform: translate(-150%) rotate(15deg);
    }
    45% {
        opacity: 1;
        transform: translate(-26%) rotate(15deg);
    }
    60% {
        opacity: 1;
        transform: translate(-36%) rotate(15deg);
    }
    72% {
        opacity: 1;
        transform: translate(-31%) rotate(15deg);
    }
    82% {
        opacity: 1;
        transform: translate(-34%) rotate(15deg);
    }
    88% {
        opacity: 1;
        transform: translate(-32.5%) rotate(15deg);
    }
    93% {
        opacity: 1;
        transform: translate(-33.3%) rotate(15deg);
    }
    96% {
        opacity: 1;
        transform: translate(-32.8%) rotate(15deg);
    }
    98% {
        opacity: 1;
        transform: translate(-33.1%) rotate(15deg);
    }
    100% {
        opacity: 1;
        transform: translate(-33%) rotate(15deg);
    }
}

@keyframes slideInBounceRight {
    0% {
        opacity: 0;
        transform: translate(150%) rotate(-15deg);
    }
    45% {
        opacity: 1;
        transform: translate(36%) rotate(-15deg);
    }
    60% {
        opacity: 1;
        transform: translate(46%) rotate(-15deg);
    }
    72% {
        opacity: 1;
        transform: translate(41%) rotate(-15deg);
    }
    82% {
        opacity: 1;
        transform: translate(44%) rotate(-15deg);
    }
    88% {
        opacity: 1;
        transform: translate(42.5%) rotate(-15deg);
    }
    93% {
        opacity: 1;
        transform: translate(43.3%) rotate(-15deg);
    }
    96% {
        opacity: 1;
        transform: translate(42.8%) rotate(-15deg);
    }
    98% {
        opacity: 1;
        transform: translate(43.1%) rotate(-15deg);
    }
    100% {
        opacity: 1;
        transform: translate(43%) rotate(-15deg);
    }
}

@keyframes loading {
    to {
        transform: rotate(1turn)
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}
/* END: KEYFRAMES */

/* START: UTILS */
.hidden {
    display: none !important;
}

.bg-green {
    background-color: var(--color-green);
}

.bg-green-dark {
    background-color: var(--color-green-dark);
}

.bg-black {
    background-color: var(--color-black);
}

.ml-auto {
    margin-left: auto;
}

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

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

.mt-15 {
    margin-top: 15px;
}

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

.width-full {
    width: 100%;
}

.font-figtree-semibold {
    font-family: var(--font-figtree-semibold);
}

.font-figtree-bold {
    font-family: var(--font-figtree-bold);
}

.pb-0 {
    padding-bottom: 0 !important;
}

.expand-column {
    grid-column: 1 / -1;
}

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

.relative {
    position: relative;
}

.nowrap {
    white-space: nowrap;
}

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

.block {
    display: block;
}

.rotate-180 {
    transform: rotate(180deg);
}
/* END: UTILS */

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font: 16px/1.2 var(--font-figtree-regular);
    transition: background-color 1.5s ease;
    background-image: url('/static/img/background-pattern.webp');
    background-repeat: repeat;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select, pre {
    font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

p {
    text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    font: inherit;
}

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

#root, #__next {
    isolation: isolate;
}
/* END: RESET */

/* START: CONTAINER */
.container {
    max-width: 1340px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;

    @media (max-width: 768px) {
        padding-left: 15px;
        padding-right: 15px;
    }
}
/* END: CONTAINER */


/* START: link */
.link {
    font: 14px/1.2 var(--font-figtree-semibold);
    color: var(--color-green);
    cursor: pointer;
    text-decoration: none;
    background: none;
    border: none;

    &[disabled] {
        color: var(--color-gray-4);
        cursor: not-allowed;
    }
}
/* END: link */


/* START: BUTTON */
.button {
    padding: 14px 24px;
    font: 16px/1.2 var(--font-figtree-semibold);
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;

    display: inline-block;
    text-align: center;
    color: white;

    background-color: var(--color-black);
    color: var(--color-white);
    border: 1px solid var(--color-black);
    text-decoration: none;

    &:focus {
        outline: none;
    }

    @media (max-width: 768px) {
        padding: 10px 20px;
        font-size: 14px;
    }
}

.button--input {
    padding: 12px 18px;
}

.button--rounded {
    border-radius: 99px;
}

.button--secondary {
    background-color: var(--color-secondary);
    color: var(--color-text-primary);
    border-color: var(--color-secondary);
}

.button--outline {
    background-color: white;
    color: var(--color-black);
    border-color: var(--color-black);
}

.button--outline-dark {
    background-color: var(--color-black);
    color: var(--color-white);
    border: 1px solid var(--color-white);
}

.button--change-bg {
    --change-bg-to: var(--color-dark-gold);

    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: border-color 0.2s ease;


    &::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0;
        background: var(--change-bg-to);
        transition: height 0.2s ease, color 0.2s ease;
        z-index: -1;
    }

    /* only works on mobile */
    @media (min-width: 568px) {
        &:hover {
            border-color: var(--change-bg-to);
            color: white;

            &::before {
                height: 100%;
            }
        }
    }
}

.button[disabled] {
    &,
    &::before,
    &:hover {
        background-color: var(--color-gray-4);
        color: var(--color-white);
        border-color: var(--color-gray-4);
    }
}
/* END: BUTTON */


/* START: CARD */
.card {
    background-color: var(--color-white);
    border-radius: 25px;
    padding: 40px;
    transition: height 0.2s ease-in-out;

    @media (max-width: 768px) {
        padding: 25px 18px;
    }
}

.card__header-btn {
    display: none;
    width: 100%;
    max-width: 80px;
    border-radius: 4px;
    height: 4px;
    background-color: var(--color-cream);
    justify-self: center;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    transform: translateY(-15px);
    cursor: grab;
    position: relative;

    &::after {
        content: '';
        position: absolute;
        top: -20px;
        bottom: -20px;
        left: -20px;
        right: -20px;
        cursor: grab;
    }

    @media (max-width: 768px) {
        display: block;
    }
}

.card--logout {
    width: 420px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

    .card__title {
        font-size: 30px;
        margin-bottom: 23px;
    }

    .card__title,
    .card__subtitle {
        text-align: left;
        margin-left: 0;
        margin-right: 0;
        max-width: unset;
    }

    @media (max-width: 768px) {
        display: none;
    }
}

.card--bottom-sheet {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.card--no-padding {
    padding: 0;
}

.card__title {
    font: 40px/1.2 var(--font-baskerville-bold);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;

    @media (max-width: 768px) {
        font-size: 25px;
    }
}

.card__subtitle {
    font: 16px/1.2 var(--font-figtree-regular);
    color: var(--color-black);
    width: 100%;
    margin-bottom: 30px;
    text-align: center;

    @media (max-width: 768px) {
        font-size: 14px;
        margin-bottom: 20px;
    }
}

.card__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}
/* END: CARD */

/* START: INPUT */
.input {
    width: 100%;
    padding: 12px 13px;
    font: 16px/1.2 var(--font-figtree-regular);
    border: 1px solid var(--color-cream);
    border-radius: 5px;
    transition: border-color 0.2s;
    color: var(--color-black);

    &::placeholder {
        color: var(--color-gray-2);
        text-transform: capitalize;
    }

    &:focus {
        outline: none;
        border-color: var(--color-cream);
    }

    &[type="date"]::-webkit-calendar-picker-indicator {
        width: 18px;
        position: relative;
        right: -5px;
        cursor: pointer;
    }

    &[type="date"]::-webkit-calendar-picker-indicator {
        background: transparent url("/static/img/icon-calendar.webp") center no-repeat;
        background-size: 18px;
    }

    &[type="date"]::placeholder {
        text-transform: uppercase;
    }

    &[type="number"] {
        appearance: textfield;

        /* remove arrow */
        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
    }

    @media (max-width: 768px) {
        font-size: 15px;
    }
}

.input--error {
    border-color: var(--color-dark-gold);
    background-color: white;
}

.input-radio {
    height: 22px;
    aspect-ratio: 1;
    border: 1px solid var(--color-gray-4);
    background-color: white;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    user-select: none;

    &::before {
        content: "";
        position: absolute;
        display: block;

        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        height: 70%;
        aspect-ratio: 1;
        border-radius: 50%;
    }

    input:checked + & {
        border: 2px solid var(--color-dark-gold);

        &::before {
            background-color: var(--color-dark-gold);
        }
    }
}

.input-radio--error {
    border-color: var(--color-dark-gold);

    input:checked + &::before {
        background-color: var(--color-dark-gold);
    }
}

/* 2. Style the custom checkmark container (the box) */
.input-checkbox {
    display: block; /* Ensures the label and input behave as a block */
    position: relative;
    cursor: pointer;
    font-size: 16px;
    user-select: none; /* Prevent text selection */

    height: 20px;
    width: 20px;

    &::after {
        content: '';
        position: absolute;
        left: 7px; /* Adjust for centering */
        top: 3px; /* Adjust for centering */
        width: 6px;
        height: 12px;
        border: solid white;
        border-width: 0 3px 3px 0;
        transform: rotate(45deg);
        opacity: 0; /* Hide the checkmark by default */
        transition: all 0.2s ease;
    }

    &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;

        border: 2px solid var(--color-cream);
        border-radius: 4px;
    }

    input[type="checkbox"]:checked + &::before {
        background-color: var(--color-dark-gold);
    }

    input[type="checkbox"]:checked + &::after {
        opacity: 1;
    }
}

.input-checkbox--error::before {
    border-color: var(--color-dark-gold);
}
/* END: INPUT */


/* START: INPUT WRAPPER  */
.input-icon {
    display: flex;
    align-items: center;
    position: relative;
}

.input-icon--suffix {
    > .input-icon__input {
        padding-right: 50px;
    }

    > .input-icon__icon, .input-icon__text {
        right: 15px;
    }
}

.input-icon--prefix {
    > .input-icon__input {
        padding-left: 50px;
    }

    > .input-icon__icon {
        left: 15px;
    }
}

.input-icon__icon {
    position: absolute;
    cursor: pointer;
    color: var(--color-black);
    width: 18px;
    height: 18px;

    /* if the icon is a font icon such as Rp or +62 */
    font-weight: 600;
    font-size: 16px;
}

.input-icon__text {
    display: block;
    position: absolute;
    cursor: pointer;
    color: var(--color-black);
    height: 18px;
    font-weight: 500;
    font-size: 16px;

    @media (max-width: 768px) {
        font-size: 13px;
    }
}

/* Radio buttons */
.radio-group {
    display: flex;
    gap: 30px;
    max-width: 200px;
    justify-content: space-between;
    width: 100%;
}

.radio-group__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
    color: var(--color-text-primary);
    position: relative;
}

.radio-group__input {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
}

.radio-group__label {
    font: 16px/1.2 var(--font-figtree-regular);

    @media (max-width: 768px) {
        font-size: 15px;
    }
}
/* END: INPUT WRAPPER */



/* START FORM */
.form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form__help-text {
    font: 15px/1.2 var(--font-figtree-medium);

    @media (max-width: 768px) {
        font-size: 14px;
    }
}

.form__resend-text {
    font: 15px/1.2 var(--font-figtree-regular);

    @media (max-width: 768px) {
        font-size: 14px;
    }
}

.form__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form__field--inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;

    @media (max-width: 568px) {
        grid-template-columns: 1fr;
        gap: 20px;  /* same gap with .form */
    }
}

.form__field-label {
    font: 15px/1.2 var(--font-figtree-medium);
    color: var(--color-black);
    display: block;

    @media (max-width: 768px) {
        font-size: 13px;
    }
}

.form__field-label--required::after {
    content: "*";
    color: var(--color-dark-gold);
}
/* END FORM */

/* START: HEADER */
.header {
    position: relative; /* required to enable z-index */
    z-index: 1000;
    width: 100%;
}

.header__container {
    padding-top: 30px;
    padding-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    @media (max-width: 768px) {
        padding-top: 18px;
        padding-bottom: 12px;
        position: relative;
        justify-content: center;
    }
}

.header__logo {
    max-width: 150px;
}

.header__logo-image {
    width: 100%;
    height: auto;
    display: block;
}

.header__nav {
    display: flex;
    gap: 50px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;

    @media (max-width: 768px) {
        display: none;
    }
}

.header__nav-link {
    color: var(--color-text-primary);
    font: 16px/1.0 var(--font-baskerville-bold);
}

.header__toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: none;
    align-items: center;
    justify-content: center;

    @media (max-width: 768px) {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        display: block;
    }
}

.header__toggle-close {
    position: absolute;
    top: 35px;
    left: 23px;
    cursor: pointer;
}

.header__toggle-icon {
    width: 20px;
    height: 16px;
}

.header__toggle-icon-close {
    width: 15px;
    height: 15px;
}

.header__mobile {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    background-color: var(--color-green);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-direction: column;
    gap: 60px;
}

.header__mobile-nav {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 40px 20px 20px;

    @media (max-width: 768px) {
        display: flex;
    }
}

.header__mobile-link {
    color: var(--color-white);
    font: 20px/1.0 var(--font-baskerville-bold);
}

.header__mobile-logo {
    display: flex;
    justify-content: center;
    padding: 25px 0;
}

.header__mobile-logo-link {
    width: 120px;

    img {
        width: 100%;
        height: auto;
        display: block;
    }
}

input[type="checkbox"]:checked ~ .header__mobile {
    display: flex;
}

.header__mobile-intersection {
    height: 30px;
    background-image: url("/static/img/intersection-pink.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.header__mobile-bottom {
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;
    padding-bottom: 20px;
}

.header__mobile-footer {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.header__mobile-social {
    display: flex;
    gap: 10px;
}

.header__mobile-social-link {
    width: 43px;
    height: 43px;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.header__mobile-copyright {
    font: 13px/1.2 var(--font-figtree-regular);
    color: var(--color-white);
}
/* END: HEADER */

/* START: FOOTER */
.footer {
    background-color: var(--color-primary);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 80px 0;

    @media (max-width: 768px) {
        padding-bottom: 40px;

    }
}

.footer__container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 80px;
    align-items: start;

    @media (max-width: 1024px) {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-left: 40px;
        padding-right: 40px;
    }

    @media (max-width: 768px) {
        padding-left: 20px;
        padding-right: 20px;
        gap: 50px;
    }
}

.footer__brand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    min-height: 200px;
}

.footer__logo {
    width: 133px;
    height: 133px;
    margin-bottom: 10px;

    img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    @media (max-width: 768px) {
        margin-left: auto;
        margin-right: auto;
    }
}

.footer__description {
    font: 16px/1.2 var(--font-figtree-regular);
    color: var(--color-text-primary);
    max-width: 280px;
    text-align: center;

    @media (max-width: 768px) {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        line-height: 1.3;
    }
}

.footer__nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;

    @media (max-width: 768px) {
        align-items: center;
    }
}

.footer__nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    height: 100%;

    @media (max-width: 768px) {
        text-align: center;
        gap: 24px;
    }
}

.footer__nav-item {
    margin: 0;
}

.footer__nav-link {
    font: 18px/1.4 var(--font-baskerville-bold);
    color: white;
    text-decoration: none;
    transition: color 0.2s;

    @media (max-width: 768px) {
        font-size: 20px;
    }
}

.footer__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    height: 100%;

    @media (max-width: 1024px) {
        align-items: center;
        min-height: auto;
        gap: 20px;
    }
}

.footer__social {
    display: flex;
    gap: 12px;
    align-items: center;
}

.footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer__social-icon {
    width: 43px;
    height: 43px;
    object-fit: contain;
}

.footer__copyright {
    font: 14px/1.2 var(--font-figtree-regular);
    color: var(--color-text-primary);
    text-align: right;

    @media (max-width: 1024px) {
        text-align: center;
        font-size: 13px;
    }
}
/* END: FOOTER */

/* --- AUTH LAYOUT --- */
/* START: AUTH LAYOUT */
.auth-layout {
    min-height: calc(100vh - 100px); /* Full viewport height minus header/footer */
    display: flex; /* Still using flex for the overall column structure (nav + content) */
    flex-direction: column;
}

.auth-layout__content {
    flex-grow: 1;
    display: grid;
    place-items: center;
    padding: 60px 40px;

    @media (max-width: 1024px) {
        padding: 40px 30px;
    }

    @media (max-width: 768px) {
        padding: 30px 20px;
        place-items: start center;
    }

    @media (max-width: 568px) {
        padding: 40px 16px;
    }
}

.auth-layout__cards-container {
    display: grid;
    grid-template-columns: 528px 420px; /* Login card wider (2:1 ratio) */
    gap: 40px; /* Space between the two cards */
    width: 100%;
    max-width: 1000px;

    @media (max-width: 768px) {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 500px;
    }
}

.auth-layout__cards-container--single {
    grid-template-columns: 1fr;
}

.auth-layout__cards-container--small {
    max-width: 595px;
}
/* END: AUTH LAYOUT */


.password-rules {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font: 12px/1.2 var(--font-figtree-medium);
}

.password-rules__list {
    list-style: none;
    padding-left: 0;;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.password-rules__item {
    font-size: 13px;
    color: var(--color-gray-4);
    display: flex;
    align-items: center;
    gap: 5px;

    &::before {
        content: "";
        display: block;
        background-image: url('/static/img/icon-gray-checkmark.webp');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        height: 10px;
        width: 10px;
    }
}

.password-rules__item--valid {
    color: var(--color-success);

    &::before {
        content: "";
        display: block;
        background-image: url('/static/img/icon-green-checkmark.webp');
    }
}

.voucher-reward-content {
    width: 100%;

    padding-left: 16px;
    padding-right: 16px;
    padding-top: 32px;
    padding-bottom: 32px;

    @media (min-width: 1024px) {
        padding-left: 32px;
        padding-right: 32px;
    }
}


/* Elements within .welcome-area */
.welcome-area {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
}

.welcome-area__card {
    display: flex;
    align-items: center;
    justify-content: center;

    @media (max-width: 768px) {
        width: 100%;
    }
}

.welcome-area__title {
    font-size: 60px;
    font-family: var(--font-baskerville-bold);
    font-weight: 700;
    color: var(--color-text-primary);

    @media (max-width: 1024px) {
        font-size: 48px;
    }

    @media (max-width: 768px) {
        display: none;
        font-size: 36px;
    }
}

.points-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;

    @media (max-width: 768px) {
        flex-direction: column;
    }
}

.points-summary--gap-bottom {
    margin-bottom: 35px;

    @media (max-width: 768px) {
        margin-bottom: 25px;
    }
}

.points-summary__expiry-text {
    font: 16px/1.2 var(--font-figtree-medium);
    background-color: var(--color-cream);
    padding: 8px 18px;
    border-radius: 5px;

    @media (max-width: 768px) {
        font-size: 11px;
        width: 100%;
        text-align: center;
    }
}

/*
* --- BEM BLOCK: .tabs-nav ---
*/
.tabs-nav {
    display: flex;
    border-bottom: 1px solid var(--color-cream);
    margin-bottom: 32px;
}

.tabs-nav__button {
    font: 16px/1.2 var(--font-figtree-medium);
    padding: 8px 16px;
    font-size: 14px;
    cursor: default; /* Non-clickable */
    border: none;
    background: none;
    transition: color 0.2s;
    text-decoration: none;
    color: var(--color-black);
    cursor: pointer;

    @media (max-width: 768px) {
        flex: 1;
        text-align: center;
        font-size: 13px;
    }
}

.tabs-nav__button--active {
    border-bottom: 2px solid var(--color-dark-gold);
    color: var(--color-dark-gold);
    font-family: var(--font-figtree-bold);
}

/*
* --- BEM BLOCK: .reward-list ---
*/
.reward-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    flex: 1;
    height: 320px;
    min-height: 320px;
    padding-bottom: 24px;
    overflow-y: auto;
    scrollbar-width: none;
    align-items: flex-start;

    @media (max-width: 1023px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @media (max-width: 767px) {
        grid-template-columns: 1fr;
        max-height: none;
        height: auto;
    }
}

/*
* --- BEM BLOCK: .reward-item ---
*/
.reward-item {
    display: grid;
    background-color: var(--color-white);
    padding: 16px;
    padding-left: 0;
    padding-top: 0;
    border-bottom-right-radius: 12px;
    transition: all 0.3s;
    border-right: 1px solid var(--color-cream);
    border-bottom: 1px solid var(--color-cream);
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 22px;

    @media (max-width: 768px) {
        display: grid;
        grid-template-columns: 60px 1fr;
        gap: 10px;
        height: 115px;
        padding-right: 15px;
        padding-bottom: 15px;
        column-gap: 12px;
    }
}

.reward-item__image-container {

    > img {
        width: 88px;
        height: 88px;
        object-fit: cover;
        border-radius: 8px;
    }

    @media (max-width: 798px) {
        > img {
            width: 60px;
            height: 60px;
        }
    }

}

.reward-item__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.reward-item__title {
    font: 18px/1.2 var(--font-figtree-semibold);
    margin-bottom: 4px;

    @media (max-width: 768px) {
        font-size: 15px;
    }
}

.reward-item__description {
    font-size: 14px;
    color: var(--color-gray-600);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

    @media (max-width: 768px) {
        font-size: 12px;
    }
}

.reward-item__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
}

.reward-item__footer--desktop-only {
    @media (max-width: 768px) {
        display: none;
    }
}

.reward-item__footer--mobile-only {

    @media (min-width: 768px) {
        display: none;
    }
}

.reward-item__points {
    font: 20px/1.2 var(--font-figtree-semibold);
    color: var(--color-black);
    display: inline-flex;
    align-items: center;
    gap: 5px;

    @media (max-width: 768px) {
        font-size: 18px;

        &::after {
            height: 14px;
        }
    }
}

.reward-item__button {
    padding: 7px 15px;
    font: 16px/1.2 var(--font-figtree-semibold);
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;

    display: inline-block;
    text-align: center;
    color: white;

    background-color: var(--color-black);
    color: var(--color-white);
    border: 1px solid var(--color-black);
    text-decoration: none;

    &:focus {
        outline: none;
    }

    @media (max-width: 768px) {
        padding: 4px 8px;
        font-size: 14px;
    }
}

/* START: MEMBERSHIP POINT */
.membership-point {
    font: 26px/1.2 var(--font-figtree-medium);
    color: var(--color-text-primary);
    display: inline-flex;
    align-items: center;
    gap: 5px;

    @media (max-width: 768px) {
        font-size: 13px;
    }
}

.membership-point--big {
    @media (max-width: 768px) {
        font-size: 17px;
    }
}

.membership-point--column {

    @media (max-width: 768px) {
        flex-direction: column;
        gap: 9px;
    }
}


.membership-point__content {
    display: flex;
    gap: 3px;
    align-items: center;
}

.membership-point__point {
    font: 36px/1.2 var(--font-figtree-bold);
    display: inline-flex;
    align-items: center;
    gap: 5px;

    @media (max-width: 768px) {
        font-size: 18px;
    }
}

.membership-point__point--big {
    @media (max-width: 768px) {
        font-size: 26px;
    }
}

.membership-point__point--icon::after {
    content: "";
    display: block;
    height: 10px;
    width: 20px;
    background-image: url('/static/img/icon-chevron-down.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    transform: rotate(-90deg);

    @media (max-width: 768px) {
        width: 10px;
        height: 6px;
    }
}

.membership-point__icon {
    display: block;
    height: 26px;
    width: 26px;

    @media (max-width: 768px) {
        height: 14px;
        width: 14px;
    }
}

.membership-point__icon--big {
    @media (max-width: 768px) {
        height: 18px;
        width: 18px;
    }
}
/* END: MEMBERSHIP POINT */

/* START: EXPAND LAYOUT */
.expand-column {
    grid-column: 1 / -1;
}
.expand-layout {
    display: flex;
    flex-direction: column;
}

.expand-layout__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* END: EXPAND LAYOUT */

/* START: VOUCHER BODY */
.voucher-body {
    height: 100vh;
    overflow: hidden;

    @media (max-height: 900px) {
        height: auto;
        overflow: auto;
    }

    @media (max-width: 768px) {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }
}
/* END: VOUCHER BODY */

/* START: TRANSACTION HISTORY */
.transaction-history {
    padding: 40px 20px;

    @media (max-width: 768px) {
        padding: 0 20px;
    }
}

.transaction-history__tab {
    padding: 0 40px;

    @media (max-width: 768px) {
        padding: 0px;
        margin-bottom: 0;
    }
}

.transaction-history__header {
    text-align: center;
    padding: 40px 40px 30px;

    @media (max-width: 768px) {
        padding: 20px 13px;
    }
}

.transaction-table {
    width: calc(100% - 80px);
    margin-left: auto;
    margin-right: auto;

    @media (max-width: 768px) {
        width: calc(100% - 30px );
    }
}

.transaction-table--expiry {
    max-width: 390px;
    margin-right: auto;
    margin-left: 40px;

    @media (max-width: 768px) {
        margin: auto;
        max-width: unset;
    }
}

.transaction-table__header {
    display: grid;
    grid-template-columns: 60px 1fr 2fr 1fr 1fr;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-cream);

    @media (max-width: 768px) {
        display: none;
    }
}

.transaction-table__header-cell {
    font: 14px/1.2 var(--font-figtree-medium);
    color: var(--color-text-primary);
}

.transaction-table__header-cell--right {
    text-align: right;
}

.transaction-table__body {
    display: flex;
    flex-direction: column;

    @media (max-width: 768px) {
        padding-top: 17px;
        padding-bottom: 0;
    }
}

.transaction-table__body-title {
    display: none;
    font: 13px/1.2 var(--font-figtree-medium);
    padding-bottom: 5px;

    @media (max-width: 768px) {
        display: block;
    }
}

.transaction-row {
    display: grid;
    grid-template-columns: 60px 1fr 2fr 1fr 1fr;
    grid-template-areas: "icon activity outlet date points";
    padding: 10px;
    border-bottom: 1px solid var(--color-cream);
    align-items: center;

    @media (max-width: 768px) {
        gap: 5px 15px;
        padding: 16px 0;
        align-items: flex-start;
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "icon activity points"
                             "icon outlet points"
                             "icon date points";


        &:last-child {
            margin-bottom: 20px;
        }
    }
}

.transaction-row:last-child {
    border-bottom: none;
    margin-bottom: 30px;

    @media (max-width: 768px) {
        margin-bottom: 5px;
    }
}

.transaction-cell--icon {
    grid-area: icon;
}

.transaction-cell--activity {
    grid-area: activity;
}

.transaction-cell--outlet {
    grid-area: outlet;

    @media (max-width: 768px) {
        font-size: 12px;
    }
}

.transaction-cell--date {
    grid-area: date;
}

.transaction-cell--points {
    grid-area: points;
    text-align: right;
    justify-self: end;

    @media (max-width: 768px) {
        align-self: start;
    }
}

.transaction-item__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.transaction-item__info-icon {
    width: 40px;
    height: 40px;
    display: block;

    @media (max-width: 768px) {
        height: 57px;
        width: 57px;
    }
}

.transaction-item__title {
    font: 16px/1.2 var(--font-figtree-semibold);
    color: var(--color-text-primary);

    @media (max-width: 768px) {
        font-size: 15px;
    }
}

.transaction-item__date {
    font: 16px/1.2 var(--font-figtree-regular);
    color: var(--color-text-primary);

    @media (max-width: 768px) {
        font-size: 11px;
        color: var(--color-gray-500);
    }
}

.transaction-item__expiration-date {
    font: 16px/1.2 var(--font-figtree-regular);

    @media (max-width: 768px) {
        font-size: 15px;
    }
}

.transaction-item__points {
    font: 18px/1.2 var(--font-figtree-semibold);
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;

    svg {
        height: 13px;
        width: 13px;
    }

    @media (max-width: 768px) {
        font-size: 15px;
    }
}

.transaction-item__points--positive {
    color: var(--color-text-primary);
}

.transaction-item__points--negative {
    color: var(--color-dark-gold);

    svg {
        fill: var(--color-dark-gold);
    }
}

@media (max-width: 768px) {

    .transaction-row {
        gap: 5px 15px;
        padding: 16px 0;
        align-items: flex-start;
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "icon activity points"
                             "icon outlet points"
                             "icon date points";
    }

    .transaction-cell--points {
        align-self: start;
    }

    .transaction-item__date {
        font-size: 12px;
        color: var(--color-gray-500);
    }
}
/* END: TRANSACTION HISTORY */

/* START: COIN EXPIRY */
.transaction-table__header--expiry {
    grid-template-columns: 1fr 1fr;
}

.transaction-row--expiry {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "date points";
    padding-top: 20px;
    padding-bottom: 20px;

    @media (max-width: 768px) {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "date points";
        gap: 0;
        padding: 16px 0;
    }
}
/* END: COIN EXPIRY */

/* START: EMPTY STATE */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
}

.empty-state--adjust-padding {
    padding-top: 80px;
    padding-bottom: 80px;
}

.empty-state__image-container {
    margin-bottom: 24px;
    width: 100%;
    max-width: 200px;
}

.empty-state__image {
    height: 96px;
    width: auto;
    display: block;
    object-fit: contain;
    margin: auto;
}

.empty-state__title {
    font-family: var(--font-figtree-bold);
    font-size: 20px;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.empty-state__title--baskerville {
    font-family: var(--font-baskerville-bold);
}

.empty-state__title--big {
    font-size: 40px;

    @media (max-width: 768px) {
        font-size: 20px;
    }
}

.empty-state__description {
    font-family: var(--font-figtree-regular);
    font-size: 16px;
    color: var(--color-text-muted);
    max-width: 300px;
    margin: 0 auto;

    @media (max-width: 768px) {
        font-size: 14px;
    }
}

.empty-state__description--text-black {
    color: var(--color-black);
}

.empty-state__description--wide {
    max-width: none;
}

/* START: VOUCHER CARD DETAIL */
.voucher-card {
    background: var(--color-white);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;
}

.voucher-card__header {
    display: flex;
    flex-direction: row;
}

.voucher-card__image-container {
    max-width: 460px;
    min-width: 460px;
    width: 100%;
    position: relative;
    padding: 40px;

    border-width: 0px;
    border-right-width: 1px;
    border-style: solid;
    border-color: transparent;

    border-image: repeating-linear-gradient(
        to bottom,
        var(--color-cream) 0,
        var(--color-cream) 5px,
        transparent 5px,
        transparent 10px
    ) 1;

    @media (max-width: 768px) {
        padding: 25px;
        max-width: 100%;
        min-width: auto;
        border-right-width: 0px;
        border-bottom-width: 1px;

        border-image: repeating-linear-gradient(
            to right,
            var(--color-cream) 0,
            var(--color-cream) 5px,
            transparent 5px,
            transparent 10px
        ) 1;
    }
}

.voucher-card__image {
    width: 100%;
    object-fit: cover;
    display: block;
    border-radius: 20px;
}

.voucher-card__content {
    padding: 40px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    align-items: flex-start;

    @media (max-width: 768px) {
        align-items: stretch;
        width: 100%;
        padding: 24px;
        padding-bottom: 34px;
    }
}

.voucher-card__title {
    font: 40px/1.2 var(--font-baskerville-bold);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 8px 0;

    @media (max-width: 768px) {
        font-size: 20px;
        margin-bottom: 10px;
    }
}

.voucher-card__subtitle {
    font: 16px/1.5 var(--font-figtree-regular);
    color: var(--color-text-primary);
    margin: 0 0 24px 0;

    @media (max-width: 768px) {
        font-size: 14px;
        margin-bottom: 10px;
    }
}

.voucher-card__validity {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font: 16px/1.2 var(--font-figtree-regular);
    color: var(--color-gray-2);
    margin-bottom: 25px;

    &::before {
        content: "";
        width: 16px;
        height: 16px;
        background-image: url('/static/img/icon-clock.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        display: inline-block;
    }

    @media (max-width: 768px) {
        font-size: 12px;
    }
}

.voucher-card__code-text {
    font-family: var(--font-figtree-bold, sans-serif);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: 0.05em;
}

.voucher-card__copy-button {
    cursor: pointer;
    height: 22px;
    display: block;
    width: auto;
    margin-left: auto;
}

.voucher-card__help-text {
    font-size: 13px;
    color: var(--color-gold);
    margin-bottom: 25px;

    @media (max-width: 768px) {
        font-size: 12px;
    }
}

.voucher-card__section {
    border-top: 1px solid var(--color-cream);
    width: 100%;

    &:last-child {
        border-bottom: 1px solid var(--color-cream);
        padding-bottom: 25px;
    }

    @media (max-width: 768px) {

        &, &:last-child {
            padding-bottom: 2px;
        }
    }
}

.voucher-card__section--expanded {
    @media (max-width: 768px) {
        &, &:last-child {
            padding-bottom: 12px;
        }
    }
}

.voucher-card__section--no-border-top-desktop {
    @media (min-width: 768px) {
        border-top: none;
    }
}

.voucher-card__section--expanded .voucher-card__toggle-button .voucher-card__toggle-icon {
    transform: rotate(180deg);
}

.voucher-card__toggle-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    padding-top: 20px;
    font: 14px/1.2 var(--font-figtree-medium);
    font-weight: 600;
    color: var(--color-text-primary);
    cursor: pointer;
    text-align: left;
    text-transform: uppercase;
    margin-bottom: 10px;

    @media (max-width: 768px) {
        font-size: 13px;
        padding-top: 12px;
    }
}

.voucher-card__toggle-icon {
    transition: transform 0.3s ease;
    font-size: 12px;
    display: none;
    cursor: pointer;

    @media (max-width: 768px) {
        display: block;
    }
}

.voucher-card__details {
    font: 16px/1.5 var(--font-figtree-medium);
    color: var(--color-text-primary);
    overflow: hidden;
    transition: max-height 0.3s ease-out;

    @media (max-width: 768px) {
        font-size: 14px;
    }
}

.voucher-card__details-item {
    font-family: var(--font-figtree-regular);
}

.voucher-card__list {
    margin: 0;
    padding: 0 0 24px 20px;
    color: var(--color-gray-500);
    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .voucher-card__header {
        flex-direction: column;
    }


    .voucher-card__code-text {
        font-size: 20px;
    }
}
/* END: VOUCHER CARD DETAIL */

/* START: REWARD REDEEM */
.reward-redeem {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: "point point"
                         "button balance";
    align-items: center;
    gap: 25px 20px;
    margin-bottom: 30px;

    @media (max-width: 768px) {
        grid-template-columns: 1fr auto;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        padding: 15px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;

        background-color: white;
        margin-bottom: 0;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px 0px;

        align-items: center;
        gap: 5px;
        grid-template-areas: "point button"
                             "balance button";
    }
}

.reward-redeem__points {
    grid-area: point;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.reward-redeem__points-value {
    font: 36px/1.2 var(--font-figtree-bold);
    color: var(--color-text-primary);

    @media (max-width: 768px) {
        font-size: 22px ;
    }
}

.reward-redeem__points-icon {
    height: 32px;
    width: auto;
    display: block;

    @media (max-width: 768px) {
        height: 16px;
    }
}

.reward-redeem__balance {
    grid-area: balance;
    font: 16px/1.2 var(--font-figtree-medium);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;

    @media (max-width: 768px) {
        font-size: 13px;
    }
}

.reward-redeem__balance-icon {
    height: 20px;
    width: auto;
    display: block;

    @media (max-width: 768px) {
        height: 11px;
    }
}
/* END: REWARD REDEEM */


/* START: modal */
.modal {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.3);

    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeOut 0.15s;

    padding: 20px;
    box-sizing: border-box;

    @media (max-width: 768px) {
        align-items: flex-end;
        padding: 0;
    }
}

.modal--loading {
    justify-content: center;
    align-items: center;

    @media (max-width: 768px) {
        align-items: center;
        justify-content: center;
    }
}

.modal--show {
    animation: fadeIn 0.3s;
}

.modal--show .modal__card {
    padding: 40px;
    animation: fadeInUp 0.3s;

    @media (max-width: 768px) {
        padding: 27px 15px;
        animation-name: slideInUp;
    }
}

.modal__header {
    display: flex;
    justify-content: space-between;
    font: 24px/1.2 var(--poppins-semibold);
    color: var(--color-text-primary);
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.modal__card {
    animation-duration: 0.3s;
    background-color: white;
    border-radius: 8px;
    width: 100%;
    max-width: 560px;
    animation: fadeOut 0.15s;

    @media (max-width: 768px) {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        animation-name: slideOutDown;
        max-width: unset;
    }
}

.modal__header-btn {
    display: none;
    width: 100%;
    max-width: 80px;
    border-radius: 4px;
    height: 4px;
    background-color: var(--color-cream);
    justify-self: center;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    transform: translateY(-15px);
    cursor: grab;
    position: relative;

    &::after {
        content: '';
        position: absolute;
        top: -20px;
        bottom: -20px;
        left: -20px;
        right: -20px;
        cursor: grab;
    }

    @media (max-width: 768px) {
        display: block;
    }
}

.modal__footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    align-items: center;

    /* center action button if only one */
    & > *:only-child {
        margin: auto;
    }
}

.modal__title {
    font: 40px/1.2 var(--font-baskerville-bold);
    color: var(--color-black);

    @media (max-width: 768px) {
        font-size: 18px;
    }
}

.modal__content {
    display: flex;
    flex-direction: column;
    gap: 25px;
    font: 14px/1.5 var(--font-figtree-regular);

    @media (max-width: 768px) {
        font-size: 12px;
    }
}
/* END: EMPTY STATE */

/* START: REDEEM STATUS */
.redeem-status {
    background-color: var(--color-white);
    border-radius: 20px;
    padding: 30px;
    width: 100%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    @media (max-width: 768px) {
        width: 100%;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        max-width: 100%;
        padding-top: 10px;
    }
}

.redeem-status__header-btn {
    display: none;
    width: 100%;
    max-width: 80px;
    border-radius: 4px;
    height: 4px;
    background-color: var(--color-cream);
    justify-self: center;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    cursor: grab;
    position: relative;

    &::after {
        content: '';
        position: absolute;
        top: -20px;
        bottom: -20px;
        left: -20px;
        right: -20px;
        cursor: grab;
    }

    @media (max-width: 768px) {
        display: block;
    }
}

.redeem-status__image-container {
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.redeem-status__image {
    width: 96px;
    height: auto;
    object-fit: contain;

    @media (max-width: 768px) {
        max-width: 80px;
        width: 100%;
    }
}

.redeem-status__title {
    font: 40px/1.2 var(--font-baskerville-bold);
    color: var(--color-text-primary);
    margin-bottom: 8px;

    @media (max-width: 768px) {
        font-size: 20px;
    }
}

.redeem-status__description {
    font-family: var(--font-figtree-regular);
    font-size: 16px;
    color: var(--color-text-primary);
    margin-bottom: 24px;
    line-height: 1.5;

    @media (max-width: 768px) {
        font-size: 12px;
    }
}

.redeem-status__button {
    width: 100%;
}
/* END: REDEEM STATUS */

.expandable {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.2s ease;
    overflow: hidden;

    input:checked ~ & {
        grid-template-rows: 1fr;
    }

    & > * {
        overflow: hidden;
    }
}

.expandable--active {
  grid-template-rows: 1fr;
}

.cream-line::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-cream);
  margin-top: 20px;
  margin-bottom: 20px;
}
/* END: TERMS */

/* -------------------------------------------------------------------------- */
/* BEM Block: .membership-card */
/* -------------------------------------------------------------------------- */

.membership-card {
    /* Card Dimensions and Styling using PX */
    width: 100%;
    max-width: 500px;
    min-height: 295px;
    aspect-ratio: 5 / 3;
    padding: 30px 40px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    padding-bottom: 58px;


    /* Glassmorphism Effect */
    background-color: rgba(244, 233, 226, 0.2);
    border: 1.46px solid;
    border: 1px solid;
    border-image-source: linear-gradient(181.5deg, #7E8F84 0.76%, #4F6A5A 98.23%);
    box-shadow: 0px 21px 31px 0px #001B07;
    backdrop-filter: blur(5px);

    @media (max-width: 768px) {
        padding: 25px;
        min-height: 200px;
        padding-bottom: 35px;
    }
}

/* Element: .membership-card__header */
.membership-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    font: 19px/1.2 var(--font-figtree-regular);
    letter-spacing: 1px;
    color: var(--color-text-primary);

    @media (max-width: 768px) {
        font-size: 13px;
    }
}

.membership-card__title {
    color: var(--color-text-primary);
    font: 36px/1.2 var(--font-baskerville-bold);
    margin-bottom: 30px;
    background: linear-gradient(90deg, #C97D05 0%, #EBB867 47.12%, #C97D05 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    display: inline-block;

    @media (max-width: 768px) {
        font-size: 25px;
        margin-bottom: 25px;
    }
}

.membership-card__message {
    font: 16px/1.5 var(--font-figtree-regular);
    margin-top: auto;
    color: var(--color-text-primary);

    @media (max-width: 768px) {
        font-size: 12px;
    }
}

/* -------------------------------------------------------------------------- */
/* BEM Block: .progress (Adjusted for light background) */
/* -------------------------------------------------------------------------- */

.progress {
    position: relative;
    padding: 10px 0px;
    padding-left: 35px;

    @media (max-width: 568px) {
        padding-left: 15px;
    }
}

.progress__line {
    height: 8px;
    background-color: #2F4836;
    border-radius: 4px;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    overflow: hidden;
}

.progress__fill {
    height: 100%;
    width: 0; /* This will be dynamically set */
    background: linear-gradient(90deg, #CA810A 0%, #E8B460 48.56%, #CA810A 100%);;
    border-radius: 4px;
    transition: width 0.8s ease-out;
}

.progress__steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 10;
}

.progress__step {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    font: 19px/1.2 var(--font-figtree-semibold);
    color: var(--color-text-primary); /* Dark text for contrast on white circle */

    background-color: transparent; /* White background for all steps */
    background-image: url('/static/img/membership-step-bg-green.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;

    @media (max-width: 568px) {
        height: 25px;
        width: 25px;
        font-size: 13px;
    }
}

/* Modifier: .progress__step--current (20 in the image) - Popping white highlight */
.progress__step--active {
    background-image: url('/static/img/membership-step-bg.webp');
}

.progress__step--active:last-child ~ .progress__step:not(.progress__step--target) {
    background-image: url('/static/img/membership-step-bg-green.webp');
    color: var(--color-text-primary);
}

/* Modifier: .progress__step--target (30 in the image) - Vibrant color for goal */
.progress__step--target {
    background-image: url('/static/img/membership-step-bg-black.webp');
    color: white;
    transform: scale(1.2);
}

/* HTML: <div class="loader"></div> */
.loader {
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-gold);
  --_m:
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: loading 1s infinite linear;
}

/* -------------------------------------------------------------------------- */
/* OTP Input Styles */
/* -------------------------------------------------------------------------- */

.otp-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.otp-input-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 12px;
    justify-content: center;
    align-items: center;
    width: 100%;

    @media (max-width: 568px) {
        gap: 8px;
    }
}

/* -------------------------------------------------------------------------- */
/* Form Success Message Styles */
/* -------------------------------------------------------------------------- */

.form__field__success-message {
    display: block;
    font: 12px/1.4 var(--font-figtree-regular);
    color: var(--color-success);
    margin-top: 4px;
}

.reward-mobile-header {
    display: none;
    text-align: center;
    font: 18px/1.2 var(--font-baskerville-bold);
    color: var(--color-text-primary);


    @media (max-width: 768px) {
        display: block;
    }
}

.no-scroll {
    overflow: hidden;
    height: 100vh;
}

/* START: FLATPICKR DATE */
.flatpickr-date {
    position: relative;
    display: flex;
    align-items: center;
}

.flatpickr-date--error .flatpickr-date__input {
    border-color: var(--color-dark-gold);
    background-color: var(--color-gold);
}

.flatpickr-date__input {
    background-color: white;
    color: var(--color-text-primary);
}

.flatpickr-date__icon {
    position: absolute;
    right: 15px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    object-fit: contain;
}

/* END: FLATPICKR DATE */

.errorlist {
    font: 13px/1.2 var(--font-figtree-medium);
    color: var(--color-dark-gold);
    list-style: none;

    @media (max-width: 768px) {
        font-size: 12px;
    }
}

.toast-container {
    position: fixed;
    z-index: 1000;  /* must be same with the z-index of the modal */
    left: 50%;
    transform: translateX(-50%);
    top: 105px;

    display: flex;
    flex-direction: column;
    gap: 5px;

    width: 90%;
    max-width: 1000px;


    > * {
        padding: 12px 24px;
        background-color: var(--color-cream);
        font: 16px/1.2 var(--font-figtree-medium);
        text-align: center;
        animation: fadeIn 0.3s ease-in-out forwards,
                   fadeOut 0.3s ease-in-out forwards 3s;

        border-radius: 30px;

        /* hide fourth child and so on */
        &:nth-child(n + 4) {
            display: none;
        }

        &.success {
            color: var(--color-success);
            border: 1px solid var(--color-success);
        }
    }

    @media (max-width: 768px) {
        max-width: 430px;
        top: 65px;

        > * {
            padding-left: 10px;
            padding-right: 10px;
            font-size: 12px;
        }
    }
}