#vip-booking-container {
margin: 20px auto;
padding: 20px 10px;
max-width: 800px;
overflow-x: hidden
}
#booking-form {
opacity: 1;
transition: opacity 0.5s ease-in-out
} .login-message-container {
text-align: center;
margin-bottom: 25px;
padding: 20px;
background: rgba(255, 255, 255, 0.9);
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.login-message-text {
font-size: 16px;
color: #333;
margin-bottom: 15px;
}
.login-link-button {
display: inline-block;
padding: 10px 20px;
background: var(--ast-global-color-0);
color: #fff;
text-decoration: none;
border-radius: 6px;
font-weight: bold;
transition: all 0.3s;
}
.login-link-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
color: #fff;
}
.login-error-message {
display: none;
margin-top: 15px;
padding: 10px;
font-size: 16px;
color: #880000;
text-align: center;
}
#result-page {
opacity: 0;
transition: opacity 0.5s ease-in-out
} @keyframes pulse {
0% {
transform: scale(1);
opacity: 1
}
100% {
transform: scale(2);
opacity: 0
}
}
@keyframes slideDown {
0% {
opacity: 0;
transform: translateY(-20px) scale(0.96)
}
60% {
opacity: 1;
transform: translateY(2px) scale(1.01)
}
100% {
opacity: 1;
transform: translateY(0) scale(1)
}
}
@keyframes staggerFadeIn {
0% {
opacity: 0;
transform: translateY(30px) scale(0.1)
}
30% {
opacity: 0.6;
transform: translateY(-4px) scale(0.98)
}
100% {
opacity: 1;
transform: translateY(0) scale(1)
}
}
@keyframes buttonZoom {
0% {
transform: scale(1)
}
100% {
transform: scale(1.15)
}
}
@keyframes spin {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
@keyframes scaleIn {
0% {
transform: scale(0)
}
50% {
transform: scale(1.1)
}
100% {
transform: scale(1)
}
}
@keyframes fadeInNotification {
0% {
opacity: 0;
transform: translateX(-50%) translateY(-20px);
}
100% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
@keyframes fadeOutNotification {
0% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
100% {
opacity: 0;
transform: translateX(-50%) translateY(-20px);
}
}
.notification-fade-in {
animation: fadeInNotification 0.3s ease-out forwards;
}
.notification-fade-out {
animation: fadeOutNotification 0.3s ease-in forwards;
} .booking-steps {
position: relative
}
.step-item {
display: block;
margin-bottom: 20px;
position: relative
}
.step-header {
position: absolute;
left: 0;
top: 0;
width: 24px;
height: 100%;
z-index: 0
}
.step-circle {
width: 18px;
height: 18px;
left: -5px;
top: 3px;
border-radius: 50%;
background: #333;
border: 2px solid #333;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
transition: all 0.3s linear
}
.step-item.active .step-circle {
border-color: var(--ast-global-color-0);
background: #000
}
.step-item.completed .step-circle {
border-color: var(--ast-global-color-0);
background: var(--ast-global-color-0);
}
.step-number {
color: #fff;
font-weight: bold;
font-size: 10px;
z-index: 10
}
.step-item.active .step-number,
.step-item.completed .step-number {
color: #fff
}
.step-item.completed .step-number {
display: none
}
.step-check {
display: none;
color: #fff;
font-size: 12px;
font-weight: bold
}
.step-item.completed .step-check {
display: block
}
.pulse-ring {
position: absolute;
width: 100%;
height: 100%;
background: var(--ast-global-color-0);
border-radius: 50%;
animation: pulse 1s infinite;
opacity: 0;
display: none
}
.step-item.active .pulse-ring {
display: block
} .step-line {
position: absolute;
left: 3px;
top: 10px;
width: 3px;
bottom: -25px;
background: #333;
z-index: -1
}
.step-item.completed .step-line {
background: var(--ast-global-color-0);
}
.step-line-extended {
bottom: 9px;
}
.step-item.completed .step-line-extended {
background: var(--ast-global-color-0);
}
.step-connector-wrapper {
position: relative;
height: 85px;
margin-left: 0;
}
.step-connector-horizontal {
position: absolute;
left: 3px;
top: -30px;
width: calc(50% - 52px);
height: 50px;
border-left: 3px solid #333;
border-bottom: 3px solid #333;
border-bottom-left-radius: 2em;
box-sizing: border-box;
}
.step-item[data-step="7"].completed~.step-connector-wrapper .step-connector-horizontal {
border-color: var(--ast-global-color-0);
}
.step-connector-down {
position: absolute;
left: calc(50% - 50px);
top: 17px;
width: 50px;
height: 70px;
border-top: 3px solid #333;
border-right: 3px solid #333;
border-top-right-radius: 2em;
box-sizing: border-box;
}
.step-item[data-step="7"].completed~.step-connector-wrapper .step-connector-down {
border-color: var(--ast-global-color-0);
}
.note-to-button-connector {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -60px;
width: 3px;
height: 60px;
background: #333;
}
.step-item[data-step="7"].completed~.step-connector-wrapper~.booking-note-container .note-to-button-connector {
background: var(--ast-global-color-0);
}
.endpoint-circle {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -40px;
width: 24px;
height: 24px;
border-radius: 50%;
background: #333;
border: 3px solid #333;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.step-item[data-step="7"].completed~.step-connector-wrapper~.booking-note-container~.button-container .endpoint-circle {
background: var(--ast-global-color-0);
border-color: var(--ast-global-color-0);
}
.endpoint-icon {
font-size: 14px;
} .step-content {
position: relative;
padding-top: 0;
min-width: 0;
overflow: visible;
z-index: 10
}
.step-content>* {
animation: slideDown 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}
.step-title {
margin: 0 0 15px 35px;
font-size: 20px
} .rate-limit-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000c;
z-index: 10000;
align-items: center;
justify-content: center;
}
.rate-limit-modal-content {
background: #222;
border-radius: 1.5em;
padding: 32px;
max-width: 500px;
width: 90%;
position: relative;
box-shadow: 0 0px 12px -6px var(--ast-global-color-0);
}
.rate-limit-icon {
text-align: center;
font-size: 48px;
margin-bottom: 20px;
}
.rate-limit-title {
text-align: center;
margin: 0 0 20px 0;
color: #ddd;
}
.rate-limit-message {
text-align: center;
color: #aaa;
margin-bottom: 25px;
line-height: 1.6;
}
.rate-limit-actions {
text-align: center;
} .rate-limit-info {
text-align: center;
background: rgba(0, 0, 0, 0.2);
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.rate-limit-text {
margin-bottom: 5px;
color: #ccc;
}
.rate-limit-subtext {
font-size: 0.9em;
color: #888;
}
.rate-limit-highlight {
color: var(--ast-global-color-0);
font-weight: bold;
} .store-notice-container {
text-align: center;
padding: 15px;
background: #fff3cd;
color: #856404;
border: 1px solid #ffeeba;
border-radius: 8px;
margin-bottom: 20px;
}  .step-select {
width: 90%;
max-width: 600px;
margin: auto;
display: block;
padding: 0 12px;
border: 2px solid #000;
border-radius: 0.8em;
font-size: 16px;
font-weight: 600;
background: #fff;
transition: all 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}
.step-select:disabled {
color: #999;
opacity: 0.5
}
.step-select:focus {
outline: none;
border-color: var(--ast-global-color-0);
}
input[type="text"] {
font-weight: 600
} .booking-note-textarea {
width: 100%;
min-height: 100px;
padding: 15px;
border: 2px solid #ddd;
border-radius: 12px;
font-family: inherit;
font-size: 16px;
resize: vertical;
transition: all 0.3s;
background: rgba(255, 255, 255, 0.9);
}
.booking-note-textarea:focus {
border-color: var(--ast-global-color-0);
outline: none;
box-shadow: 0 0 0 3px rgba(var(--ast-global-color-0-rgb), 0.1);
}
.booking-note-count {
text-align: right;
font-size: 12px;
color: #666;
margin-top: 4px;
}
.booking-note-count-current {
color: #999;
} #discount-code-container:hover {
transform: translateY(-2px) scale(1.01);
box-shadow: 0 4px 20px -10px var(--ast-global-color-0) !important
} .discount-code-wrapper {
display: none;
margin: 15px 35px;
padding: 15px;
background: linear-gradient(135deg, #0002, #9992, #0002);
border-radius: 1em;
box-shadow: 0 0 12px -6px var(--ast-global-color-0);
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.discount-code-label {
display: block;
margin-bottom: 10px;
font-weight: 600;
color: var(--ast-global-color-2);
}
.discount-code-input-group {
display: flex;
gap: 10px;
align-items: baseline;
}
.discount-code-input-box {
flex: 1;
display: flex;
flex-direction: column;
}
.discount-code-field {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 0.5em;
text-transform: uppercase;
transition: all 0.3s;
box-sizing: border-box;
}
.discount-code-message {
margin-top: 5px;
font-size: 14px;
display: none;
} .flag-options {
display: flex;
gap: 15px;
flex-wrap: wrap;
margin-top: 5px;
padding: 5px;
max-width: 600px;
margin: auto;
justify-content: center
}
.flag-options label {
font-size: 40px;
transition: transform 0.2s;
line-height: 1;
display: inline-block;
position: relative
}
.flag-options label:hover {
transform: scale(1.25);
z-index: 10
}
.flag-options input[type="radio"] {
display: none
}
.flag-options input[type="radio"]:checked+span {
border: 2px solid var(--ast-global-color-0);
border-radius: 0.3em;
padding: 2px;
display: inline-block
} .pax-selector {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 6px;
width: 90%;
max-width: 600px;
margin: auto;
}
.date-selector {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
width: 90%;
max-width: 600px;
margin: auto;
}
.pax-option,
.date-option {
text-align: center;
border: 2px solid var(--ast-global-color-0);
border-radius: .7em;
transition: all .15s cubic-bezier(.25, .46, .45, .94)
}
.pax-option {
padding: 12px 0;
font-size: 20px;
font-weight: 600
}
.date-option {
padding: 15px 0;
}
.pax-option:not(:hover):not(.selected),
.date-option:not(:hover):not(.selected) {
background: linear-gradient(135deg, #fff 30%, #ccc);
color: #000;
border-color: #000
}
.pax-option:hover:not(.disabled):not(.selected) {
transform: translateY(-2px) scale(1.05)
}
.date-option:hover:not(.disabled):not(.selected) {
transform: translateY(-2px) scale(1.03)
}
.pax-option:disabled {
color: #999 !important
}
.pax-option:disabled:hover,
.date-option:disabled:hover,
.date-option.disabled:hover {
background: linear-gradient(135deg, #fff 30%, #ccc) !important;
transform: none !important
}
.date-option:disabled .date-day,
.date-option.disabled .date-day {
color: #886060 !important
}
.date-option:disabled .date-date,
.date-option.disabled .date-date,
.date-option:disabled .date-month,
.date-option.disabled .date-month {
color: #999 !important
}
.date-day {
font-weight: bold;
font-size: 11px;
display: block;
margin-bottom: 1px;
line-height: 1;
color: #880000
}
.date-month {
font-weight: bold;
font-size: 11px;
line-height: 1;
margin-bottom: 1px;
display: block
}
.date-date {
font-size: 32px;
font-weight: bold;
line-height: 1.3;
display: block;
box-shadow: 0 0 5px;
margin: 6px 0;
} .new-time-picker {
width: 90%;
max-width: 600px;
margin: auto
}
.time-display-container {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
padding-bottom: 30px;
}
.time-box {
background: linear-gradient(135deg, #fff 30%, #ccc);
border: 2px solid #000;
border-radius: 0.5em;
width: 120px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
font-size: 56px;
font-weight: 900;
color: #000;
transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}
.time-box.disabled {
color: #999;
opacity: 0.5
}
.time-box[data-active="true"] {
border-color: var(--ast-global-color-0);
transform: scale(1.02)
}
.time-box:not(.disabled):hover {
background: var(--ast-global-color-0);
transform: translateY(-3px) scale(1.05);
cursor: pointer
}
.time-separator {
font-size: 56px;
font-weight: bold;
color: #fff;
user-select: none
}
.time-options-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 5px;
margin: auto;
transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}
.time-option-btn {
background: linear-gradient(135deg, #fff 30%, #ccc);
border: 2px solid #000;
border-radius: 0.7em;
padding: 10px 0;
font-size: 16px;
font-weight: 600;
color: #000;
text-align: center;
animation: staggerFadeIn 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
opacity: 0
}
.time-option-btn:hover:not(.disabled):not(.selected) {
background: var(--ast-global-color-0);
}
.time-option-btn.selected {
background: #000;
color: #fff;
border-color: var(--ast-global-color-0);
}
.time-option-btn.disabled {
background: linear-gradient(135deg, #aaa 30%, #999);
color: #888;
}
.time-option-btn.disabled:hover {
border-color: #999
}  #store-preview-container {
opacity: 0;
transform: translateY(30px) scale(0.95);
transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}
#store-preview-container.show {
opacity: 1;
transform: translateY(0) scale(1)
}
.store-preview-card {
max-width: 400px;
margin: auto;
border-radius: 1.5rem;
box-shadow: 0 0 12px -6px var(--ast-global-color-0);
overflow: hidden;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}
.store-preview-card:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 4px 20px -10px var(--ast-global-color-0);
}
.store-preview-loading {
padding: 30px;
text-align: center;
color: #666;
font-size: 14px
}
.store-preview-content {
display: flex;
flex-direction: column
}
.store-preview-container-wrapper {
display: none;
margin-top: 30px;
}
.store-preview-image {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
animation: staggerFadeIn 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
animation-delay: 0.1s;
opacity: 0
}
.store-preview-title {
padding: 15px 20px;
font-size: 18px;
font-weight: 600;
color: var(--ast-global-color-2);
text-align: center;
border-top: 2px solid var(--ast-global-color-0);
background: linear-gradient(135deg, #0002, #9992, #0002);
animation: staggerFadeIn 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
animation-delay: 0.1s;
opacity: 0
} .canvas-wrapper {
position: relative;
display: inline-block;
}
.canvas-overlay-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 36px;
font-weight: bold;
color: #fff;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
text-align: center;
white-space: nowrap;
} .copy-notification-popup {
display: none;
position: fixed;
top: 50px;
left: 50%;
transform: translateX(-50%);
background: #0009;
color: #ddd;
padding: 12px 24px;
border-radius: 30px;
z-index: 10001;
backdrop-filter: blur(5px);
border: 1px solid #444;
transition: opacity 0.3s;
} .booking-note-container {
position: relative;
margin: 0 3px 40px;
}
.booking-note-content {
padding: 20px;
border: 3px solid #333;
border-radius: 2em;
background: linear-gradient(135deg, #0002, #9992, #0002);
}
.step-item[data-step="7"].completed~.step-connector-wrapper~.booking-note-container .booking-note-content {
border-color: var(--ast-global-color-0);
} .button-container {
text-align: center;
margin-top: 60px;
position: relative;
}
.generate-button {
background: var(--ast-global-color-0);
color: #000;
border-color: var(--ast-global-color-0);
box-shadow: 0 0 12px var(--ast-global-color-0);
position: relative;
transition: all 0.3s ease;
overflow: hidden
}
.generate-button:hover {
background: var(--ast-global-color-1);
box-shadow: 0 0 20px var(--ast-global-color-1);
border-color: var(--ast-global-color-1)
}
.generate-button.loading {
background: var(--ast-global-color-1);
box-shadow: 0 0 30px var(--ast-global-color-1);
border-color: var(--ast-global-color-1);
animation: buttonZoom 0.5s ease forwards;
pointer-events: none;
padding-right: 80px
}
.generate-button.loading::after {
content: '';
position: absolute;
right: 20px;
top: 50%;
margin-top: -16px;
width: 32px;
height: 32px;
border: 5px solid #ffffff55;
border-top-color: #fff;
border-radius: 50%;
animation: spin 0.8s linear infinite
}
.save-button-container {
text-align: center;
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap
}
.save-button-container.bottom-spacing {
margin-bottom: 20px;
}
.save-button-container.top-spacing {
margin-top: 20px;
}
.my-bookings-button {
padding: 15px 40px;
font-size: 20px;
font-weight: bold;
box-shadow: 0 0px 12px var(--ast-global-color-1)
}
.save-button,
.back-button {
padding: 10px 20px;
font-size: 18px;
transition: all 0.3s
}
.back-button {
background: #888;
color: #fff
}
.back-button:hover {
background: #555
} .success-header {
text-align: center;
margin-bottom: 30px
}
.success-icon {
margin: 0px auto;
animation: scaleIn 0.5s ease-out
}
.success-title {
font-size: 32px;
color: #117f00;
margin: 0 0 20px 0
}
.success-message {
font-size: 18px;
color: #fff;
line-height: 1.6;
max-width: 600px;
margin: auto
}
#canvas {
display: block;
margin: 30px auto;
max-width: 100%;
height: auto;
image-rendering: crisp-edges
} @media (max-width: 768px) { .store-preview-title {
padding: 10px 15px;
font-size: 15px;
}
.store-preview-card {
max-width: 80%
}
.booking-note-content {
padding: 10px;
} .time-display-container {
padding-bottom: 20px;
}
.time-box {
width: 90px;
height: 90px;
font-size: 42px
}
.time-separator {
font-size: 45px;
margin-bottom: 5px
}
.time-options-container {
grid-template-columns: repeat(6, 1fr);
gap: 3px
}
.time-option-btn {
font-size: 14px
}
.time-column {
width: 60px
}
.time-option {
padding: 6px 2px;
font-size: 14px
} .pax-selector {
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 4px
}
.pax-option {
padding: 8px 0px;
font-size: 15px
}
.date-selector {
grid-template-columns: repeat(4, 1fr);
gap: 6px
}
.date-option {
padding: 12px 0px
}
.date-day {
font-size: 10px;
margin-bottom: 1px
}
.date-month {
font-size: 10px;
margin-bottom: 1px
}
.date-date {
font-size: 26px;
font-weight: bold
} .step-connector-wrapper {
height: 60px;
}
.step-line-extended {
bottom: 18px;
}
.step-connector-horizontal {
top: -40px;
}
.step-connector-down {
top: 7px;
height: 55px;
}
.endpoint-circle {
width: 20px;
height: 20px;
}
.endpoint-icon {
font-size: 12px;
} .success-title {
font-size: 24px
}
.success-message {
font-size: 14px
}
} .text-center {
text-align: center;
}
.booking-note-title {
text-align: center;
}
.save-button-container.bottom-spacing {
margin-bottom: 20px;
}
.save-button-container.top-spacing {
margin-top: 20px;
}