/* Dark-theme palette */
:root{
  --bg:#121212;
  --surface:#1e1e1e;
  --accent:#ff4081;
  --text:#f5f5f5;
  --disabled:#666;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0.15rem 5px 2rem;
}

/* Card image section */
.card-container {
  width:calc(100% - 10px);
  max-width:560px;
  margin:0.1rem 0 2rem;
  position:relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow:0 4px 20px rgba(0,0,0,0.5);
  border-radius:8px;
  overflow: hidden;
  /* Add edge blur effect */
  mask-image: linear-gradient(
    to right,
    transparent 0px,
    black 3px,
    black calc(100% - 3px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0px,
    black 3px,
    black calc(100% - 3px),
    transparent 100%
  );
}
.card-slice {
  width:100%;
  display: block;
  position: relative;
}
.card-slice img {
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}

/* Add ghostly overlay styling */
.ghostly-overlay {
  position: absolute;
  width: 100%;
  height: auto;
  top: 35%;
  left: 0;
  z-index: 10;
  pointer-events: none; /* Allow clicks to pass through */
}

/* Add media query for smaller screens */
@media (max-width: 600px) {
  .ghostly-overlay {
    top: 42%;
  }
}

/* iPhone-specific adjustments */
@media screen and (max-width: 428px) and (max-height: 926px) {
  .ghostly-overlay {
    top: 38%;
  }
}

/* iPhone 12/13 Pro Max */
@media screen and (device-width: 428px) and (device-height: 926px) {
  .ghostly-overlay {
    top: 36%;
  }
}

/* iPhone 12/13 Pro, iPhone 12/13 */
@media screen and (max-width: 390px) and (max-height: 844px) {
  .ghostly-overlay {
    top: 35%;
  }
}

/* iPhone SE, 8, etc. */
@media screen and (max-width: 375px) and (max-height: 667px) {
  .ghostly-overlay {
    top: 34%;
  }
}

/* Small iPhone (SE 2nd gen, etc.) and landscape orientation */
@media screen and (max-height: 428px), (max-width: 320px) {
  .ghostly-overlay {
    top: 32%;
  }
}

/* Remove all the ghostly text styling and animations that are no longer needed */
/* Common ghostly text styling */
.ghostly-text-common {
  display: none; /* Hide these elements as they're replaced by the GIF */
}

/* Individual positioning - no longer needed */
.ghostly-balding, .ghostly-hairy-ears, .ghostly-midlife, 
.ghostly-dementia, .ghostly-back-pain, .ghostly-tooth-decay {
  display: none;
}

/* Remove the keyframe animations - no longer needed */
@keyframes ghostlyFlicker {}
@keyframes smokiness {}
@keyframes ghostFadeCommon {}

/* Top section - positioned over image */
.top-section {
  width: 90%;
  max-width: 490px;
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0 auto;
  padding: 0;
}

/* Bottom section (attendees) - positioned over image */
.bottom-section {
  width:85%;
  max-width:490px;
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0 auto;
  padding: 0;
}
.bottom-section h2 {
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  padding: 0 0.5rem;
}
.attendee-content-wrapper {
  backdrop-filter: blur(10px);
  background: rgba(30, 30, 30, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

form {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-width: 100%;
  padding: 0.3rem 0.5rem 0.3rem;
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  backdrop-filter: blur(10px);
  background: rgba(30, 30, 30, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}

/* Remove default margin from last child in form to avoid extra space */
form > *:last-child {
  margin-bottom: 0;
}

.form-container {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
  margin-bottom: 0;
}
.form-row {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  width: 100%;
}
.form-row select {
  flex: 1;
}
.form-inputs-row {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  width: 100%;
}
.form-inputs-row input[type=text] {
  flex: 1;
  min-width: 0;
}
.button-container {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex-shrink: 0;
}
.guests-select {
  min-width: 180px;
}

h1{font-size:clamp(1.6rem,4vw,2.4rem);}
h2{margin-bottom:1rem;}

a.button, button{
  background:var(--accent);
  color:#fff;
  padding:.3rem 1.2rem;
  border:none;
  border-radius:4px;
  cursor:pointer;
  text-decoration:none;
  font-weight:600;
  font-size: 0.95rem;
  height: 34px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
button:disabled, button.disabled {
  background:var(--disabled);
  cursor:not-allowed;
  opacity:0.7;
}
label{display:flex;flex-direction:column;font-size:.9rem;gap:.4rem}
input[type=text], select{
  padding:.3rem .6rem;
  background:#292929;
  color:var(--text);
  border:1px solid #444;
  border-radius:4px;
  height: 34px;
  box-sizing: border-box;
}
table{
  border-collapse:collapse;
  margin-top:.5rem;
  width:100%;
  max-width:100%;
  background:var(--surface);
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 0 6px #0005;
}
th,td{padding:.8rem .6rem;text-align:left;border-bottom:1px solid #333;font-size:.9rem}
th {
  background:rgba(255,255,255,0.05);
  font-weight:600;
}
tr:last-child td {
  border-bottom:none;
}
td[title] {
  cursor: help;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
}
.muted{opacity:.6}

/* Responsive adjustments */
@media (max-width: 600px) {
  body {
    padding:0.15rem 5px 2rem;
  }
  /* Keep form-inputs-row as row layout even on mobile */
  .form-inputs-row {
    flex-direction: row;
    align-items: center;
  }
  /* Keep button at its natural size */
  .button-container {
    flex-direction: row;
    justify-content: flex-end;
    margin-left: 4px;
  }
  .button-container button,
  .button-container a.button {
    width: auto;
    min-width: 80px;
    padding: .3rem 0.8rem;
    text-align: center;
    height: 34px;
  }
  th, td {
    padding:.5rem .3rem;
    font-size:.8rem;
  }
}
.hidden {
  display: none;
}

/* Ensure consistent height of interactive elements across browsers */
input, select, button, a.button {
  line-height: 1.2;
}

#save-status {
  position: absolute;
  font-size: 0.8rem;
  line-height: 1;
  bottom: -16px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 0;
  overflow: visible;
  margin: 0;
  padding: 0;
}

/* Page title styling */
.page-title {
  text-align: center;
  font-size: clamp(1.1rem, 3.5vw, 1.6rem);
  font-weight: 600;
  margin: 0 0 0.1rem 0;
  padding: 0;
  color: var(--accent);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.5px;
  line-height: 1;
  width: 100%;
}

/* Styles moved from inline to external stylesheet */

/* Style for disabled form elements */
input:disabled, select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: rgba(20, 20, 20, 0.4);
}

/* Hidden elements */
.hidden {
  display: none !important;
}

/* Single sign-in button when not authenticated */
#login-btn.bounce-animation {
  padding: 0.6rem 1.5rem;
  font-size: 1.1rem;
  margin: 1rem auto;
  min-width: 200px;
  transform-origin: center;
}

/* Form styling when only showing sign-in button */
form.sign-in-only {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80px;
  padding: 1rem;
}

/* Standalone sign-in button container */
#sign-in-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  width: 100%;
}

#standalone-login-btn {
  padding: 0.7rem 2rem;
  font-size: 1.2rem;
  min-width: 220px;
  transform-origin: center;
  background-color: var(--accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Aggressive shaky bouncing animation for buttons */
@keyframes aggressive-bounce {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }
  10% {
    transform: translateY(-8px) translateX(5px);
  }
  20% {
    transform: translateY(-15px) translateX(-4px);
  }
  30% {
    transform: translateY(-5px) translateX(3px);
  }
  40% {
    transform: translateY(-12px) translateX(-3px);
  }
  50% {
    transform: translateY(-18px) translateX(4px);
  }
  60% {
    transform: translateY(-10px) translateX(-5px);
  }
  70% {
    transform: translateY(-15px) translateX(3px);
  }
  80% {
    transform: translateY(-7px) translateX(-2px);
  }
  90% {
    transform: translateY(-12px) translateX(4px);
  }
}

@keyframes aggressive-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.bounce-animation {
  animation: aggressive-bounce 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite, aggressive-pulse 1.2s ease-in-out infinite;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
  position: relative;
}

.bounce-animation:hover {
  animation-play-state: paused;
  transform: scale(1.05);
}

/* Debug panel styling */
#debug-panel {
  display: none;
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: #333;
  color: #fff;
  padding: 15px;
  border-radius: 6px;
  font-size: 12px;
  max-width: 400px;
  max-height: 200px;
  overflow: auto;
  opacity: 0.85;
}

#debug-hide {
  font-size: 10px;
  padding: 2px 5px;
  margin-left: 10px;
  cursor: pointer;
}

/* Limit message styling */
#limit-message {
  color: #ff6b6b;
  font-weight: bold;
  margin-bottom: 0.5rem;
  text-align: center;
}

/* Attendee list styling */
.attendee-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.attendee-name {
  font-weight: 500;
  line-height: 1.2;
}

.attendee-email {
  font-size: 0.75rem;
  opacity: 0.7;
  line-height: 1.2;
}

/* On smaller screens, decrease the padding in table cells to fit content better */
@media (max-width: 600px) {
  th, td {
    padding: 0.6rem 0.3rem;
    font-size: 0.8rem;
  }
  
  .attendee-email {
    font-size: 0.65rem;
  }
}