/* ===== Layout tweaks ===== */
.xw-masthead .container,
.xw-content-section .container1080 {
max-width: 100% !important;
}
.xw-content-section .xw-section-inner,
.xw-content-section .xw-content-section-inner {
padding: 0 !important;
}
.xw-mainapp.mb-5 {
margin-bottom: 0 !important;
}
.xw-mainapp > .pb-5 {
padding-bottom: 0 !important;
}
.xw-masthead .banner-image-wrap {
max-height: 100% !important;
}
/* ===== Hero strap ===== */
.hero-strap {
position: relative;
overflow: hidden;
/* prevents stray scrollbars */
min-height: 55vh;
/* responsive height */
}
.hero-strap__bg {
position: absolute;
inset: 0;
z-index: 0;
}
/* crops nicely on mobile */
}
.hero-strap__content {
position: absolute;
inset: 0;
z-index: 1;
/* text above image */
display: -ms-flexbox;
/* IE11 fallback */
display: flex;
align-items: center;
justify-content: center;
/* perfect centering */
padding: 1rem;
}
@media (max-width: 768px) {
.hero-strap {
min-height: 60vh;
}
.hero-strap__content p {
font-size: 0.95rem;
line-height: 1.5;
}
}
@media (max-width: 576px) {
.hero-strap {
min-height: 65vh;
}
}
/* ===== Page background (registration form pages) ===== */
body {
background: url("https://eventnook.s3.amazonaws.com/e/77158/_bb6a8_bottom-body.jpg")
no-repeat center center fixed;
background-size: cover;
color: #fff;
/* keep text readable on dark bg */
}
.container,
.form-wrapper,
.main-content {
background: rgba(0, 0, 0, 0.6);
/* subtle overlay for contrast */
border-radius: 12px;
padding: 20px;
}
/* ===== Ticket widget: fully transparent UI with white text ===== */
#main_app.xw-ticket-widget,
#main_app.xw-ticket-widget * {
background: transparent !important;
box-shadow: none !important;
color: #ffffff !important;
}
/* Clear specific wrappers / common light backgrounds */
.ticket-widget-wrapper,
.ticket-widget-body,
.list-group-item,
.ticket,
.ticket-form,
.form-control,
.card,
.bg-white,
.bg-light {
background: transparent !important;
box-shadow: none !important;
border-color: rgba(255, 255, 255, 0.3) !important;
/* faint white border */
}
/* Remove any extra background layers */
#ticket_wrapper::before,
#main_app::before {
background: transparent !important;
}
#main_app.xw-ticket-widget input::placeholder,
#main_app.xw-ticket-widget textarea::placeholder {
color: rgba(255, 255, 255, 0.6) !important;
}
/* Buttons: black, bold, rounded */
#main_app.xw-ticket-widget .btn,
#main_app.xw-ticket-widget .btn-primary,
#main_app.xw-ticket-widget .btn-register,
#main_app.xw-ticket-widget .btn-register-step1,
#main_app.xw-ticket-widget button[id^="btnRegister_"] {
background: #000000 !important;
color: #ffffff !important;
border: none !important;
border-radius: 6px !important;
font-weight: 600 !important;
text-transform: none !important;
}
#main_app.xw-ticket-widget .btn:hover {
background: #333333 !important;
color: #ffffff !important;
}
/* === Change date/time header text to white === */
#main_app.xw-ticket-widget .ticket-table-header-row,
#main_app.xw-ticket-widget .list-group-item.fw-bold,
#main_app.xw-ticket-widget #ticket_table_header_row,
#main_app.xw-ticket-widget .ticket-table {
color: #ffffff !important;
}
/* === Optional: remove the background of the header row too === */
#main_app.xw-ticket-widget .ticket-table-header-row,
#main_app.xw-ticket-widget .list-group-item.fw-bold {
background: transparent !important;
border-color: rgba(255, 255, 255, 0.2) !important;
}
/* === Make all text inside the form white === */
#form_card_body_0,
#form_card_body_0 * {
color: #ffffff !important;
}
/* === Input, select, and textarea fields === */
#form_card_body_0 input,
#form_card_body_0 select,
#form_card_body_0 textarea {
background: transparent !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.5) !important;
}
/* === Placeholder text === */
#form_card_body_0 input::placeholder,
#form_card_body_0 textarea::placeholder {
color: rgba(255, 255, 255, 0.6) !important;
}
/* === Labels and helper text === */
#form_card_body_0 label,
#form_card_body_0 .form-label,
#form_card_body_0 .form-text,
#form_card_body_0 .help-block {
color: #ffffff !important;
}
/* === Make the form section fully transparent and text white === */
#form_card_body_0,
#form_card_body_0 * {
background-color: transparent;
box-shadow: none !important;
border: none !important;
color: #ffffff !important;
}
/* === Placeholder text === */
#form_card_body_0 input::placeholder,
#form_card_body_0 textarea::placeholder {
color: rgba(255, 255, 255, 0.6) !important;
}
/* === Labels, helper text, and descriptions === */
#form_card_body_0 label,
#form_card_body_0 .form-label,
#form_card_body_0 .form-text,
#form_card_body_0 .help-block {
color: #ffffff !important;
}
/* === Make the card header transparent and text white === */
.xw-form-card-header,
.xw-form-card-header *,
.py-1.d-flex.justify-content-between,
.py-1.d-flex.justify-content-between * {
background: transparent !important;
box-shadow: none !important;
border: none !important;
color: #ffffff !important;
}
/* === Optional: remove toggle button background === */
.xw-form-card-header .btn-toggle {
background: transparent !important;
border: none !important;
color: #ffffff !important;
}
.xw-form-card-header .btn-toggle:hover {
background: rgba(255, 255, 255, 0.1) !important;
}
/* === Registration button styling === */
#btn_register_complete {
background: #650000 !important;
/* black background */
color: #ffffff !important;
/* white text */
border: none !important;
/* clean borderless look */
border-radius: 6px !important;
/* slightly rounded corners */
font-weight: 600 !important;
/* bold text */
text-transform: none !important;
/* normal case text */
}
/* === Hover effect === */
#btn_register_complete:hover {
background: #9F3B2F !important;
/* lighter black on hover */
color: #ffffff !important;
}
/* === Hide the stepper header section === */
.bs-stepper-header {
display: none !important;
}
/* === Additional style section === */
<style>
  /* 1) Use the artwork as the FULL-PAGE background */
  html,
  body {
    height: 100%;
  }
  body::before {
    content: "";
    position: fixed;
    /* covers the whole viewport, doesn’t scroll away */
    inset: 0;
    z-index: -1;
    /* stack your two images: top image at top, bottom image at bottom */
    background: url("https://eventnook.s3.amazonaws.com/e/77158/_2b404_landing-bottom-bg-v1.jpg") top center / cover no-repeat,
      url("https://eventnook.s3.amazonaws.com/e/77158/_2b404_landing-bottom-bg-v1.jpg") bottom center / contain no-repeat,
      #000;
    /* fallback color behind */
  }
  /* 3) Make sure the CTA sits above the background and has breathing room */
  .hero-strap {
    position: relative;
    overflow: visible;
  }
  .hero-strap__content {
    position: relative;
    z-index: 1;
    padding-bottom: 64px;
  }
  /* 4) Keep fixed footer from overlapping CTA on desktop */
  :root {
    --footer-h: 88px;
  }
  /* adjust to your real footer height */
  @media (min-width: 992px) {
    .site-footer {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      height: var(--footer-h);
      margin-top: 0 !important;
      z-index: 10;
    }
  }
