/* ===========================================================
   Advent Giving Calendar — 2025 Launch Build
   -----------------------------------------------------------
   Created by Jeff & Pilar Prus — CMF International
   Hosted via Cloudflare Pages + GitHub
   Campaign Year: 2025
   -----------------------------------------------------------
   This stylesheet is part of the Advent Giving Calendar project.
   All rights reserved.
   =========================================================== */

/* === GLOBAL === */
body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background-color: #f4f4f4;
  text-align: center;
  margin: 0;
  padding: 0;
}

.header {
  padding: 1em 0;
  background-color: #800000;
  color: white;
}

/* === BUTTON CONTAINER === */
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin: 1.5em auto 1em auto;
}

.button-container button {
  padding: 0.7em 1.4em;
  font-size: 1em;
  border: none;
  border-radius: 0.5em;
  cursor: pointer;
  background-color: #b22222;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: background 0.3s ease, transform 0.2s;
}

.button-container button:hover {
  background-color: #a11d1d;
  transform: scale(1.05);
}

/* === CALENDAR === */
.calendar-wrapper {
  position: relative;
  width: 90vmin;
  height: 90vmin;
  margin: 1em auto 2em auto; /* top 1em, bottom 2em */
  border: 6px solid #800000;
  overflow: visible;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

/* ===========================================================
   Background Reveal Timing — load grid first, fade image later
   =========================================================== */
.calendar-wrapper .background {
  opacity: 0;                       /* start hidden */
  transition: opacity 0.35s ease-in; /* fade in smoothly */
}

.calendar-wrapper.ready .background {
  opacity: 1;                       /* reveal once grid is built */
}


/* Background image (never intercepts clicks) */
.background {
  opacity: 0; /* default hidden until .ready toggled */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* Grid host + solid mask so background never peeks during flips */
.calendar-grid {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  width: 100%;
  height: 100%;
  z-index: 3;
  gap: 0;
  background-color: transparent; /* reveal Advent image behind tiles */
}

/* === TILES === */
.day {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  z-index: 3;
  margin: -0.5px;           /* remove hairline gaps */
  border: none;
  perspective: 800px;       /* subtle 3D depth */
  background-color: #2d7a2d;/* per-tile mask */
}

/* --- Faces-only flip (no transform on .card) --- */
.card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d; /* safe even when faces flip */
}

.face {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-origin: center center;
  transition: transform 0.6s;
}

/* Default orientations */
.front { transform: rotateY(0deg); }
.back  { transform: rotateY(180deg); }

/* On selection, rotate faces to show the back */
.day[data-status="selected"] .front { transform: rotateY(-180deg); }
.day[data-status="selected"] .back  { transform: rotateY(0deg); }

/* Solid fills so nothing shows through while flipping */
.front { background-color: #2d7a2d; }
.back  { background-color: #2d7a2d; }

/* Consistent borders avoid “spill” during flip */
.day .front, .day .back { border: 1px solid rgba(255,255,255,0.35); }

/* Available (green) */
.day[data-status="available"] .front {
  background-color: #2d7a2d;
}

/* Selected (maroon gradient + white text) — shows on the BACK face */
.day[data-status="selected"] .back {
  background: linear-gradient(135deg, #800000 0%, #a43737 100%);
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}



/* Reserved (future final reveal stage) */
.day[data-status="reserved"] .front {
  background-color: transparent;
  pointer-events: none;
  border: none;
}

/* === TILE TEXT === */
.day .front,
.day .back {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(0.65em, 2vw, 0.9em);
  line-height: 1.2em;
  padding: 0.4em;
  word-wrap: break-word;
  overflow: hidden;
}

.back-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(0.75em, 2.2vw, 0.95em);
  font-weight: 700;
}


/* === FIX: neutralize flip transform for pending tiles === */
.day[data-status="pending"] .card {
  transform: none !important;   /* disables flip transform offset */
}

.day[data-status="pending"] .face {
  transform: none !important;   /* ensures flat plane alignment */
  backface-visibility: visible !important;
}


/* === MODAL === */
.modal {
  display: none;
  position: fixed;
  z-index: 10;
  inset: 0;
  background-color: rgba(0,0,0,0.5);
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: #fff;
  padding: 1.5em;
  border-radius: 0.5em;
  width: 300px;
  text-align: center;
}

/* === iPhone Landscape Safe Modal (prevents cutoff & enables scroll) === */
@media (max-height: 500px) {
  #confirmModal .modal-content {
    max-height: 90vh !important;     /* fit into the short viewport */
    overflow-y: auto !important;     /* allow scrolling inside modal */
    -webkit-overflow-scrolling: touch !important; /* smooth iOS scroll */
  }

  /* allow the full-screen modal wrapper to scroll if needed */
  #confirmModal {
    align-items: flex-start !important; 
    padding-top: 1rem;
    padding-bottom: 1rem;
    overflow-y: auto;
  }
}

.modal-buttons, .modal-actions {
  display: flex;
  justify-content: space-around;
  margin-top: 1em;
}

.modal button {
  padding: 0.5em 1em;
  border: none;
  border-radius: 0.4em;
  cursor: pointer;
  background-color: #800000;
  color: white;
  transition: background 0.3s ease;
}

.modal button:hover { background-color: #a11d1d; }

/* === Modal Instruction Text (Confirm & Continue) === */
.post-donate-msg {
  font-size: 0.95em;
  color: #444;
  line-height: 1.6;        /* gives nice breathing room between lines */
  margin: 1em 0 1.5em 0;   /* adds space above and below the paragraph */
  text-align: center;
}


/* === Redirect Overlay === */
.redirect-notice {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  transition: opacity 0.4s ease;
}

.redirect-notice.hidden {
  opacity: 0;
  pointer-events: none;
}

.redirect-box {
  background: white;
  padding: 2em 3em;
  border-radius: 1em;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  text-align: center;
  max-width: 400px;
  font-size: 1.1em;
}

.redirect-box p {
  margin: 0;
  color: #333;
}

.redirect-box strong {
  color: #800000;
}


/* === FADE OUT (placeholder for reserved stage) === */
.fade-out { animation: fadeOutReveal 1.6s ease-in forwards; }

@keyframes fadeOutReveal {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

/* === v1.5.4 patches === */

/* Make ALL text on the selected back face white */
.day[data-status="selected"] .back,
.day[data-status="selected"] .back * {
  color: #ffffff !important;
}

/* === PENDING STATE (frosted tile with faint gift image + text) === */
.day[data-status="pending"] {
  position: relative;
  background-image: url("../images/gift.png");
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(255, 255, 255, 0.25); /* subtle frosted base */
  filter: brightness(0.95);
  overflow: hidden;
  z-index: 3;
}


/* Semi-transparent frosted veil */
.day[data-status="pending"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 1;
  border-radius: inherit;
}

/* Pending overlay container */
.pending-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  transform: translateZ(0); /* ensures correct centering context */
}

/* Faint background gift image */
.pending-overlay .gift-bg {
  position: absolute;
  inset: 0;
  width: 60%;
  height: 60%;
  margin: auto;
  object-fit: contain;
  opacity: 0.25;
  filter: brightness(1.1);
  z-index: 2;
}

/* NOTE: v1.5.5 layering override (optional)
   If overlay/gift visibility ever breaks after future edits,
   re-enable z-index layering block from Oct 2025 version. */
   
/* === v1.5.6K — Canonical pending overlay (grid + optical balance) === */
.day[data-status="pending"] { position: relative; }

.day[data-status="pending"] .pending-overlay {
  position: absolute;
  inset: 0;
  display: grid;               /* rock-solid centering */
  place-items: center;
  padding-inline: 12%;         /* equal L/R breathing room (bump if needed) */
  box-sizing: border-box;
  pointer-events: none;
  z-index: 3;                  /* above veil and faces */
}

/* keep veil under overlay */
.day[data-status="pending"]::before { z-index: 1; }

/* gift image sits under text within overlay */
.day[data-status="pending"] .pending-overlay .gift-bg {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 60%;
  object-fit: contain;
  opacity: 0.25;
  filter: brightness(1.05);
  z-index: 2;
}

/* Hide any face text while pending to avoid visual interference */
.day[data-status="pending"] .face .day-amount,
.day[data-status="pending"] .back-inner { visibility: hidden; }

/* === v1.5.6Z — Pending tile layering to prevent edge clipping === */
.day[data-status="pending"] {
  z-index: 50 !important;      /* lift above neighbors (they overlap by -0.5px) */
  overflow: visible !important; /* allow text/glyph tails to render fully */
}
.day[data-status="pending"] .pending-overlay {
  z-index: 60 !important;      /* ensure overlay text sits on top */
}

/* v1.5.6L — stacked lines with per-line optical tweak (final) */
.day[data-status="pending"] .pending-overlay .pg-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12em;                 /* tiny spacing between lines */
  transform: translateX(-6.0%);/* micro nudge for both lines together */
}

.day[data-status="pending"] .pending-overlay .pg-line {
  display: block;
  text-align: center;
  color: #800000;
  font-weight: 700;
  font-family: "Merriweather", Georgia, serif; /* Merriweather first */
  line-height: 1.25;
  font-size: clamp(0.5em, 1.4vmin, 0.8em);
  text-shadow: 0 1px 2px rgba(255,255,255,0.6);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Ensure no borders in the final state(s) */
.day[data-status="reserved"],
.day[data-status="reserved"] .front,
.day[data-status="reserved"] .back { border: none !important; }

/* If you later introduce 'confirmed' as a separate final state: */
.day[data-status="confirmed"],
.day[data-status="confirmed"] .front,
.day[data-status="confirmed"] .back { border: none !important; }

/* ===========================================================
   Load Guard — suppress animations during initial page render
   =========================================================== */
.day.no-animate,
.day.no-animate * {
  transition: none !important;
  animation: none !important;
}

/* === Safety Layer: Ensure non-reserved tiles are visible === */
.day[data-status="available"],
.day[data-status="selected"],
.day[data-status="pending"] {
  opacity: 1 !important;
  background-color: #2d7a2d !important;
  pointer-events: auto !important;
}

/* === Mobile: Use icon-only pending tiles === */
@media (max-width: 480px) {
  .day[data-status="pending"] .pending-overlay .pg-wrap,
  .day[data-status="pending"] .pending-overlay .pg-line {
    display: none !important;
  }
}

/* Hide pending text on narrow-height screens (landscape mobile) */
@media (max-height: 480px) {
  .day[data-status="pending"] .pending-overlay .pg-wrap,
  .day[data-status="pending"] .pending-overlay .pg-line {
    display: none !important;
  }
}

/* ===========================================================
   Revealed (Confirmed) Tiles — Global Background Reveal
   -----------------------------------------------------------
   - Fades the tile to transparency
   - Reveals the <img class="background"> underneath
   - Locks the tile from further clicks
   =========================================================== */

/* Smoothly fade a confirmed tile to transparent */
.fade-to-transparent {
  animation: tileFadeOut 0.8s ease-in-out forwards;
  animation-delay: 0.2s; /* small pause for overlay removal sync */
}

@keyframes tileFadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.day[data-status="reserved"] {
  background-color: transparent !important;
  background-image: none !important;
  opacity: 0;
  pointer-events: none;
  cursor: default;
  transition: opacity 1.2s ease-in-out;
}

/* Optional: small stagger delay for smoother reveal rhythm */
.day[data-status="reserved"] {
  transition-delay: 0.3s;
}

/* ===========================================================
   Smart Flash Guard — Base Green Only During Page Load
   =========================================================== */
.calendar-grid.preload {
  background-color: #2d7a2d; /* base green mask */
}

/* Keep the amount the same scale as the label (no extra enlarge) */
.day[data-status="selected"] .back-inner strong {
  font-size: 1em;              /* match line above; no extra bump */
  margin-top: 0.15em;
}

/* 2) Add a touch more interior space on the selected back face
      so letters never touch the edge and get clipped */
.day[data-status="selected"] .back {
  padding-inline: 0.55em;      /* anti-clip buffer inside the tile */
  box-sizing: border-box;
}

/* --- Step 2b: Match "Selected" scaling to "Processing Gift" overlay --- */
.day[data-status="selected"] .back-inner {
  font-size: clamp(0.55em, 1.9vmin, 1em);  /* mirrors .pg-line scaling */
  line-height: 1.25;
  padding-inline: 0.45em;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.day[data-status="selected"] .back-inner strong {
  display: block;
  margin-top: 0.1em;
  font-size: 1em;  /* unified scale */
}

/* 🧡 Thank-You Banner (v1.7.7) */
.thank-you-banner {
  background: #fef7ea;
  border: 2px solid #e0b46b;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  font-weight: 600;
  color: #5b3a00;
  text-align: center;
  margin: 1rem auto;
  max-width: 600px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);

  /* Subtle entrance animation */
  animation: fadeIn 0.8s ease-in-out;
}

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

/* === Thank-you banner close icon (v1.7.8a) === */
#thankYouBanner {
  position: relative;
  padding-left: 1.8rem; /* make room for the close icon */
}

#thankYouBanner .close-btn {
  position: absolute;
  left: 0.4rem;
  top: 0.35rem;
  font-size: 1.1rem;
  color: #5b3a00;          /* matches text tone */
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  line-height: 1;
}

#thankYouBanner .close-btn:hover {
  opacity: 1;
}

/* ===========================================================
   Fix #1 — Block ALL pointer interaction during initial sync
   =========================================================== */

body.interaction-lock .day,
body.interaction-lock .day * {
    pointer-events: none !important;
    cursor: default !important;
}

/* ===========================================================
   Fix #1 — Strong Override to Block Interaction During Sync
   =========================================================== */
body.interaction-lock .calendar-grid .day,
body.interaction-lock .calendar-grid .day *,
body.interaction-lock .calendar-grid .day[data-status="available"],
body.interaction-lock .calendar-grid .day[data-status="selected"],
body.interaction-lock .calendar-grid .day[data-status="pending"] {
    pointer-events: none !important;
    cursor: default !important;
}