*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  height: 100%;
  font-family: sans-serif;
  font-size: 16px;
  /* avoid viewport-width font sizing which can cause layout overflow */
  scroll-behavior: smooth;
}

body {
  height: 100vh;
  min-width: 100%;
  /* use percent so scrollbar width doesn't force horizontal overflow */
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  /* safety: prevent accidental horizontal scroll from small rounding errors */
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  font-size: 14px;
  position: relative;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: #060d06;
  padding-left: 80px;
}

body * {
  max-width: 100%;
  box-sizing: border-box;
}


:root {
  --primary-color: #4f46e5;
  --bg-hover: #f5f7ff;
  --secbtn-color: #e5e5e5;
  --secbtn-bg: #333436;
  --darkish-bg: #17181a;
  --green-text: green;

  /* Three canonical text sizes */
  --text-xs:   0.72rem;   /* badges, meta labels — 500 weight */
  --text-sm:   0.82rem;   /* body copy, table cells — 400 weight */
  --text-base: 0.9rem;    /* card titles, headings — 600 weight */
}

/* Apply size steps to common recurring elements */
.badge_new, .badge_success, .badge-status, .gen-cost-badge,
small, .text-muted { font-size: var(--text-xs); font-weight: 500; }

.generated_item .item-meta,
.generated_item .prompt-text,
p, td, .form-control, .form-select,
.nav-link { font-size: var(--text-sm); }

.generated_item .item-title,
.card-title, h6,
.prompt_area h3 { font-size: var(--text-base); font-weight: 600; }

.pe-6{
  padding-right: 6rem !important;
}
.toast {
  background: #1F2124;
  color: #f5f5f5;
}
.badge_new {
  padding: 2px 8px;
    border-radius: 15px;
  color: #0dc940;
    background-color: #2a6934;
    border: 1px solid #298b15;
}
.badge_success {
  padding: 2px 8px;
    border-radius: 15px;
    color: #6ae64c !important;
    background-color: #223421;
}
video{
  background-color: #21282a;
}

/* Ensure images inside ratio containers cover the area */
.ratio img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}

/* ensure ratio container positions children relative */
.ratio {
  position: relative;
}

/* ensure download button sits above the overlay */
.position-relative .btn {
  z-index: 3;
}

.play-overlay {
  z-index: 2;
}

/* clickable cursors */
.clickable {
  cursor: pointer;
}

/* play overlay for video thumbnails */
.play-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.45);
  color: white;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

/* remove extra gap above tab inner cards */
.tab-pane>.bg-white {
  margin-top: 0 !important;
}

/* Dark-theme surfaces and controls */
:root {
  --surface-1: #071028;
  /* panels */
  --surface-2: #0b1220;
  /* cards */
  --muted: rgba(255, 255, 255, 0.65);
  --muted-2: rgba(255, 255, 255, 0.45);
  --input-border: rgba(255, 255, 255, 0.06);
}

/* Card / panel surfaces used for image/video grids */
.tab-content .rounded-3.p-3.shadow-sm {
  background: var(--surface-2);
  color: #e6eef8;
  box-shadow: 0 6px 20px rgba(2, 6, 23, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.03);
}

/* Chat window (if present) dark surface */
.chat-window {
  background: var(--surface-1);
  color: #e6eef8;
  border: 1px solid rgba(255, 255, 255, 0.03);
}

/* Inputs & search */
.search_area .input-group-text,
.search_area .form-control {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--input-border);
}

input::placeholder,
textarea::placeholder {
  color: antiquewhite;
}

/* form controls in composer */
.composer .form-control {
  background: transparent;
  color: #e6eef8;
  border: 1px solid var(--input-border);
}

/* asset thumbnails look good on dark */
.asset-thumb {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.03);
}

/* Nav pills on dark background */
.nav-pills .nav-link {
  color: #cfe3ff;
}

