/* --------------------------------------------- */
/* GLOBAL RESET */
/* --------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

body {
  background: #f2f6f7;
  overflow-x: hidden;
  color: #222;
}

.hidden {
  display: none !important;
}

/* --------------------------------------------- */
/* AB HEADER (white → teal → purple → pink) */
/* --------------------------------------------- */
#ab-header {
  width: 100%;
  height: 60px;
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #ffffff 6%,
    #1fb9c4 45%,
    #7b65d3 70%,
    #e25ea1 100%
  );
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;

  display: flex;
  align-items: center;
  padding: 0 16px;
  overflow: hidden; /* for holo shine */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* more white in mobile */
@media (max-width: 640px) {
  #ab-header {
    background: linear-gradient(
      90deg,
      #ffffff 0%,
      #ffffff 22%,
      #1fb9c4 55%,
      #7b65d3 78%,
      #e25ea1 100%
    );
  }
}

/* holo shine overlay */
#ab-header::after {
  content: "";
  position: absolute;
  top: -80%;
  left: -40%;
  width: 60%;
  height: 260%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.6)
  );
  opacity: 0.3;
  mix-blend-mode: screen;
  transform: rotate(20deg);
  animation: holoSlide 7s linear infinite;
  pointer-events: none;
}

@keyframes holoSlide {
  0% {
    transform: translateX(-120%) rotate(20deg);
  }
  100% {
    transform: translateX(280%) rotate(20deg);
  }
}

.ab-logo {
  height: 36px;
}

.header-left,
.header-right {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  flex: 0 0 auto;
}

.header-center {
  flex: 1;
  text-align: center;
}

.header-title {
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Mobile header: title right-aligned */
@media (max-width: 640px) {
	
  .header-left {
    width: auto;
    flex: 0 0 auto;
    margin-right: 4px; /* small gap between logo and title */
  }

  .header-right {
    width: 0;
    flex: 0 0 0;
    display: none;     /* remove empty space on the right */
  }

  .header-center {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    padding-right: 8px;
    text-align: right;
  }

  .header-title {
    font-size: 14px;
    white-space: nowrap;
  }

}

/* --------------------------------------------- */
/* SNOW */
/* --------------------------------------------- */
#snow-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60; /* above pages, below header */
}

.snowflake {
  position: absolute;
  background: white;
  border-radius: 50%;
  opacity: 0.9;
  filter: blur(1px);
  animation-name: fall, sway;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes fall {
  0% {
    transform: translateY(-10vh);
  }
  100% {
    transform: translateY(110vh);
  }
}

@keyframes sway {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(18px);
  }
  100% {
    transform: translateX(0px);
  }
}

/* --------------------------------------------- */
/* START SCREEN */
/* --------------------------------------------- */

#start-screen {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)),
		linear-gradient(
      135deg,
      rgba(31, 185, 196, 0.35),
      rgba(226, 94, 161, 0.45)
    ),
    url("assets/christmas-bg2.png") center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
	animation: fadeIn 0.8s ease forwards;
}


#start-content {
  text-align: center;
}

/* Pink, Christmassy start button */
#start-btn {
  padding: 18px 42px;
  font-size: 22px;
  border-radius: 999px;
  border: none;
  cursor: pointer;

  background: linear-gradient(135deg, #ffb6da, #ff64b4);
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.03em;

  /*
	box-shadow: 0 0 20px rgba(255, 118, 184, 0.8),
    0 0 40px rgba(31, 185, 196, 0.5);
	*/
	
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.6),              /* dark base shadow */
    0 0 20px rgba(255, 118, 184, 0.9),          /* pink glow */
    0 0 34px rgba(31, 185, 196, 0.7);           /* teal outer glow */


  position: relative;
  overflow: hidden;

  animation: btnGlow 2.2s ease-in-out infinite;
}

