:root {
--web-primary-color: #2563eb;
--web-secondary-color: #1e293b;
--web-button-color: #2563eb;
--web-button-text: #ffffff;
--web-border-radius: 8px;
--web-card-radius: 12px;
--web-spacing: 16px;
} .web-terms-container, .web-booking-box, .web-carousel-wrapper {
box-sizing: border-box;
font-family: inherit;
color: #1e293b;
}
.web-terms-container *, .web-booking-box *, .web-carousel-wrapper * {
box-sizing: border-box;
} .web-terms-list {
display: flex;
flex-direction: column;
gap: 12px;
margin: 20px 0;
}
.web-terms-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
}
.web-term-card {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: var(--web-border-radius, 12px);
padding: 16px 22px;
transition: all 0.2s ease;
position: relative;
}
.web-terms-grid .web-term-card {
flex-direction: column;
align-items: stretch;
justify-content: space-between;
gap: 16px;
}
.web-term-card:not(.web-term-sold-out):hover {
border-color: #93c5fd;
transform: translateY(-2px);
} .web-term-card.web-term-sold-out {
background: #f8fafc !important;
border-color: #e2e8f0 !important;
opacity: 0.55 !important;
filter: grayscale(100%) !important;
cursor: not-allowed !important;
pointer-events: none !important;
user-select: none !important;
box-shadow: none !important;
transform: none !important;
}
.web-term-card.web-term-sold-out * {
cursor: not-allowed !important;
}
.web-term-main-info {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 20px 28px;
flex: 1;
}
.web-terms-grid .web-term-main-info {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.web-term-block {
display: flex;
flex-direction: column;
gap: 4px;
}
.web-term-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
color: #94a3b8;
text-transform: uppercase;
}
.web-term-date-content {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.web-term-weekday-badge {
display: inline-flex;
align-items: center;
padding: 3px 9px;
background: #eff6ff;
color: #1d4ed8;
border: 1px solid #dbeafe;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: capitalize;
}
.web-term-sold-out .web-term-weekday-badge {
background: #e2e8f0 !important;
color: #64748b !important;
border-color: #cbd5e1 !important;
}
.web-term-date-val,
.web-term-time-val,
.web-term-loc-val {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 14px;
font-weight: 600;
color: #1e293b;
}
.web-term-date-val {
font-size: 15px;
font-weight: 700;
color: #0f172a;
}
.web-term-price-val {
font-size: 17px;
font-weight: 800;
color: var(--web-primary-color, #2563eb);
letter-spacing: -0.01em;
}
.web-term-sold-out .web-term-price-val {
color: #64748b !important;
}
.web-term-icon {
color: #3b82f6;
flex-shrink: 0;
opacity: 0.9;
}
.web-term-sold-out .web-term-icon {
color: #94a3b8 !important;
} .web-seats-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 9999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
}
.web-seats-dot {
width: 6px;
height: 6px;
border-radius: 50%;
display: inline-block;
}
.web-seats-available {
background: #ecfdf5;
color: #047857;
border: 1px solid #a7f3d0;
}
.web-seats-available .web-seats-dot {
background: #10b981;
}
.web-seats-soldout {
background: #f1f5f9;
color: #64748b;
border: 1px solid #e2e8f0;
}
.web-seats-soldout .web-seats-dot {
background: #94a3b8;
}
.web-term-action-col {
display: flex;
align-items: center;
flex-shrink: 0;
}
.web-terms-grid .web-term-action-col {
width: 100%;
}
.web-terms-grid .web-term-action-col .web-btn {
width: 100%;
justify-content: center;
}
.web-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 20px;
background-color: var(--web-button-color, #2563eb);
color: var(--web-button-text, #ffffff) !important;
border: none;
border-radius: var(--web-border-radius, 8px);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
text-decoration: none !important;
cursor: pointer;
transition: all 0.2s ease;
}
.web-btn:not(.web-btn-disabled):hover {
opacity: 0.95;
transform: translateY(-1px);
}
.web-btn-arrow {
transition: transform 0.2s ease;
}
.web-btn:not(.web-btn-disabled):hover .web-btn-arrow {
transform: translateX(3px);
}
.web-btn-disabled,
.web-btn-sold-out {
background: #cbd5e1 !important;
color: #64748b !important;
cursor: not-allowed !important;
pointer-events: none !important;
box-shadow: none !important;
transform: none !important;
opacity: 0.8 !important;
font-weight: 700 !important;
}
.web-sold-out-icon {
font-size: 12px;
}
.web-btn-secondary {
background: var(--web-secondary-color);
}
.web-btn-outline {
background: transparent;
color: var(--web-secondary-color) !important;
border: 1px solid #cbd5e1;
}
.web-btn-outline:hover {
background: #f1f5f9;
} .web-booking-box {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: var(--web-card-radius);
padding: 24px;
margin: 24px 0;
}
.web-booking-box-header h3 {
margin: 0 0 16px 0;
font-size: 20px;
color: #0f172a;
}
.web-field-group {
margin-bottom: 18px;
}
.web-field-group label {
display: block;
margin-bottom: 6px;
font-size: 14px;
color: #334155;
}
.web-select-styled, .web-input-styled {
width: 100%;
padding: 11px 14px;
border: 1px solid var(--web-field-border, #cbd5e1);
border-radius: var(--web-field-radius, var(--web-border-radius, 8px));
font-size: 14px;
color: var(--web-text-color, #0f172a);
background: var(--web-field-bg, #fff);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.web-select-styled:focus, .web-input-styled:focus {
outline: none;
border-color: var(--web-primary-color, #2563eb);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
} .web-quantity-stepper {
display: inline-flex;
align-items: center;
border: 1px solid var(--web-field-border, #cbd5e1);
border-radius: var(--web-field-radius, var(--web-border-radius, 8px));
overflow: hidden;
}
.web-step-btn {
background: #f8fafc;
border: none;
padding: 8px 14px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
color: #334155;
transition: background 0.15s ease;
}
.web-step-btn:hover {
background: #e2e8f0;
}
.web-qty-field {
width: 50px;
text-align: center;
border: none;
font-size: 16px;
font-weight: 600;
background: #fff;
}
.web-help-text {
display: block;
margin-top: 4px;
font-size: 12px;
color: #64748b;
} .web-attendees-list {
display: flex;
flex-direction: column;
gap: 10px;
background: #f8fafc;
padding: 14px;
border-radius: var(--web-border-radius, 8px);
border: 1px dashed #cbd5e1;
}
.web-attendee-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.web-price-summary-box {
background: var(--web-summary-bg, #f1f5f9);
border-radius: var(--web-border-radius, 8px);
padding: 14px 18px;
margin-bottom: 20px;
border: 1px solid #e2e8f0;
}
.web-price-summary-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
}
.web-price-summary-row strong {
font-size: 20px;
color: var(--web-summary-price, var(--web-primary-color, #2563eb));
}
.web-price-summary-box small {
display: block;
margin-top: 4px;
font-size: 12px;
color: #64748b;
}
.web-btn-submit-booking {
width: 100%;
padding: 14px;
font-size: 16px;
} .web-alert {
padding: 14px 16px;
border-radius: var(--web-border-radius);
margin-bottom: 16px;
}
.web-alert-warning {
background: #fffbeb;
border: 1px solid #fef3c7;
color: #92400e;
}
.web-waiting-list-form {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: var(--web-border-radius);
padding: 16px;
}
.web-feedback-msg {
margin-top: 10px;
font-size: 13px;
font-weight: 500;
}
.web-feedback-msg.web-success {
color: #15803d;
}
.web-feedback-msg.web-error {
color: #dc2626;
} .web-carousel-wrapper {
position: relative;
margin: 30px 0;
overflow: hidden;
}
.web-carousel-header {
display: flex;
justify-content: flex-end;
margin-bottom: 12px;
}
.web-carousel-controls {
display: flex;
gap: 8px;
}
.web-carousel-btn {
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 50%;
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 14px;
color: #334155;
transition: background 0.15s ease, border-color 0.15s ease;
}
.web-carousel-btn:hover {
background: #f1f5f9;
border-color: #94a3b8;
}
.web-carousel-track-container {
overflow: hidden;
width: 100%;
}
.web-carousel-track {
display: flex;
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
gap: 20px;
will-change: transform;
}
.web-carousel-slide {
flex: 0 0 calc(33.333% - 14px);
min-width: 280px;
}
@media (max-width: 900px) {
.web-carousel-slide {
flex: 0 0 calc(50% - 10px);
}
}
@media (max-width: 600px) {
.web-carousel-slide {
flex: 0 0 100%;
}
.web-attendee-row {
grid-template-columns: 1fr;
}
.web-term-card {
flex-direction: column;
align-items: flex-start;
}
.web-term-action-col {
width: 100%;
}
.web-term-action-col .web-btn {
width: 100%;
}
}
.web-event-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: var(--web-card-radius);
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
transition: transform 0.2s ease;
}
.web-event-card:hover {
transform: translateY(-4px);
}
.web-card-image-wrap {
position: relative;
height: 180px;
background: #f1f5f9;
overflow: hidden;
}
.web-card-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.web-card-image-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
}
.web-card-badge {
position: absolute;
top: 12px;
right: 12px;
padding: 4px 10px;
font-size: 11px;
font-weight: 700;
border-radius: 4px;
}
.web-card-content {
padding: 18px;
display: flex;
flex-direction: column;
flex: 1;
}
.web-card-title {
margin: 0 0 12px 0;
font-size: 17px;
line-height: 1.35;
}
.web-card-title a {
color: #0f172a;
text-decoration: none;
}
.web-card-title a:hover {
color: var(--web-primary-color);
}
.web-card-details {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 13px;
color: #475569;
margin-bottom: 16px;
flex: 1;
}
.web-card-detail-item {
display: flex;
align-items: center;
gap: 8px;
}
.web-card-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: auto;
}
.web-carousel-dots {
display: flex;
justify-content: center;
gap: 6px;
margin-top: 16px;
}
.web-carousel-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #cbd5e1;
border: none;
cursor: pointer;
padding: 0;
transition: all 0.2s ease;
}
.web-carousel-dot.active {
background: var(--web-primary-color, #2563eb);
width: 22px;
border-radius: 4px;
}
.web-btn-primary {
background-color: var(--web-button-color, var(--web-primary-color, #2563eb));
color: var(--web-button-text, #ffffff) !important;
}
.web-btn-primary:hover {
background-color: #1d4ed8;
color: #ffffff !important;
}
.web-badge-sold-out {
background: #fef2f2 !important;
color: #dc2626 !important;
border: 1px solid #fecaca !important;
}
.web-text-sold-out {
color: #dc2626;
font-weight: 700;
}  .web-terms-container {
--web-card-bg-eff: var(--web-card-bg, #ffffff);
--web-card-border-eff: var(--web-card-border, #e2e8f0);
--web-card-radius-eff: var(--web-card-radius, 12px);
--web-btn-bg-eff: var(--web-btn-bg, var(--web-button-color, #2563eb));
--web-btn-text-eff: var(--web-btn-text, var(--web-button-text, #ffffff));
--web-btn-radius-eff: var(--web-btn-radius, var(--web-border-radius, 8px));
}
.web-terms-container .web-term-card {
background-color: var(--web-card-bg-eff);
border-color: var(--web-card-border-eff);
border-radius: var(--web-card-radius-eff);
}
.web-terms-container .web-term-label {
color: var(--web-label-color, #94a3b8);
}
.web-terms-container .web-term-date-val,
.web-terms-container .web-term-time-val,
.web-terms-container .web-term-loc-val {
color: var(--web-text-color, #1e293b);
}
.web-terms-container .web-term-price-val {
color: var(--web-price-color, var(--web-primary-color, #2563eb));
}
.web-terms-container .web-seats-available,
.web-terms-container .web-seats-count {
color: var(--web-seats-color, #047857);
}
.web-terms-container .web-btn:not(.web-btn-disabled) {
background-color: var(--web-btn-bg-eff);
color: var(--web-btn-text-eff) !important;
border-radius: var(--web-btn-radius-eff);
} .web-terms-grid,
.web-terms-grid-layout .web-terms-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.web-terms-grid .web-term-card,
.web-terms-grid-layout .web-term-card {
flex-direction: column;
align-items: stretch;
text-align: left;
padding: 20px;
}
.web-terms-grid .web-term-action-col,
.web-terms-grid-layout .web-term-action-col {
margin-top: 12px;
}
.web-terms-grid .web-btn,
.web-terms-grid-layout .web-btn {
width: 100%;
} .web-booking-box {
background-color: var(--web-box-bg, #ffffff);
border-color: var(--web-box-border, #e2e8f0);
border-radius: var(--web-box-radius, var(--web-card-radius, 16px));
transition: all 0.3s ease;
} .web-step-hidden {
display: none;
}
.web-term-card.web-term-selected {
border-color: var(--web-primary-color, #2563eb) !important;
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
background-color: #f0f7ff;
}
.web-step-progression-bar {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: #f8fafc;
border-radius: 10px;
margin-bottom: 20px;
border: 1px solid #e2e8f0;
font-size: 13px;
font-weight: 600;
}
.web-step-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 6px;
color: #64748b;
}
.web-step-badge.completed {
background: #ecfdf5;
color: #059669;
}
.web-step-badge.active {
background: var(--web-primary-color, #2563eb);
color: #ffffff;
}
.web-step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.1);
font-size: 11px;
font-weight: 700;
}
.web-step-arrow {
color: #cbd5e1;
font-weight: bold;
}
.web-booking-header-actions {
margin-bottom: 8px;
}
.web-btn-back-to-terms {
background: #f1f5f9;
border: 1px solid #cbd5e1;
color: #334155;
padding: 6px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
.web-btn-back-to-terms:hover {
background: #e2e8f0;
color: #0f172a;
} .web-public-modal-overlay {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100vw !important;
height: 100vh !important;
background: rgba(15, 23, 42, 0.75) !important;
z-index: 99999999 !important;
display: none;
align-items: center;
justify-content: center;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
padding: 20px;
box-sizing: border-box;
overflow-y: auto;
}
.web-public-modal-overlay.web-modal-active,
.web-public-modal-overlay.is-active,
.web-public-modal-overlay.web-modal-show {
display: flex !important;
}
.web-public-modal-dialog {
background: #ffffff;
border-radius: var(--web-card-radius, 16px);
width: 100%;
max-width: 620px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
position: relative;
animation: webPublicModalIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
max-height: 90vh;
overflow-y: auto;
margin: auto;
}
@keyframes webPublicModalIn {
from { opacity: 0; transform: scale(0.95) translateY(12px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.web-public-modal-close {
position: absolute;
top: 14px;
right: 14px;
background: #f1f5f9;
border: 1px solid #cbd5e1;
font-size: 24px;
line-height: 1;
width: 34px;
height: 34px;
border-radius: 50%;
cursor: pointer;
color: #64748b;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
z-index: 20;
}
.web-public-modal-close:hover {
background: #e2e8f0;
color: #0f172a;
}
.web-public-modal-content {
padding: 0;
}
.web-modal-booking-box {
border: none !important;
box-shadow: none !important;
padding: 24px 20px !important;
margin: 0 !important;
background: transparent !important;
}
body.web-modal-open {
overflow: hidden !important;
}