:root {
    --white: #fff;
    --dark-white: #f5f5f5;
    --light-grey: #e6e6e6;
    --grey: #777;
    --dark-grey: #333;
    --light-blue: #0054cc;
    --orange: #FC600A;
    --orange-dark: #fa6d0e;
    --orange-light: #fb9048;
    --yellow: #fabd29;
    --yellow-light: #fbca53;
    --fourk-gold: #d4af37;
    --font-main: "Open sans", sans-serif;
}

@font-face {
    font-family: 'BerkshireSwash';
    src: url('./webfonts/BerkshireSwash-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@media (min-width: 768px) {
    .modal-xl {
        width: 90% !important;
        max-width: 1200px !important;
    }
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

#menu {
    min-height: 74px;
}

.logotopcorner {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 9999;
    width: 150px;
    height: auto;
    pointer-events: none;
}

.op95 {
    opacity: 0.91;
}

.op90 {
    opacity: 0.9;
}

.op80 {
    opacity: 0.8;
}

.nav-pill:hover {
    opacity: 1;
}

header, footer {
    background-color: transparent; /* Transparent header and footer */
    z-index: 2; /* Make sure it sits above the background overlay */
}

.main-content {
    position: relative;
    z-index: 2; /* Ensures content appears above the overlay */
}

/* Font and other settings */
.text-tiny {
    font-size: 0.75em;
}

.heading, .uc {
    text-transform: uppercase;
}

.swash {
    font-family: 'Lato', system-ui, sans-serif;
}

.text-lg {
    font-size: 1.4em;
}


/* Sign-in specific */
.form-signin {
    max-width: 330px;
    padding: 1rem;
}

.form-signin .form-floating:focus-within {
    z-index: 2;
}

/* Other styles */
#message {
    z-index: 9999;
    position: absolute;
    width: 30%;
    bottom: 10px;
    right: 10px;
}

#messageTop {
    z-index: 9999;
    position: absolute;
    width: 30%;
    top: 15px;
    right: 10px;
}


.tooltip {
    pointer-events: none;
}


/*  For password policy popups */
.valid-feedback, .invalid-feedback {
    display: none;
}

.is-invalid .invalid-feedback {
    display: block;
}

.is-valid .valid-feedback {
    display: block;
}


/* TODO: All needs condensing and cleaning up as theme relatd */


/* fun CSS for responses pages */
.fun-form-container {
    background-color: #f8f9fa; /* Light background color */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
    padding: 20px; /* Spacing around content */
    margin-bottom: 20px; /* Space below the form */
}

.fun-form-container label {
    font-weight: bold; /* Bold labels for emphasis */
    margin-bottom: 10px; /* Space below labels */
}

.fun-form-container select {
    border: 1px solid #007bff; /* Custom border color */
    border-radius: 5px; /* Rounded corners */
    padding: 8px; /* Inner spacing */
    width: 100%; /* Full width */
}

.fun-table-header {
    background-color: #007bff; /* Primary color */
    color: white; /* White text */
    text-align: center; /* Centered text */
    padding: 10px; /* Spacing */
}

.welcome-message {
    font-size: 1.2rem; /* Larger text size */
    margin-bottom: 15px; /* Space below message */
}


.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* CSS for the modal */
.modal-custom {
    max-width: 111vw; /* 2/3 of the viewport width */
    max-height: 66.67vh; /* 2/3 of the viewport height */
    width: auto; /* Allow for responsiveness */
    height: auto; /* Allow for responsiveness */
}

.modal-body {
    overflow: hidden; /* Prevents overflow */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Responsive canvas */
.image-to-edit {
    max-width: 100%; /* Make sure image is responsive */
    max-height: 100%; /* Make sure image fits inside modal */
}

/* footer */
footer {
    margin-top: 20px; /* Adds margin between the footer and main content */
    background-color: transparent; /* Ensures the footer background is transparent */
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 5px;
}

.facebook {
    background-color: #4267B2; /* Facebook blue */
}

.youtube {
    background-color: #FF0000; /* YouTube red */
}

.fourk {
    background-color: #FFA500; /* 4K orange */
}

.social-icon svg {
    fill: #ffffff; /* Set the color of the SVG icon to white */
    transition: transform 0.2s ease;
}

.social-icon svg:hover {
    transform: scale(1.2); /* Slightly enlarges the icon on hover */
}

footer .container {
    padding-bottom: 20px; /* Adjusts the padding inside the footer */
}

.text-white {
    color: #ffffff; /* Set the text color to white */
}

/* Pulsing text for responses page category */

.pulse-text {
    display: inline-block;
    animation: pulse 1.5s infinite; /* Controls the duration and repetition */
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1); /* Normal size */
    }
    50% {
        transform: scale(1.1); /* Slightly larger size */
    }
}

/* New styles 23/10/2024 */
.main-content-container {
    max-width: 70%;
    margin: auto;
    background-color: #faf9f5;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.hr-fourk-dashed {
    border-top: 2px dashed #d4af37;
    margin: 2rem 0;
}

.text-glow {
    text-shadow : 1px 1px 10px #d4af37, 1px 1px 10px #d4af37;
    color: #fff;
}

.hero-title, .hero-subtitle {
  background-color: rgba(0, 0, 0, 0.6); /* dark overlay */
  color: #fff;
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

/* ── Booking step header panel ── */
.step-header {
  display: block;
  width: fit-content;
  margin: 0 auto 1.5rem;
  background-color: rgba(212, 175, 55, 0.9);
  border-radius: 6px;
  padding: .6rem 1.4rem;
  text-align: center;
}
.step-header h4,
.step-header h3,
.step-header h5 {
  color: #fff;
  margin: 0 0 .2rem;
  font-weight: 700;
}
.step-header p {
  color: rgba(255,255,255,.85);
  margin: 0;
  font-size: .9rem;
}

/* ── Shared booking journey font ── */
#booking-app,
#booking-calendar-wrap,
.tc-page,
.vq-page {
  font-family: 'Lato', sans-serif;
}

/* ── Shared booking journey Next button ── */
.btn-booking-next {
  background: linear-gradient(135deg, #d4af37 0%, #a88820 100%);
  color: #1a1a1a;
  border: none;
  padding: .75rem 2.5rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: 'Lato', sans-serif;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(212,175,55,.4);
  transition: box-shadow .2s, transform .1s;
}
.btn-booking-next:hover:not(:disabled) {
  box-shadow: 0 6px 25px rgba(212,175,55,.6);
  transform: translateY(-1px);
  color: #1a1a1a;
}
.btn-booking-next:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
}
@media (max-width: 600px) {
  .btn-booking-next {
    width: 100%;
  }
}

/* ── Shared booking journey Back button ── */
.btn-booking-back {
  background: linear-gradient(135deg, #d4af37 0%, #a88820 100%);
  color: #1a1a1a;
  border: none;
  padding: .75rem 2.5rem;
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(212,175,55,.4);
  transition: box-shadow .2s, transform .1s;
}
.btn-booking-back:hover {
  box-shadow: 0 6px 25px rgba(212,175,55,.6);
  transform: translateY(-1px);
  color: #1a1a1a;
}