/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
p, h1, h2, h3, h4, figure, blockquote { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
img { display: block; }

html { -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
body {
  background: #111;
  color: #333;
  font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Segoe UI", Arial, Roboto, sans-serif;
  overflow-x: hidden;
}

/* Khung thiệp: thiết kế gốc rộng 500px, được thu nhỏ (zoom) cho vừa màn hình điện thoại */
.column { width: 100%; max-width: 500px; margin: 0 auto; background: #000; box-shadow: 0 0 40px rgba(0, 0, 0, .6); }
#card { width: 500px; overflow: hidden; }
#root-page-container { overflow: hidden; }
.canvas-inner { width: 100%; height: 100%; }

/* Thành phần ảnh */
.photo-component, .material-component { width: 100%; height: 100%; }
.photo-bg-wrap {
  width: 100%; height: 100%;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-clip: border-box;
}
.text-box-component { height: auto !important; }

/* Lịch */
.calendar .template-three { width: 100%; height: 100%; display: flex; flex-wrap: wrap; position: relative; }
.calendar .template-three > div { width: 14%; display: flex; justify-content: center; align-items: center; }
.template-three img.heart-date { position: absolute; width: 15%; height: 15%; object-fit: contain; }
.colorF { color: #fff !important; z-index: 20; }

/* Form xác nhận tham dự */
.rsvp-form-container:hover { z-index: 50 !important; }
.rsvp-form input[type="text"] { display: block; outline: none; }
.rsvp-form input[type="text"]:focus { border-color: #3a9bff !important; }
.rsvp-form button[disabled] { opacity: .6 !important; cursor: wait; }
.radio-group { display: inline-block; font-size: 0; }
.radio-wrapper { display: inline-flex; align-items: baseline; cursor: pointer; line-height: 1.5; margin: 0; }
.radio { position: relative; display: inline-block; width: 18px; height: 18px; align-self: center; border-radius: 50%; flex: none; }
.radio-input { position: absolute; inset: 0; z-index: 1; opacity: 0; margin: 0; cursor: pointer; }
.radio-inner {
  position: relative; display: block; width: 18px; height: 18px;
  border: 1px solid #d9d9d9; border-radius: 50%; background: #fff; transition: all .2s;
}
.radio-inner::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 8px; height: 8px; border-radius: 50%; background: #fff;
  transform: scale(0); opacity: 0; transition: all .3s cubic-bezier(.78, .14, .15, .86);
}
.radio-wrapper:hover .radio-inner { border-color: #3a9bff; }
.radio-checked .radio-inner { border-color: #3a9bff; background: #3a9bff; }
.radio-checked .radio-inner::after { transform: scale(1); opacity: 1; }
.radio-label { padding: 0 8px; }

/* Lớp nổi phía trên thiệp */
.overlay {
  position: fixed; top: 0; bottom: 0; left: 50%;
  width: 100%; max-width: 500px; transform: translateX(-50%);
  pointer-events: none; z-index: 100;
}
.overlay > * { pointer-events: auto; }

.audio-toggle {
  position: absolute; right: 10px; top: 10px; width: 30px; height: 30px;
  border-radius: 50%; overflow: hidden; background: rgba(165, 165, 165, .2);
}
.audio-toggle .music-icon { width: 100%; height: 100%; background: #000; }
.audio-toggle.playing { animation: mrotate 5s linear infinite; }
.audio-toggle .icon-cancel { position: absolute; inset: 0; padding-top: 15px; }
.audio-toggle .icon-line { display: block; transform: rotate(45deg); width: 100%; height: 1px; background: #fff; }
.audio-toggle.playing .icon-cancel { display: none; }
@keyframes mrotate { to { transform: rotate(1turn); } }

.toolbar {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 64px; padding: .5rem;
  display: flex; align-items: center; justify-content: space-between;
}
.message-box-button, .heart-button {
  height: 39px; border-radius: 30px; color: #fff; font-size: 13px;
  background: rgba(0, 0, 0, .35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center;
}
.message-box-button { width: 150px; padding: 0 7px 0 15px; justify-content: space-between; }
.message-box-button img { height: 24px; }
.heart-button { padding: 0 12px 0 8px; gap: 5px; white-space: nowrap; }
.heart-button img { height: 30px; }
.heart-button:active { transform: scale(.95); }

/* Lời chúc bay lên */
.wish-feed {
  position: absolute; left: 16px; bottom: 70px; width: 285px; max-height: 180px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; overflow: hidden;
  pointer-events: none;
}
.wish-item {
  align-self: flex-start; max-width: 100%;
  background: rgba(0, 0, 0, .45); color: #fff; border-radius: 16px; padding: 6px 12px;
  font-size: 13px; line-height: 1.4; animation: wish-in .4s ease-out;
}
.wish-item b { color: #ffc368; font-weight: 600; margin-right: 4px; }
@keyframes wish-in { from { opacity: 0; transform: translateY(12px); } }

/* Bắn tim */
.hearts { position: absolute; inset: 0; pointer-events: none !important; overflow: hidden; }
.heart {
  position: absolute; bottom: 60px; font-size: 26px; line-height: 1;
  animation: heart-fly var(--d, 2.4s) ease-out forwards;
}
@keyframes heart-fly {
  0% { transform: translate(0, 0) scale(.6); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(var(--x, 0), -70vh) scale(1.3) rotate(var(--r, 0deg)); opacity: 0; }
}

/* Hộp gửi lời chúc */
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.modal-sheet {
  position: relative; width: 100%; max-width: 500px; background: #fff; color: #222;
  border-radius: 14px 14px 0 0; padding: 18px 18px 24px; display: flex; flex-direction: column; gap: 14px;
  font-size: 14px; animation: sheet-in .25s ease-out;
}
@keyframes sheet-in { from { transform: translateY(100%); } }
.modal-head { display: flex; align-items: center; justify-content: space-between; }
.modal-head h3 { font-size: 17px; }
.modal-close { font-size: 26px; line-height: 1; color: #888; padding: 0 4px; }
.modal-sheet label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.modal-sheet input, .modal-sheet textarea {
  font-weight: 400; border: 1px solid #ddd; border-radius: 8px; padding: 9px 11px; outline: none; resize: vertical;
}
.modal-sheet input:focus, .modal-sheet textarea:focus { border-color: #e2394a; }
.modal-submit { background: #000; color: #fff; border-radius: 8px; padding: 11px; font-weight: 600; }
.modal-submit[disabled] { opacity: .6; cursor: wait; }

.toast {
  position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 20px);
  background: rgba(20, 20, 20, .92); color: #fff; padding: 10px 16px; border-radius: 20px;
  font-size: 14px; opacity: 0; pointer-events: none; transition: all .3s; z-index: 300; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .audio-toggle.playing { animation: none; }
}