/* Container for the Edit/Delete links */
.wall-post-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5rem;
  border-top: 1px solid #eee; /* Light separator */
  padding-top: 0.75rem;
}

/* Strip Drupal's default list styling */
.wall-post-footer ul.links {
  display: flex;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Style the individual links */
.wall-post-footer ul.links li a {
  font-size: 0.8rem;
  text-transform: uppercase;
  font-weight: 700;
  color: #666;
  text-decoration: none;
  transition: color 0.2s ease;
}

.wall-post-footer ul.links li a:hover {
  color: #000;
}

/* Optional: Color the Delete link red */
.wall-post-footer ul.links li.node-delete a {
  color: #a00;
}

/* Dim the post if it is hidden */
.wall-post-is-hidden {
  opacity: 0.6;
  filter: grayscale(50%);
  background-color: #f9f9f9;
  border: 1px dashed #ccc;
  position: relative;
}

.hidden-indicator {
  background: #444;
  color: #fff;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 10px;
}

/* Dim future and expired posts */
.post-is-future, .post-is-expired {
  opacity: 0.55;
  filter: grayscale(40%);
  border: 1px dashed #666 !important;
  background-color: rgba(0, 0, 0, 0.02);
}

/* Keep the action buttons fully visible for easier clicking */
.post-is-future .wall-post-footer, 
.post-is-expired .wall-post-footer {
  opacity: 1;
  filter: none;
}

/* Badge Styling */
.status-badge {
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
}
.status-badge.future { color: #007bff; border: 1px solid #007bff; }
.status-badge.expired { color: #dc3545; border: 1px solid #dc3545; }
.status-badge.active { color: #28a745; opacity: 0.8; }

.post-actions-menu {
  display: flex;
  gap: 15px;
  list-style: none;
  padding: 10px 0 0 0;
  margin: 10px 0 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.post-actions-menu a {
  text-decoration: none;
  font-size: 0.85rem;
  color: #aaa;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 5px;
}

.post-actions-menu a:hover {
  color: #fff;
}

.action-edit:hover { color: #3498db !important; }
.action-delete:hover { color: #e74c3c !important; }

/* Responsive: Hide text on small screens, show icons only */
@media (max-width: 600px) {
  .action-label {
    display: none;
  }
  .post-actions-menu i {
    font-size: 1.1rem;
  }
}

/* THE AJAX WEBFORM : REQUEST MEETING */
/* The Card Container */
.community-contact-cta {
  background-color: #fcfaf5;
  border: 2px solid #d1c8b1;
  border-radius: 8px;
  padding: 30px;
  margin: 40px 0;
  text-align: center;
}

.community-contact-cta h3 {
  margin-top: 0;
  color: #4a4a4a;
}

/* The 'Request a Meeting' Button (Brick Red) */
.meeting-button {
  background-color: #8c2a11 !important;
  color: #ffffff !important;
  padding: 12px 24px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
  display: inline-block;
  border: none;
  transition: transform 0.2s, background-color 0.2s;
}

.meeting-button:hover {
  background-color: #6e210d !important;
  transform: translateY(-2px);
  color: #ffffff !important;
}

/* --- AJAX Modal (Beige Theme) --- */
.ui-dialog.ui-widget-content,
.ui-dialog .ui-dialog-content,
#drupal-modal,
.webform-ajax-form-wrapper,
.webform-submission-meeting-request-form {
  background-color: #e7cc93 !important;
}

.ui-dialog {
  border: 2px solid #d1b67f !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

.ui-dialog-titlebar {
  background-color: #d1b67f !important;
  border-bottom: 1px solid #8c2a11 !important;
}

/* Modal Overlay backdrop */
.ui-widget-overlay {
  background-color: rgba(0, 0, 0, 0.7) !important;
  opacity: 1 !important;
}

/* 1. Force the Modal to the front of everything (including Leaflet) */
.ui-dialog.ui-front {
  z-index: 10001 !important; /* Higher than Leaflet's default 1000 */
  opacity: 1 !important;
  background-color: #e7cc93 !important;
}

/* 2. Ensure the overlay stays BEHIND the modal */
.ui-widget-overlay {
  z-index: 10000 !important;
  background-color: rgba(0, 0, 0, 0.7) !important;
  opacity: 1 !important;
}

/* 3. Fix the 'Dimmed' look by ensuring inner containers are opaque */
#drupal-modal,
.ui-dialog-content,
.webform-submission-meeting-request-form {
  opacity: 1 !important;
  background-color: #e7cc93 !important;
  color: #333 !important; /* Ensure text is dark and readable */
}

/* 4. Force Leaflet to stay in the background when modal is open */
.leaflet-container {
  z-index: 1 !important;
}

/* 1. Dark Brown Title Bar */
.ui-dialog .ui-dialog-titlebar {
  background-color: #4b3621 !important; /* Dark Brown */
  color: #ffffff !important;
  border: none !important;
  padding: 10px 15px !important;
}

/* 2. Modal Padding & Layout */
#drupal-modal {
  padding: 15px !important; /* Added the 15px inside the modal */
  background-color: #e7cc93 !important;
}

/* 3. The Button Fix: White-on-Brown */
/* Targeting both the internal webform button and the jQuery UI dialog button */
.ui-dialog .webform-button--submit,
.ui-dialog .button--primary,
.ui-dialog-buttonset .btn-primary,
.ui-dialog-buttonset button {
  background-color: #8c2a11 !important; /* Brick Brown/Red */
  color: #ffffff !important;             /* Force White Text */
  border: none !important;
  padding: 10px 20px !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}

/* 4. Ensure inputs are visible on the beige background */
.ui-dialog input.form-control, 
.ui-dialog textarea.form-control {
  background-color: #ffffff !important;
  border: 1px solid #d1c8b1 !important;
  color: #333 !important;
}

/* 5. Fix for the 'X' close button color in the dark title bar */
.ui-dialog-titlebar-close {
  filter: invert(1); /* Makes the 'X' white so it shows on dark brown */
}

/* 1. Force Padding inside the Modal Shell */
.ui-dialog #drupal-modal {
  padding: 25px !important; /* Increased to 25px to ensure it's visible over Barrio margins */
}

/* 2. The Button: White Text on Dark Brown/Red Background */
/* This targets the exact string of classes you provided */
.ui-dialog .webform-button--submit.btn-primary.form-control,
.ui-dialog .ui-dialog-buttonset .btn-primary {
  background-color: #8c2a11 !important; /* Brick Red/Brown */
  color: #ffffff !important;             /* FORCE WHITE TEXT */
  border: 1px solid #6e210d !important;
  padding: 10px 20px !important;
  font-weight: bold !important;
  height: auto !important;               /* Barrio form-control forces height; this fixes it */
  width: auto !important;                /* Prevents the button from stretching full-width */
  display: inline-block !important;
  opacity: 1 !important;
}

/* 3. Hover state for the button */
.ui-dialog .webform-button--submit.btn-primary.form-control:hover {
  background-color: #4b3621 !important; /* Dark Brown on hover */
  color: #ffffff !important;
}

/* 4. Fix the Form Actions Wrapper (Padding fix) */
.ui-dialog .form-actions,
.ui-dialog .ui-dialog-buttonpane {
  padding: 15px 25px !important;
  background-color: transparent !important;
  border-top: 1px solid rgba(0,0,0,0.1) !important;
}

/* 1. Hide the duplicate button inside the form (keep the one in the bottom bar) */
.ui-dialog .ui-dialog-content .form-actions {
  display: none !important;
}

/* 2. Force the remaining button to be White-on-Brown */
/* We target every possible class combination from your dump */
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .btn-primary,
.ui-dialog .webform-button--submit,
.ui-dialog button.form-submit {
  background-color: #8c2a11 !important; /* Brick Red/Brown */
  color: #ffffff !important;             /* FORCE WHITE TEXT */
  fill: #ffffff !important;              /* In case it's an icon */
  border: 1px solid #4b3621 !important;
  padding: 12px 24px !important;
  font-weight: bold !important;
  opacity: 1 !important;
  height: auto !important;
  width: auto !important;
  text-shadow: none !important;          /* Remove any theme-applied glow */
}

/* 3. The Padding Fix (Target the wrapper around the form) */
.ui-dialog #drupal-modal {
  padding: 20px 30px !important;
}

/* 4. The Title Bar (Dark Brown) */
.ui-dialog .ui-dialog-titlebar {
  background-color: #4b3621 !important;
  color: #ffffff !important;
  padding: 15px !important;
}

/* 5. Force the 'X' close button to be white */
.ui-dialog .ui-dialog-titlebar-close {
  background-image: none !important;
  background-color: rgba(255,255,255,0.2) !important;
  color: white !important;
}
.ui-dialog .ui-dialog-titlebar-close:after {
  content: "X";
  color: white;
}

/* 1. Themed Brown Buttons - Compact Style */
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button,
.ui-dialog .webform-button--submit {
  background-image: none !important;
  background-color: #4b3621 !important; /* Themed Dark Brown */
  color: #ffffff !important;
  border: 1px solid #362819 !important;
  
  /* Sizing - Making it smaller */
  padding: 6px 16px !important;  /* Reduced vertical padding */
  font-size: 0.9rem !important;  /* Slightly smaller text */
  height: auto !important;       /* Overrides Barrio's tall form-control */
  width: auto !important;        /* Prevents full-width stretching */
  line-height: 1.5 !important;
  
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

/* 2. Hover state for Brown Button */
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button:hover {
  background-color: #362819 !important;
  background-image: none !important;
}

/* 3. Tighten the Footer space */
.ui-dialog .ui-dialog-buttonpane {
  padding: 8px 15px !important; /* Reduces vertical thickness of the footer bar */
  background-color: #d1b67f !important; /* Matching beige-gold for the bar */
}

/* Ensure the button stays red on hover and doesn't revert to a gradient */
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button:hover {
  background-image: none !important;
  background-color: #6e210d !important;
  color: #ffffff !important;
}