:root {
  --co-body-bg: #252422;
  --co-body-text: #ddd;
  --co-body-accent: #8a889e;
  --co-body-accent-contrast: #fff;
  --co-textfld-bg: #222;
  --co-textfld-border: #333;
  --co-textfld-active-border: #444;
  --co-textfld-focus-border: var(--co-body-accent);
  --co-textfld-valid-border: hsl(140 90% 20%);
  --co-textfld-valid-active-border: hsl(140 90% 30%);
  --co-textfld-valid-focus-border: hsl(140 90% 45%);
  --co-textfld-invalid-border: hsl(20 90% 20%);
  --co-textfld-invalid-active-border: hsl(20 90% 30%);
  --co-textfld-invalid-focus-border: hsl(20 90% 45%);
  --co-btn-text: var(--co-body-accent-contrast);
  --co-btn-bg: var(--co-body-accent);
  --co-btn-active-bg: #333;
  --co-btn-focus-bg: #333;
  --e-global-color-00539A: #00539A;
  --e-global-color-083113f: #FFFFFF;
  --e-global-color-1bd57f1c: #706D69;
  --e-global-color-1f86ceb: #3A3936;
  --e-global-color-23924bc: #807E7C;
  --e-global-color-27816be: #02010100;
  --e-global-color-29df007: #454542;
  --e-global-color-35ec3ba7: #FFFFFF00;
  --e-global-color-49242077: #252422;
  --e-global-color-600ad55: #FF8523;
  --e-global-color-6d097900: #31302D;
  --e-global-color-accent: #FFDE73;
  --e-global-color-primary: #FBF9ED;
  --e-global-color-secondary: #E6E3D6;
  --e-global-color-text: #807E7C;
  --swiper-theme-color: #007aff;
  --wp--preset--color--black: #000000;
  --wp--preset--color--cyan-bluish-gray: #abb8c3;
  --wp--preset--color--light-green-cyan: #7bdcb5;
  --wp--preset--color--luminous-vivid-amber: #fcb900;
  --wp--preset--color--luminous-vivid-orange: #ff6900;
  --wp--preset--color--pale-cyan-blue: #8ed1fc;
  --wp--preset--color--pale-pink: #f78da7;
  --wp--preset--color--vivid-cyan-blue: #0693e3;
  --wp--preset--color--vivid-green-cyan: #00d084;
  --wp--preset--color--vivid-purple: #9b51e0;
  --wp--preset--color--vivid-red: #cf2e2e;
  --wp--preset--color--white: #ffffff;
  --wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);
  --wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);
  --wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);
  --wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);
  --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);
  --wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);
  --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);
  --wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);
  --wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);
  --wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);
  --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);
  --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);
}

/* Start Bottom Index Grid*/
.grid-cont-form {
  display: grid;
  grid-template-areas:
    "coupon"
    "email";  
  grid-gap: 10px;
  margin: 2em auto;
  position: relative;
  justify-content: center;      /* Centers the grid horizontally */
  align-items: center;         /* Centers items vertically within their grid areas */
  place-items: center;         /* Shorthand for align-items and justify-items */
}
.grid-item-coupon {
  grid-area: coupon;
  justify-self: start;
  align-self: start;
  justify-content: space-evenly;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}
.grid-item-coupon input {
  width: 300px;
  height: 42px;
  box-sizing: border-box;
}
/*.grid-item-coupon button {
  display: inline-block;
  padding: 10px 20px;
  margin-right: 10px;
  cursor: pointer;
  position: relative;
}*/
.grid-item-email {
  grid-area: email;
  justify-self: start;
  align-self: start;
  justify-content: space-evenly;
  position: relative;
}
.grid-item-email input {
    width: 300px;
    height: 42px;
    font-size: 16px;
    box-sizing: border-box;
}

/* OR for a more flexible approach */
.grid-item-email input {
    /* Option 2: Responsive size */
    width: 100%;          /* Takes full width of grid area */
    min-width: 300px;     /* Won't get smaller than this */
    height: 42px;
    
    /* Optional: make the text larger too */
    font-size: 16px;
    
    /* Ensure padding is included in the size */
    box-sizing: border-box;
}


/* End Top Index Grid*/
/*.outer-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3fr 1fr;
  grid-gap: 10px;
  position: relative;
}

.outer-grid-item {
   padding: 1px;
   position: relative; 
   z-index: 1;
}
.outer-grid-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 50%;
  height: 50%;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}*/

.outer-grid-overlay {
  position: fixed;  
  top: 50%;        
  left: 50%;       
  transform: translate(-50%, -50%);  
  width: 50%;
  height: 50%;
  display: flex;   
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.overlay-content {
  margin-top: 10px;
  background-color:  var( --e-global-color-083113f );
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  align-self: center;
  justify-content: center;
  position: relative;
  white-space: normal; /* Changed from nowrap to normal */
  overflow: visible; /* Changed from hidden to visible */
  text-overflow: clip; /* Changed from ellipsis to clip */
}
.overlay-content button {
  display: inline-block;
  padding: 5px 10px;
  margin-right: 10px;
  cursor: pointer;
  position: relative;
}

.msgbutton-container {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;  /* Adds space between buttons */
}

/* Optional: Make buttons maintain their size */
.msgbutton {
  flex-shrink: 0;  /* Prevents buttons from shrinking */
  white-space: nowrap;  /* Prevents text inside buttons from wrapping */
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  font-weight: bold;
  font-family: var( --e-global-typography-primary-font-family ), Sans-serif;
  color: var( --e-global-color-00539A);
  cursor: pointer;
}

.apply-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 14px;
  font-weight: initial;
  cursor: pointer;
  font-family: var( --e-global-typography-primary-font-family ), Sans-serif;
  color: var( --e-global-color-00539A );
  z-index: 9998;
}