.nav-pills .nav-link.active {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

/* Modal into dark surface */
.modal-content {
  background: var(--surface-1);
  color: #e6eef8;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.modal-header,
.modal-footer {
  border-color: rgba(255, 255, 255, 0.03);
}

.modal .btn-close {
  filter: invert(1) brightness(2);
  opacity: .9;
}

/* Buttons: make outline-light more visible on dark */
.btn-outline-light {
  color: #e6eef8;
  border-color: rgba(255, 255, 255, 0.06);
}


/* Composer fixed to bottom */
.composer {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-width);
  right: 0;
  padding: .75rem;
  z-index: 4;
  box-shadow: 0 -6px 18px rgba(20, 24, 40, 0.06);
  transition: transform 0.4s ease-in-out;
}

/* adjust when sidebar collapsed */
.sidebar.collapsed~.main-content .composer {
  left: var(--sidebar-collapsed);
}

/* mobile: composer spans full width */
@media (max-width: 991.98px) {
  .composer {
    left: 0;
  }

  .main-content {
    margin-left: 0;
    width: 100%;
  }
}

/* reserve space so content is not hidden behind composer */
.main-content {
  padding-bottom: 92px;
}

/* Small screens: collapse sidebar into off-canvas */
@media (max-width: 991.98px) {
  .sidebar {
    transform: translateX(-120%);
    z-index: 4;
  }

  .sidebar.show-mobile {
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0;
  }

  /* when off-canvas is open, ensure full width display */
  .sidebar.show-mobile.collapsed {
    width: var(--sidebar-width);
  }
}

/* Ensure ad-cards stack nicely on mobile */
@media (max-width: 575.98px) {
  .ad-wrapper .col {
    margin-bottom: .5rem;
  }
}

/* *****  GALLERIES ***** */

.gallery-wrapper {
  /* padding: 2rem 7rem;  */
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: auto;
  grid-gap: 0.3rem;
  grid-auto-flow: dense;
}

/* Another way to do the same without declaring in the classes - remove h-x w-x from classes */
/* .gallery-wrapper {
  padding: 2rem 10rem;
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(5, 300px);
  grid-auto-rows: 200px;
  grid-gap: 1rem;
  grid-auto-flow: dense;
} */


.gallery-item {
  width: 100%;
  height: 100%;
  position: relative;
  filter: drop-shadow(2px 2px 3px #333);
}

.gallery-item .image {
  width: 100%;
  /* height: 100%; */
  overflow: hidden;
  position: relative;
}

.gallery-item .image img.item_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  cursor: pointer;
  transition: all 400ms ease-in;
  transform: scale(1);
}

.gallery-item .image video.hover-video {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  object-position: 50% 50%;
  cursor: pointer;
  display: block;
  background: #111;
}

.gallery-item .image img:hover {
  transform: scale(1.1);
}

.gallery-item .explpore_creator{
  position: absolute;
  bottom: 5px;
  width: 100%;
  transform: translateY(42px);
  transition: all 400ms ease-in;
  color: #fff;
  text-align: center;
}
.gallery-item .explpore_creator .col-9{
  display: flex;  
  align-items: center;
}
.gallery-item .explpore_creator .col-3{
  position: relative;
}
.gallery-item .explpore_creator button{
    background: transparent;
    border: navajowhite;
    color: #fff;
    padding: 0;
    transition: all 300ms ease-in;
}
.gallery-item .explpore_creator button:hover {
    transform: scale(1.2);
}
.gallery-item .explpore_creator img{
  width: 30px;
  height: 30px;
}

.recreate_btn {
  /* position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 100%); */
  margin-top: 5px;
  padding: 5px 30px;
  transition: all 300ms ease-in;
  background-color: #172c15a8;
  border-radius: 15px;
  min-width: 80%;
}
.recreate_btn:hover {
  background-color: #172c15eb;
}

.gallery-item .image:hover .explpore_creator {
  transform: translateY(0px);
  background: #0000008a;
  box-shadow: 0px 0px 4px 11px #0000008a;
}
/* .gallery-item .image:hover .recreate_btn {
  transform: translate(-50%, -10%);
} */

.w-1 {
  grid-column: span 1;
}

.w-2 {
  grid-column: span 2;
}

.w-3 {
  grid-column: span 3;
}

.w-4 {
  grid-column: span 4;
}

.w-5 {
  grid-column: span 5;
}

.h-1 {
  grid-row: span 1;
}

.h-2 {
  grid-row: span 2;
}

.h-3 {
  grid-row: span 3;
}

.h-4 {
  grid-row: span 4;
}

.h-5 {
  grid-row: span 5;
}

/* ***** LIGHTBOX EFFECT ***** */

#lightbox {
  position: fixed;
  z-index: 5;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .92);
  display: none;
}

