/* Uploadcare v1 Regular Mode Base Styles */
@import url("/assets/css/uc-file-uploader-regular.min.css");

/* Brand Customizations */
uc-file-uploader-regular {
  --uc-primary-color: #8a2be2; /* Purple accent */
  --uc-bg-color: #111;         /* Dark background */
  --uc-text-color: #fff;       /* White text */
  --uc-border-radius: 10px;
  --uc-font-family: 'Inter', sans-serif;
  --uc-button-radius: 8px;
  --uc-button-hover-color: #a45df0;
  --uc-panel-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* Make thumbnails match your brand aesthetic */
uc-file-uploader-regular .uc-thumbnail {
  border-radius: 10px;
  overflow: hidden;
}
/* =============================== */
/* MOBILE OPTIMIZATION FOR UPLOADER */
/* =============================== */

@media (max-width: 768px) {

  /* Make uploader full-width and touch-friendly */
  uc-file-uploader-regular {
    width: 100%;
    padding: 14px;
    --uc-font-size: 1rem;
    --uc-button-padding: 14px;
    --uc-border-radius: 12px;
    --uc-panel-shadow: 0 4px 20px rgba(0,0,0,0.35);
    --uc-bg-color: #111;
    --uc-text-color: #fff;
    --uc-secondary-text-color: #ccc;
  }

  /* Larger tap targets */
  uc-file-uploader-regular button,
  uc-file-uploader-regular .uc-btn {
    padding: 14px 18px !important;
    font-size: 1rem !important;
    border-radius: 10px !important;
  }

  /* Bigger thumbnails for mobile */
  uc-file-uploader-regular .uc-thumbnail {
    width: 90px !important;
    height: 90px !important;
    border-radius: 10px;
  }

  /* Better spacing between items */
  uc-file-uploader-regular .uc-list {
    gap: 14px !important;
  }

  /* Make the dropzone more obvious on mobile */
  uc-file-uploader-regular .uc-droparea {
    padding: 24px !important;
    border-radius: 12px !important;
    border: 2px dashed rgba(255,255,255,0.25) !important;
    background: rgba(255,255,255,0.03);
  }

  /* Improve readability */
  uc-file-uploader-regular .uc-title,
  uc-file-uploader-regular .uc-subtitle {
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }

  /* Make toolbar buttons easier to tap */
  uc-file-uploader-regular .uc-toolbar {
    padding: 10px !important;
    gap: 12px !important;
  }

  /* Smooth transitions for mobile interactions */
  uc-file-uploader-regular * {
    transition: all 0.15s ease;
  }
}

/* =============================== */
/* ULTRA SMALL SCREEN SUPPORT (280px–360px) */
/* =============================== */

@media (max-width: 360px) {

  uc-file-uploader-regular {
    padding: 10px;
    --uc-font-size: 0.9rem;
    --uc-button-padding: 10px;
  }

  /* Smaller thumbnails for tiny screens */
  uc-file-uploader-regular .uc-thumbnail {
    width: 70px !important;
    height: 70px !important;
  }

  /* Compact toolbar */
  uc-file-uploader-regular .uc-toolbar {
    padding: 8px !important;
    gap: 8px !important;
  }

  /* Compact dropzone */
  uc-file-uploader-regular .uc-droparea {
    padding: 18px !important;
  }
}

/* =============================== */
/* MICRO SCREEN MODE (≤ 300px) */
/* =============================== */

@media (max-width: 300px) {

  uc-file-uploader-regular {
    padding: 8px;
    --uc-font-size: 0.85rem;
  }

  uc-file-uploader-regular .uc-thumbnail {
    width: 60px !important;
    height: 60px !important;
  }

  uc-file-uploader-regular .uc-droparea {
    padding: 14px !important;
  }

  uc-file-uploader-regular button,
  uc-file-uploader-regular .uc-btn {
    padding: 10px 12px !important;
    font-size: 0.85rem !important;
  }
}