.flash {
  padding: 20px;
  margin: 20px;
  color: var(--e-global-color-00539A);
}

.flash.error {
  color: var(--e-global-color-00539A);
  /*color: var(--wp--preset--color--vivid-red);*/
}
.flash.message {
  color: var(--e-global-color-00539A);
}

.successspacer{
  padding-top:20px; /* Adds 10px space at the top inside the div */
  padding-right: 20px; /* Adds 20px space to the right inside the div */
  padding-bottom: 150px; /* Adds 30px space at the bottom inside the div */
  padding-left: 10px; /* Adds 40px space to the left inside the div */
}

.success-subtitle {
  color: var( --e-global-color-00539A );
  margin-top: 0;
  font-family: var( --e-global-typography-22c7684-font-family ), Sans-serif;
  font-size: var( --e-global-typography-22c7684-font-size );
  font-weight: var( --e-global-typography-secondary-font-weight );
  text-transform: var( --e-global-typography-22c7684-text-transform );
  font-style: var( --e-global-typography-22c7684-font-style );
  text-decoration: var( --e-global-typography-22c7684-text-decoration );
  line-height: var( --e-global-typography-22c7684-line-height );
  letter-spacing: var( --e-global-typography-22c7684-letter-spacing );
  word-spacing: var( --e-global-typography-22c7684-word-spacing );
  text-align: center;
  margin-bottom: 10px;

}

.success-title {
  color: var( --e-global-color-00539A );
  margin-top: 0;
  font-family: var( --e-global-typography-2eb3d06-font-family ), Sans-serif;
  font-size: var( --e-global-typography-secondary-font-size );
  font-weight: var( --e-global-typography-secondary-font-weight );
  text-transform: var( --e-global-typography-2eb3d06-text-transform );
  font-style: var( --e-global-typography-2eb3d06-font-style );
  text-decoration: var( --e-global-typography-2eb3d06-text-decoration );
  line-height: var( --e-global-typography-2eb3d06-line-height );
  letter-spacing: var( --e-global-typography-2eb3d06-letter-spacing );
  word-spacing: var( --e-global-typography-2eb3d06-word-spacing );
  text-align: center;
  margin-bottom: 50px;

}

.success-text {
  color: var( --e-global-color-00539A );
  font-family: var( --e-global-typography-tertiary-font-family ), Sans-serif;
  font-size: var( --e-global-typography-tertiary-font-size );
  font-weight: var( --e-global-typography-tertiary-font-weight );
  text-transform: var( --e-global-typography-tertiary-text-transform );
  font-style: var( --e-global-typography-tertiary-font-style );
  text-decoration: var( --e-global-typography-tertiary-text-decoration );
  line-height: var( --e-global-typography-tertiary-line-height );
  letter-spacing: var( --e-global-typography-tertiary-letter-spacing );
  text-align: center;
  margin-bottom: 25px;
}

.btnsuccess {
  align-self: center;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  text-align: center;
}

/*input[type=email],
input[type=text] {
  border: none;
  border-bottom: 2px solid #ccc;
  outline: none;
  padding: 5px 0;
  background-color: transparent;
}

input[type=email]:focus,
input[type=text]:focus {
  outline: 0;
  border-bottom-color: #555;
}


input[type=email],
input[type=text] {
  width: var(--width-inputs);
  max-width: 100%;
}

input[type=email]:hover:not([readonly], [disabled]),
input[type=email]:active:not([readonly], [disabled]),
input[type=text]:hover:not([readonly], [disabled]),
input[type=text]:active:not([readonly], [disabled]){
  border-color: var(--co-textfld-active-border);
}

input[type=email]:focus:not([readonly], [disabled]),
input[type=text]:focus:not([readonly], [disabled]) {
  border-color: var(--co-textfld-focus-border);
}

input[type=email]:required:valid:hover:not([readonly], [disabled]),
input[type=email]:required:valid:active:not([readonly], [disabled]),
input[type=text]:required:valid:hover:not([readonly], [disabled]),
input[type=text]:required:valid:active:not([readonly], [disabled]) {
  border-color: var(--co-textfld-valid-active-border);
}

input[type=email]:required:valid:focus:not([readonly], [disabled]),
input[type=text]:required:valid:focus:not([readonly], [disabled]) {
  border-color: var(--co-textfld-valid-focus-border);
}

input[type=email]:required:invalid:hover,
input[type=email]:required:invalid:active,
input[type=text]:required:invalid:hover,
input[type=text]:required:invalid:active {
  border-color: var(--co-textfld-invalid-active-border);
}

input[type=email]:required:invalid:focus,
input[type=text]:required:invalid:focus {
  border-color: var(--co-textfld-invalid-focus-border);
}
input[type=email]::selection,
input[type=text]::selection {
  background-color: var(--co-body-accent);
  color: var(--co-body-accent-contrast);
}

input[type=color] {
  cursor: pointer;
  border-style: solid;
  border-radius: var(--radius-inputs);
  border-color: var(--co-textfld-border);
  background-color: var(--co-textfld-bg);
}

input[type=color]:hover:not([disabled]), input[type=color]:active:not([disabled]) {
  border-color: var(--co-textfld-active-border);
}

input[type=color]:focus {
  outline: 0;
}

input[type=color]:focus:not([disabled]) {
  border-color: var(--co-textfld-focus-border);
}*/