.accordion-header-image {
    width: 50px; /* Adjust as needed */
    height: 50px; /* Adjust as needed */
    object-fit: cover;
    border-radius: 4px; /* Optional: for rounded corners */
    margin-right: 10px; /* Added margin for spacing */
}

.accordion-header-image-top {
    width: 100%; /* Make image take full width of its container (the button) */
    height: 200px; /* Adjust as needed, or use padding-top trick for aspect ratio */
    object-fit: cover;
    object-position: center 30%; /* Adjust vertical position - try values like 25%, 40%, etc. */
    display: block; /* Remove extra space below image */
    /* margin-bottom: 10px; */ /* Removed: Text will float over */
}

.accordion-header-image-top.portrait {
    object-fit: contain;
    height: 100%;
    min-height: 200px;
    /* max-height: 400px; */
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    display: block;
    background: #000; /* or your preferred background color */
}

.custom-accordion-button {
    display: flex;
    flex-direction: column; /* Stack image and text vertically (image is normal flow, text overlay) */
    align-items: stretch; /* Make children take full width */
    padding: 0; /* Remove default button padding if image is edge-to-edge */
    position: relative; /* For positioning the custom icon AND the text line */
    overflow: hidden; /* Optional: if rounded corners on button should clip image */
}

.custom-accordion-button.collapsed .accordion-header-image-top {
    /* Styles for when the accordion is collapsed, if needed */
    /* e.g., you might want to hide it or make it smaller */
}

.custom-accordion-button:not(.collapsed) .accordion-header-image-top {
    /* Styles for when the accordion is expanded, if needed */
}

.accordion-header-text-line {
    /* position: absolute; */ /* Remove absolute positioning by default */
    /* bottom: 0; */
    /* left: 0; */
    /* right: 0; */
    display: flex;
    justify-content: space-between; /* Puts title on left, icon on right */
    align-items: center;
    /* background-color: rgba(200, 0, 0, 0.8); */ /* Remove background by default */
    /* color: white; */ /* Remove color by default */
    padding: 0.75rem 1.25rem; /* Default padding, similar to Bootstrap */
    width: 100%; /* Ensure it takes full width */
    /* z-index: 10; */
    box-sizing: border-box; /* Include padding in the width/height */
}

.accordion-header-text-line.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem 1.25rem; /* Padding for the line itself, for spacing title and icon */
    z-index: 10; /* Ensure it's above the image */
    /* display: flex; justify-content: space-between; align-items: center; are already on the base class */
}

.accordion-header-title-text {
    /* flex-grow: 1; */ /* REMOVED from base style */
}

/* Apply flex-grow only when NOT an overlay */
.accordion-header-text-line:not(.overlay) .accordion-header-title-text {
    flex-grow: 1;
}

.accordion-header-text-line.overlay .accordion-header-title-text {
    flex-grow: 0; /* Prevent the title text from growing when overlaying */
    background-color: rgba(200, 0, 0, 0.8); /* Red background with some transparency */
    color: white; /* Text color for contrast */
    padding: 0.25rem 0.6rem; /* Padding for the text itself within its background */
    border-radius: 3px; /* Optional: slightly rounded corners for the text background */
    display: inline-block; /* To make padding and background wrap content correctly */
}

.accordion-custom-icon::after {
    content: '+'; /* Default icon for collapsed state */
    font-size: 1.5rem;
    font-weight: bold;
    transition: transform 0.2s ease-in-out;
    /* color: white; */ /* Will be inherited from .overlay or default color */
}

.accordion-header-text-line.overlay .accordion-custom-icon::after {
    color: white; /* Ensure icon is visible on red background when overlaying */
}

/* Added: Ensure icon has a color when not an overlay */
.accordion-header-text-line:not(.overlay) .accordion-custom-icon::after {
    color: inherit; /* Or your desired default icon color */
}

.custom-accordion-button:not(.collapsed) .accordion-custom-icon::after {
    content: '−'; /* Icon for expanded state (minus sign) */
    transform: rotate(180deg); /* Optional: if you want to animate the plus to a minus */
}

/* Hide default Bootstrap accordion icon */
.custom-accordion-button::after {
    display: none !important;
}

.carousel-image {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

/* Bootstrap override for red focus on form controls */
.form-control:focus, textarea.form-control:focus {
  border-color: #dc3545 !important; /* Bootstrap danger */
  box-shadow: 0 0 0 0.2rem rgba(220,53,69,.25) !important;
}

/* custom.css */
.role-card textarea.form-control {
  min-height: 38px;
  height: 38px;
  resize: none;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  line-height: 1.5;
  box-sizing: border-box;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.role-card input.form-control {
  min-height: 38px;
  height: 38px;
  line-height: 1.5;
  box-sizing: border-box;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
@media (max-width: 767.98px) {
  .role-card .col-12.col-md-6,
  .role-card .col-12.col-md-5 {
    margin-bottom: 0.5rem;
  }
}

/* Border corner fixes for cards */
.border-danger,
.audition-role-card.border-danger,
.audition-video-card.border-danger {
  border: 1px solid #dc3545 !important;
  border-radius: 0.375rem !important;
  overflow: hidden; /* Prevents border bleeding */
  box-sizing: border-box;
}

/* Ensure card headers have proper corners */
.card-header.bg-danger {
  border-top-left-radius: calc(0.375rem - 1px) !important;
  border-top-right-radius: calc(0.375rem - 1px) !important;
  border-bottom: 1px solid #dc3545 !important;
  margin: -1px -1px 0 -1px; /* Pull header to edges */
}

/* Ensure card bodies have proper corners */
.card-body {
  border-bottom-left-radius: calc(0.375rem - 1px) !important;
  border-bottom-right-radius: calc(0.375rem - 1px) !important;
}

/* Fix any border rendering issues with card components */
.card.border-danger .card-header,
.card.border-danger .card-body,
.card.border-danger .card-footer {
  border-left: none !important;
  border-right: none !important;
}

.card.border-danger .card-header {
  border-top: none !important;
}

.card.border-danger .card-body:last-child,
.card.border-danger .card-footer {
  border-bottom: none !important;
}

/* Anti-aliasing for smoother borders */
.border-danger,
.audition-role-card,
.audition-video-card {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translateZ(0); /* Force hardware acceleration */
}

/* Additional border smoothing and consistency fixes */
.audition-role-card.card,
.audition-video-card.card {
  position: relative;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #dc3545 !important;
  background-clip: padding-box; /* Prevents background bleeding through border */
}

/* Smooth border transitions for better rendering */
.card.border-danger:before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 1px solid #dc3545;
  border-radius: 0.375rem;
  pointer-events: none;
  z-index: -1;
}

/* Ensure consistent border radius across all card elements */
.card.border-danger {
  border-radius: 0.375rem !important;
}

.card.border-danger .card-header:first-child {
  border-top-left-radius: calc(0.375rem - 1px) !important;
  border-top-right-radius: calc(0.375rem - 1px) !important;
}

.card.border-danger .card-body:last-child,
.card.border-danger .card-footer:last-child {
  border-bottom-left-radius: calc(0.375rem - 1px) !important;
  border-bottom-right-radius: calc(0.375rem - 1px) !important;
}