napp-wallet-post-feed-test 1.0.47

package/dist/style/post.purged.css

@@ -0,0 +1,3236 @@
+@charset "UTF-8";
+@import "https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap";
+
+svg {
+  transform: unset !important;
+}
+
+/* loading style */
+@keyframes loadfull {
+  0% {
+    width: 10%;
+    flex-grow: 0;
+  }
+}
+
+@keyframes placeHolderShimmer {
+  0% {
+    background-position: -800px 0;
+  }
+
+  100% {
+    background-position: 800px 0;
+  }
+}
+
+@keyframes skeletonShimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes skeletonPulse {
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes skeletonFadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+/* DROPDOWN CSS */
+/*Styling Selectbox*/
+/* IFRAME START */
+/* IFRAME CSS  END*/
+/* SOCIAL MEDIA SHARE START*/
+@keyframes inactiveAnimation {
+  from {
+    transform: scale(1);
+  }
+
+  to {
+    transform: scale(0.8);
+  }
+}
+
+@keyframes like {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.3);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* SOCIAL MEDIA SHARE  END*/
+/* DROPDOWN CSS */
+/* SLIDER CSS  START*/
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes stretch-animate {
+  0% {
+    transform: scale(1, 1);
+  }
+
+  28% {
+    transform: scale(1.15, 0.85);
+  }
+
+  50% {
+    transform: scale(0.9, 1.1);
+  }
+
+  100% {
+    transform: scale(1, 1);
+  }
+}
+
+/* #postModal [aria-label][tooltip-position] {
+  position: relative;
+  letter-spacing: 0.1rem;
+}
+
+#postModal [aria-label][tooltip-position]::before, #postModal 
+[aria-label][tooltip-position]::after {
+  --scale: 0;
+  position: absolute;
+  font-size: 1rem;
+  transition: transform 100ms;
+  transition-timing-function: linear;
+}
+
+#postModal [aria-label][tooltip-position]:hover::before, #postModal 
+[aria-label][tooltip-position]:hover::after {
+  --scale: 1;
+  transition-timing-function: cubic-bezier(0.25, 0.1, 0.45, 1.93);
+}
+
+#postModal  [aria-label][tooltip-position]::before {
+  content: attr(aria-label);
+  background-color: var(--tooltip-color);
+  padding: 0.5em;
+  border-radius: 0.3em;
+  text-align: center;
+  transform: scale(0);
+}
+
+#postModal  [aria-label][tooltip-position]::after {
+  content: "";
+  border: var(--arrow-size) solid transparent;
+}
+
+#postModal  [aria-label][tooltip-position]::before, #postModal 
+[aria-label][tooltip-position]::after {
+  --tooltip-color: #02001d;
+  --arrow-size: 0.5rem;
+  --scale: 0;
+  z-index: 1;
+  font-size: 10px;
+  transform: translate(var(--translate-x), var(--translate-y))
+    scale(var(--scale));
+}
+
+#postModal  [aria-label][tooltip-position="left"]::before {
+  --translate-x: calc(-100% - var(--arrow-size));
+  --translate-y: -50%;
+  left: 0px;
+  top: 50%;
+  transform-origin: right center;
+}
+
+#postModal  [aria-label][tooltip-position="left"]::after {
+  --translate-x: calc(-1 * var(--arrow-size));
+  --translate-y: -50%;
+  left: 0px;
+  top: 50%;
+  border-left-color: var(--tooltip-color);
+  transform-origin: right center;
+} */
+/* SLIDER CSS END*/
+/* FEATURED POST START*/
+/* FEATURED POST END*/
+
+.video-player-container .loader {
+  height: 100vh;
+  overflow: hidden;
+  position: relative;
+  max-width: 100%;
+  min-width: 100%;
+  animation-duration: 2s;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: placeHolderShimmer;
+  animation-timing-function: linear;
+  background-color: #f6f7f8;
+  background: linear-gradient(to right, #232c39 8%, #2c3542 18%, #232c39 33%);
+  background-size: 800px 104px;
+}
+
+.post-something-modal video {
+  max-height: 270px !important;
+}
+
+.spinner-border {
+  width: 1rem;
+  height: 1rem;
+}
+
+.no-feed-icon {
+  height: 50px;
+  width: 50px;
+  border: 1px solid;
+  border-radius: 50%;
+}
+
+.filter-icon-wrapper .post-dropdown-actions {
+  font-size: 15px;
+}
+
+.filter-icon-wrapper .filter-text {
+  border: 3px solid #212043;
+  border-radius: 5px;
+  padding: 5px 14px;
+  text-decoration: none !important;
+}
+
+.filter-icon-wrapper .filter-text:hover {
+  border: 3px solid #525252;
+  border-radius: 5px;
+  padding: 5px 14px;
+}
+
+.filter-icon-wrapper .filter-dropdown-menu {
+  left: -108px !important;
+}
+
+.post-dropdown-actions {
+  display: inline;
+  transition: all 0.5s ease;
+  position: relative;
+  font-size: 20px;
+  color: #f5f5f5;
+  cursor: pointer;
+  padding: 0px 10px;
+}
+
+.post-dropdown-actions .select {
+  cursor: pointer;
+  display: block;
+  padding: 10px;
+}
+
+.post-dropdown-actions .select>i {
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+  float: right;
+  line-height: 20px;
+}
+
+.post-dropdown-actions:focus-visible {
+  outline: unset;
+}
+
+.post-dropdown-actions .post-menu-dropdown {
+  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
+  position: absolute;
+  background-color: #2d2c51;
+  color: white;
+  width: 100%;
+  z-index: 8;
+  min-width: 250px;
+  left: -230px;
+  margin-top: 3px;
+  border-radius: 5px;
+  overflow: hidden;
+  display: none;
+  overflow-y: auto;
+  padding: 15px 10px 0px;
+  list-style: none;
+}
+
+.post-dropdown-actions .post-menu-dropdown li {
+  padding: 10px;
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+  border-bottom: 2px solid #100f2e;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  font-size: 15px !important;
+}
+
+.post-dropdown-actions .post-menu-dropdown li:last-child {
+  border: none;
+}
+
+.post-dropdown-actions .post-menu-dropdown li:hover {
+  background-color: #100f2e;
+  border-bottom: 2px solid #3d3d3d;
+}
+
+.post-dropdown-actions:focus {
+  border: none;
+}
+
+#deep-link-post-modal .slick-slide>div:first-child {
+  text-align: unset !important;
+}
+
+#deep-link-post-modal .video-player-container video {
+  height: 100dvh !important;
+  -o-object-fit: contain !important;
+  object-fit: contain !important;
+}
+
+#deep-link-post-modal .modal-content {
+  background: #100f2e;
+  border: 0px;
+}
+
+#deep-link-post-modal .modal-content .modal-body {
+  background-color: #100f2e;
+}
+
+#deep-link-post-modal .btn-close {
+  filter: invert(1);
+  position: absolute;
+  right: 2.5%;
+  top: 3%;
+  z-index: 1;
+}
+
+#deep-link-post-modal .modal-header {
+  padding: 0px !important;
+  border: 0px !important;
+}
+
+/* Enhanced Video Player Styling */
+
+/* Video Controls Overlay */
+.video-controls-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.3) 100%);
+  z-index: 10;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+}
+
+.video-controls-overlay:hover {
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.4) 100%);
+}
+
+/* Center Play/Pause Button */
+.video-center-controls {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: auto;
+  z-index: 20;
+}
+
+.video-play-pause-btn {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.7);
+  border: 3px solid rgba(255, 255, 255, 0.8);
+  color: white;
+  font-size: 28px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+}
+
+.video-play-pause-btn:hover {
+  background: rgba(0, 0, 0, 0.9);
+  border-color: white;
+  transform: scale(1.1);
+  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.7);
+}
+
+.video-play-pause-btn:active {
+  transform: scale(0.95);
+}
+
+.video-play-pause-btn i {
+  margin-left: 4px;
+}
+
+/* Bottom Controls Bar */
+.video-controls-bar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
+  padding: 15px 20px 20px;
+  pointer-events: auto;
+}
+
+/* Progress Container */
+.video-progress-container {
+  margin-bottom: 12px;
+}
+
+.video-progress-track {
+  position: relative;
+  height: 6px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 3px;
+  cursor: pointer;
+  transition: height 0.2s ease;
+}
+
+.video-progress-track:hover {
+  height: 8px;
+}
+
+.video-progress-buffer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 3px;
+  transition: width 0.2s ease;
+}
+
+.video-progress-played {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: linear-gradient(90deg, #007bff, #00d4ff);
+  border-radius: 3px;
+  transition: width 0.1s ease;
+}
+
+.video-progress-thumb {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 14px;
+  height: 14px;
+  background: white;
+  border-radius: 50%;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.video-progress-track:hover .video-progress-thumb {
+  opacity: 1;
+}
+
+/* Controls Row */
+.video-controls-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.video-controls-left,
+.video-controls-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+/* Control Buttons */
+.video-control-btn {
+  width: 44px;
+  height: 44px;
+  border: none;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+  font-size: 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+}
+
+.video-control-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: scale(1.1);
+}
+
+.video-control-btn:active {
+  transform: scale(0.95);
+}
+
+.video-control-btn.video-play-btn i {
+  margin-left: 2px;
+}
+
+/* Time Display */
+.video-time-display {
+  display: flex;
+  align-items: center;
+  color: white;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+}
+
+.video-current-time {
+  color: #fff;
+}
+
+.video-time-separator {
+  margin: 0 4px;
+  opacity: 0.7;
+}
+
+.video-duration {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+/* Mobile Responsive */
+@media (max-width: 768px) {
+  .video-play-pause-btn {
+    width: 60px;
+    height: 60px;
+    font-size: 20px;
+  }
+
+  .video-controls-bar {
+    padding: 10px 15px 15px;
+  }
+
+  .video-control-btn {
+    width: 36px;
+    height: 36px;
+    font-size: 14px;
+  }
+
+  .video-time-display {
+    font-size: 12px;
+  }
+
+  .video-progress-track {
+    height: 4px;
+  }
+
+  .video-progress-track:hover {
+    height: 6px;
+  }
+
+  .video-progress-thumb {
+    width: 12px;
+    height: 12px;
+  }
+}
+
+@media (max-width: 480px) {
+
+  .video-controls-left,
+  .video-controls-right {
+    gap: 8px;
+  }
+
+  .video-control-btn {
+    width: 32px;
+    height: 32px;
+    font-size: 12px;
+  }
+}
+
+/* Spin animation */
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Fade in animation */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@media only screen and (max-width: 767.98px) {
+  #post-section {
+    padding: 100px 0px !important;
+  }
+}
+
+@media (max-width: 575.98px) {
+
+  #deep-link-post-modal .modal-dialog .modal-header {
+    padding: 15px 15px !important;
+    background: #100f2e;
+  }
+}
+
+.post-something-modal .enhanced-media-preview .enhanced-media-grid-item:nth-child(1) {
+  grid-column: 1;
+  grid-row: 1/3;
+  height: auto;
+}
+
+.post-something-modal .enhanced-media-preview .enhanced-media-grid-item:nth-child(2) {
+  grid-column: 2;
+  grid-row: 1;
+}
+
+.post-something-modal .enhanced-media-preview .enhanced-media-grid-item:nth-child(3) {
+  grid-column: 2;
+  grid-row: 2;
+}
+
+.post-something-modal .modal-content {
+  background-color: #1a1a2e;
+  color: #ffffff;
+}
+
+.post-something-modal .post-title {
+  background-color: #16213e;
+  color: #ffffff;
+  border: 1px solid #2a2885;
+}
+
+.post-something-modal .post-title:focus {
+  background-color: #16213e;
+  color: #ffffff;
+  border-color: #4a3aff;
+  box-shadow: 0 0 0 0.25rem rgba(74, 58, 255, 0.25);
+}
+
+.post-something-modal .focused-img {
+  width: 100%;
+  height: 400px;
+  -o-object-fit: contain;
+  object-fit: contain;
+  background-color: #000;
+}
+
+.post-something-modal .modal-header {
+  background-color: #100f2e !important;
+}
+
+.post-something-modal .modal-content,
+.post-something-modal .edit-post-modal .modal-content {
+  background-color: #100f2e !important;
+  color: white;
+}
+
+.post-something-modal .modal-content .modal-header,
+.post-something-modal .edit-post-modal .modal-content {
+  border: 0px;
+}
+
+.post-something-modal .modal-content .modal-footer,
+.post-something-modal .edit-post-modal .modal-content .modal-footer {
+  border-color: #02001d;
+  margin-top: 15px;
+}
+
+.post-something-modal .modal-content .btn-close,
+.post-something-modal .edit-post-modal .modal-content .btn-close {
+  filter: invert(1);
+}
+
+.post-something-modal .modal-content .btn-close:focus,
+.post-something-modal .edit-post-modal .modal-content .btn-close:focus {
+  box-shadow: unset;
+}
+
+
+.post-something-modal .modal-content input,
+.post-something-modal .edit-post-modal .modal-content input {
+  background-color: #221f3e !important;
+  color: white;
+}
+
+.post-something-modal .modal-content .modal-body .post-title::-moz-placeholder,
+.post-something-modal .edit-post-modal .modal-content .modal-body .post-title::-moz-placeholder {
+  color: rgb(185, 181, 181) !important;
+}
+
+
+.post-something-modal .modal-content .modal-body .post-title::placeholder,
+.post-something-modal .edit-post-modal .modal-content .modal-body .post-title::placeholder {
+  color: rgb(185, 181, 181) !important;
+}
+
+.post-something-modal .enhanced-modal-header {
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  border-bottom: 2px solid #4a3aff;
+  padding: 1.5rem 2rem;
+  position: relative;
+}
+
+.post-something-modal .enhanced-modal-header .modal-title {
+  color: #ffffff;
+  font-weight: 600;
+  font-size: 1.5rem;
+}
+
+.post-something-modal .enhanced-modal-header .modal-title i {
+  color: #4a3aff;
+}
+
+.post-something-modal .enhanced-modal-header .enhanced-close-btn {
+  background: rgba(255, 255, 255, 0.1);
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  padding: 0.5rem 0.75rem;
+  font-weight: 600;
+  color: #ffffff;
+  transition: all 0.3s ease;
+}
+
+.post-something-modal .enhanced-modal-header .enhanced-close-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, 0.4);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
+}
+
+.post-something-modal .enhanced-modal-header .enhanced-close-btn:focus {
+  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
+}
+
+.post-something-modal .enhanced-modal-header .enhanced-post-btn {
+  background: linear-gradient(135deg, #4a3aff 0%, #6c5ce7 100%);
+  border: none;
+  border-radius: 8px;
+  padding: 0.5rem 0.75rem;
+  font-weight: 600;
+  box-shadow: 0 4px 15px rgba(74, 58, 255, 0.3);
+  transition: all 0.3s ease;
+}
+
+.post-something-modal .enhanced-modal-header .enhanced-post-btn:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(74, 58, 255, 0.4);
+}
+
+.post-something-modal .enhanced-modal-header .enhanced-post-btn:disabled {
+  opacity: 0.7;
+  transform: none;
+}
+
+.post-something-modal .enhanced-modal-header .btn-close {
+  position: absolute !important;
+  top: 1rem !important;
+  right: 1rem !important;
+  background: rgba(255, 255, 255, 0.1) !important;
+  border: 2px solid rgba(255, 255, 255, 0.2) !important;
+  border-radius: 50% !important;
+  width: 40px !important;
+  height: 40px !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  opacity: 1 !important;
+  transition: all 0.3s ease !important;
+  z-index: 10 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  box-shadow: none !important;
+  background-image: none !important;
+}
+
+.post-something-modal .enhanced-modal-header .btn-close:hover {
+  background: rgba(255, 255, 255, 0.2) !important;
+  border-color: rgba(255, 255, 255, 0.4) !important;
+  transform: scale(1.1) !important;
+  opacity: 1 !important;
+}
+
+.post-something-modal .enhanced-modal-header .btn-close:focus {
+  box-shadow: 0 0 0 0.25rem rgba(74, 58, 255, 0.25) !important;
+  opacity: 1 !important;
+}
+
+.post-something-modal .enhanced-modal-header .btn-close::before {
+  content: "×" !important;
+  color: #ffffff !important;
+  font-size: 1.5rem !important;
+  font-weight: bold !important;
+  line-height: 1 !important;
+  display: block !important;
+}
+
+.post-something-modal .enhanced-modal-body {
+  background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1e 100%);
+  padding: 2rem;
+}
+
+.post-something-modal .enhanced-alert {
+  border-radius: 12px;
+  border: none;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+  margin-bottom: 1.5rem;
+}
+
+.post-something-modal .enhanced-alert.alert-danger {
+  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
+  color: white;
+}
+
+.post-something-modal .enhanced-alert.alert-info {
+  background: linear-gradient(135deg, #4a3aff 0%, #6c5ce7 100%);
+  color: white;
+}
+
+.post-something-modal .enhanced-alert .badge {
+  background: rgba(255, 255, 255, 0.2) !important;
+  color: white !important;
+}
+
+.post-something-modal .enhanced-progress {
+  height: 8px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.post-something-modal .enhanced-progress .progress-bar {
+  background: linear-gradient(90deg, #4a3aff 0%, #6c5ce7 100%);
+  border-radius: 10px;
+}
+
+.post-something-modal .enhanced-form-section {
+  background: rgba(255, 255, 255, 0.02);
+  border-radius: 16px;
+  padding: 2rem;
+  margin-bottom: 2rem;
+  border: 1px solid rgba(74, 58, 255, 0.1);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+.post-something-modal .enhanced-floating-label .form-control {
+  background: rgba(22, 33, 62, 0.8);
+  border: 2px solid rgba(74, 58, 255, 0.2);
+  border-radius: 8px;
+  color: #ffffff;
+  transition: all 0.3s ease;
+}
+
+.post-something-modal .enhanced-floating-label .form-control:focus {
+  background: rgba(22, 33, 62, 0.9);
+  border-color: #4a3aff;
+  box-shadow: 0 0 0 0.25rem rgba(74, 58, 255, 0.25);
+}
+
+.post-something-modal .enhanced-media-section {
+  background: rgba(255, 255, 255, 0.02);
+  border-radius: 16px;
+  padding: 2rem;
+  border: 1px solid rgba(74, 58, 255, 0.1);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+.post-something-modal .enhanced-upload-btn {
+  background: linear-gradient(135deg, rgba(74, 58, 255, 0.1) 0%, rgba(108, 92, 231, 0.1) 100%);
+  border: 2px dashed #4a3aff;
+  border-radius: 16px;
+  padding: 2rem;
+  color: #4a3aff;
+  font-weight: 600;
+  transition: all 0.3s ease;
+}
+
+.post-something-modal .enhanced-upload-btn:hover:not(:disabled) {
+  background: linear-gradient(135deg, rgba(74, 58, 255, 0.2) 0%, rgba(108, 92, 231, 0.2) 100%);
+  border-color: #6c5ce7;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(74, 58, 255, 0.3);
+}
+
+.post-something-modal .enhanced-upload-btn:disabled {
+  opacity: 0.5;
+  transform: none;
+}
+
+.post-something-modal .enhanced-upload-btn i {
+  font-size: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.post-something-modal .enhanced-media-preview .enhanced-media-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.5rem;
+  margin-top: 1rem;
+}
+
+.post-something-modal .enhanced-media-preview .enhanced-media-grid.single-item {
+  grid-template-columns: 1fr;
+  max-width: 100%;
+  margin: 1rem 0;
+}
+
+.post-something-modal .enhanced-media-preview .enhanced-media-grid.two-items {
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+  max-width: 800px;
+  margin: 1rem auto;
+}
+
+.post-something-modal .enhanced-media-preview .enhanced-media-grid.three-items {
+  gap: 1.5rem;
+}
+
+.post-something-modal .enhanced-media-preview .enhanced-media-grid.four-plus-items {
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 1.5rem;
+}
+
+@media (max-width: 992px) {
+  .post-something-modal .enhanced-media-preview .enhanced-media-grid {
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+  }
+
+  .post-something-modal .enhanced-media-preview .enhanced-media-grid.three-items {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .post-something-modal .enhanced-media-preview .enhanced-media-grid.three-items .enhanced-media-grid-item:last-child {
+    grid-column: 1/-1;
+    justify-self: center;
+    max-width: 300px;
+  }
+
+  .post-something-modal .enhanced-media-preview .enhanced-media-grid.four-plus-items {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .post-something-modal .enhanced-media-preview .enhanced-media-grid {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+    justify-items: center;
+  }
+
+  .post-something-modal .enhanced-media-preview .enhanced-media-grid.single-item,
+  .post-something-modal .enhanced-media-preview .enhanced-media-grid.two-items,
+  .post-something-modal .enhanced-media-preview .enhanced-media-grid.three-items,
+  .post-something-modal .enhanced-media-preview .enhanced-media-grid.four-plus-items {
+    grid-template-columns: 1fr;
+    max-width: none;
+    margin: 1rem 0;
+  }
+}
+
+@media (max-width: 480px) {
+  .post-something-modal .enhanced-media-preview .enhanced-media-grid {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+}
+
+.post-something-modal .enhanced-media-preview .enhanced-media-grid-item {
+  position: relative;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+  transition: all 0.3s ease;
+  background: #000;
+  border: 2px solid transparent;
+  display: flex;
+  flex-direction: column;
+}
+
+.post-something-modal .enhanced-media-preview .enhanced-media-grid-item:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+}
+
+.post-something-modal .enhanced-media-preview .enhanced-media-grid-item.selected-thumbnail {
+  border-color: #4a3aff;
+  box-shadow: 0 0 0 2px rgba(74, 58, 255, 0.3), 0 8px 25px rgba(0, 0, 0, 0.3);
+}
+
+.post-something-modal .enhanced-media-preview .enhanced-media-grid-item.selected-thumbnail::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(45deg, rgba(74, 58, 255, 0.1) 0%, rgba(108, 92, 231, 0.1) 100%);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.post-something-modal .enhanced-media-preview .enhanced-media-grid-item.edit-mode {
+  border-color: rgba(255, 193, 7, 0.3);
+}
+
+.post-something-modal .enhanced-media-preview .enhanced-media-grid-item.edit-mode:hover {
+  border-color: rgba(255, 193, 7, 0.6);
+  box-shadow: 0 8px 25px rgba(255, 193, 7, 0.2);
+}
+
+.post-something-modal .enhanced-media-preview .enhanced-media-grid-item.edit-mode.selected-thumbnail {
+  border-color: #4a3aff;
+  box-shadow: 0 0 0 2px rgba(74, 58, 255, 0.3), 0 8px 25px rgba(0, 0, 0, 0.3);
+}
+
+.post-something-modal .enhanced-media-preview .enhanced-media-grid-item.edit-mode.selected-thumbnail::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(45deg, rgba(74, 58, 255, 0.1) 0%, rgba(108, 92, 231, 0.1) 100%);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.post-something-modal .enhanced-media-preview .enhanced-media-grid-item.edit-mode.selected-thumbnail:hover {
+  border-color: #4a3aff;
+  box-shadow: 0 0 0 2px rgba(74, 58, 255, 0.5), 0 8px 25px rgba(0, 0, 0, 0.3);
+}
+
+.post-something-modal .enhanced-media-preview .thumbnail-indicator {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  background: linear-gradient(135deg, #4a3aff 0%, #6c5ce7 100%);
+  color: white;
+  padding: 0.5rem 0.75rem;
+  border-radius: 20px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  z-index: 3;
+  box-shadow: 0 2px 8px rgba(74, 58, 255, 0.3);
+  animation: pulse 2s infinite;
+}
+
+.post-something-modal .enhanced-media-preview .thumbnail-indicator i {
+  font-size: 0.875rem;
+}
+
+@keyframes pulse {
+
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.05);
+  }
+}
+
+.post-something-modal .enhanced-media-preview .enhanced-media-container {
+  width: 100%;
+  height: 250px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #000;
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.post-something-modal .enhanced-media-preview .enhanced-media-container img,
+.post-something-modal .enhanced-media-preview .enhanced-media-container video {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+  object-fit: cover;
+  border-radius: 16px;
+  transition: transform 0.3s ease;
+}
+
+.post-something-modal .enhanced-media-preview .enhanced-media-container video {
+  -o-object-fit: contain;
+  object-fit: contain;
+}
+
+.post-something-modal .enhanced-media-preview .enhanced-media-container:hover img,
+.post-something-modal .enhanced-media-preview .enhanced-media-container:hover video {
+  transform: scale(1.05);
+}
+
+.post-something-modal .enhanced-media-preview .enhanced-media-controls {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.8);
+  padding: 1rem;
+  display: flex;
+  gap: 0.75rem;
+  justify-content: center;
+  align-items: center;
+  z-index: 2;
+  border-radius: 0 0 16px 16px;
+}
+
+.post-something-modal .enhanced-media-preview .enhanced-media-controls .enhanced-thumbnail-btn,
+.post-something-modal .enhanced-media-preview .enhanced-media-controls .enhanced-delete-btn {
+  border-radius: 8px;
+  padding: 0.5rem 1rem;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  min-width: 100px;
+  font-size: 0.875rem;
+  flex: 1;
+}
+
+.post-something-modal .enhanced-media-preview .enhanced-media-controls .enhanced-thumbnail-btn:hover,
+.post-something-modal .enhanced-media-preview .enhanced-media-controls .enhanced-delete-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+}
+
+.post-something-modal .enhanced-media-preview .enhanced-media-controls .enhanced-thumbnail-btn i,
+.post-something-modal .enhanced-media-preview .enhanced-media-controls .enhanced-delete-btn i {
+  font-size: 1rem;
+}
+
+.post-something-modal .enhanced-media-preview .enhanced-media-controls .enhanced-thumbnail-btn small,
+.post-something-modal .enhanced-media-preview .enhanced-media-controls .enhanced-delete-btn small {
+  font-size: 0.75rem;
+  margin-top: 0.25rem;
+}
+
+.post-something-modal .enhanced-media-preview .enhanced-media-controls .enhanced-thumbnail-btn.active {
+  background: linear-gradient(135deg, #00b894 0%, #00a085 100%);
+  border-color: #00b894;
+  color: white;
+  box-shadow: 0 4px 15px rgba(0, 184, 148, 0.3);
+}
+
+.post-something-modal .enhanced-media-preview .enhanced-media-controls .enhanced-delete-btn:hover {
+  background: #ff6b6b;
+  border-color: #ff6b6b;
+  color: white;
+  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
+}
+
+.post-something-modal .enhanced-empty-state {
+  background: rgba(255, 255, 255, 0.02);
+  border: 2px dashed rgba(74, 58, 255, 0.3);
+  border-radius: 16px;
+  padding: 3rem;
+}
+
+.post-something-modal .enhanced-empty-state i {
+  opacity: 0.5;
+}
+
+@media (max-width: 768px) {
+  .post-something-modal .enhanced-modal-header {
+    padding: 1rem;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .post-something-modal .enhanced-modal-header .modal-title {
+    font-size: 1.25rem;
+  }
+
+  .post-something-modal .enhanced-modal-header .d-flex.gap-2 {
+    width: 100%;
+    gap: 1rem;
+  }
+
+  .post-something-modal .enhanced-modal-header .enhanced-close-btn,
+  .post-something-modal .enhanced-modal-header .enhanced-post-btn {
+    flex: 1;
+    padding: 0.75rem 1rem;
+  }
+
+  .post-something-modal .enhanced-modal-body {
+    padding: 1rem;
+  }
+
+  .post-something-modal .enhanced-form-section,
+  .post-something-modal .enhanced-media-section {
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .post-something-modal .enhanced-upload-btn {
+    padding: 1.5rem;
+  }
+
+  .post-something-modal .enhanced-upload-btn i {
+    font-size: 1.25rem;
+  }
+
+  .post-something-modal .enhanced-media-container {
+    height: 200px;
+  }
+
+  .post-something-modal .enhanced-media-controls {
+    padding: 0.75rem;
+    gap: 0.5rem;
+  }
+
+  .post-something-modal .enhanced-media-controls .enhanced-thumbnail-btn,
+  .post-something-modal .enhanced-media-controls .enhanced-delete-btn {
+    min-width: 80px;
+    padding: 0.375rem 0.75rem;
+    font-size: 0.75rem;
+  }
+
+  .post-something-modal .enhanced-media-controls .enhanced-thumbnail-btn i,
+  .post-something-modal .enhanced-media-controls .enhanced-delete-btn i {
+    font-size: 0.875rem;
+  }
+
+  .post-something-modal .enhanced-media-controls .enhanced-thumbnail-btn small,
+  .post-something-modal .enhanced-media-controls .enhanced-delete-btn small {
+    font-size: 0.625rem;
+  }
+
+  .post-something-modal .thumbnail-indicator {
+    top: 8px;
+    right: 8px;
+    padding: 0.375rem 0.5rem;
+    font-size: 0.625rem;
+  }
+
+  .post-something-modal .thumbnail-indicator i {
+    font-size: 0.75rem;
+  }
+
+  .post-something-modal .enhanced-empty-state {
+    padding: 2rem;
+  }
+
+  .post-something-modal .enhanced-empty-state i {
+    font-size: 2rem !important;
+  }
+}
+
+@media (max-width: 480px) {
+  .post-something-modal .enhanced-modal-header .modal-title {
+    font-size: 1.1rem;
+  }
+
+  .post-something-modal .enhanced-form-section,
+  .post-something-modal .enhanced-media-section {
+    padding: 1rem;
+  }
+
+  .post-something-modal .enhanced-upload-btn {
+    padding: 1rem;
+    font-size: 0.9rem;
+  }
+
+  .post-something-modal .enhanced-media-container {
+    height: 250px;
+  }
+
+  .post-something-modal .enhanced-media-controls .d-flex {
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .post-something-modal .enhanced-media-controls .enhanced-thumbnail-btn,
+  .post-something-modal .enhanced-media-controls .enhanced-delete-btn {
+    width: 100%;
+    min-width: auto;
+  }
+}
+
+/* styles.css */
+
+.post-content {
+  flex: 1;
+  overflow: hidden;
+}
+
+#postContent .modal-content {
+  padding: 1em;
+}
+
+#postContent .btn-close {
+  color: #fff;
+}
+
+#postContent .bg-dark {
+  background: #313742;
+  margin-bottom: 17px;
+}
+
+#postContent .form-control {
+  color: #b1b1b1;
+  background-color: #222;
+  border: 1px solid #515151;
+  margin-bottom: 17px;
+}
+
+#postContent .h4 {
+  color: #fff;
+}
+
+#postContent .modal-header,
+#postContent .modal-footer {
+  border: none !important;
+}
+
+#postContent .modal-content {
+  background-color: #171e2e;
+  border-bottom: 3px solid #2b2a48;
+}
+
+#postContent .btn {
+  border-radius: 0;
+}
+
+/* Make the carousel vertical */
+
+/* Optional: Adjust position of the controls for vertical layout */
+
+#deep-link-post-modal {
+  overflow: hidden;
+}
+
+#deep-link-post-modal span {
+  color: #fff;
+  font-size: 0.6rem;
+  font-weight: 400;
+  margin: 0;
+  padding: 0;
+}
+
+#deep-link-post-modal .media-contents .media-item .portrait {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: contain;
+  object-fit: contain;
+}
+
+#deep-link-post-modal .media-contents .media-item .landscape {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: contain !important;
+  object-fit: contain !important;
+}
+
+#deep-link-post-modal .deep-link-poster-details {
+  padding-left: 5px;
+  display: flex;
+  gap: 15px;
+}
+
+#deep-link-post-modal .deep-link-poster-details img {
+  max-width: 40px;
+  max-height: 40px;
+  border-radius: 25px;
+}
+
+#deep-link-post-modal #deep-link-post-container {
+  position: absolute;
+  bottom: 3%;
+  padding: 0px;
+  display: flex;
+  z-index: 5;
+  flex-direction: row;
+  align-items: end;
+  width: 100%;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+}
+
+#deep-link-post-modal .landscape img {
+  width: 100%;
+  height: 100vh;
+  -o-object-fit: cover;
+  object-fit: cover;
+}
+
+#deep-link-post-modal .portrait img {
+  width: 100%;
+  height: 100vh;
+  -o-object-fit: contain;
+  object-fit: contain;
+}
+
+#deep-link-post-modal .carousel {
+  background-color: #131313;
+  position: relative;
+}
+
+#deep-link-post-modal .deep-link-post-comments-container {
+  border-radius: 10px;
+  padding: 20px 20px 0px 20px;
+}
+
+#deep-link-post-modal .dropdown {
+  text-align: end;
+}
+
+#deep-link-post-modal .deep-link-post-details {
+  position: relative;
+  background-color: #100f2e;
+  border-radius: 5px;
+  width: 100%;
+  height: 100%;
+  max-height: 77vh;
+  display: none;
+}
+
+#deep-link-post-modal ::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 0 0, 0, 0, 0;
+  background-color: rgba(83, 83, 83, 0.623);
+}
+
+#deep-link-post-modal ::-webkit-scrollbar {
+  width: 5px;
+  background-color: #181739;
+}
+
+#deep-link-post-modal ::-webkit-scrollbar-thumb {
+  -webkit-box-shadow: inset 0 0 3px rgb(0, 0, 0);
+  background-color: #181739;
+}
+
+#deep-link-post-modal .deep-link-post-details p {
+  color: #fff;
+  display: block;
+  font-size: 1rem;
+  font-weight: 400;
+  margin: 0 0 2px;
+}
+
+#deep-link-post-modal .deep-link-post-interaction button {
+  font-weight: 500;
+}
+
+#deep-link-post-modal .deep-link-post-socstat-container {
+  display: flex;
+  margin: 15px 0px;
+  gap: 10px;
+  justify-content: flex-end;
+  font-family: monospace;
+  font-weight: 500;
+  justify-content: space-between;
+  display: none !important;
+}
+
+#deep-link-post-modal .deep-link-post-socstat-container p {
+  font-size: 10px;
+  font-weight: 500;
+}
+
+#deep-link-post-modal .deep-link-post-socstat-container span {
+  font-size: 11px;
+}
+
+#deep-link-post-modal .deep-link-post-interaction .like-button {
+  color: white;
+  cursor: pointer;
+}
+
+#deep-link-post-modal .deep-link-post-interaction .share-post-social {
+  color: white;
+  cursor: pointer;
+}
+
+#deep-link-post-modal .deep-link-post-interaction .like-button img {
+  width: 100%;
+  max-width: 30px;
+  display: flex;
+  justify-content: center;
+}
+
+#deep-link-post-modal .deep-link-post-interaction .active img {
+  transform: scale(0.9);
+  /* Zoom-in effect when active */
+  opacity: 1;
+  /* Ensure full opacity */
+  filter: grayscale(0);
+  /* Show full color */
+}
+
+#deep-link-post-modal .deep-link-post-interaction .inactive img {
+  transform: scale(1);
+  /* Reset scale */
+  opacity: 0.6;
+  /* Reduce opacity */
+  filter: grayscale(1);
+  /* Make grayscale */
+  animation: inactiveAnimation 0.5s ease forwards;
+  /* Apply animation */
+}
+
+#deep-link-post-modal .deep-link-post-interaction {
+  margin-right: 0px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+/* loading style */
+
+/* end of loading style */
+@keyframes loadfull {
+  0% {
+    width: 10%;
+    flex-grow: 0;
+  }
+}
+
+@keyframes placeHolderShimmer {
+  0% {
+    background-position: -800px 0;
+  }
+
+  100% {
+    background-position: 800px 0;
+  }
+}
+
+/* DROPDOWN CSS */
+/*Styling Selectbox*/
+#deep-link-post-modal .post-dropdown-actions {
+  transition: all 0.5s ease;
+  position: relative;
+  font-size: 20px;
+  color: #f5f5f5;
+  cursor: pointer;
+}
+
+#deep-link-post-modal .post-dropdown-actions .select {
+  cursor: pointer;
+  display: block;
+  padding: 10px;
+}
+
+#deep-link-post-modal .post-dropdown-actions .select>i {
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+  float: right;
+  line-height: 20px;
+}
+
+#deep-link-post-modal .post-dropdown-actions:focus-visible {
+  outline: unset;
+}
+
+#deep-link-post-modal .post-dropdown-actions .post-menu-dropdown {
+  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
+  position: absolute;
+  background-color: #2d2c51;
+  color: white;
+  z-index: 9;
+  min-width: 305px;
+  left: -310px;
+  margin-top: 0px;
+  padding: 0px 0px 0px;
+  border-radius: 5px;
+  overflow: hidden;
+  display: none;
+  overflow-y: auto;
+  padding: 8px 10px;
+  top: -170px;
+}
+
+#deep-link-post-modal .post-dropdown-actions .post-menu-dropdown li:last-child {
+  border: none;
+}
+
+#deep-link-post-modal .post-dropdown-actions .post-menu-dropdown li:hover {
+  background-color: #100f2e;
+  border-bottom: 2px solid #3d3d3d;
+}
+
+#deep-link-post-modal .post-dropdown-actions .post-menu-dropdown li {
+  padding: 10px;
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+  border-bottom: 2px solid #100f2e;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  font-size: 13px;
+  text-align: left;
+}
+
+#deep-link-post-modal .post-dropdown-actions .post-menu-dropdown {
+  list-style: none;
+}
+
+#deep-link-post-modal .post-dropdown-actions:focus {
+  border: none;
+}
+
+@media (max-width: 575.98px) {
+
+  #deep-link-post-modal .close-button {
+    top: 0% !important;
+  }
+}
+
+/* Mobile comments panel */
+@media (max-width: 768px) {
+  #Comments {
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
+  }
+
+  /* Optional: overlay dimmer */
+}
+
+#deep-link-post-section {
+  height: 100%;
+}
+
+#deep-link-post-section .time {
+  position: absolute;
+  bottom: 1%;
+  right: 1%;
+  font-size: 11px;
+  color: white;
+}
+
+#deep-link-post-section .progress {
+  position: absolute;
+  height: 5px;
+  width: 100%;
+  background-color: rgba(255, 255, 255, 0.2);
+  cursor: pointer;
+  bottom: 0.5%;
+}
+
+#deep-link-post-modal .close-button {
+  position: absolute;
+  top: 0.5%;
+  right: 2%;
+  z-index: 1000;
+  color: white;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 35px;
+}
+
+.edit-post-modal .modal-content {
+  background-color: #03001c;
+}
+
+.edit-post-modal .modal-header {
+  background-color: #181828;
+  border-bottom: 0px;
+}
+
+.edit-post-modal .btn-close {
+  filter: invert(1);
+}
+
+.edit-post-modal button:focus:not(:focus-visible) {
+  box-shadow: unset;
+}
+
+.edit-post-modal .edit-post-title,
+.edit-post-modal .edit-post-text {
+  background-color: #181828;
+  color: rgb(250, 250, 250);
+}
+
+.edit-post-modal .edit-post-title::-moz-placeholder {
+  color: rgb(179, 179, 179);
+  opacity: 1;
+}
+
+.edit-post-modal .edit-post-title::placeholder {
+  color: rgb(179, 179, 179);
+  opacity: 1;
+}
+
+.edit-post-modal label {
+  color: rgb(185, 181, 181);
+}
+
+.edit-post-modal .enhanced-modal-header .enhanced-close-btn {
+  background: rgba(255, 255, 255, 0.1);
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  padding: 0.5rem 0.75rem;
+  font-weight: 600;
+  color: #ffffff;
+  transition: all 0.3s ease;
+}
+
+.edit-post-modal .enhanced-modal-header .enhanced-close-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, 0.4);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
+}
+
+.edit-post-modal .enhanced-modal-header .enhanced-close-btn:focus {
+  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
+}
+
+.edit-post-modal .enhanced-modal-header .enhanced-post-btn {
+  background: linear-gradient(135deg, #4a3aff 0%, #6c5ce7 100%);
+  border: none;
+  border-radius: 8px;
+  padding: 0.5rem 0.75rem;
+  font-weight: 600;
+  box-shadow: 0 4px 15px rgba(74, 58, 255, 0.3);
+  transition: all 0.3s ease;
+}
+
+.edit-post-modal .enhanced-modal-header .enhanced-post-btn:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(74, 58, 255, 0.4);
+}
+
+.edit-post-modal .enhanced-modal-header .enhanced-post-btn:disabled {
+  opacity: 0.7;
+  transform: none;
+}
+
+.edit-post-modal .video-player-container video {
+  max-height: 500px;
+  -o-object-fit: contain !important;
+  object-fit: contain !important;
+}
+
+.edit-post-modal .time {
+  position: absolute;
+  bottom: 2%;
+  right: 1%;
+  font-size: 11px;
+  color: white;
+}
+
+.edit-post-modal .progress {
+  position: absolute;
+  height: 5px;
+  width: 100%;
+  background-color: rgba(255, 255, 255, 0.2);
+  cursor: pointer;
+  bottom: 0.5%;
+}
+
+@media screen and (max-width: 575.98px) {
+  .edit-post-modal .video-player-container video {
+    max-height: 320px;
+    -o-object-fit: contain !important;
+    object-fit: contain !important;
+  }
+
+  .edit-post-modal .modal-body .btn {
+    cursor: pointer;
+    box-shadow: none !important;
+    font-size: 15px;
+    padding: 5px 15px;
+  }
+}
+
+.each-post-feed.post-card {
+  background: linear-gradient(145deg, #ffffff, #f8f9fa);
+  border-radius: 16px;
+  margin-bottom: 1.5rem;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.05);
+}
+
+.each-post-feed.post-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.05);
+}
+
+@media (prefers-color-scheme: dark) {
+  .each-post-feed.post-card {
+    background: linear-gradient(145deg, #1a1a2e, #16213e);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05);
+  }
+
+  .each-post-feed.post-card:hover {
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
+  }
+}
+
+.post-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.25rem 1.25rem 0.75rem 1.25rem;
+  position: relative;
+}
+
+.post-card-header::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 1.25rem;
+  right: 1.25rem;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
+}
+
+@media (prefers-color-scheme: dark) {
+  .post-card-header::after {
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+  }
+}
+
+.post-card-avatar {
+  width: 48px !important;
+  height: 48px !important;
+  border-radius: 50%;
+  -o-object-fit: cover;
+  object-fit: cover;
+  border: 3px solid transparent;
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  background-clip: padding-box;
+  margin-right: 0.75rem;
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+.post-card-avatar::before {
+  content: "";
+  position: absolute;
+  top: -3px;
+  left: -3px;
+  right: -3px;
+  bottom: -3px;
+  background: linear-gradient(45deg, #667eea, #764ba2, #f093fb, #f5576c);
+  border-radius: 50%;
+  z-index: -1;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.post-card-avatar:hover::before {
+  opacity: 1;
+}
+
+@media (prefers-color-scheme: dark) {
+  .post-card-avatar {
+    border: 3px solid transparent;
+    background: linear-gradient(45deg, #4facfe, #00f2fe);
+  }
+
+  .post-card-avatar::before {
+    background: linear-gradient(45deg, #4facfe, #00f2fe, #43e97b, #38f9d7);
+  }
+}
+
+.post-card-username {
+  color: #2d3748;
+  font-weight: 700;
+  font-size: 1rem;
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+.post-card-username:hover {
+  color: #667eea;
+  text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  .post-card-username {
+    color: #e2e8f0;
+  }
+
+  .post-card-username:hover {
+    color: #4facfe;
+  }
+}
+
+.post-card-timestamp {
+  color: #718096;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+@media (prefers-color-scheme: dark) {
+  .post-card-timestamp {
+    color: #a0aec0;
+  }
+}
+
+.post-card-media {
+  width: 100%;
+  background: #f7fafc;
+  margin: 0;
+  overflow: hidden;
+  cursor: pointer;
+  position: relative;
+}
+
+@media (prefers-color-scheme: dark) {
+  .post-card-media {
+    background: #1a202c;
+  }
+}
+
+.post-card-media img,
+.post-card-media video {
+  width: 100%;
+  height: auto;
+  display: block;
+  transition: transform 0.3s ease;
+}
+
+.post-card-media:hover img,
+.post-card-media:hover video {
+  transform: scale(1.02);
+}
+
+.post-card-body {
+  color: #2d3748;
+  padding: 1rem 1.25rem;
+  line-height: 1.6;
+}
+
+@media (prefers-color-scheme: dark) {
+  .post-card-body {
+    color: #e2e8f0;
+  }
+}
+
+.post-card-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+  color: #1a202c;
+  line-height: 1.4;
+}
+
+@media (prefers-color-scheme: dark) {
+  .post-card-title {
+    color: #f7fafc;
+  }
+}
+
+.post-card-text {
+  font-size: 1rem;
+  color: #4a5568;
+  margin-bottom: 0.75rem;
+  line-height: 1.6;
+}
+
+@media (prefers-color-scheme: dark) {
+  .post-card-text {
+    color: #cbd5e0;
+  }
+}
+
+.post-card-token,
+.post-card-nft {
+  display: inline-block;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  font-size: 0.875rem;
+  font-weight: 600;
+  border-radius: 20px;
+  padding: 0.375rem 0.75rem;
+  margin: 0.25rem 0.5rem 0.25rem 0;
+  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
+  transition: all 0.3s ease;
+}
+
+.post-card-token:hover,
+.post-card-nft:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
+}
+
+@media (prefers-color-scheme: dark) {
+
+  .post-card-token,
+  .post-card-nft {
+    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+    box-shadow: 0 2px 4px rgba(79, 172, 254, 0.2);
+  }
+
+  .post-card-token:hover,
+  .post-card-nft:hover {
+    box-shadow: 0 4px 8px rgba(79, 172, 254, 0.3);
+  }
+}
+
+.post-card-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid #23233a;
+  padding-top: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.like-button {
+  background: none;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 0;
+  transition: transform 0.1s;
+}
+
+.like-button:hover {
+  transform: scale(1.15);
+}
+
+.like-button img {
+  width: 28px;
+  height: 28px;
+  filter: grayscale(0.2);
+  transition: filter 0.2s;
+}
+
+.like-button img:hover {
+  filter: grayscale(0) brightness(1.2);
+}
+
+.post-card-likes,
+.post-card-comments {
+  color: #b3b3ff;
+  font-size: 0.95rem;
+  margin-right: 1rem;
+}
+
+.share-modal-overlay {
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.share-modal-bottom-sheet {
+  background: #222;
+  border-radius: 16px 16px 0 0;
+  width: 100%;
+  max-width: 400px;
+  margin-bottom: 0;
+  padding: 8px 10px 5px 10px;
+  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.2);
+  position: relative;
+  animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+.share-modal-close {
+  font-size: 1.2rem;
+}
+
+.share-modal-icons {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.share-modal-icons a,
+.share-modal-icons button {
+  background: none;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  padding: 0;
+  outline: none;
+  transition: color 0.2s;
+}
+
+.share-modal-icons a:hover,
+.share-modal-icons button:hover {
+  color: #1da1f2;
+  /* Twitter blue as highlight */
+}
+
+.share-btn-modal {
+  border: 0px;
+  background-color: transparent;
+  padding: 0px;
+}
+
+.share-btn-modal i,
+.fa-ellipsis-h {
+  color: rgb(187, 187, 187) !important;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.media-item__skeleton {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, #222 25%, #333 50%, #222 75%);
+  animation: skeleton-loading 1.2s infinite linear;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: -200px 0;
+  }
+
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+}
+
+.view-post-modal {
+  perspective: 1000px;
+  transform-style: preserve-3d;
+}
+
+.view-post-carousel-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.view-post-close-button {
+  /* Inherits .close-button, just for specificity */
+}
+
+.view-post-loading-body {
+  /* No extra styles needed, but class for targeting if needed */
+}
+
+.view-post-share-modal-icons {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  gap: 20px;
+}
+
+.view-post-share-copy-btn,
+.view-post-share-modal-close {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 8px;
+}
+
+.view-post-share-icon-facebook {
+  color: #1877f2;
+}
+
+.view-post-share-icon-twitter {
+  color: #1da1f2;
+}
+
+.view-post-share-icon-linkedin {
+  color: #0077b5;
+}
+
+.view-post-share-icon-email {
+  color: #ea4335;
+}
+
+.view-post-share-icon-copy,
+.view-post-share-icon-close {
+  color: #666;
+}
+
+.deeplink-media-slide {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.deeplink-media-item {
+  width: 100%;
+  height: 100vh;
+  -o-object-fit: contain;
+  object-fit: contain;
+  display: block;
+}
+
+.post-card-skeleton {
+  background: #181828;
+  padding: 16px;
+  margin-bottom: 16px;
+  border: 1px solid #23233a;
+}
+
+.post-card-skeleton .poster-profile-img-loader,
+.post-card-skeleton .poster-profile-name-loader,
+.post-card-skeleton .post-date-loader,
+.post-card-skeleton .post-profile-title,
+.post-card-skeleton .post-feed-img-loader,
+.post-card-skeleton .filter-btn-loader {
+  border-radius: 6px;
+  animation: loadfull 2s infinite;
+  position: relative;
+  overflow: hidden;
+}
+
+.post-card-skeleton .poster-profile-img-loader::before,
+.post-card-skeleton .poster-profile-name-loader::before,
+.post-card-skeleton .post-date-loader::before,
+.post-card-skeleton .post-profile-title::before,
+.post-card-skeleton .post-feed-img-loader::before,
+.post-card-skeleton .filter-btn-loader::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+  animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    left: -100%;
+  }
+
+  100% {
+    left: 100%;
+  }
+}
+
+.post-image-skeleton,
+.post-video-skeleton {
+  width: 100%;
+  height: 100%;
+}
+
+.post-image-skeleton .post-feed-img-loader,
+.post-video-skeleton .post-feed-img-loader {
+  width: 100%;
+  height: 100%;
+  animation: loadfull 2s infinite;
+  position: relative;
+  overflow: hidden;
+}
+
+.post-image-skeleton .post-feed-img-loader::before,
+.post-video-skeleton .post-feed-img-loader::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, #222 25%, #333 50%, #222 75%);
+  animation: shimmer 1.5s infinite;
+}
+
+.post-profile-skeleton {
+  width: 100%;
+  height: 100%;
+}
+
+.post-profile-skeleton .poster-profile-img-loader {
+  width: 100%;
+  height: 100%;
+  background-color: #232c39;
+  border-radius: 50%;
+  animation: loadfull 2s infinite;
+  position: relative;
+  overflow: hidden;
+}
+
+.post-profile-skeleton .poster-profile-img-loader::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, #222 25%, #333 50%, #222 75%);
+  animation: shimmer 1.5s infinite;
+}
+
+.skeleton-profile-section {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.skeleton-profile-section .poster-profile-img-loader {
+  margin-right: 12px;
+  border-radius: 50%;
+  width: 50px !important;
+}
+
+.skeleton-profile-section .skeleton-profile-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.skeleton-content-section {
+  margin-bottom: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.skeleton-content-section .post-profile-title {
+  height: 16px !important;
+  max-width: 100% !important;
+}
+
+.skeleton-media-section {
+  margin-bottom: 16px;
+}
+
+.skeleton-media-section .post-feed-img-loader {
+  height: 250px !important;
+  width: 100% !important;
+  max-width: 100% !important;
+}
+
+.skeleton-actions-section {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+}
+
+.skeleton-actions-section .filter-btn-loader {
+  height: 24px !important;
+  width: 60px !important;
+  max-width: 60px !important;
+}
+
+.initial-loading-container {
+  padding: 16px 0;
+}
+
+.initial-loading-container .loading-feed {
+  margin-bottom: 16px;
+}
+
+.initial-loading-container .loading-feed:last-child {
+  margin-bottom: 0;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.active i {
+  color: white !important;
+}
+
+.enhanced-skeleton {
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
+  background-size: 200% 100%;
+  animation: placeHolderShimmer 2s infinite linear;
+}
+
+.enhanced-skeleton .skeleton-shimmer {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+  animation: skeletonShimmer 1.5s infinite;
+}
+
+.enhanced-skeleton-card {
+  background: rgba(255, 255, 255, 0.02);
+  padding: 16px;
+  margin-bottom: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  animation: skeletonFadeIn 0.3s ease-out;
+}
+
+.post-video-skeleton {
+  position: relative;
+}
+
+.post-profile-skeleton {
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.view-post-modal-skeleton {
+  background: rgba(0, 0, 0, 0.9);
+  overflow: hidden;
+}
+
+.view-post-modal-skeleton .modal-header-skeleton {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.view-post-modal-skeleton .modal-header-skeleton .close-button-skeleton {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+}
+
+.view-post-modal-skeleton .modal-header-skeleton .title-skeleton {
+  height: 20px;
+  width: 200px;
+}
+
+.view-post-modal-skeleton .modal-body-skeleton {
+  padding: 16px;
+}
+
+.view-post-modal-skeleton .modal-body-skeleton .media-skeleton {
+  height: 400px;
+  width: 100%;
+}
+
+.post-feed-img-loader.enhanced-skeleton {
+  background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
+  background-size: 200% 100%;
+  animation: placeHolderShimmer 2s infinite linear;
+  position: relative;
+  overflow: hidden;
+}
+
+.post-feed-img-loader.enhanced-skeleton::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+  animation: skeletonShimmer 1.5s infinite;
+}
+
+.poster-profile-img-loader.enhanced-skeleton {
+  background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
+  background-size: 200% 100%;
+  animation: placeHolderShimmer 2s infinite linear;
+  border-radius: 50%;
+  position: relative;
+  overflow: hidden;
+}
+
+.poster-profile-img-loader.enhanced-skeleton::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+  animation: skeletonShimmer 1.5s infinite;
+}
+
+@media (max-width: 768px) {
+  .enhanced-skeleton {
+    animation-duration: 1.5s;
+  }
+
+  .post-feed-img-loader.enhanced-skeleton {
+    min-height: 200px;
+  }
+
+  .view-post-modal-skeleton .modal-body-skeleton .media-skeleton {
+    height: 300px;
+  }
+}
+
+.feed-main-container {
+  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+}
+
+.feed-main-container.feed-hidden {
+  opacity: 0;
+  transform: translateY(20px);
+  pointer-events: none;
+}
+
+.feed-main-container.feed-visible {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.view-post-modal.modal-open~.feed-main-container {
+  opacity: 0.3;
+  transform: scale(0.98);
+  filter: blur(1px);
+  transition: all 0.3s ease-in-out;
+}
+
+@media (max-width: 768px) {
+  .feed-main-container {
+    transition-duration: 0.2s;
+  }
+
+  .feed-main-container.feed-hidden {
+    transform: translateY(10px);
+  }
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.5rem;
+  margin-top: 1rem;
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid.single-item {
+  grid-template-columns: 1fr;
+  max-width: 100%;
+  margin: 1rem 0;
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid.two-items {
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+  max-width: 800px;
+  margin: 1rem auto;
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid.three-items {
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: repeat(2, 1fr);
+  gap: 1.5rem;
+  max-width: 900px;
+  margin: 1rem auto;
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid.three-items .enhanced-media-grid-item:first-child {
+  grid-column: 1;
+  grid-row: 1/3;
+  height: auto;
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid.three-items .enhanced-media-grid-item:first-child .enhanced-media-container {
+  height: 100%;
+  min-height: 420px;
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid.three-items .enhanced-media-grid-item:nth-child(2) {
+  grid-column: 2;
+  grid-row: 1;
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid.three-items .enhanced-media-grid-item:nth-child(3) {
+  grid-column: 2;
+  grid-row: 2;
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid.four-plus-items {
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.5rem;
+}
+
+@media (max-width: 992px) {
+  .edit-post-modal .enhanced-media-preview .enhanced-media-grid {
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+  }
+
+  .edit-post-modal .enhanced-media-preview .enhanced-media-grid.three-items {
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: repeat(2, 1fr);
+    max-width: 700px;
+  }
+
+  .edit-post-modal .enhanced-media-preview .enhanced-media-grid.three-items .enhanced-media-grid-item:first-child .enhanced-media-container {
+    min-height: 350px;
+  }
+
+  .edit-post-modal .enhanced-media-preview .enhanced-media-grid.four-plus-items {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .edit-post-modal .enhanced-media-preview .enhanced-media-grid {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+    justify-items: center;
+  }
+
+  .edit-post-modal .enhanced-media-preview .enhanced-media-grid.single-item,
+  .edit-post-modal .enhanced-media-preview .enhanced-media-grid.two-items,
+  .edit-post-modal .enhanced-media-preview .enhanced-media-grid.three-items,
+  .edit-post-modal .enhanced-media-preview .enhanced-media-grid.four-plus-items {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    max-width: none;
+    margin: 1rem 0;
+  }
+
+  .edit-post-modal .enhanced-media-preview .enhanced-media-grid.single-item .enhanced-media-grid-item,
+  .edit-post-modal .enhanced-media-preview .enhanced-media-grid.two-items .enhanced-media-grid-item,
+  .edit-post-modal .enhanced-media-preview .enhanced-media-grid.three-items .enhanced-media-grid-item,
+  .edit-post-modal .enhanced-media-preview .enhanced-media-grid.four-plus-items .enhanced-media-grid-item {
+    grid-column: 1 !important;
+    grid-row: auto !important;
+  }
+
+  .edit-post-modal .enhanced-media-preview .enhanced-media-grid.single-item .enhanced-media-grid-item .enhanced-media-container,
+  .edit-post-modal .enhanced-media-preview .enhanced-media-grid.two-items .enhanced-media-grid-item .enhanced-media-container,
+  .edit-post-modal .enhanced-media-preview .enhanced-media-grid.three-items .enhanced-media-grid-item .enhanced-media-container,
+  .edit-post-modal .enhanced-media-preview .enhanced-media-grid.four-plus-items .enhanced-media-grid-item .enhanced-media-container {
+    height: 250px !important;
+    min-height: auto !important;
+  }
+}
+
+@media (max-width: 480px) {
+  .edit-post-modal .enhanced-media-preview .enhanced-media-grid {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+
+  .edit-post-modal .enhanced-media-preview .enhanced-media-grid .enhanced-media-grid-item .enhanced-media-container {
+    height: 200px !important;
+  }
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item {
+  position: relative;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+  transition: all 0.3s ease;
+  background: #000;
+  border: 2px solid transparent;
+  display: flex;
+  flex-direction: column;
+  animation: fadeInUp 0.5s ease-out;
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item.selected-thumbnail {
+  border-color: #4a3aff;
+  box-shadow: 0 0 0 2px rgba(74, 58, 255, 0.3), 0 8px 25px rgba(0, 0, 0, 0.3);
+  animation: pulseGlow 2s infinite;
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item.selected-thumbnail::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(45deg, rgba(74, 58, 255, 0.1) 0%, rgba(108, 92, 231, 0.1) 100%);
+  pointer-events: none;
+  z-index: 1;
+  animation: shimmer 3s infinite;
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item.selected-thumbnail:hover {
+  border-color: #4a3aff;
+  box-shadow: 0 0 0 2px rgba(74, 58, 255, 0.5), 0 8px 25px rgba(0, 0, 0, 0.3);
+  transform: translateY(-6px) scale(1.02);
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item.edit-mode {
+  border-color: rgba(255, 193, 7, 0.3);
+  animation: editPulse 2s infinite;
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item.edit-mode:hover {
+  border-color: rgba(255, 193, 7, 0.6);
+  box-shadow: 0 8px 25px rgba(255, 193, 7, 0.2);
+  transform: translateY(-4px);
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-container {
+  width: 100%;
+  height: 250px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #000;
+  border-radius: 16px;
+  overflow: hidden;
+  position: relative;
+  flex: 1;
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-container img,
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-container video {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+  object-fit: cover;
+  border-radius: 16px;
+  transition: transform 0.3s ease;
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-container img:hover,
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-container video:hover {
+  transform: scale(1.05);
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-container video {
+  -o-object-fit: contain;
+  object-fit: contain;
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-container video:hover {
+  transform: scale(1.02);
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .thumbnail-indicator {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  background: linear-gradient(135deg, #4a3aff 0%, #6c5ce7 100%);
+  color: white;
+  padding: 0.5rem 0.75rem;
+  border-radius: 20px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  box-shadow: 0 2px 8px rgba(74, 58, 255, 0.3);
+  z-index: 10;
+  animation: slideInRight 0.5s ease-out;
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .thumbnail-indicator i {
+  font-size: 0.875rem;
+  margin-right: 0.25rem;
+  animation: rotateIn 0.6s ease-out;
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-controls {
+  padding: 1rem;
+  background: rgba(0, 0, 0, 0.8);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  justify-content: center;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-controls .enhanced-thumbnail-btn,
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-controls .enhanced-delete-btn {
+  border-radius: 8px;
+  padding: 0.5rem 1rem;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  min-width: 100px;
+  font-size: 0.875rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-controls .enhanced-thumbnail-btn::before,
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-controls .enhanced-delete-btn::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: left 0.5s;
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-controls .enhanced-thumbnail-btn:hover,
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-controls .enhanced-delete-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-controls .enhanced-thumbnail-btn:hover::before,
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-controls .enhanced-delete-btn:hover::before {
+  left: 100%;
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-controls .enhanced-thumbnail-btn:active,
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-controls .enhanced-delete-btn:active {
+  transform: translateY(0);
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-controls .enhanced-thumbnail-btn i,
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-controls .enhanced-delete-btn i {
+  font-size: 1rem;
+  transition: transform 0.3s ease;
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-controls .enhanced-thumbnail-btn:hover i,
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-controls .enhanced-delete-btn:hover i {
+  transform: scale(1.1);
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-controls .enhanced-thumbnail-btn small,
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-controls .enhanced-delete-btn small {
+  font-size: 0.75rem;
+  margin-top: 0.25rem;
+  transition: all 0.3s ease;
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-controls .enhanced-thumbnail-btn.active {
+  background: linear-gradient(135deg, #00b894 0%, #00a085 100%);
+  border-color: #00b894;
+  color: white;
+  box-shadow: 0 4px 15px rgba(0, 184, 148, 0.3);
+  animation: successPulse 1.5s infinite;
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-controls .enhanced-thumbnail-btn.active:hover {
+  background: linear-gradient(135deg, #00a085 0%, #00b894 100%);
+  box-shadow: 0 6px 20px rgba(0, 184, 148, 0.4);
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-controls .enhanced-thumbnail-btn[variant=outline-secondary]:hover {
+  background: #6c757d;
+  border-color: #6c757d;
+  color: white;
+  box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
+}
+
+.edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-controls .enhanced-delete-btn:hover {
+  background: #ff6b6b;
+  border-color: #ff6b6b;
+  color: white;
+  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
+  animation: shake 0.5s ease-in-out;
+}
+
+@media (max-width: 768px) {
+  .edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-container {
+    height: 200px;
+  }
+
+  .edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-controls {
+    padding: 0.75rem;
+    gap: 0.5rem;
+  }
+
+  .edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-controls .enhanced-thumbnail-btn,
+  .edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-controls .enhanced-delete-btn {
+    min-width: 80px;
+    padding: 0.375rem 0.75rem;
+    font-size: 0.75rem;
+  }
+
+  .edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-controls .enhanced-thumbnail-btn i,
+  .edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-controls .enhanced-delete-btn i {
+    font-size: 0.875rem;
+  }
+
+  .edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-controls .enhanced-thumbnail-btn small,
+  .edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .enhanced-media-controls .enhanced-delete-btn small {
+    font-size: 0.625rem;
+  }
+
+  .edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .thumbnail-indicator {
+    top: 8px;
+    right: 8px;
+    padding: 0.375rem 0.5rem;
+    font-size: 0.625rem;
+  }
+
+  .edit-post-modal .enhanced-media-preview .enhanced-media-grid-item .thumbnail-indicator i {
+    font-size: 0.75rem;
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulseGlow {
+
+  0%,
+  100% {
+    box-shadow: 0 0 0 2px rgba(74, 58, 255, 0.3), 0 8px 25px rgba(0, 0, 0, 0.3);
+  }
+
+  50% {
+    box-shadow: 0 0 0 4px rgba(74, 58, 255, 0.5), 0 8px 25px rgba(0, 0, 0, 0.3);
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+@keyframes editPulse {
+
+  0%,
+  100% {
+    border-color: rgba(255, 193, 7, 0.3);
+  }
+
+  50% {
+    border-color: rgba(255, 193, 7, 0.6);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes rotateIn {
+  from {
+    transform: rotate(-180deg);
+    opacity: 0;
+  }
+
+  to {
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+}
+
+@keyframes successPulse {
+
+  0%,
+  100% {
+    box-shadow: 0 4px 15px rgba(0, 184, 148, 0.3);
+  }
+
+  50% {
+    box-shadow: 0 6px 20px rgba(0, 184, 148, 0.5);
+  }
+}
+
+@keyframes shake {
+
+  0%,
+  100% {
+    transform: translateY(-2px) translateX(0);
+  }
+
+  25% {
+    transform: translateY(-2px) translateX(-2px);
+  }
+
+  75% {
+    transform: translateY(-2px) translateX(2px);
+  }
+}
+
+/* Reusable Media Grid Component */
+.media-grid {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  gap: 2px;
+}
+
+/* Single item: full width and height */
+.media-grid--single {
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+}
+
+/* Double items: side by side, equal width */
+.media-grid--double {
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr;
+}
+
+/* Triple items: first item full height left, second+third stacked right */
+.media-grid--triple {
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+}
+
+.media-grid--triple>.media-item:first-child {
+  grid-row: 1 / span 2;
+}
+
+/* Media item container */
+.media-item {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  cursor: pointer;
+}
+
+.media-item:hover {
+  transform: scale(1.02);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+/* Image styling */
+.media-item__image {
+  width: 100%;
+  height: 100%;
+  display: block;
+  -o-object-fit: cover;
+  object-fit: cover;
+  backface-visibility: hidden;
+  transform: translateZ(0);
+  pointer-events: none;
+}
+
+.media-item__image.portrait {
+  -o-object-fit: contain;
+  object-fit: contain;
+}
+
+.media-item__image.landscape {
+  -o-object-fit: cover;
+  object-fit: cover;
+}
+
+/* Video cells: make container and video fill the grid cell */
+.media-item--video .video-player-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  cursor: pointer;
+}
+
+.media-item--video .video-player-container:hover {
+  transform: scale(1.02);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.media-item--video video {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+  object-fit: cover;
+  display: block;
+  pointer-events: none;
+  /* Prevent video from blocking container interactions */
+}
+
+/* Image containers: trigger UI changes on container, not image */
+.media-item--image {
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  cursor: pointer;
+}
+
+.media-item--image:hover {
+  transform: scale(1.02);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.media-item--image .media-item__image {
+  pointer-events: none;
+  /* Prevent image from blocking container interactions */
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulseGlow {
+
+  0%,
+  100% {
+    box-shadow: 0 0 0 2px rgba(74, 58, 255, 0.3), 0 8px 25px rgba(0, 0, 0, 0.3);
+  }
+
+  50% {
+    box-shadow: 0 0 0 2px rgba(74, 58, 255, 0.5), 0 8px 25px rgba(74, 58, 255, 0.2);
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes editPulse {
+
+  0%,
+  100% {
+    border-color: rgba(255, 193, 7, 0.3);
+  }
+
+  50% {
+    border-color: rgba(255, 193, 7, 0.6);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes rotateIn {
+  from {
+    opacity: 0;
+    transform: rotate(-180deg);
+  }
+
+  to {
+    opacity: 1;
+    transform: rotate(0);
+  }
+}
+
+@keyframes successPulse {
+
+  0%,
+  100% {
+    box-shadow: 0 4px 15px rgba(0, 184, 148, 0.3);
+  }
+
+  50% {
+    box-shadow: 0 6px 20px rgba(0, 184, 148, 0.5);
+  }
+}
+
+@keyframes shake {
+
+  0%,
+  100% {
+    transform: translateY(-2px);
+  }
+
+  25% {
+    transform: translateY(-2px) translateX(-2px);
+  }
+
+  75% {
+    transform: translateY(-2px) translateX(2px);
+  }
+}