</style> 
/* === Restore checkbox visibility === */
#form_card_body_0 input[type="checkbox"] {
appearance: checkbox !important;
-webkit-appearance: checkbox !important;
accent-color: #ffffff; /* modern browsers show a white tick */
border: 1px solid #ffffff !important;
width: 18px;
height: 18px;
}
#form_card_body_0 input[type="checkbox"]:checked {
background-color: #ffffff !important;
accent-color: #ffffff !important;
}
/* === Restore and style radio buttons (multiple choice questions) === */
#form_card_body_0 input[type="radio"] {
appearance: radio !important;
-webkit-appearance: radio !important;
accent-color: #ffffff; /* makes the dot white */
border: 1px solid #ffffff !important;
width: 18px;
height: 18px;
background: transparent !important;
}
#form_card_body_0 input[type="radio"]:checked {
accent-color: #ffffff !important; /* ensures the checked dot is visible */
background-color: #ffffff !important; /* fallback for older browsers */
}
/* === Fix radio buttons: hollow by default, filled only when selected === */
#form_card_body_0 input[type="radio"] {
appearance: none !important;
-webkit-appearance: none !important;
border: 2px solid #ffffff !important;
border-radius: 50%;
width: 18px;
height: 18px;
background: transparent !important;
display: inline-block;
position: relative;
cursor: pointer;
vertical-align: middle;
}
#form_card_body_0 input[type="radio"]:checked::before {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #ffffff;
}
#terms_section.error {
background-color: transparent !important;
}
.py-1.d-flex.justify-content-between {
display: none !important;
}
section#header {
display: none !important;
}
background-size: cover;
background-position: center;
/* make the footer transparent again */
#section_evnk_footer,
#section_evnk_footer.bg-dark {
background: transparent !important;           /* beats .bg-dark */
box-shadow: none !important;
border: 0 !important;
}
/* remove the black rounded box from the footer’s container */
#section_evnk_footer .container,
.evnk-footer-bottom .container {
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* replace your broad .container rule with this */
.xw-content-section .container,
.xw-mainapp .container {
background: rgba(0,0,0,0.6);
border-radius: 12px;
padding: 20px;
}
/* Rounded corner style for registration button */
#btn_register_complete {
border-radius: 50px !important;   /* makes it pill-shaped */
padding: 12px 32px !important;    /* optional: adds better proportions */
font-weight: 600 !important;      /* keeps it bold */
background: #af0e0c !important;   /* your existing Stranger Rides red tone */
color: #fff !important;
border: none !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* optional: subtle depth */
}
/* Hover effect (optional) */
#btn_register_complete:hover {
background: #b64b3d !important;
transform: translateY(-2px);
transition: all 0.2s ease-in-out;
}
/* Make the navbar fully black and remove all borders/shadows */
.navbar,
#topNav,
.navbar-default {
background-color: #000 !important; /* solid black */
border: none !important;
box-shadow: none !important;
outline: none !important;
}
/* If the navbar has a translucent overlay element */
.navbar::before,
.navbar::after {
background: none !important;
border: none !important;
box-shadow: none !important;
}
/* Optional: force text and icon color to white for contrast */
.navbar a,
.navbar .navbar-brand,
.navbar .navbar-toggler-icon,
.navbar .nav-link {
color: #fff !important;
}
/* Move the navbar toggle (menu icon) to the right side */
.navbar-header {
width: 100%;
display: flex;
justify-content: flex-end; /* pushes the toggle button to the right */
}
.navbar-toggle {
float: none !important; /* override Bootstrap’s float */
margin-right: 30px;     /* optional: add spacing from the right edge */
}
.navbar-toggler {
margin-left: auto !important;
margin-right: 30px;
}
/* Always show the navbar menu */
.navbar-collapse {
display: flex !important;
flex-direction: row !important;
justify-content: flex-end;
}
/* Hide the toggle button completely */
.navbar-toggle,
.navbar-toggler {
display: none !important;
}
.navbar-nav {
flex-direction: row !important;
gap: 10px; /* optional spacing between links */
}
section#section_navbar > nav.navbar {
padding-top: 1px !important;
padding-bottom: 1px !important;
min-height: 10px; /* optional */
}
section#section_navbar .navbar-brand,
section#section_navbar .navbar-nav .nav-link {
padding-top: 3px !important;
padding-bottom: 3px !important;
line-height: 1;
}
body.xw-body-confirm #main_app.xw-mainapp {
background-image: url('https://eventnook.s3.amazonaws.com/e/77158/_a43c4_question-page-bg.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
body.xw-body-confirm::before {
background: black !important; /* adjust color */
background-image: none !important;
}
.xw-body-confirm .mainapp-inner {
border: none !important;
box-shadow: none !important;
}
.xw-body-confirm .mainapp-inner {
margin: 0 !important;
padding: 0 !important;
}
.xw-body-confirm .confirmation-message {
margin: 0 !important;
padding: 0 !important;
}
.xw-form-wrapper .form-group.error {
background-color: rgba(255,130, 0, 0.2) !important;
}
.iti__dropdown-container, .iti__dropdown-content{
background: #000 !important;
}
#btn_verify_email_0 { background: #000 !important; }
.btn-primary  {background: #000 !important;}
.badge-fully-booked {
background-color: transparent !important;
border: none !important;
}
.fw-bold {
font-size: 0; /* hide original text */
}
.fw-bold::before {
content: "Please verify your email address / Sila sahkan alamat e-mel anda";
font-size: 1rem;  /* set visible text size */
}
[data-row-field="email"] .card.card-body.bg-light .small {
display: none !important;
}
[data-row-field="email"] .fw-bold::after {
content: "An email with a 6-digit verification code was sent to you. It will be valid for 15 minutes./ E-mel dengan kod pengesahan 6 digit telah dihantar kepada anda. Ia sah selama 15 minit.";
display: block;
font-size: 0.8rem;
font-weight: normal;
color: #ffffff; /* white text */
margin-bottom: 10px;
line-height: 1.4;
}
/* Only Resend Order Confirmation page */
#resendorderconfirmation #main_app_inner .row.justify-content-center.mb-3 {
margin-top: 200px !important;  /* change 0 to whatever you like */
}
.xw-content-section .container,
.xw-mainapp .container {
background: transparent !important; 
box-shadow: none !important;        /* just in case */
}
.form-floating label {
color: rgba(255,255,255,0.6)!important;
}
#eventTermsModal {
z-index: 1060; /* fixing covering modal to close */
}
#xw_body_widget_register_details .modal-backdrop { display: none;}

#eventTermsContent,
#eventTermsContent * {
    color: white !important;
}