/* style.css
   Unified/cleaned stylesheet for invitation + RSVP.
   Mobile-first 375px layout, local image assets in /img/
*/

/* --- Fonts / Reset --- */
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("https://fonts.googleapis.com/css2?family=Anuphan:wght@300;400;500;600&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:wght@400;700&display=swap');


:root{
	--white: #ffffff;
	--black: #000000;
	--muted: #bcbcbc;
	--accent-bg: #fff7ee;
	--card-shadow: rgba(0,0,0,0.08);
	--radius-pill: 100px;
	--max-width: 375px;
	--heading-1-size: 30px;
	--heading-1-line: 35px;
	--body-size: 16px;
	--body-line: 20px;
	--caption-size: 14px;
}

/* Global */
*{box-sizing:border-box; -webkit-font-smoothing:antialiased}
html,body{height:100%;margin:0;font-family:"Anuphan",Helvetica,sans-serif;background:#f5f5f5}
body{display:flex;justify-content:center;align-items:flex-start;padding:0px 0;min-height:100vh}

/* App shell */

/* Container for scrollable grid */

/* Header */
.header {
  position: relative;
  z-index: 10; /* ensures it sits above .hero and .panel */
  width: 375px;
  min-height: 33px;
  max-height: 33px;
  height: 33px;          /* fixed height */
  background: #806258;
  color: #F8E9CE;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Anuphan';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  flex-shrink: 0;         /* prevent shrinking */
  box-sizing: border-box; /* ensure padding/border don’t affect height */
}

.screen {
	position: relative;
	width: var(--max-width);
	min-height: auto;
	background: var(--white);
	overflow: auto;
	height: auto;
  overflow-y: auto; 
	margin: 0 auto;
	box-shadow: 0 0 20px var(--card-shadow);
	display: flex;           
	flex-direction: column;
	justify-content: flex-start;
}

@media (min-width: 480px) {
  .screen {
    min-height: 100vh;
    overflow: hidden;
  }

  @supports (height: 100dvh) {
    .screen { min-height: 100dvh; }
  }
}

.hero {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 375 / 200; /* ✅ keeps consistent ratio on all screens */
  overflow: hidden;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ✅ responsive overlay positioning */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  transform: translateY(5%); /* adjust vertical alignment if needed */
}

/* small centered tag on top of hero */
.hero-tag {
	position:absolute;
	top:14px;
	left:50%;
	transform:translateX(-50%);
	font-size:12px;
	color:var(--white);
	font-weight:400;
	pointer-events:none;
}

.panel {
  position: relative;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

/* card is just a centered wrapper with max width */
.card {
  width: 100%;
  max-width: 375px;
}

/* inner column centered inside card */
.card-inner {
  width: 100%;
  max-width: 330px;
  margin: 0 auto;           /* center inside the card */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer2 {
  position: fixed;
  bottom: calc(30px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

/* footer buttons */
.btn {
  display:flex; justify-content:center; align-items:center; height:44px; min-width:160px; padding:10px 30px;
  border-radius:100px; cursor:pointer; user-select:none; border:1px solid #3C2828; background:#FFF; color:#3C2828;
  font-family:'Anuphan'; font-size:15px; font-weight:400;
}
.btn.primary { background:#806258; border-color:#806258; color:#FFF; font-weight:600; }

/* --- Headings + Subtitle --- */
.title {
	color: #3C2828;
	/* Heading 1 */
	font-family: 'Anuphan', sans-serif;
	font-size: 30px;
	font-style: normal;
	font-weight: 500;
	line-height: 35px; /* 116.667% */
}

/* --- Title 2 --- */
.title-2 {
	color: #3C2828;
	font-family: "Averia Serif Libre", serif;
	font-size: 30px;
	font-style: italic;
	font-weight: 400;
	line-height: 30px;
}


/* --- Subtitle --- */
.subtitle {
	color: #3C2828;
	/* caption 1 */
	font-family: 'Anuphan', sans-serif;
	font-size: 14px;
	font-style: normal;
	margin-top: 5px;
	font-weight: 300;
	line-height: 20px; /* 142.857% */
}


/* input block wrappers */
.field {
	display:flex;
	flex-direction:column;
	gap:8px;
}
/* --- Input Fields --- */
.input {
	color: #3C2828; /* actual text color when typing */
	font-family: 'Anuphan', sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px; /* 125% */
	border: none;
	outline: none;
	background: transparent;
	width: 100%;
}

/* Placeholder text */
.input::placeholder {
	color: #BDBDBD; /* lighter gray for hint text */
	font-family: 'Anuphan', sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px; /* 125% */
}

.hr { width:100%; height:1px; background: #e7e7e7 }

/* --- Side Selection --- */
.side-label {
	color: #3C2828;
	font-family: 'Anuphan', sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
	margin-bottom: 6px;
}

.side-row {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 8px; /* ✅ tighter space between buttons */
	flex-wrap: nowrap; /* ✅ keep all buttons in one line */
}

.side-option {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5px 16px;
	min-width: 90px; /* ✅ ensures each fits the longest Thai word */
	height: 32px;
	white-space: nowrap; /* ✅ prevents text from wrapping */
	border-radius: 100px;
	border: 0.8px solid #3C2828;
	background: transparent;
	color: #3C2828;

	/* Body 4 - regular */
	font-family: 'Anuphan', sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 18px; /* 128.571% */

	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.side-option:hover {
	background: #FFF8EE;
}

.side-option.active {
	background: #3C2828;
	color: #FFF;
}

.submit-bg {
	position:absolute; top:0; left:0; width:320px; height:44px; display:block;
}

/* Submit Button (updated design) */
.submit-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 320px;
  height: 44px;
  padding: 10px;
  gap: 10px;
  flex-shrink: 0;

  border-radius: 100px;
  background: #806258;

  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
  align-self: center;

  /* position 42px from bottom of screen */
  position: fixed;
  bottom: calc(42px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);

  z-index: 20;
}

.submit-wrap:hover {
  transform: translate(-50%, -2px);
  opacity: 0.9;
}


.submit-text {
	color: #ffffff;
	font-weight: 600;
	font-size: var(--button-1-font-size);
	line-height: var(--button-1-line-height);
	text-align: center;
}

/* --- Action Buttons --- */
.action-buttons {
	position: absolute;
	top: 230px;
	left: 25px;
	display: flex;
	gap: 10px;
}

.action-btn {
	display: flex;
	padding: 5px 8px;
	align-items: center;
	gap: 3px;

	border-radius: 100px;
	border: 0.5px solid #D9D9D9;
	background: #FFF8EE;

	color: #3C2828;
	font-family: 'Anuphan', sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 15px; /* 125% */

	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.action-btn:hover {
	background: #FFEEDC;
	transform: translateY(-1px);
}

/* icon inside button */
.action-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	object-fit: contain;
}


/*.footer {
	position:absolute; 
	top:648px; 
	left:50%; 
	transform:translateX(-50%); 
	display:flex; 
	gap:10px;
}*/

.main {           /* the container that wraps your form/panel */
  flex: 1 1 auto; /* fills the space above the footer */
  overflow: auto; /* this is the scroller */
  padding-bottom: 96px; /* footer height so content isn’t hidden */
}

.footer {
  position: sticky;
  bottom: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--white);
  box-shadow: 0 -8px 24px var(--card-shadow);
  z-index: 10;
}

/* --- Footer Buttons (one-line enforced) --- */

/* Common styles for both buttons */
.footer-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px 30px;
	gap: 10px;
	flex-shrink: 0;
	height: 44px;
	min-width: 160px; /* wider to fit Thai text comfortably */
	border-radius: 100px;
	white-space: nowrap; /* 🔒 force text to stay in one line */
	text-align: center;
}

/* ฝากซอง · ของขวัญ */
.footer-btn-outline {
	border: 1px solid #3C2828;
	background: #FFF;
	color: #3C2828;
	font-family: 'Anuphan';
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px; /* 125% */
	cursor: pointer;
}

/* ฝากคำอวยพร */
.footer-btn-primary {
	background: #000000;
	border: none;
	color: #FFF;
	font-family: 'Anuphan';
	font-size: 15px;
	font-style: normal;
	font-weight: 600;
	line-height: 20px; /* 125% */
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.footer-btn-primary:hover {
	transform: translateY(-2px);
	opacity: 0.9;
}

/* --- Flexible Bottom Section (Heart + Caption) --- */
.bottom-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: calc(120px + env(safe-area-inset-bottom)); /* ✅ handles iPhone safe area */
}

.moment-heart {
  display: block;
  width: 58px;
  height: 40px;
  margin-bottom: 12px;
}

.moment-caption {
  text-align: center;
  max-width: 320px;
}


.caption-main {
  color: #B8B8B8;
  text-align: center;
  font-family: 'Anuphan', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  display: block;
  margin-bottom: 8px; /* เว้นช่องเล็กน้อย */
}

.caption-sub {
  color: #B8B8B8;
  font-family: 'Anuphan', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  display: block;
}


/* ========== MOMENT3 PAGE ========== */
.moment3 .album {
	width: 100%;
	max-width: 375px;
	margin: 0 auto;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px 20px;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
}

.moment3 .hero-tag {
	color: #3C2828;
	font-family: 'Anuphan', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	margin-bottom: 20px;
	text-align: center;
}

.moment3 .album-header {
	width: 100%;
	max-width: 335px;
	text-align: left;
	margin-bottom: 25px;
}

.moment3 .album-title {
	color: #000;
	font-family: 'Anuphan', sans-serif;
	font-size: 28px;
	font-weight: 500;
	line-height: 35px;
	margin-bottom: 15px;
}

.moment3 .album-subtitle {
	color: #000;
	font-family: 'Anuphan', sans-serif;
	font-size: 14px;
	font-weight: 300;
	line-height: 20px;
}

.moment3 .upload-box {
  position: relative;
  width: 320px;
  height: 380px;
  background: #EAEAEA;
  border: 0.3px solid #D9D9D9;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 2;
}

.moment3 .camera-controls {
  position: relative;
  z-index: 5; /* ensures always clickable */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-top: 20px;
}


/* ✅ All 4 corner borders */
.moment3 .upload-box::before,
.moment3 .upload-box::after,
.moment3 .upload-box .corner-top-right,
.moment3 .upload-box .corner-bottom-left {
	content: "";
	position: absolute;
	width: 40px;
	height: 40px;
	border: 2px solid #000;
	pointer-events: none;
}

/* top-left */
.moment3 .upload-box::before {
	top: 0;
	left: 0;
	border-right: none;
	border-bottom: none;
}

/* bottom-right */
.moment3 .upload-box::after {
	bottom: 0;
	right: 0;
	border-left: none;
	border-top: none;
}

/* ✅ new top-right corner */
.moment3 .upload-box .corner-top-right {
	top: 0;
	right: 0;
	border-left: none;
	border-bottom: none;
}

/* ✅ new bottom-left corner */
.moment3 .upload-box .corner-bottom-left {
	bottom: 0;
	left: 0;
	border-right: none;
	border-top: none;
}

.moment3 .upload-icon {
	width: 76px;
	height: 79px;
	object-fit: contain;
}

.moment3 .upload-text {
	color: #000;
	font-family: 'Anuphan', sans-serif;
	font-size: 16px;
	line-height: 22px;
	text-align: center;
}



.moment3 .upload-icon {
	width: 80px;
	height: auto;
}

.moment3 .footer-buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 30px;
	width: 154px;
}

.moment3 .footer-btn-outline {
	background: #FFF;
	color: #3C2828;
	border: 1px solid #3C2828;
	font-weight: 400;
}

.moment3 .btn-icon {
	width: 18px;
	height: 18px;
}

/* Ensure the preview fully fits inside upload-box */
.moment3 #previewBox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: none;
  display: none;
  z-index: 2;
}

.moment3 #previewBox img {
	transform: scaleX(-1);
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/* Camera view (behind preview) */
.moment3 video#cameraPreview {
	transform: scaleX(-1);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  z-index: 1;
}

/* Camera buttons aligned horizontally */
.moment3 .camera-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-top: 20px;
}


/* upload inner layout */
.moment3 .upload-border {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.moment3 .frame-instruction {
  position: absolute;
  bottom: 20px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  padding: 4px 10px;
  color: #000;
  font-family: 'Anuphan', sans-serif;
  font-size: 16px;
  line-height: 22px;
  z-index: 3;
}

.moment3 .circle-btn {
  width: 63px;
  height: 63px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  cursor: pointer;
}

.moment3 .retake-btn {
  background: #3C2828;
}

.moment3 .camera-btn {
  background: #3C2828;
}

.moment3 .check-btn {
  background: #318630;
}

.moment3 .circle-icon {
  width: 35px;
  height: 35px;
}

/* Smooth transition for upload-box and camera video */
.moment3 .upload-box,
.moment3 video#cameraPreview,
.moment3 .upload-icon,
.moment3 .upload-text,
.moment3 .footer-buttons {
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* Hidden state with fade-out */
.moment3 .hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Shown state with fade-in */
.moment3 .visible {
  opacity: 1;
  visibility: visible;
}

@keyframes dotsBlink {
  0%, 20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* ========= Global Alert Modal ========= */
.alert-modal[hidden] { display: none !important; }

.alert-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9999;
  backdrop-filter: blur(2px);
}

.alert-box {
  width: 320px;
  min-height: 180px;
  background: #fff;
  border-radius: 20px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  animation: fadeIn .25s ease;
}

.alert-title {
  font-family: 'Anuphan', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #3C2828;
  margin-bottom: 8px;
}

.alert-message {
  font-family: 'Anuphan', sans-serif;
  font-size: 15px;
  line-height: 22px;
  color: #3C2828;
  text-align: center;
  margin-bottom: 20px;
  white-space: pre-line;
}

.alert-btn {
  background: #806258;
  color: #FFF;
  border: none;
  border-radius: 100px;
  font-family: 'Anuphan', sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 30px;
  cursor: pointer;
}

.alert-btn:hover {
  opacity: 0.9;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* Short/narrow viewports → any page marked .shrinkable scrolls and keeps CTAs in flow */
@media (max-height: 700px), (max-width: 480px) {
	.screen:not(.shrinkable) {
    /*min-height: auto !important;*/
    height: 700px !important;
    overflow-y: auto !important;
  }

  .screen.shrinkable {
    /*min-height: auto !important;*/
    height: auto !important;
    overflow-y: auto !important;
    /* if you prefer a fixed scroller height instead:
       height: 700px !important; min-height: 700px !important; max-height: 700px !important; */
  }

  /* Overlap panels go back into flow (only where present) */
  .screen.shrinkable .panel {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Absolute children must also be in flow to give the panel real height */
  .screen.shrinkable .panel .card,
  .screen.shrinkable .panel .card-inner {
    position: static !important;
    height: auto !important;
  }

  /* Bottom CTAs become in-flow (covers submit-wrap and footer styles) */
  .screen.shrinkable .submit-wrap,
  .screen.shrinkable .footer, 
  .screen.shrinkable .footer-btn {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 20px auto calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
}



/* Footer (make it look/behave like submit-wrap) */
.footer {
  position: fixed;
  bottom: calc(42px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 20;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.footer-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
  min-width: 150px;
  padding: 10px 30px;
  border-radius: 100px;
  white-space: nowrap;
  font-family: 'Anuphan', sans-serif;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}

.footer-btn-outline {
  border: 1px solid #3C2828;
  background: #FFF;
  color: #3C2828;
}

.footer-btn-primary {
  background: #806258;
  border: none;
  color: #FFF;
  font-weight: 600;
}



/* Global */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100vh;
  background: #ffffff; /* same as screen */
}

/* stop centering the 375px card */
body {
  display: block;              /* was: flex */
  justify-content: initial;
  align-items: initial;
}

/* main app wrapper */
.screen {
  position: relative;
  width: 100%;                 /* full width on mobile */
  max-width: 427px;
  min-height: 100vh;
  background: #ffffff;
  margin: 0 auto;       			/* center on larger screens */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  overflow-x: hidden;
  overflow-y: visible;         /* let the *page* scroll, not the box */
}

.header {
  width: 100%;
  max-width: 100%;
}

.panel,
.card {
  width: 100%;
  max-width: 100%;
}


.mission-container {
 	width: 100%;
  max-width: 375px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
 }