@keyframes btnGlow {
  0% {
    box-shadow: 0 0 16px rgba(255, 118, 184, 0.7),
      0 0 32px rgba(31, 185, 196, 0.4);
  }
  50% {
    box-shadow: 0 0 26px rgba(255, 118, 184, 1),
      0 0 52px rgba(31, 185, 196, 0.7);
  }
  100% {
    box-shadow: 0 0 16px rgba(255, 118, 184, 0.7),
      0 0 32px rgba(31, 185, 196, 0.4);
  }
}

/* subtle shimmer on button (more subtle now) */
#start-btn::after {
  content: "";
  position: absolute;
  top: -120%;
  left: -60%;
  width: 50%;
  height: 340%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.6)
  );
  opacity: 0.35;
  transform: rotate(18deg);
  animation: btnShine 3s ease-in-out infinite;
}

@keyframes btnShine {
  0% {
    transform: translateX(-180%) rotate(18deg);
  }
  100% {
    transform: translateX(360%) rotate(18deg);
  }
}

/* --------------------------------------------- */
/* PAGE INNER WRAPPER */
/* --------------------------------------------- */
.page-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 80px 16px 32px;
}

/* main & final screens use same dimmed background as home */

#main-screen,
#final-screen {
  min-height: 100vh;
  background:
    /* soft dark vignette */
    radial-gradient(circle at top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.85)),
    /* AB teal → pink wash */
    linear-gradient(
      135deg,
      rgba(31, 185, 196, 0.65),
      rgba(226, 94, 161, 0.75)
    ),
    /* Christmas photo */
    url("assets/christmas-bg2.png") center/cover no-repeat;
  background-attachment: fixed;
}



/* --------------------------------------------- */
/* MAIN SCREEN */
/* --------------------------------------------- */
#main-screen {
  animation: fadeIn 0.8s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------- */
/* STICKY PREVIEW CARD */
/* --------------------------------------------- */


#preview-wrapper {
  position: relative;      /* no more sticky */
  top: 0;
  border-radius: 16px;
  overflow: hidden;
    box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.12);
  margin: 16px auto 24px;  /* small gap under header, centered */
  background: transparent;
  z-index: 5;
  width: 100%; 
  max-width: 1200px;   /* jn.120425 give room for two square panels */
}



#cardCanvas {
  width: 100%;
  /* jn.120625 – let JS control the height based on the image */
  /* aspect-ratio: 2 / 1; */
  display: block;
  background: transparent;
}



/* --------------------------------------------- */
/* FORMS GRID */
/* --------------------------------------------- */

.forms-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  z-index: 1;
}

.form-box {
  padding: 18px 18px 22px;
  border-radius: 16px;
  background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.30),
      rgba(255, 255, 255, 0.10)
    );
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}


/* “Engraved” section titles */
.form-box h2 {
  margin-bottom: 8px;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #d5dae6;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35),
    0 -1px 0 rgba(0, 0, 0, 0.45);
}


/* Angat Buhay pink labels */
label {
  font-size: 13px;
  margin-top: 10px;
  margin-bottom: 2px;
  display: block;
  font-weight: 500;
  color: #ff64b4; /* AB pink accent */
  letter-spacing: 0.03em;
}

/* Glassy inputs */


/* Only text/email/date + textarea get the glass treatment */
input[type="text"],
input[type="email"],
input[type="date"],
input[type="number"],
textarea {
  width: 100%;
  border-radius: 10px;
  padding: 10px 11px;
  margin-top: 2px;
  font-size: 14px;

  border: 1px solid rgba(255, 255, 255, 0.6);
  background: radial-gradient(
      circle at top left,
      rgba(255, 255, 255, 0.40),
      rgba(255, 255, 255, 0.10)
    );
  color: #fdfdff;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Highlight invalid fields */
input.input-error,
textarea.input-error {
  border-color: #ff4f6a;
  box-shadow:
    0 0 0 1px rgba(255, 79, 106, 0.85),
    0 10px 24px rgba(0, 0, 0, 0.55);
}


/* placeholders + focus state */
input::placeholder,
textarea::placeholder {
  color: rgba(226, 233, 245, 0.8);
  font-size: 13px;
}

input:focus,
textarea:focus {
  outline: none;
  border-color: #ff80c8;
  box-shadow:
    0 0 0 1px rgba(255, 128, 200, 0.6),
    0 10px 24px rgba(0, 0, 0, 0.45);
  background: radial-gradient(
      circle at top left,
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0.08)
    );
}

