@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* Base Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif !important;
}

body,
label,
.cbFormLabelCell.cbFormLabel,
h3,
.cbFormLabelError {
  font-family: "Inter", sans-serif !important;
  color: white !important;
}

body {
  background-color: #28322A;
}

/* Illustration Background */
.bg-illustration {
  background-image: url("https://wmp.wmvcentral.com/wp-content/uploads/2025/05/8d0f5d8a39ee96da8d6c6aa6f562f93ae1eb887b-2.jpg");
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100vh;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .bg-illustration {
    height: 100vh;
  }
}

/* Login Panel */
.login-panel {
  background-color: #28322A;
  padding: 60px 30px;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-logo img {
  max-width: 220px;
}

/* Buttons */
.zonebtn,
.cbLoginButton,
.cbPasswordResetButton,
.cbSubmitButton {
  background-color: #c7a54c!important;
  border: none;
  color: #28322A!important;
  font-weight: bold;
  font-size: 16px !important;
  font-family: "Inter", sans-serif !important;
  border-radius: 8px !important;
  padding: 12px 0 !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease, transform 0.1s ease !important;
}

.cbLoginButton,
.cbPasswordResetButton,
.cbSubmitButton {
  background-color: #c5a95e !important;
  color: #111 !important;
  font-weight: 400 !important;
}

.zonebtn:hover,
.cbLoginButton:hover,
.cbPasswordResetButton:hover,
.cbSubmitButton:hover {
  background-color: #b2913e;
}

.cbLoginButton:hover,
.cbPasswordResetButton:hover,
.cbSubmitButton:hover {
  background-color: #d4bb74 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

/* Placeholder & Input */
.form-control::placeholder,
input::placeholder {
  color: #B3B3B3 !important;
  font-weight: 300 !important;
}

input,
.cbFormPassword {
  padding: 12px 16px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  transition: all 0.3s ease !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  color: #333 !important;
  outline: none !important;
}

input:hover,
.cbFormPassword:hover {
  background-color: #fdfdfd !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  cursor: text !important;
}

input:focus,
.cbFormPassword:focus {
  background-color: #fff !important;
  border-color: #C6AA5F !important;
  box-shadow: 0 0 0 4px rgba(198, 170, 95, 0.2) !important;
  color: #000 !important;
}

/* Back Link & Animation */
.back__link {
  
  text-decoration: none !important;
  display: inline-block;
  margin-bottom: 20px;
  display: flex;
  gap: 5px;
  align-items: flex-start;
  font-weight: 300 !important;
  font-size: 16px !important;
  transition: all 0.3s ease-in-out;
  position: relative;
}

.back__icon {
  color: #c7a54c;
}

.back__text {
  color: #fff;
}

.back-link i {
  margin-right: 5px;
}

.back__link:hover .back__text {
  color: #C6AA5F !important;
}

.back__link:hover .back__icon {
  animation: iconBounce 0.6s ease-in-out;
}

@keyframes iconBounce {
  0% { transform: translateX(0); }
  40% { transform: translateX(8px); }
  70% { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}

/* Logo + Form Layout */
.logo__wrapper {
  margin: 125px 0 0;
}

.login__form {
  width: 100%;
  margin-top: 55px;
  display: flex;
  flex-direction: column;
  max-width: 513px;
  color: #fff;
  font-weight: 300;
  font-size: 16px;
  text-decoration: none;
}

.login__form-container {
  padding: 75px 50px 0;
  width: 613px;
}

/* Forgot Password */
.forgotPass {
  text-align: right;
}

.forgotPass__link {
  text-decoration: underline !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  color: #ffffff !important;
  transition: color 0.3s ease, text-shadow 0.3s ease !important;
  text-align: right !important;
}

.forgotPass__link:hover {
  color: #C6AA5F !important;
  text-shadow: 0 0 2px rgba(198, 170, 95, 0.4) !important;
  cursor: pointer !important;
}

/* Caspio Overrides */
.public form#caspioform > div > section {
  margin: 0 !important;
  width: 100% !important;
}

.public .cbFormNestedTableContainer,
.public .cbFormAuthLabelCell,
.cbFormAuthFieldCell,
.cbLoginButtonContainer,
.cbHTMLBlockContainer,
.cbFormLabelCell.cbFormLabel,
.cbFormLabelCell.cbFormLabelRequired,
.cbFormFieldCell,
.cbPasswordRecoveryButtonContainer,
.cbSubmitButtonContainer,
.cbFormLabelError  {
  background-color: #28322a !important;
}

.cbFormCommonError {
  /* margin: 0px 15px 10px 15px !important; */
}

.cbHTMLBlockContainer {
  padding: 5px 15px 0px 15px !important;
}

/* CAPTCHA Layout */
.cbFormFieldCell {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
}

.cbFormFieldCell input[type="hidden"] {
  display: none;
}

.img-block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  left: 200px;
  top: 5px;
}

.img-block svg,
.img-block > svg {
  width: 30px;
  height: 30px;
  cursor: pointer;
  stroke: #C6AA5F;
  fill: none;
  transition: 0.2s;
  color: #c5a95e;
}

.img-block svg:hover,
.img-block > svg:hover {
  color: #f0c75e;
  stroke: #A8914E;
  transform: scale(1.1);
}

.cbFormAudioCaptcha {
  display: none;
}

.cbFormLabel,
.cbFormLabel label,
.cbFormLabelRequired,
.cbFormLabelRequired label,
.cbFormLabelError label{
  font-weight: 300!important;
  font-size: 16px!important;
  margin-bottom: 0px!important;
}

.hide-success-cont .cbConfirmationMessages{
  display: block!important;
  background-color: #28322a!important;
  color: #fff!important;
  min-height: auto!important;
  padding: 0px!important;
}

.hide-success-cont .cbConfirmationMessages h2{
  color: #fff!important;
}

.hide-success-cont .cbConfirmationMessages:before{
  display: none;
}

.cbFormTable,
.cbFormNestedTableContainer,
.cbFormSection,
.cbFormFieldCell,
.cbFormLabelCell,
.cbSubmitButtonContainer,
.cbFormAuthFieldCell {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.cbFormError,
.cbFormRequiredMarker {
  color: #f8d7da!important;
}