#lightbox.active {
  display: flex;
  justify-content: center;
  align-items: center;
}

#lightbox img {
  max-width: 90%;
  max-height: 80%;
  padding: 4px;
  /* border-radius: 1%; */
  /* background-color: white; */
  border: 0.2px solid silver;
}

/* ONLY affects .image_gallery */
.image_gallery .gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-auto-rows: 8px;
  grid-auto-flow: dense;
  gap: 12px;
}
.image_gallery .gallery-item .item_image {
  width: 100%;
  height: auto;
  display: block;
  transition: all 300ms ease-in;
}
.image_gallery .gallery-item button.favorite {
  position: absolute;
  bottom: 0px;
  right: 5%;
  background: transparent;
  border: none;
  transition: all 300ms ease-in;
  color: #fff;
}
.image_gallery .gallery-item button.favorite:hover{
  transform: scale(1.2);
}


/* Generic Styles */
:root {
  box-sizing: border-box;
}



.row {
  margin-right: 0;
  margin-left: 0;
}

img {
  max-width: 100%;
  height: auto;
}

option {
  background-color: #0E0F0F;
}

input,
textarea,
select,
.form-control,
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  background-color: #0E0F0F;
  color: white;
  border: 1px solid #1F2837;
  box-shadow: none;
}

p,
span,
label,
a,
select,
option,
::placeholder {
  font-family: sans-serif;
  font-size: 0.8em;
}


h1 {
  text-align: center;
  padding: 1rem;
  background: -webkit-linear-gradient(130deg, #A155DA, #41B3A3);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media only screen and (max-width: 800px) {
  .gallery-wrapper {
    grid-template-columns: repeat(2, 2fr);
    grid-template-rows: 1fr;
    grid-gap: 2;
    grid-auto-flow: dense;
  }

  .gallery-container:nth-child(3n+2) {
    grid-column: 1 / span 2;
    grid-row-end: span 2;
  }

  .gallery-container:nth-child(4n+3) {
    grid-column: 2 / span 1;
    grid-row-end: span 2;
  }

  /*  reseting the css for the class within the divs to show a different way to achieve grid control using the nth childs*/
  .w-1,
  .w-2,
  .w-3,
  .w-4,
  .w-5 {
    grid-column: span 1;
  }

  .h-1,
  .h-2,
  .h-3,
  .h-4,
  .h-5 {
    grid-row: span 1;
  }

}

@media only screen and (max-width: 400px) {

  /* An example to use combined with flex but could also be grids with different repetition of columns  */
  .gallery-wrapper {
    display: flex;
    flex-direction: column;
    flex: wrap;
    gap: 2.5rem;
    margin: 1rem;
    /* reduced to avoid overflowing the viewport on small screens */
  }
}
































/* aside */
aside {
  font-size: 0.7em;
  background-color: #0E0F0F;
  width: 80px;
  /* height:max-content; */
  /* min-height: 100vh; */
  height: 100vh;
  padding: 5px;
  text-align: center;
  font-weight: 100;
  position: fixed;
  top: 0;
  left: 0;
  /* overflow-y: auto; */
  scrollbar-width: thin;
}
aside .sidebar_items{
  min-height: 100vh;
}

aside .logo {
  padding: 10px;
}

aside .nav-pills .nav-link {
  background: #0A600080;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 5px;
  margin: 3px 0;
  transition: all 0.3s ease;

}

aside .nav-pills .nav-link:hover,
aside .nav-pills .nav-link.active {
  background: #0a6000f8;
}

aside .nav-pills .nav-link img {
  margin-bottom: 3px;
  max-width: 40%;
}

/* ── Sidebar bottom section ─────────────────────────────────────────────────── */

/* Compact wrapper so nothing overflows the 80px aside */
.sidebar-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 4px 6px;
  width: 100%;
}