textarea {
  min-height: 80px;
  resize: vertical;
}


/* buttons (preview + final checkout) */


.checkout {
  margin-top: 20px;
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #ffb6da, #ff64b4); /* AB pink */
  color: #ffffff;
  border: none;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(255, 118, 184, 0.7);
}


.final-checkout {
  max-width: 260px;
  margin: 20px auto 0;
	margin-top: 40px;
}

/* Desktop: forms side by side */
@media (min-width: 900px) {
  .forms-grid {
    flex-direction: row;
  }

  .form-box {
    flex: 1;
  }
}

/* --------------------------------------------- */
/* FINAL SCREEN */
/* --------------------------------------------- */

#final-screen {
  padding-top: 60px;
  opacity: 0;
  transform: translateY(30px);
}

/* trigger fade-in when active */
#final-screen.active-preview {
  animation: fadeIn 0.8s ease forwards;
}


.final-inner {
  text-align: center;
}

#finalCanvas {
  width: 100%;
  max-width: 960px;
  margin: 20px auto 0;
  display: block;
  border-radius: 16px; /* match live preview radius */
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.12); /* subtle light edge */
  /* background: #000;  <-- remove or comment this out */
  background: transparent;   /* optional */
}


.back-link {
  background: none;
  border: none;
  color: #ffb6da;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 20px;
  text-align: left;
}


.preview-info {
  max-width: 720px;
  margin: 0 auto 16px;
  padding: 14px 18px;
  border-radius: 16px;
  background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.30),
      rgba(255, 255, 255, 0.10)
    );
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  text-align: left;
	margin-top: 14px;
}

.preview-info h2 {
  color: #ffffff;
  font-size: 20px;
  margin-bottom: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
	font-size: 16px;
}

.preview-info p {
  color: #f7f7f7;
  font-size: 12px;
  line-height: 1.5;
}





.send-options {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: #fdfdff;
}

.send-option-inline {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* radios: simple, small, AB pink accent */
.send-option-inline input[type="radio"] {
  accent-color: #ff64b4;
  width: auto;
  height: auto;
  margin: 0;
  box-shadow: none;
  border: none;
  background: transparent;
  backdrop-filter: none;
}

/* label text beside radios */
.send-option-inline span {
  margin-right: 4px;
	color: #ffffff;
}

/* date input inside frosted box should not stretch too much */
.send-option-inline input[type="date"] {
  max-width: 160px;
}




/* --------------------------------------------- */
/* CONFETTI EXPLOSION (CENTER BURST)             */
/* --------------------------------------------- */

#confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 70; /* above snow (60), below header (80) */
}

.confetti-piece {
  position: absolute;
  width: 6px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  /* start at center of screen */
  left: 50vw;
  top: 50vh;
  animation: confettiBurst var(--dur, 1.3s) ease-out forwards;
}

/* teal & pink pieces */
.confetti-piece.teal {
  background: #1fb9c4;
}

.confetti-piece.pink {
  background: #e25ea1;
}

@keyframes confettiBurst {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateZ(0deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--dx, 0), var(--dy, 40vh), 0) rotateZ(360deg);
  }
}



/* ===========================================================
   CHECKOUT LOADING OVERLAY + SPINNER
   =========================================================== */

/* ===========================================================
   CHECKOUT LOADING OVERLAY + SPINNER
   =========================================================== */

