/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Favorite Button Styles */
/* Force parent containers to have relative positioning for desktop */
.car-image-container {
  position: relative !important;
}

/* Remove any gaps around images */
.car-image-container img {
  display: block;
  margin: 0;
  padding: 0;
  object-position: top;
}

/* Ensure image container starts from the very top */
.car-image-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Default styling for the favorite button container */
.favorite-button-container {
  position: relative;
  /* Changed from absolute, to flow in normal document layout */
  display: inline-block;
  flex-shrink: 0;
  width: auto;
  height: auto;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* Desktop: Position button overlay on image (handled in Tailwind now) */

.favorite-button-container::before {
  display: none;
  /* Hide desktop triangle on mobile by default */
}

.favorite-button-form {
  /* Mobile form styling */
  display: inline-block;
  margin: 0;
  padding: 0;
  position: relative;
  /* Ensure it's not absolute from desktop rule */
  width: auto;
  height: auto;
}

/* Styles for the favorite button submit element when it is inside a .car-image-container (mobile overlay) */
.car-image-container>.favorite-button-submit {
  /* Mobile submit styling - updated */
  width: 28px;
  /* Smaller */
  height: 28px;
  /* Smaller */
  background: rgba(0, 0, 0, 0.4);
  /* Semi-transparent dark */
  color: white;
  /* Default star color, overridden by states */
  border-radius: 50%;
  border: none;
  font-size: 14px;
  /* Smaller star */
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  /* Refined shadow */
  transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* Ensure it's not absolute */
  top: auto;
  right: auto;
}

/* Desktop: Absolute positioning over image with triangle */
@media (min-width: 640px) {

  /* Corresponds to sm: in Tailwind */
  .car-image-container>.favorite-button-container {
    /* Using direct child for consistency */
    position: absolute !important;
    /* Important might be needed if other rules conflict */
    top: 0 !important;
    right: 0 !important;
    z-index: 20 !important;
    width: 44px;
    height: 44px;
  }

  .car-image-container>.favorite-button-container::before {
    display: block;
    /* Show desktop triangle */
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    background: white;
    clip-path: polygon(100% 0%, 0% 0%, 100% 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .car-image-container .favorite-button-form {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 1;
    width: 24px;
    height: 24px;
  }

  .car-image-container .favorite-button-submit {
    /* Desktop submit is already fairly well styled, ensure it overrides mobile if needed */
    position: relative;
    /* Kept from original desktop */
    top: 0;
    /* Kept from original desktop */
    right: 0;
    /* Kept from original desktop */
    width: 24px;
    height: 24px;
    background: transparent !important;
    border: none;
    font-size: 16px;
    box-shadow: none !important;
    margin: 0;
    padding: 0;
    /* display flex, align, justify already there */
  }
}