/*
 * 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.
 */


/* Toast Animation */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast-message {
  animation: slideInRight 0.3s ease-out;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f3f4f6;
}

::-webkit-scrollbar-thumb {
  background: #9ca3af;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

/* Smooth Scroll */
html {
  scroll-behavior: smooth;
}

/* Apply pointer cursor to all links */
a {
  cursor: pointer;
}

/* Blob Animation */
@keyframes blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

/* Import TinyMCE overrides */
@import "tinymce_overrides.css";

/* Import Admin Mobile styles */
@import "admin_mobile.css";

/* Admin Layout Height Fix */
html.admin-layout {
  height: 100%;
  overflow: hidden;
}

html.admin-layout body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* Fix for viewport height issues */
.admin-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

/* Ensure no margin/padding on root elements */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

/* Fix for admin layout bottom gap */
.admin-layout main {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.admin-layout main > div {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Ensure form containers don't add extra space */
.admin-layout form {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* File upload specific fixes */
.admin-layout input[type="file"] {
  position: relative;
}

/* Drag and drop styles */
.drag-over {
  background-color: rgb(239 246 255) !important;
  border-color: rgb(59 130 246) !important;
}

/* Image upload preview styles */
.image-preview-container img {
  object-fit: cover;
}

.image-preview-container button {
  transition: opacity 0.2s ease-in-out;
}

/* Admin product image buttons */
.relative.group:hover .opacity-0 {
  opacity: 1 !important;
}

.relative .absolute {
  z-index: 10;
}

/* Image hover overlay */
.group:hover .bg-opacity-0 {
  background-opacity: 0.4 !important;
}

/* Ensure buttons are visible on mobile */
@media (max-width: 640px) {
  .relative .opacity-0 {
    opacity: 1 !important;
  }
  
  .group .bg-opacity-0 {
    background-opacity: 0.2 !important;
  }
}

/* Fix button_to form styling */
form.inline {
  display: inline;
  margin: 0;
  padding: 0;
}

form.inline button {
  border: none;
  cursor: pointer;
}

/* Product image slider styles */
#imageSlider {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

#imageSlider::-webkit-scrollbar {
  display: none;  /* Chrome, Safari and Opera */
}

/* Aspect ratio fallback for older browsers */
.aspect-w-1 {
  position: relative;
}

.aspect-h-1 {
  padding-bottom: 100%;
}

/* Prevent any scrolling on admin pages */
html.admin-layout,
html.admin-layout body {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}