/* === Form Container Positioning === */
/* Select the container class specifically within the video overlay */
.video-overlay__form-container {
  /* --- Position is now determined by parent (.video-overlay__form-container) --- */
  width: 100%; /* Fill the container provided by VideoOverlay */
  /* max-width: 400px; */ /* <<< Removed max-width constraint */
  /* padding: 15px; Removed, padding is on the form itself */
  box-sizing: border-box;
  /* display: none; Removed, display handled by Form.js show/hide */
  /* text-align: center; */ /* <<< Removed, alignment handled by form/button */
  pointer-events: auto; /* <<< Added: Allow clicks/interactions within the form */
  /* Styles previously under #note-form-container in Form.css that are relevant
       for the form container *within the video overlay* can be placed here. */
}

/* === Initial Button (New) === */
.form-initial-button {
  display: block; /* Make it a block element */
  margin-left: auto; /* Add auto margins for centering */
  margin-right: auto; /* Add auto margins for centering */
  padding: 12px 25px;
  background-color: #90ee90; /* Light green */
  color: #000; /* Black text */
  border: 1px solid #ccc; /* Subtle border like inputs */
  border-radius: 8px; /* Rounded corners like form */
  font-family: "DM Serif Text", serif;
  font-size: 1.2rem; /* Size appropriately */
  text-transform: lowercase; /* Match title style */
  cursor: pointer;
  transition:
    background-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  /* display: block; - Handled by JS */
}

.form-initial-button:hover {
  background-color: #d9fccb; /* Slightly darker green on hover */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* <<< Added: Style for the button after successful submission >>> */
.form-initial-button--submitted {
  background-color: #000; /* Black background */
  color: #fff; /* White text */
  cursor: default; /* Indicate non-interactive */
  opacity: 0.9; /* Slightly faded to reinforce non-interactive */
  border-color: #000; /* Match background */
}

/* Make sure hover effects don't apply to the submitted state */
.form-initial-button--submitted:hover {
  background-color: #000;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Reset shadow to initial */
}

/* === Form General Styles === */
.pubhub-form {
  position: relative; /* For close button positioning */
  display: flex;
  flex-direction: column;
  gap: 10px; /* Spacing between form groups */
  background-color: rgba(
    255,
    255,
    255,
    0.85
  ); /* Semi-transparent white background */
  padding: 20px;
  padding-top: 35px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  text-align: center; /* Center title and button */
  font-family: Arial, sans-serif;
}

.pubhub-form--submitted {
  background-color: transparent;
  box-shadow: none;
  border: none;
  padding: 20px;
}

/* === Form Close Button (New) === */
.form-close-button {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  font-family: sans-serif;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1;
  color: #aaa;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    color 0.2s ease-in-out,
    background-color 0.2s ease-in-out;
  border-radius: 50%;
}

.form-close-button:hover {
  color: #333;
  background-color: rgba(0, 0, 0, 0.05);
}

/* === Form Title (New) === */
.form-title {
  font-family: "DM Serif Text", serif; /* Match scene text */
  font-size: 1.4rem; /* Slightly smaller than main scene text */
  color: #000; /* Black */
  margin-bottom: 15px; /* Space below title */
  margin-top: 0;
  font-weight: normal; /* Match scene text weight */
  text-transform: lowercase; /* Match scene link style */
}

/* === Form Groups (for layout) === */
.form-group {
  margin-bottom: 5px; /* Slightly smaller gap than overall form gap */
  text-align: left; /* Align labels/inputs to the left */
}

/* <<< Added: Specific style for button group centering >>> */
.form-group--button {
  text-align: center; /* Override text-align: left for the button group */
}

/* Added: Success Message Styling */
.form-success-message {
  color: #000; /* Black text for light backgrounds */
  font-family: "DM Serif Text", serif;
  font-size: 1.4rem;
  font-weight: normal;
  text-align: center;
  padding: 20px 0;
}

.form-group--hidden {
  display: none; /* Used by JS to hide/show URL group */
}

.form-label {
  display: block;
  margin-bottom: 5px;
  font-size: 0.9rem;
  color: #333;
  font-weight: 500;
}

/* === Input Fields === */
.form-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit; /* Use body font */
  box-sizing: border-box;
  transition: border-color 0.2s ease-in-out;
}

.form-input:focus {
  outline: none;
  border-color: #333; /* Darker border on focus */
}

/* === Hint Text (Re-added) === */
.form-hint {
  font-size: 0.8rem; /* Small font size */
  color: #666; /* Slightly dimmer gray */
  margin-top: 4px; /* Small space above hint */
  margin-bottom: 0;
  text-align: center;
  line-height: 1.3; /* Improve readability for potentially wrapped text */
  font-weight: normal;
}

/* === Submit Button === */
.form-button {
  /* width: 100%; Adjusted below */
  display: inline-block; /* Allow text-align: center to work */
  width: auto; /* Fit content */
  min-width: 150px; /* Minimum width */
  padding: 10px 25px; /* Adjust padding */
  background-color: #000; /* Black background */
  color: #fff; /* White text */
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: normal; /* Less bold */
  cursor: pointer;
  transition:
    background-color 0.2s ease-in-out,
    opacity 0.2s ease-in-out;
  margin-top: 10px; /* Add some space above the button */
}

.form-button:hover:not(:disabled) {
  background-color: #90ee90; /* <<< Changed to light green */
  color: #000; /* <<< Added: Change text to black for contrast */
}

.form-button:disabled {
  background-color: #aaa; /* Grey background when disabled */
  cursor: not-allowed;
  opacity: 0.7;
}

/* <<< Added: Privacy Policy Text >>> */
.form-privacy-policy {
  font-size: 0.75rem;
  color: #666;
  margin-top: 10px;
  margin-bottom: 0;
  text-align: center;
  line-height: 1.3;
  font-weight: normal;
}

.form-privacy-policy a {
  color: #333;
  text-decoration: underline;
}

.form-privacy-policy a:hover {
  color: #000;
}

/* === Responsive Adjustments === */
/* Desktop / Larger Viewports */
/* <<< Removed @media block for absolute positioning that used #note-form-container >>> */
/*
@media (min-width: 769px) {
    #note-form-container { <-- This block targeted the ID, remove or adjust if needed elsewhere
        // ... styles ...
    }

    .form-title {
        font-size: 1.3rem; // Slightly smaller title on desktop
    }
} 
*/