/* --- Proxima Nova (description) --- */
@font-face {
  font-family: 'Proxima Nova';
  src: url('https://cdn.shopify.com/oxygen-v2/26369/10684/22117/2981396/assets/ProximaNova-Regular-T70CX8Pw.woff2')
    format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Variables & reset --- */
:root {
  --gold: #c0a676;
  --cream: #faf8f2;
  --font-optima: 'Optima', 'Optima Nova', Candara, 'Segoe UI', sans-serif;
  --font-inter: 'Inter', sans-serif;
  --font-proxima:
    'Proxima Nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
}

/* --- Screen layout --- */
.screen {
  position: relative;
  min-height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-bottom: 3rem;

  @media (min-width: 640px) {
    padding-bottom: 0;
  }
}
.bg-wrap {
  position: absolute;
  inset: 0;
  top: -20px;
  transform: scale(1.05);
}
.bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/* --- Content --- */
.content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.25rem;
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 640px) {
  .content {
    padding: 2.5rem 1.5rem 5.5rem;
  }
}

.subtitle {
  font-family: var(--font-optima);
  color: #fff;
  font-size: 1.125rem;
  letter-spacing: 1px;
  margin: 0 0 0.75rem;
}
@media (min-width: 640px) {
  .subtitle {
    font-size: 32px;
    margin-bottom: 1rem;
  }
}

.title {
  font-family: var(--font-optima);
  color: #fff;
  font-weight: 300;
  margin: 0 0 1.25rem;
  line-height: 1.2;
  font-size: clamp(32px, 8vw, 74px);
}
@media (min-width: 640px) {
  .title {
    margin-bottom: 1.5rem;
  }
}

.description {
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-proxima);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 2rem;
  padding: 0 0.5rem;
}
@media (min-width: 640px) {
  .description {
    font-size: 15px;
    margin-bottom: 2.5rem;
  }
}

/* --- Year input: 4 digit slots --- */
.year-input-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
}
.digit-input {
  width: 48px;
  min-width: 0;
  height: 56px;
  padding: 0;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-bottom: 3px solid #1a1a1a;
  color: #1a1a1a;
  font-family: var(--font-optima);
  font-size: 32px;
  font-weight: 400;
  text-align: center;
  outline: none;
  caret-color: #1a1a1a;
  -webkit-appearance: none;
  appearance: none;
}
@media (min-width: 480px) {
  .digit-input {
    width: 52px;
    height: 64px;
    font-size: 42px;
    border-bottom-width: 3px;
  }
  .year-input-wrapper {
    gap: 14px;
  }
}
.digit-input::placeholder {
  color: transparent;
}

/* --- Input frame: 4 lớp octagon (gradient → cream → gradient → cream) theo ref --- */
.input-frame {
  --frame-gradient: linear-gradient(
    to right,
    rgb(188, 170, 139),
    rgb(126, 105, 72)
  );
  --frame-cream: rgb(250, 248, 241);
  position: relative;
  width: 100%;
  max-width: 348px;
  min-height: 138px;
  background: var(--frame-gradient);
  clip-path: polygon(
    0 24px,
    24px 0,
    calc(100% - 24px) 0,
    100% 24px,
    100% calc(100% - 24px),
    calc(100% - 24px) 100%,
    24px 100%,
    0 calc(100% - 24px)
  );
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5rem;
}
/* Lớp 2: cream, inset 2px, clip 23px */
.input-frame::before {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--frame-cream);
  clip-path: polygon(
    0 23px,
    23px 0,
    calc(100% - 23px) 0,
    100% 23px,
    100% calc(100% - 23px),
    calc(100% - 23px) 100%,
    23px 100%,
    0 calc(100% - 23px)
  );
  pointer-events: none;
}
/* Lớp 3: gradient, inset 6px, clip 20px */
.input-frame::after {
  content: '';
  position: absolute;
  inset: 6px;
  background: var(--frame-gradient);
  clip-path: polygon(
    0 20px,
    20px 0,
    calc(100% - 20px) 0,
    100% 20px,
    100% calc(100% - 20px),
    calc(100% - 20px) 100%,
    20px 100%,
    0 calc(100% - 20px)
  );
  pointer-events: none;
}
/* Lớp 4 (trong cùng): cream, inset 7px, clip 19.5px – nền cho ô nhập */
.year-input-wrapper {
  position: relative;
  z-index: 1;
  margin: 7px;
  min-height: 134px;
  padding: 16px 12px 20px;
  background: var(--frame-cream);
  clip-path: polygon(
    0 19.5px,
    19.5px 0,
    calc(100% - 19.5px) 0,
    100% 19.5px,
    100% calc(100% - 19.5px),
    calc(100% - 19.5px) 100%,
    19.5px 100%,
    0 calc(100% - 19.5px)
  );
}
@media (min-width: 480px) {
  .input-frame {
    min-height: 148px;
  }
  .year-input-wrapper {
    padding: 20px 16px 24px;
  }
}
@media (min-width: 640px) {
  .input-frame {
    margin-bottom: 2rem;
  }
}

/* --- Consent row --- */
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  width: 100%;
  max-width: 280px;
  text-align: left;
}
@media (min-width: 640px) {
  .consent-row {
    margin-bottom: 2rem;
    max-width: 22rem;
  }
}
.consent-row label {
  color: #fff;
  font-family: var(--font-proxima);
  font-size: 10px;
  line-height: 1.55;
}
.consent-row a {
  text-decoration: underline;
  color: inherit;
}
.consent-row .underline {
  text-decoration: underline;
}
.consent-row .custom-checkbox {
  margin-top: 2px;
}

/* --- Custom checkbox --- */
.custom-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 25px;
  height: 25px;
  min-width: 25px;
  border: 1px solid var(--cream);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.custom-checkbox:checked {
  background-color: var(--gold);
  border-color: var(--gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5 10-11'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
}

/* --- Enter button --- */
.btn-enter {
  background: var(--gold);
  color: rgba(0, 0, 0, 1);
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.46px;
  width: 100%;
  max-width: 304px;
  height: 50px;
  border: none;
  cursor: pointer;
  transition: filter 0.2s;
}
.btn-enter:hover {
  filter: brightness(1.1);
}
.btn-enter:active {
  filter: brightness(0.95);
}

/* --- Footer --- */
.footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 10;
}
.footer-text {
  color: #ffffff;
  font-family: var(--font-inter);
  font-size: 9px;
  line-height: 1.2;
}
.footer-logo {
  width: 94px;
  height: 12px;
}

.hidden-md {
  display: block;
}
@media (min-width: 640px) {
  .hidden-md {
    display: none;
  }
}