/* Utility CSS classes for CSP compliance
 * Used to replace inline styles
 */

/* Display utilities */
.hidden {
  display: none !important;
}

/* Special class for modals that shouldn't have conflicting display properties */
.modal-hidden {
  display: none !important;
}

.block {
  display: block !important;
}

.inline-block {
  display: inline-block !important;
}

.flex {
  display: flex !important;
}

/* Special class for visible modals */
.modal-visible {
  display: flex !important;
}

/* Visibility */
.invisible {
  visibility: hidden !important;
}

.visible {
  visibility: visible !important;
}

/* Positioning */
.relative {
  position: relative !important;
}

.absolute {
  position: absolute !important;
}

.fixed {
  position: fixed !important;
}

.sticky {
  position: sticky !important;
}

/* Specific positioning */
.top-10px { top: 10px !important; }
.right-10px { right: 10px !important; }
.bottom-10px { bottom: 10px !important; }
.left-10px { left: 10px !important; }

.resize-none { resize: none !important; }
.pb-10 { padding-bottom: 40px !important; }

/* Z-index */
.z-10 { z-index: 10 !important; }
.z-20 { z-index: 20 !important; }
.z-30 { z-index: 30 !important; }
.z-40 { z-index: 40 !important; }
.z-50 { z-index: 50 !important; }
.z-60 { z-index: 60 !important; }

/* Margins */
.mt-negative-35 { margin-top: -35px !important; }
.mt-negative-20 { margin-top: -20px !important; }
.mt-negative-10 { margin-top: -10px !important; }
.mt-negative-5 { margin-top: -5px !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 0.75rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-5 { margin-top: 1.25rem !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-5 { margin-bottom: 1.25rem !important; }

.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 0.75rem !important; }
.ml-4 { margin-left: 1rem !important; }
.ml-5 { margin-left: 1.25rem !important; }

.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 0.75rem !important; }
.mr-4 { margin-right: 1rem !important; }
.mr-5 { margin-right: 1.25rem !important; }

/* Paddings */
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 0.75rem !important; }
.p-4 { padding: 1rem !important; }
.p-5 { padding: 1.25rem !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 0.75rem !important; }
.pt-4 { padding-top: 1rem !important; }
.pt-5 { padding-top: 1.25rem !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 0.75rem !important; }
.pb-4 { padding-bottom: 1rem !important; }
.pb-5 { padding-bottom: 1.25rem !important; }

/* Width/Height */
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }

/* Text alignment */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }

/* Text alignment (direction-aware) */
.text-start { text-align: start !important; }
.text-end { text-align: end !important; }

/* Vertical alignment */
.align-top { vertical-align: top !important; }
.align-middle { vertical-align: middle !important; }
.align-bottom { vertical-align: bottom !important; }

/* Flex utilities */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }

/* Justify content */
.justify-start { justify-content: flex-start !important; }
.justify-end { justify-content: flex-end !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }
.justify-evenly { justify-content: space-evenly !important; }

/* Align items */
.items-start { align-items: flex-start !important; }
.items-end { align-items: flex-end !important; }
.items-center { align-items: center !important; }
.items-baseline { align-items: baseline !important; }
.items-stretch { align-items: stretch !important; }

/* Overflow */
.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-scroll { overflow: scroll !important; }
.overflow-visible { overflow: visible !important; }
.overflow-x-auto { overflow-x: auto !important; }
.overflow-y-auto { overflow-y: auto !important; }
.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-y-hidden { overflow-y: hidden !important; }

/* Borders */
.border-none { border: none !important; }
.border { border: 1px solid #e2e8f0 !important; }
.border-t { border-top: 1px solid #e2e8f0 !important; }
.border-r { border-right: 1px solid #e2e8f0 !important; }
.border-b { border-bottom: 1px solid #e2e8f0 !important; }
.border-l { border-left: 1px solid #e2e8f0 !important; }

/* Opacity */
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

/* Background */
.bg-transparent { background-color: transparent !important; background: none !important; }
.bg-white { background-color: white !important; }
.bg-black { background-color: black !important; }

/* Cursors */
.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-move { cursor: move !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

/* Custom classes for specific use cases */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

/* Modal classes for body scroll control */
.modal-open {
  position: relative;
}

.csp-no-scroll {
  overflow: hidden !important;
  padding-right: 15px; /* Compensate for scrollbar removal */
}

.pdf-container-height {
  max-height: 70vh;
}

.logo-height {
  height: 160px;
}

.ml-8 {
  margin-left: 2rem;
}

/* Gallery styles */
.gallery-img {
  width: 100%;
  height: auto;
  border-radius: 15px;
}

.gallery-item-container {
  margin-bottom: 2rem;
}

.gallery-item-container-lg {
  margin-bottom: 3rem;
}

.flex-gallery {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.flex-gallery-item {
  flex: 0 0 18%;
}

.flex-gallery-large {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 4rem;
}

/* Carousel controls */
.carousel-control-small {
  width: 4rem;
  opacity: 1;
}

.carousel-control-left {
  left: 0;
}

.carousel-control-right {
  right: 0;
}

.carousel-icon-styled {
  background-color: #4BFF91;
  padding: 20px;
  border-radius: 50%;
}

/* Project card */
.project-card-bg {
  background-color: var(--card-bg-color, #000);
}

/* For accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}