@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}

/* Sponsor Slider Styles */
.sponsor-slider {
  @apply w-full;
}

.sponsor-slider .slick-slide {
  @apply px-4;
}

.sponsor-slider .slick-track {
  @apply flex items-center;
}

.sponsor-slider img {
  @apply mx-auto max-h-20 object-contain;
}

/* Hide default slick arrows */
.sponsor-slider .slick-prev,
.sponsor-slider .slick-next {
  @apply hidden;
}

/* Force black bullet color for black bulleted lists */
.list-disc.text-black > li::marker {
  color: #000;
} 
.list-disc li::marker {
  color: #30C4B6;
}
.list-decimal li::marker {
  color: #30C4B6;
}
.footer_pages h2 {
  font-size: 35px;
  font-weight: 500;
  line-height: 47.4925px;
}

.footer_pages h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 30.6px;
}
.footer_pages p {
  font-size: 17px;
  font-weight: 300;
  line-height: 30.6px;
}

.footer_pages li {
  font-size: 17px;
  font-weight: 300;
  line-height: 30.6px;
}
.footer_pages h1 {
  font-size: 63px;
  font-weight: 700;
  line-height: 78.3355px;
  color: rgb(20, 18, 18);
}

.terms * {
  color: rgb(20, 18, 18);
}
.privacy * {
  color: rgb(38, 37, 37)
}
.advertise h1 {
  color: #30C4B6;
  font-size: 40px;
  font-weight: 500;
}
.advertise h3 {
  font-weight: 700;
  font-size: 17px;
  color: rgb(3, 3, 3);
}
.advertise h3 b {
  font-weight: 1000;
}
.bg_teal {
  background-color: #22C3B5;
}
/* Select2 Custom Styling */
.select2-container--default .select2-selection--multiple {
  border-color: #D1D5DB;
  border-radius: 0.375rem;
  min-height: 38px;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: #3B82F6;
  box-shadow: 0 0 0 1px #3B82F6;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #E5E7EB;
  border: none;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #6B7280;
  margin-right: 0.5rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #374151;
}

.select2-container {
  width: 100% !important;
} 
.slick-prev,
.slick-next {
  width: 40px !important;
  height: 40px !important;
  background: transparent !important;
  z-index: 10 !important;
}

.slick-prev:hover,
.slick-next:hover {
  background: transparent !important;
}

.slick-prev:before,
.slick-next:before {
  font-size: 40px !important;
  color: #000000 !important;
  opacity: 1 !important;
}

/* Hide default arrows when disabled */
.slick-disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
}

.ads-slider {
  padding: 0 40px !important;
  margin: 0 20px !important;
}
@media (max-width: 768px) {
  .ads-slider {
    padding: 0 20px !important;
    margin: 0 10px !important;
  }
}
.ads-slider .custom-slick-arrow {
  background: white !important;
  border-radius: 50%;
  box-shadow: 0 8px 16px -4px rgba(0,0,0,0.18); /* Only bottom shadow */
  width: 48px;
  height: 48px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.2s;
  &:hover {
    background: #f0f0f0 !important;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */

/* Import Select2 base styles */
@import "select2/dist/css/select2.css";

/* Import our custom Select2 styles */
@import "select2.css";
@import "footer.css";

/* Calendar custom styles */
.fc .fc-toolbar-title {
  font-size: 1.5rem;
  font-weight: bold;
}

.fc .fc-button-primary {
  background-color: #2D3142;
  border-color: #2D3142;
}

.fc .fc-button-primary:hover {
  background-color: #1e2130;
  border-color: #1e2130;
}

.fc .fc-daygrid-day-number {
  font-size: 0.9rem;
  color: #333;
}

.fc .fc-col-header-cell-cushion {
  font-weight: 600;
  color: #2D3142;
}
.fc-list-day.fc-day {
  display: none !important;
}
.fc-event.fc-event-start.fc-event-end.fc-event-future.fc-list-event, .fc-event.fc-event-start.fc-event-end.fc-event-past.fc-list-event {
  display: none !important;
}

.fc-event.fc-event-start.fc-event-end.fc-event-past.fc-list-event {
  display: none !important;
}
.event-month-view .event_month:last-of-type .save-options {
  bottom: 50px !important;
}
@media (max-width: 768px) {
  .category-filter {
    font-size: .8rem !important;
  }
  #all_influencers .scroll-container button:first-child {
    margin-left: 1.5rem !important;
  }
}
.fc .fc-button:focus {
  box-shadow: none !important;
}
.loader {
  border-top-color: #3498db;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.marquee-track {
  display: flex;
  flex-wrap: nowrap;
  animation: marquee-scroll 30s linear infinite;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.calendar_show {
  width: 90% !important;
}
@media (max-width: 768px) {
  .calendar_show {
    width: 95% !important;
  }
}
@media (min-width: 480px) {
  .sponsor-slider {
    width: 80% !important;
  }
}

.ads-slider .slick-track {
  padding-bottom: .5rem;
}

.banner_logo {
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
}

.banner_logo img {
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.category-filter .categoy-name {
  font-size: 14px;
}
.daisy-blue {
  background-color: #30c4b6;