.carousel-wrapper {
    position: relative;
    width: 100%;
    max-height: 300px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    padding: 10px;
    box-sizing: border-box;
}

.slides {
    display: flex;
    transition: transform 0.5s ease;
}

.slide {
    min-width: 100%;
    box-sizing: border-box;
    padding: 10px;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: rgba(0,0,0,0.3);
    color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
}

#prevAnnouncement { left: 10px; }
#nextAnnouncement { right: 10px; }

.slide video, .slide audio {
    width: 100%;
}

/* Make inputs and textarea stretch to the full width of modal-content */
#announcementModal input[type="text"],
#announcementModal select,
#announcementModal textarea,
#announcementModal input[type="file"] {
  width: 100%;
  box-sizing: border-box; /* includes padding/border in width */
  padding: 8px;
  margin-top: 4px;
  margin-bottom: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Give textarea a taller default height */
#announcementModal textarea {
  min-height: 120px;
  resize: vertical; /* let user drag to resize if they want */
}