/* Notification icons — same width as nav links */
.notifiable {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: #a5d6a7;
  padding: 7px 0;
  font-size: 1.1em;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
}
.notifiable:hover { background: #0a600080; color: #fff; }

.dot_badge {
  position: absolute;
  top: 4px;
  right: 14px;
  background: #e53935;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  padding: 0;
}

/* Avatar button */
.sidebar-avatar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #2a5230;
  overflow: hidden;
  flex-shrink: 0;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sidebar-avatar-btn:hover,
.sidebar-avatar-btn--active {
  border-color: #4caf50;
  box-shadow: 0 0 0 3px rgba(76,175,80,0.12);
}
.sidebar-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sidebar-avatar-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: #4caf50;
  background: #152815;
}

/* Credits badge */
aside .credit_info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  text-decoration: none;
  background: #0a1f0a;
  border: 1px solid #2a5230;
  border-radius: 8px;
  padding: 4px 2px;
  line-height: 1.2;
  transition: border-color 0.15s ease, background 0.15s ease;
}
aside .credit_info:hover,
aside .credit_info--active {
  border-color: #4caf50;
  background: #0e2410;
}
.sidebar-credit-icon { color: #ffd54f; font-size: 0.8rem; flex-shrink: 0; }
.sidebar-credit-value { font-weight: 700; color: #c8e6c9; font-size: 0.78rem; }
.sidebar-credit-label { color: #7cb87e; font-size: 0.65rem; }

/* Language toggle — sidebar */
.sidebar-lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #2a5230;
  background: #0e1f0e;
  color: #c8e6c9;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}
.sidebar-lang-btn:hover { background: #152815; border-color: #4caf50; color: #fff; }

/* Language toggle — mobile nav */
.nav-lang-btn {
  background: #0e1f0e;
  border: 1px solid #2a5230;
  border-radius: 14px;
  color: #c8e6c9;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.nav-lang-btn:hover { background: #152815; border-color: #4caf50; color: #fff; }

/* Bengali font when lang=bn */
html[lang="bn"] body,
html[lang="bn"] button,
html[lang="bn"] input,
html[lang="bn"] textarea,
html[lang="bn"] select {
  font-family: 'Hind Siliguri', 'Inter', sans-serif;
}

/* Logout button */
.sidebar-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 34px;
  border-radius: 8px;
  border: none;
  background: #7d1a1a;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
}
.sidebar-logout-btn:hover { background: #c62828; }


/* Aside */
main {
  width: calc(100% - 110px);
  height: 100vh;
  margin: initial;  
}

.ad_section { margin-top: 0.25rem; margin-bottom: 0.5rem; }

.ad_space {
  background: #0e1f0e;
  border: 1px solid #1f3a22;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  width: 100%;
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
/* Aspect-ratio matches native banner dimensions but capped via max-height so
   the whole ad section stays compact. object-fit: cover trims top/bottom
   where needed — banner text is mostly centered so cropping is acceptable. */
.ad_space--hero  { aspect-ratio: 1760 / 528;  max-height: 130px; }
.ad_space--strip { aspect-ratio: 1751 / 202;  max-height: 95px; }

.ad_space:hover {
  border-color: rgba(99, 207, 73, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(99, 207, 73, 0.15);
}

.ad_space .ad_slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.005);
  transition: opacity 0.7s ease, transform 0.9s ease;
  pointer-events: none;
}
.ad_space .ad_slide.active { opacity: 1; transform: scale(1); }
.ad_space .ad_slide:only-child { opacity: 1; transform: scale(1); }
.ad_space:hover .ad_slide.active { transform: scale(1.015); }

.ad_badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: none;
  z-index: 3;
}

/* Nav pills on dark background */
.nav-pills .nav-link {
  color: #cfe3ff;
  font-size: 0.8em;
}

.nav-pills .nav-link.active {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

/* Search Area */
.search_area span {
  background: #fff0;
  color: #f5f5f5;
  cursor: pointer;
}

.search_area input {
  background: #fff0;
}

input#asset-search:focus {
  background: inherit;
  box-shadow: none;
  border: 1px solid #fff;
}

/* Dark-friendly placeholder colors (search, forms, textarea) */
.search_area input::placeholder,
.form-control::placeholder,
textarea::placeholder {
  color: rgba(255, 255, 255, 0.55);
  opacity: 1;
  /* ensure consistent opacity across browsers */
}

/* vendor prefixes */
.search_area input::-webkit-input-placeholder,
.form-control::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.search_area input:-ms-input-placeholder,
.form-control:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.search_area input::-ms-input-placeholder,
.form-control::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.search_area input::-moz-placeholder,
.form-control::-moz-placeholder,
textarea::-moz-placeholder {
  color: rgba(255, 255, 255, 0.55);
  opacity: 1;
}


/* Assets page */

.assets_nav {}

.assets_nav ul {
  display: flex;
}

.assets_nav li {
  padding: 0 10px;
}

.assets_nav li input{
  display: none;
}
.assets_nav li label {
  text-decoration: none;
  padding: 2px 0;
  color: white;
  transition: all 0.5s ease;
}

.assets_nav li label::after {
  content: '';
  display: block;
  width: 100%;
  border-bottom: 1.5px solid #74FF52;
  transform: scaleX(0);
  transition: transform 0.5s ease;
  transform-origin: left;
}

.assets_nav li label.active,
.assets_nav li label:hover {
  color: #74FF52;
}

.assets_nav li label.active::after,
.assets_nav li label:hover::after {
  transform-origin: right;
  transform: scaleX(1);
}


.filter_nav {
  display: inline-block;
  background: #0E0F0F;
  color: white;
  padding: 14px;
}

/* select {
    background: none;
    border: none;
    color: inherit;
   } */

/* Base styles for the container */
.box-container {
  display: flex;
  flex-wrap: wrap;
  /* Allows boxes to wrap to the next line */
  justify-content: space-around;
  /* Distributes space around the items */
  padding: 10px;
  /* max-width: 1200px; */
  /* Optional: Sets a max width for the whole container */
  margin: 0 auto;
  /* Centers the container */
}

.box {
  background-color: white;
  /* The requested white box color */
  border: 1px solid #ccc;
  /* Subtle border for definition */
  margin: 5px;
  height: 100px;
  /* Fixed height for the boxes */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Subtle shadow */
  border-radius: 5px;
}

/* ------------------------------------------------------------------ */
/* 📱 SMALL DEVICES (Default: 2 boxes per row) */
/* The default box styling is for small devices (mobile-first approach) */
.box {
  /* Calculates 50% width minus the horizontal margin to fit two in a row */
  /* width: calc(50% - 10px - 2px); is the full calculation (50% - margin - border) */
  width: calc(50% - 10px);
  /* The 10px margin (5px left + 5px right) and 2px border (1px left + 1px right) 
       are subtracted from 50% to ensure two boxes fit perfectly. 
       We'll simplify the calc for readability, knowing the margin/border is small. */
}

/* ------------------------------------------------------------------ */
/* 💻 LARGE DEVICES (Media Query: 8 boxes per row) */
/* Apply these styles when the screen width is 992px or wider */
@media (min-width: 992px) {
  .box {
    /* Calculates 12.5% (100% / 8) width minus the horizontal margin/border */
    /* width: calc(12.5% - 10px - 2px); is the full calculation */
    width: calc(12.5% - 10px);
  }
}

/* ------------------------------------------------------------------ */
/* 🖥️ OPTIONAL: MEDIUM DEVICES (e.g., Tablet: 4 boxes per row) */
/* Apply these styles when the screen width is 600px or wider */
@media (min-width: 600px) and (max-width: 991px) {
  .box {
    /* Calculates 25% (100% / 4) width minus the horizontal margin/border */
    width: calc(25% - 10px);
  }
}

/* /Assets page */


/* Image Generate page */

.generate_area .prompt_area .card-head div.inline{
  display: inline-block;
  background-color: #17181a;
  padding: 0px 8px;
}
.generate_area {  
  padding-bottom: 10px;
}
.prompt_area {
  background-color: #1c4116;
  color: white;
  border: 1px solid #35533e;
  border-radius: 10px;
  /* position: sticky; */
  /* min-height: calc(100vh - 20px); */
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}
.prompt_area form{
  min-height: calc(100vh - 20px);
  display: flex;
  flex-direction: column;
}

.generate_area .card-head,
.generate_area .card_subhead {
  border-bottom: 1px solid #2a5230;
}
.generate_area .card-head select{
      padding: 6px 20px;
    border-radius: 5px;
    margin: 5px;
    background: transparent;
}

/* Upload component styles moved to public/css/image-upload.css */


.card_footer{
  margin-top: auto;
  border-top: 1px solid #6F7993;
}
.card_footer .btn-success {
    position: relative;
    transition: all 0.3s ease;
    border: none;
    background-color: #198754; /* Bootstrap success green */
    animation: glow-pulse 2s infinite;
}

@keyframes glow-pulse {
    0% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(25, 135, 84, 0); }
    100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}

/* Hover effect to scale slightly */
.card_footer .btn-success:hover {
    transform: translateY(-2px);
    background-color: #157347;
}

/* Right Menu */

.menu_container {
  position: relative;
}

.right_menu .top_right_horizental {
  width: max-content;
  /* position: fixed; */
  margin-left: auto;
  right: 55px;
  background-color: #0E0F0F;
  z-index: 2;
  padding:10px 60px 10px 8px ;
}

.right_menu .top_right_horizental .btn-group a:nth-child(1)::after {
  content: '';
  background-color: #f5f5f5;
  width: 1px;
  height: 12px;
  display: inline-block;
  position: absolute;
  top: 34%;
  right: -1px;
  z-index: 2;
}

.top_right_vertical {
  position: relative;
}

.top_right_vertical .ms-auto {
  height: 0;
  position: relative;
  top: 0;
  width: min-content;
  right: 0;
}




.virticalmenu {
  background: #0A0F1A;
  width: max-content;
  margin-left: auto;
  padding: 4px 2px 14px 2px;
  position: fixed;
  right: 0;
  z-index: 3;
}

.top_right_vertical .ms-auto .nav {
  width: fit-content;
  margin-left: auto;
  border: 1px solid #1f201f;
  border-radius: 12px;
}
.top_right_vertical .ms-auto .nav .nav-link{
  background-color: #141B2D;
  border: 1px solid #192332;
  margin: 7px;
  padding: 6px 10px;
}

.history_navigate {
  position: fixed;
  background: #060d06;
  width: max-content;
  margin-left: auto;
  padding: 4px 15px 15px 15px;
  right: 10px;
  top: 80px;
  height: calc(100vh - 80px);
  max-height: calc(100vh - 80px);
  overflow-y: auto; /* Enable scrolling so user can actually see more items */
  
  -webkit-mask-image: linear-gradient(to top, black 70%, transparent 100%);
  mask-image: linear-gradient(to top, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

.history_navigate::-webkit-scrollbar {
  display: none;
}
.history_navigate {
  -ms-overflow-style: none;  
  scrollbar-width: none;
}

.history_navigate .ms-auto .nav {
  width: fit-content;
  margin-left: auto;
  border-radius: 12px;
}
.history_navigate .nav .nav-link{
  background-color: #141B2D;
  margin: 3px 0;
  padding: 2px;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}
.history_navigate .nav .nav-link:hover,
.history_navigate .nav .nav-link.active{
  border: 1px solid green;
}
.history_navigate img {
    width: 4.5rem;
    border-radius: 10px;
}

/* Generated Item */
.generated_item {
    background-color: #0a190a;
    color: #e8f5e9;
    font-size: 0.7rem;
    border-radius: 10px;
    border: 1px solid #1e3d1e;
    overflow: hidden;
    margin-bottom: 2rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
    animation: cardSlideIn 0.35s ease both;
    will-change: transform;
}

@keyframes cardSlideIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.generated_item:hover {
    border-color: #3a7040;
    box-shadow: 0 6px 32px rgba(40, 167, 69, 0.18), 0 1px 0 rgba(99,207,73,0.07) inset;
    transform: translateY(-1px);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

/* Failed card — left red accent */
.generated_item:has(.bi-x-circle-fill) {
    border-left: 3px solid #7a2a2a;
}
.generated_item:has(.bi-x-circle-fill):hover {
    border-color: #7a2a2a;
    box-shadow: 0 4px 20px rgba(180, 40, 40, 0.12);
}

.generated_item_head {
    background: #091509;
    border-bottom: 1px solid #1e3d1e;
    padding: 6px 10px 4px;
}

.generated_item button {
    color: #c8e6c9;
    background-color: #163d16;
    border: 1px solid #2a5230;
    padding: 3px 8px;
    border-radius: 6px;
    margin: 2px;
    font-size: 0.75rem;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.generated_item button:hover {
    background-color: #1e4d1e;
    color: #ffffff;
    border-color: #3a7040;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.22);
}

.generated_item .btn-danger {
    background-color: #4a1a1a;
    border-color: #7a2a2a;
    color: #ffb3b3;
    animation: retryPulse 2.5s infinite;
}

@keyframes retryPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
    50%       { box-shadow: 0 0 0 5px rgba(220, 53, 69, 0); }
    25%       { box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.35); }
}

.generated_item .btn-danger:hover {
    background-color: #5a2020;
    color: #ffffff;
    animation: none;
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.4);
}

.generated_item .alert-danger {
    background-color: #2a0f0f;
    border-color: #5a2020;
    color: #ffb3b3;
    font-size: 0.8rem;
}

.generated_item .prompt_preview {
    display: block;
    padding: 5px 10px 6px;
    font-size: 0.75rem;
    color: #a5d6a7;
    border-top: 1px solid #1e3d1e;
    transition: color 0.2s ease;
}

.generated_item:hover .prompt_preview {
    color: #c8e6c9;
}
.generated_item_body{
  font-size: 0.9rem;
}
.generated_item_body .item {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    cursor: pointer;    
    position: relative;
    background: #1A1B1B;
    overflow: hidden;
}

/* The shimmer overlay */
.generated_item_body .item.generating::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg, 
        transparent, 
        rgba(255, 255, 255, 0.05), 
        transparent
    );
    transform: translateX(-100%);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}
.generated_item_body .generating i {
    font-size: 0.65rem;
    margin: -5px;
}
/* The animation definition */
@keyframes glow-green {
  0%, 100% { color: inherit; } /* Default color */
  50% { color: #28a745; }      /* Bootstrap green */
}

.generating i {
  animation: glow-green 1.2s infinite;
  display: inline-block;
}

/* Delay each icon by 0.1s to create the "one by one" effect */
.generating i:nth-child(2) { animation-delay: 0.1s; }
.generating i:nth-child(3) { animation-delay: 0.2s; }
.generating i:nth-child(4) { animation-delay: 0.3s; }
.generating i:nth-child(5) { animation-delay: 0.4s; }
.generating i:nth-child(6) { animation-delay: 0.5s; }
.generating i:nth-child(7) { animation-delay: 0.6s; }


.generated_item_body .item.generated img {
    height: 100%;
    width: auto;
    transition: transform 0.4s ease, filter 0.4s ease;
    animation: imageFadeIn 0.4s ease both;
}

@keyframes imageFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.generated_item_body .item.generated:hover img {
    transform: scale(1.045);
    filter: brightness(1.08);
}

/* Overlay action buttons — fade in on item hover (pointer devices only) */
@media (hover: hover) {
    .dl-btn-overlay {
        opacity: 0;
        transition: opacity 0.2s ease, background 0.2s ease, transform 0.18s ease, box-shadow 0.18s ease;
        transform: translateY(4px);
    }
    .dl-wrapper:hover .dl-btn-overlay,
    .dl-btn-overlay:focus-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

.dl-btn-overlay:hover {
    background: rgba(0,0,0,0.88) !important;
    transform: translateY(-2px) scale(1.07) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}

/* Generated Item Preview modal */
/* Generated-image preview modal styles moved to public/css/generated-preview.css */

/* Dashboard Video Section */

.upimgbox {
  background-color: var(--darkish-bg);
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.upimgbox .upload-inner{
  text-align: center;
}
.upimgbox button{
  color: var(--secbtn-color);
  background-color: transparent;
  border: none;
  padding: 3px 6px;
  border-radius: 5px;
  margin: 8px 2px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.upimgbox button:hover,
.upimgbox button.active{
  background-color: var(--secbtn-bg);
}



.upimgbox #drop-zone {
  border: 1px solid #313131;
  border-radius: 12px 12px 0 0;
  padding: 5px;
  text-align: center;
  transition: all 0.3s ease;
  background: transparent;
  cursor: pointer;
  margin: 0 5px 0 5px;
}

.upload-container.drag-over {
  border-color: var(--primary-color);
  background-color: var(--bg-hover);
  transform: scale(1.02);
}

.upload-icon {
  color: #94a3b8;
  margin-bottom: 15px;
}

.browse-link {
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: underline;
}

/* .preview-grid styles moved to public/css/image-upload.css */

.hints{
  border: 1px solid #313131;
  border-radius: 0 0 12px 12px;
  text-align: center;
  transition: all 0.3s ease;
  margin: -1px 5px 0px 5px;
  padding: 5px;
}
.hints_horizontal{
  background-color: var(--darkish-bg);
}

.generated_item_body video{
  border-radius: 6px 6px 0 0;
}
.generated_item.video{
  border-radius: 0 0 6px 6px;
}
.video_actions{
  background-color: #000000;
    margin-top: -15px;
    border-radius: 0 0 6px 6px;
    position: relative;
    padding-bottom: 10px;
}
.video_actions button{
  background-color: transparent;
  position: relative;
}
.video_actions .nav-item{
  position: relative;
}

.video_actions .nav-item:nth-child(1)::after,
.video_actions .nav-item:nth-child(2)::after,
.video_actions .nav-item:nth-child(3)::after,
.video_actions .nav-item:nth-child(8)::after{
  content: "";
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  right: 0;
  width: 1px;
  height: 50%;
  background: #3d4042;
}

/* Custom Select Options */
.custom-select {
  position: relative;
  width: 240px;
  padding: 3px 10px;
  display: inline-block;
}

button.select-trigger {
    background: #1a2718;
    width: 100%;
    text-align: left;
    color: aliceblue;
    border: 1px solid #444d43;
    border-radius: 7px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 6px 30px 6px 10px;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

button.select-trigger:hover {
    border-color: #5a7a55;
    background: #1f2e1c;
}

.custom-select.active button.select-trigger {
    border-color: #3a7040;
    box-shadow: 0 0 0 2px rgba(99,207,73,0.07);
}
button.select-trigger::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    
    /* Icon styling */
    background-color: currentColor; /* Controls icon color */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.options-list {
  display: none; /* Hide by default */
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 100%;
  width: max-content;
  max-height: 280px;
  overflow-y: auto;
  background: #0f351b;
  list-style: none;
  padding: 0;
  z-index: 10;
  color: aliceblue;
}

.options-list  li{
  padding: 4px 10px;
  border-width: 1px 0px;
  border-color: #0f351b;
  border-style: solid;
  margin-top: -1px;
  white-space: nowrap;
}
button.select-trigger span,
.options-list  li span{
    background: #223421;
    color: #63cf49;
    padding: 3px 6px;
    border-radius: 5px;
    font-size: 0.8rem;

}

.custom-select.active .options-list {
    display: block;
    animation: optionsFadeIn 0.15s ease both;
}

@keyframes optionsFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.options-list li {
    transition: background 0.12s ease, color 0.12s ease;
    cursor: pointer;
}

.options-list li.active,
.options-list li:hover {
    background-color: #14431e;
    cursor: pointer;
}

/* #output_options styles moved to public/css/output-options.css */


#__socialShareMenu {
    background:#111;
    border-radius:6px;
    padding:6px;
    box-shadow:0 5px 20px rgba(0,0,0,.3);
}
#__socialShareMenu .__share-list {
    list-style:none;
    margin:0;
    padding:0;
}
#__socialShareMenu .__share-list li {
    padding:6px 12px;
    cursor:pointer;
    color:#fff;
    font-size:13px;
}
#__socialShareMenu .__share-list li:hover {
    background:#222;
}


#video_generate_area .generate_area .tab-content{
  height: 100vh;
}
#video_generate_area .generate_area .tab-content>.active{
  height: -webkit-fill-available;
    display: flex;
    flex-direction: column;
}