/* REM Unit Font Size init */
html{font-size: 62.5%; /* 1rem == 10px */}

:root {

    /* Container */
    --container-width: 1147px;

    /* Gutter */
    --lg:10rem;
    --md:7rem;
    --gutter: 3rem;

	@media(width < 550px){
		--gutter: 2rem;
	}

	--gutter-half: calc(var(--gutter) / 2);

    /* Figma Spacing Tokens */
    --spacing-4: 4px;
    --spacing-8: 8px;
    --spacing-10: 10px;
    --spacing-12: 12px;
    --spacing-16: 16px;
    --spacing-24: 24px;
    --spacing-32: 32px;
    --spacing-40: 40px;
    --spacing-56: 56px;
    --spacing-80: 80px;
    --spacing-none: 0;

    /* Figma Rounding Tokens */
    --roundings-round: 999px;
    --roundings-xs: 4px;
    --roundings-12: 12px;
    --roundings-l: 16px;
    --roundings-xl: 24px;
    --roundings-none: 0;

    /* Figma Effect Tokens */
    --blur-radius: 1.5px;

    /* Transition */
    --transition: 100ms linear;

}

/* Container */
.container{width: 100%; max-width: 1110px; margin-inline: auto; padding: 0 var(--spacing-24, 24px);}

/* Exclude header, events, sales (features), footer, and FAQ from 1110px width - keep original width */
header .container,
header .header-container,
.upcoming-events-section .container,
.features-section .container,
.footer-new .container,
.faq-section .container {
    max-width: 1440px;
}

/* Grid */
.grid{display: grid;}
@media(width > 992px){
    .grid-col-lg-2{grid-template-columns: repeat(2, 1fr);}
}

/* Flex */
.flex{display: flex;}
.flex-wrap{flex-wrap: wrap;}
.align-items-center{align-items: center;}
.justify-content-center{justify-content: center;}
.flex-1{flex: 1 0 0%;}

/* Margin */
.mt-gutter{margin-top: var(--gutter);}
.mt-gutter-half{margin-top: var(--gutter-half);}
.mt-5{margin-top: .5rem;}

/* Gap */
.gap-gutter{gap: var(--gutter);}
.gap-gutter-half{gap: var(--gutter-half);}
.gap-x-gutter-half{gap: 0 var(--gutter-half);}
.gap-10{gap: 1rem;}
.gap-5{gap: .5rem;}

/* Line Clamp */
.line-clamp{overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;}
.line-clamp-1{ -webkit-line-clamp: 1;}
.line-clamp-2{ -webkit-line-clamp: 2;}
.line-clamp-3{ -webkit-line-clamp: 3;}
.line-clamp-4{ -webkit-line-clamp: 4;}
.line-clamp-5{ -webkit-line-clamp: 5;}
.line-clamp-6{ -webkit-line-clamp: 6;}

/* Width */
.w-full{width: 100%;}

/* Text Align */
.text-center{text-align: center;}

/* Block */
.block{display: block;}

/* Hide and Show */
.show{display: block;}
.hide{display: none;}

/* Position */
.relative{position: relative;}
.absolute{position: absolute;}

/* Isolation */
.isolate{isolation: isolate;}

/* Z Index */
.z-index-1{z-index: 1;}

/* Animations - Countdown Timer Shake (matches single-page-checkout.css) */
@keyframes shake {
    0% { transform: rotate(4deg); }
    2% { transform: rotate(-4deg); }
    4% { transform: rotate(4deg); }
    6% { transform: rotate(-4deg); }
    8% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

@keyframes shakeCritical {
    0% { transform: rotate(5deg) scale(1.1); }
    2% { transform: rotate(-5deg); }
    4% { transform: rotate(5deg); }
    6% { transform: rotate(-5deg); }
    8% { transform: rotate(0deg) scale(1); }
    100% { transform: rotate(0deg); }
}