/* General Styles */
body {
 margin: 0;
 font-family: "Playfair Display", serif;
 background-size: cover;
}

.background-container {
 position: relative;
 background-image: url("background-sky.jpg");
 height: 100vh;
 width: 100vw;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 overflow: hidden;
}

#termsAndConditions > .background-container {
 position: relative;
 background-image: url("background-sky.jpg");
 height: auto;
 width: 100%;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 overflow: visible;
}

#TCs {
 padding: 30px;
}

canvas#background-canvas {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 pointer-events: none; /* Ensures the canvas does not block interactions with other elements */
 z-index: -1; /* Ensure the canvas is behind other content */
}

/* Header and login button */
header {
 position: absolute;
 top: 0;
 width: 100%;
 display: flex;
 justify-content: space-between;
 padding: 20px;
 box-sizing: border-box;
 z-index: 10;
}

.logo {
 display: flex;
 align-items: center;
}

.login-btn {
 background: none;
 border: 2px solid #fff;
 color: #fff;
 padding: 10px 20px;
 cursor: pointer;
}

/* Signup page */
.gridContainer {
 display: grid;
 grid-template-columns: 5fr 5fr;
 grid-template-rows: 7fr 7fr;
 grid-template-areas:
  "top-left right"
  "bottom-left right";
 gap: 10px;
 width: 100%;
 height: calc(100vh - 40px); /* Adjust for header height */
 background-color: transparent;
 /* padding-top: 80px; */ /* Add padding to account for header */
 box-sizing: border-box;
}

.top-left {
 grid-area: top-left;
 background-color: transparent;
 display: flex;
 justify-content: center;
 align-items: center;
 overflow: auto;
 margin-top: 20px;
}

.bottom-left {
 grid-area: bottom-left;
 background-color: transparent;
 display: flex;
 justify-content: center;
 align-items: center;
 overflow: hidden;
}

.samurai-info {
 width: 100%;
 font-size: clamp(14px, 1.5vw, 24px);
 max-height: 100%;
 overflow-y: auto;
 text-align: center;
 background-color: rgba(255, 255, 255, 0.9);
 padding: 20px;
 border-radius: 10px;
 box-sizing: border-box;
 max-width: 700px;
 z-index: 1;
}

.samurai-info h1 {
 font-size: clamp(16px, 1.2vw, 26px);
}

.samurai-info h2 {
 font-size: clamp(14px, 1vw, 20px);
 margin-top: 1.6em;
 margin-bottom: 0.3em;
}

.samurai-info h3 {
 font-size: clamp(13px, 0.8vw, 18px);
 margin-top: 1.3em;
 margin-bottom: 0em;
}

.samurai-info p {
 font-size: clamp(12px, 0.6vw, 16px);
}

.right {
 grid-area: right;
 background-color: transparent;
 display: flex;
 justify-content: center;
 align-items: center;
 overflow: auto;
}

.video-box {
 /* width: 100%; */
 height: 100%;
 border: 1pt solid rgba(255, 255, 255, 0.9);
 border-radius: 10px;
 box-sizing: border-box;
 display: flex;
 justify-content: center;
 align-items: center;
 overflow: hidden;
 max-width: 700px;
 z-index: 1;
}

.video-background {
 width: 100%;
 height: 150%;
 object-fit: contain;
}

/* Signup form container */
.signup-form-container {
 background: rgba(255, 255, 255, 0.9);
 padding: 30px;
 border-radius: 10px;
 color: #333;
 width: 300px;
 max-height: 100%;
 overflow-y: auto;
 z-index: 1;
}

/* Form styles */
.signup-form {
 display: flex;
 flex-direction: column;
}

.signup-form h2 {
 margin-top: 0;
 font-size: 1.5em;
 font-weight: bold;
}

.signup-form label {
 display: block;
 margin-top: 10px;
}

.signup-form input {
 width: 100%;
 padding: 10px;
 margin-top: 5px;
 border: 1px solid #ccc;
 border-radius: 5px;
 box-sizing: border-box;
}

.signup-form button {
 background: #333;
 color: #fff;
 border: none;
 padding: 10px;
 margin-top: 10px;
 cursor: pointer;
 width: 100%;
 border-radius: 5px;
 box-sizing: border-box;
}

/* begin */
.login-form-container,
.reset-password-form-container {
 background: rgba(255, 255, 255, 0.9);
 padding: 30px;
 border-radius: 10px;
 color: #333;
 width: 300px;
 margin: 0 auto;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 z-index: 1;
}