/* Full-screen blur overlay */
/* Full-screen blur overlay */
#checkout-loading {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;

  /* mostly transparent so the final-screen shows through + gets blurred */
  background: radial-gradient(
      circle at top,
      rgba(0, 0, 0, 0.18),
      rgba(0, 0, 0, 0.55)
    );
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}


/* Glassy loading box – same look as .form-box */
.loading-box {
  max-width: 420px;
  width: 90%;
  padding: 18px 18px 22px;
  border-radius: 16px;
  background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.30),
      rgba(255, 255, 255, 0.10)
    );
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  text-align: center;
}

.loading-title {
  font-size: 16px;
  margin-bottom: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #d5dae6;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35),
    0 -1px 0 rgba(0, 0, 0, 0.45);
}


/* Loader itself (pink + turquoise) */
/* HTML: <div class="loader"></div> */
.loader {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
  margin: 12px auto 8px;
  --loader-teal: #1fb9c4;
  --loader-pink: #ff64b4;
}
.loader::before,
.loader::after {
  content: "";
  grid-area: 1/1;
  --c: no-repeat radial-gradient(farthest-side, var(--loader-teal) 92%, #0000);
  background:
    var(--c) 50% 0,
    var(--c) 50% 100%,
    var(--c) 100% 50%,
    var(--c) 0 50%;
  background-size: 12px 12px;
  animation: l12 1s infinite;
}
.loader::before {
  margin: 4px;
  /* second layer in pink */
  --c: no-repeat radial-gradient(farthest-side, var(--loader-pink) 92%, #0000);
  background-size: 8px 8px;
  animation-timing-function: linear;
}

@keyframes l12 {
  100% {
    transform: rotate(.5turn);
  }
}

/* Status lines */
.loading-messages {
  margin-top: 10px;
  font-size: 13px;
  color: #f7f7f7;
  text-align: left;
}

.loading-messages p {
  margin-bottom: 6px;
}

#loading-status-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

#loading-status-list li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 3px;
  font-size: 12px;
  color: #e9edf9;
}

#loading-status-list li::before {
  content: "•";
  position: absolute;
  left: 4px;
  top: 0;
  color: #ffb6da;
}

/* ========== reCAPTCHA v3 badge tweaks ========== */
.grecaptcha-badge {
  z-index: 85; /* keep it above background, below header */
}

/* Mobile: make the badge more subtle */
@media (max-width: 640px) {
  .grecaptcha-badge {
    opacity: 0.5;
  }
}



/* ===========================================================
   FROSTY ALERT MODAL
   =========================================================== */

/* Frosty custom alert overlay */
.alert-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
      circle at top,
      rgba(0, 0, 0, 0.45),
      rgba(0, 0, 0, 0.85)
    );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Frosty alert box */
.alert-box {
  max-width: 420px;
  width: 90%;
  padding: 18px 18px 20px;
  border-radius: 16px;
  background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.30),
      rgba(255, 255, 255, 0.10)
    );
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Title */
.alert-title {
  font-size: 16px;
  margin-bottom: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #d5dae6;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35),
    0 -1px 0 rgba(0, 0, 0, 0.45);
}

/* Single-message fallback */
.alert-message {
  font-size: 13px;
  line-height: 1.5;
  color: #f7f7f7;
}

/* Bullet list of errors */
.alert-list {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
  color: #f7f7f7;
  text-align: left;
}

.alert-list li {
  margin-bottom: 4px;
}

/* OK button – wider and right aligned */
.alert-button {
  margin-top: 16px;
  align-self: flex-end;
  padding: 10px 28px;
  border-radius: 999px;
  border: none;
  cursor: pointer;

  background: linear-gradient(135deg, #ffb6da, #ff64b4);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.4),
    0 0 14px rgba(255, 118, 184, 0.7);
}



/* jn.120525 — helper text under fields */
.field-note {
  margin-top: 4px;
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  font-style: italic;
}