/*Custom Fonts*/
 /*Macys Sans*/
 @font-face {font-family: 'Macys Sans'; font-style: normal; font-weight: 400; src: local('Macys Sans'), url('https://emails.macys.com/assets/responsysimages/content/macys/MacysSansv2.woff') format('woff');}
 @font-face {font-family: 'Macys Sans'; font-style: normal; font-weight: 500; src: local('Macys Sans Medium'), url('https://emails.macys.com/assets/responsysimages/content/macys/MacysSansMdv2.woff') format('woff');}
 @font-face {font-family: 'Macys Sans'; font-style: normal; font-weight: 700; src: local('Macys Sans Bold'), url('https://emails.macys.com/assets/responsysimages/content/macys/MacysSansBdv2.woff') format('woff');}
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
*, fieldset, legend, label, input, textarea, select, button {
  margin: 0;
  padding: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
    /* Base font size */
  font-size: 16px;
}

body {
font-size: unset;
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

.nowrap {
 white-space: nowrap;
}


:root {
 /* Colors */
--color-text-dark: hsl(0, 0%, 0%);
--color-text-semidark: hsl(240, 11%, 19%);
--color-text-light: hsl(0, 0%, 100%);
--color-text-muted: hsl(231, 3%, 40%);
--color-accent: hsl(0, 100%, 34%);
--color-disabled: hsl(252, 2%, 59%);
--color-error: hsl(355, 79%, 49%);
/* Typography */
--ff-primary: 'Macys Sans', Helvetica, Arial, sans-serif;
--fs-sm: 0.75rem;
--fs-base: 1rem;
--fs-md: 1.125rem;
--fs-md1: 1.25rem;
--fs-md2: 1.375rem;
--fs-lg: 1.5rem;
--fw-normal: 400;
--fw-semi: 500;
--fw-bold: 700;
--lh-base: 1.3;
/* Spacing */
--space-xs: 0.5rem;
--space-sm: 0.75rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 2.5rem;
/* Radius */
--radius-sm: 3px;
--radius-md: 5px;
--radius-lg: 8px;
/* Transitions */
--transition-default: 300ms ease-in-out;
}
.wrapper {
  width: calc(100% - 40px);
  margin: 0 auto; 
  max-width: 1200px;
  @media screen and (min-width: 1440px) {
   max-width: 1480px;
   padding-inline: 20px;
  }
}

/*Flex Layout*/
.container_flex {
  display: flex;
  flex-direction: column;
  @media screen and (min-width: 1024px) {
    flex-direction: row; 
    justify-content: flex-start;
    gap: 5.25rem;
  }
}

@media screen and (min-width: 768px) {
 .container_flex-row {
 display: flex;
 }
}

/*Hide H1 & Legend Tags but 
can still be read by screen reader*/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*Spacing*/
.space-xs {
  margin-block-end: var(--space-xs);
}
.space-sm {
  margin-block-end: var(--space-sm);
}
.space-md {
  margin-block-end: var(--space-md);
}
.space-lg-top {
  margin-block-start: var(--space-lg);
}
.space-lg {
  margin-block-end: var(--space-lg);
}
.space-xl {
  margin-block-end: var(--space-xl);
}
.space-2xl {
  margin-block-end: var(--space-2xl);
}

.form__field--container:has(input:invalid:not(:placeholder-shown)) {
  margin-block-end: var(--space-sm);
}

/*Entire body area needed more top spacing on larger screens*/
@media screen and (min-width: 1023px) {
  .space-2xl-top {
    margin-block-start: var(--space-2xl);
  }
}
:is(.text_medium, .text_large, .text_label){
  line-height: var(--lh-base);
}

.text_small {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  font-weight: var(--fw-normal);
}

.text_medium {
 font-size: var(--fs-md);
 color: var(--color-text-dark);
 font-weight: var(--fw-semi);
}

.text_label {
 font-size: var(--fs-base);
  color: var(--color-text-muted);
}

.text_large {
  font-size: var(--fs-lg);
  color: var(--color-text-dark);
  font-weight: var(--fw-bold);
}

.text_accent-color {
  color: var(--color-accent);
}

.link_disclaimer {
  color: var(--color-text-muted);
  text-decoration: underline;
}
/*BUTTON STYLES*/
.btn_full {
  display: inline-block;
  width: 100%;
  padding: 12px 20px;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  text-align: center;
  background-color: var(--color-text-dark);
  color: var(--color-text-light);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.btn_outline {
  display: inline-block;
  width: 100%;
  padding: 12px 20px;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  text-align: center;
  background-color: var(--color-text-white);
  color: var(--color-text-dark);
  border: 2px solid var(--color-text-dark);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
}

.btn_disabled {
  background-color: var(--color-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.btn_enabled {
  background-color: var(--color-text-dark);
  cursor: pointer;
  pointer-events: auto;
}
.pos-relative {
 position: relative;
 display: flex;
 flex-direction: column;
 @media screen and (min-width: 500px) {
 justify-content: center;
  }
 @media screen and (min-width: 1024px) {
  align-items: center;
 }
}

 @media screen and (min-width: 1024px) {
.top_confirmation {
  max-width: 480px;
  margin: 0 auto;
}
 }


.banner_content {
 max-width: 340px;
 position: absolute;
 padding-block-start: 1rem;
 padding-inline: 1.25rem;
 @media screen and (min-width: 768px) {
  padding-block-start: 0rem;
  max-width: 440px;
 }
 @media screen and (min-width: 1024px) {
  display: flex;
  flex-direction: column;  
  justify-content: center;
  max-width: 460px;
  margin-inline-end: 24rem;
 }
 @media screen and (min-width: 1440px) {
   padding-block-start: 0;
 }
}

.banner_heading {
 font-size: var(--fs-md2);
 color: var(--color-text-dark);
 font-weight: var(--fw-bold);
 line-height: 1.3;
 margin-block-end: var(--space-lg);
  @media screen and (min-width: 768px) {
  font-size: var(--fs-md1);
  margin-block-end: var(--space-md);
 }
}

.banner_img {
 width: 133px;
 height: 40px;
 margin-inline-end: .75rem;
 @media screen and (min-width: 768px) {
  width: 103px;
  height: 31px;
 }
}

.banner_img--stars {
 padding-block-end: 4px;
}

.banner_rating {
  color: var(--color-text-semidark) !important;
   @media screen and (min-width: 768px) {
    margin-inline-start: .5rem;
 }
}
/*BASE FORM STYLES*/
fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

/*BASE FORM FIELD STYLES*/
.form__field--container {
  height: 3.125em;
  position: relative;
}

.top_form {
  @media screen and (min-width: 1024px) {
    max-width: 254px; 
  }
}

.container_form {
   @media screen and (min-width: 1024px) {
    max-width: 312px; 
  }
}
.top_form {
  @media screen and (min-width: 1440px) {
    max-width: 365px; 
  }
}

.container_form {
   @media screen and (min-width: 1440px) {
    max-width: 463px; 
  }
}

.form__input {
  position: absolute;
  height: 100%;
  width: 100%;
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius-md);
  outline: none;
  padding-left: 1em;
}

input:-webkit-autofill {
  background-color: var(--color-text-light) !important;
  color: var(--color-text-dark) !important;
  transition: background-color 5000s ease-in-out 0s; /* Prevent yellow flash */
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px var(--color-text-light) inset !important;
  box-shadow: 0 0 0px 1000px var(--color-text-light) inset !important;
}


.form__input:focus {
  border: 2px solid var(--color-text-muted);
} 

label {
  position: absolute;
  background: var(--color-text-light);
  left: 1em;
  top: 0.75em;
  cursor: text;
  transition: top 350ms ease-in, font-size 350ms ease-in;
}

/* 
  Float label above input when input is focused or contains text.
*/
.form__input:focus ~ label,
.form__input:not(:placeholder-shown):not(:focus) ~ label {
  top: -0.5em;
  font-size: var(--fs-sm);
  padding: 0 0.125em;
}

/*CUSTOM CHECKBOX STYLES*/
.text_label.checkbox {
 position: unset;
 color: var(--color-text-dark)
}

.container_checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  cursor: pointer;
}

/* Hide the native checkbox and replace it with custom styling */
.form__checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--color-text-dark);
  background-color: transparent;
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* Custom checkmark using a pseudo-element */
.form__checkbox::after {
  content: '';
  position: absolute;
  top: 0.2rem;
  left: 0.53rem;
  width: 0.4rem;
  height: 0.8rem;
  border: solid black;
  border-width: 0 0.13rem .13rem 0;
  cursor: pointer;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

/* Show checkmark when checked */
.form__checkbox:checked::after {
  opacity: 1;
}

/* Default: hide the error */
.error__message {
  display: none;
  color: var(--color-error, #E01A2B);
  font-size: var(--fs-sm);
  gap: 0.5rem;
  align-items: center;
}

/* Show the error when the email input is invalid and has content */
.form__field--container:has(input:invalid:not(:placeholder-shown)) + .form__error--wrapper .error__message {
  display: flex;
}

/* Default: hide the error (No change needed here) */
.error__message {
  display: none;
  color: var(--color-error, #E01A2B);
  font-size: var(--fs-sm);
  gap: 0.5rem;
  align-items: center;
}

/* REVISED: Show the error when the email input has the 'is-error' class */
/* This will now show for both empty and incorrectly formatted inputs, as managed by JS */
.form__field--container:has(input.is-error) + .form__error--wrapper .error__message {
  display: flex;
}

/* REVISED: Red border anytime input has the 'is-error' class */
/* Also keep your existing rule for focus:invalid for broader applicability */
.form__field--container:has(input.is-error) .form__input,
.form__field--container:has(input:focus:invalid) .form__input {
  border: 1px solid var(--color-error, #E01A2B);
}

/* REVISED: Reduce spacing when input has the 'is-error' class */
.form__field--container:has(input.is-error) {
  margin-block-end: 0.5rem;
}

/* Label turns red if input is focused and invalid */
.form__field--container:has(input:focus:invalid) label {
  color: var(--color-error, #E01A2B);
}

/* REVISED: Label stays red if input has the 'is-error' class */
.form__field--container:has(input.is-error) label {
  color: var(--color-error, #E01A2B);
}

/* Soft red border + label when input is invalid but not touched */
.form__field--container:has(input.has-soft-error) .form__input {
  border: 1px solid var(--color-error, #E01A2B);
}

.form__field--container:has(input.has-soft-error) label {
  color: var(--color-error, #E01A2B);
}

/* Don't show error message unless is-error is present */
.form__error--wrapper .error__message {
  display: none;
}

.form__field--container:has(input.is-error) + .form__error--wrapper .error__message {
  display: flex;
}


.checkbox-error {
 border: 1px solid var(--color-error, #E01A2B);
}