.login-form h2,
.reset-password-form h2 {
 margin-top: 0;
 font-size: 1.5em;
 font-weight: bold;
}

.login-form label,
.reset-password-form label {
 display: block;
 margin-top: 10px;
}

.login-form input,
.reset-password-form input {
 width: 100%;
 padding: 10px;
 margin-top: 5px;
 border: 1px solid #ccc;
 border-radius: 5px;
 box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
}

.login-form button,
.reset-password-form button {
 background: #333;
 color: #fff;
 border: none;
 padding: 10px;
 margin-top: 10px;
 cursor: pointer;
 width: 100%;
 border-radius: 5px;
 box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
}

.login-form p,
.reset-password-form p {
 text-align: center;
 margin-top: 20px;
}

.login-form p a,
.reset-password-form p a {
 color: #333;
}

/* comes after the css above so overrides */
#confirm-reset-password-form {
 display: none;
}

/* end */

/* Cookie policy */
.cookie-policy {
 position: fixed;
 bottom: -100px;
 left: 0;
 width: 100%;
 background: #fff;
 color: #333;
 padding: 20px;
 box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
 display: none;
 justify-content: center;
 align-items: center;
 gap: 10px;
 flex-wrap: nowrap;
 transition: bottom 0.5s ease-in-out;
 z-index: 1000;
}

.cookie-policy.show {
 display: flex;
 bottom: 0;
}

.cookie-policy p {
 margin: 0;
 flex-shrink: 1;
}

.cookie-policy button {
 background: none;
 border: 1px solid #333;
 color: #333;
 padding: 10px 20px;
 cursor: pointer;
 border-radius: 5px;
 flex-shrink: 0;
}

.cookie-policy button:hover {
 background: #333;
 color: #fff;
}

/* Modal styles */
.cookie-modal {
 display: none; /* Hidden by default */
 position: fixed; /* Stay in place */
 z-index: 1; /* Sit on top */
 left: 0;
 top: 0;
 width: 100%; /* Full width */
 height: 100%; /* Full height */
 overflow: auto; /* Enable scroll if needed */
 background-color: rgb(0, 0, 0); /* Fallback color */
 background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

.cookie-modal-content {
 background-color: #fefefe;
 margin: 15% auto; /* 15% from the top and centered */
 padding: 20px;
 border: 1px solid #888;
 width: 80%; /* Could be more or less, depending on screen size */
}

.cookie-close {
 color: #aaa;
 float: right;
 font-size: 28px;
 font-weight: bold;
}

.cookie-close:hover,
.cookie-close:focus {
 color: black;
 text-decoration: none;
 cursor: pointer;
}

.modal {
 display: none;
 position: fixed;
 z-index: 9999;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 overflow: auto;
 background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
 display: block;
 margin: auto;
 width: 80%;
 max-width: 80%;
 height: auto;
 max-height: 80%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

.close {
 position: absolute;
 top: 15px;
 right: 35px;
 color: #f1f1f1;
 font-size: 40px;
 font-weight: bold;
 transition: 0.3s;
}

.close:hover,
.close:focus {
 color: #bbb;
 text-decoration: none;
 cursor: pointer;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
 .gridContainer {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
   "top-left"
   "bottom-left"
   "right";
 }

 .top-left,
 .bottom-left,
 .right {
  margin-top: 10px;
 }

 .samurai-info,
 .video-box,
 .signup-form-container {
  width: 90%;
  max-width: none;
 }
}

/* @media (max-width: 2388px) {
 .gridContainer {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
   "top-left right"
   "bottom-left right";
 }

 .top-left,
 .bottom-left,
 .right {
  margin-top: 10px;
 }

 .samurai-info,
 .video-box,
 .signup-form-container {
  width: 90%;
  max-width: 850px;
 }
} */

/* Import Playfair Display Italic from Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,400;1,700&display=swap");

/* Apply elegant italic style */
.elegant-italic {
 font-family: "Playfair Display", serif;
 font-style: italic;
 font-weight: bold;
}

/* Subtle Shimmer effect */
@keyframes shimmer {
 0% {
  background-position: -300px 0;
 }
 100% {
  background-position: 300px 0;
 }
}

.shimmer-text {
 display: inline-block;
 background: linear-gradient(to right, black, #e74c3c, black);
 background-size: 700% auto;
 color: transparent;
 background-clip: text;
 -webkit-background-clip: text;
 animation: shimmer 30s infinite;
 animation-timing-function: ease-in-out;
 padding-right: 0.2em; /* Add padding to prevent cutting off */
 margin-right: -0.2em; /* Adjust margin to maintain spacing */
}