/********** GENERAL **********/
.no-scroll {
	overflow: hidden !important;
}

.general-canvas {
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 60px;
	min-height: calc(100vh - 74px);
}

.ast-container {
	max-width: 100% !important;
}

a:focus{
	color:inherit;
	outline: none;
}

@media screen and (max-width: 767px) {
	.general-canvas {
		padding-left: 4%;
		padding-right: 4%;
	}
}

@media screen and (max-width: 1023px) {
	.site-content .ast-container {
		display: flex;
		flex-direction: unset;
	}
}




/**********TEMP **********/
[data-settings*="fadeIn"].elementor-invisible {
  visibility: visible; 
  opacity: 0;
  animation: stFadeInEffect 1.25s ease-in-out forwards;
}

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

#prompt-page-old-elementor-gone {
	position: unset;
}

#promptsuggestions {
	width: 100%;
	margin-top: 15px;
	margin-bottom: 0px;
	padding: 0% 15% 0% 15%;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	border-radius: 5px;
}

button.suggestion {
	padding: 10px 20px;
	border: 1px solid grey;
	color: black;
	font-weight: 400;
	border-radius: 50px;
	cursor: pointer;
	transition: background-color 0.3s ease-in-out;
}

button.suggestion:hover {
	background-color: #ffebcf;
}

@media screen and (max-width: 1023px) {
	#promptsuggestions {
		padding: 0% 10% 0% 10%;
	}
}

@media screen and (max-width: 767px) {
	#promptsuggestions {
		padding: 0;
	}
}




/********** BANNER **********/
#free-model-banner {
	display:none;
	background: #ff9300;
	padding: 10px 15px;
	position: relative;
}

#activate-before-free {
	color: #ff9300;
}




/********** HEADER **********/

/* ─── 0. CSS variables ───────────────────────── */
:root{
  --clr-text-dark: #000;
  --clr-text-light:#fff;
  --header-height: 70px;
}



/* ─── 1. Layout wrappers ───────────────────────────────── */
.im-header{
	position:relative;
	z-index:2;
	border-bottom:1px solid #ededed;
	transition: 0.2s border-color  ease-in-out
}

.ast-theme-transparent-header .im-header {
	border-color: transparent;
        position: absolute;
        left: 0;
        right: 0;
}

.header__inner{
	display:flex;
	justify-content:space-between;
	align-items:center;
	min-height:var(--header-height);
	gap: 10px;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 20px;
	padding-bottom: 15px;
}

.header__left{
	display:flex;
	align-items:center;
	gap:20px;
}

.header__right{
	display:flex;
	align-items:center;
	gap:15px;
}

@media(max-width:1023px){
		.header__left {
			gap: 10px;
		}
}

@media(max-width:767px){
	.header__inner {
		padding-left: 4%;
    padding-right: 4%;
	}
	
	.header__right {
		flex-wrap: wrap;
		justify-content: end;
		gap: 10px;
	}
}

.header__right--tight {
    gap: 0;
}



/* ─── 2. Logo ──────────────────────────────────────────── */
.header__logo, .header__logo:focus {
    flex: 0 0 auto;
    outline: none;
}

.header__logo-img, .header__logo img {
	height:35px;
	display:block
}

.header__logo-shape {
    transition: 0.2s fill ease-in-out;
}

.ast-theme-transparent-header .header__logo-shape {
    fill: var(--clr-text-light);
}



/* ─── 3. Primary menu ─────────────────────────────────── */
.header__menu{
	display:flex;
	gap: 0px 15px;
	list-style:none;
	margin:0;
	padding:0;
	flex-wrap: wrap;
}

.header__link{
	font-size:20px;
	color:var(--clr-text-dark);
	text-decoration:none;
	transition: .2s all ease-in-out;
	opacity: 0.75;
}

.ast-theme-transparent-header .header__link {
    color:var(--clr-text-light);
	opacity: 0.85
}

.header__link:hover, .header__link:focus {
	color:var(--clr-text-dark);
	opacity: 1;
	outline:none;
}

.ast-theme-transparent-header .header__link:hover, .ast-theme-transparent-header .header__link:focus {
    color:var(--clr-text-light);
}

@media screen and (max-width: 1023px) {
    .header__link {
        font-size: 16px;
    }
}



/* ─── 4. Stats (free models & credits) ─────────────────── */
.header__stats{
	display:flex;
	gap:15px;
	font-size:15px;
	align-items:center;
	color: var(--clr-text-dark);
	transition: 0.2s color ease-in-out;
}

.ast-theme-transparent-header .header__stats {
	color: var(--clr-text-light);
}

.header__stat{
	white-space:nowrap;
	position: relative;
}

.header__stat-models {
	font-weight: 600;
}

.header__stat--grey {
	cursor: pointer;
}

.header__stat--grey::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent;
    z-index: -1;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.header__stat--grey:hover::before {
    left: -5px;
    right: -5px;
    background: rgba(0, 0, 0, 0.05);
}

@media screen and (max-width: 1023px) {
    .header__stats {
        font-size:13.7px;
    }
}

@media(max-width:767px) {
	.header__stats {
		flex-wrap: wrap;
		justify-content: end;
		gap: 10px;
	}
}

/* ─── 5. Discord ───────────────────────────────────────── */
.header__discord {
	flex: 0 0 auto;
}

.header__discord img{
	height:25px;
	display:block
}

/* ─── 6. Sign in/sign up ───────────────────────────────────────── */
.header__link--btn {
    font-weight: 600;
    padding: 12px 14px;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    opacity: 1;
	white-space: nowrap;
}

.header__link--btn-black, .header__link--btn-black:hover, .header__link--btn-black:focus {
    background: black;
    color: white;
    border-radius: 5px;
}


/* ─── 7. Account dropdown (desktop) ───────────────────── */
.header__account {
    position: relative;
}

.header__account-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    width: 30px;
    height: 21px;
    cursor: pointer;
    background: none;
    outline: none;
    border: none;
    padding: unset;
    line-height: unset;
    font-size: unset;
    transition: 0.35s all ease-in-out;
}

.header__account-bar {
	display:block;
	width:100%;
	height:3px;
	background:var(--clr-text-dark);
	transition: .2s all ease-in-out;
}

.ast-theme-transparent-header .header__account-bar {
	background: white;
}

.header__account-bar--last {
    width: 75%;
    margin-inline-start: auto;
}

.dropdown__menu{
	position: absolute;
	top: calc(100% + 5px);
	inset-inline-end: 0;
	width: 200px;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
	opacity: 0;
	pointer-events: none;
	transform: translateY(-10px);
	transition: .2s;
}

.active .dropdown__menu{
	opacity:1;
	pointer-events:auto;
	transform:translateY(0)
}

.dropdown__links {
    display: flex;
    flex-direction: column;
    padding: 5px 10px;
    font-size: 15px;
}

.dropdown__button, .dropdown__button:hover, .dropdown__button:focus {
    margin-bottom: 5px;
    padding: 8px 0;
    color: white;
    background-color: black;
    text-align: center;
    border-radius: 5px;
    font-size: inherit;
    font-weight: normal;
    border: none;
}

.dropdown__link {
    text-decoration: none;
    color: var(--clr-text-dark);
    padding: 2.5px 0;
    border-radius: 4px;
    opacity: 0.6;
	position: relative;
}

.dropdown__link:hover, .dropdown__link:focus {
    opacity: 1;
    color: var(--clr-text-dark);
    outline: none;
}

.dropdown__link::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent;
    z-index: -1;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.dropdown__link:hover::before {
    left: -5px;
    right: -5px;
    background: rgba(0, 0, 0, 0.04);
}

.dropdown__separator{
	height:1px;
	background:#eee;
	margin:5px 0
}

.dropdown__footer {
    font-size: 11px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 5px;
    line-height: 1.5;
}

.dropdown__footer-link:hover, .dropdown__footer-link:focus {
    outline: none;
}



/* ─── 8. Mobile burger ─────────────────────────────────── */
.header__burger{
		display: none;
    position: relative;
    width: 30px;
    height: 21px;
    cursor: pointer;
    background: none;
    outline: none;
    border: none;
    padding: unset;
    line-height: unset;
    font-size: unset;
    transition: 0.35s all ease-in-out;
	z-index: 1;
}

.header__burger.cross {
    width: 21px;
}

.header__burger-bar {
	position:absolute;
	height:3px;
	width:100%;
	background:var(--clr-text-dark);
	inset-inline-start: 0;
	transition:.35s
}

.ast-theme-transparent-header .header__burger-bar {
	background:white;
}

.header__burger-bar:nth-child(1){
	top:0
}

.header__burger-bar:nth-child(2){
	top:calc(50% - 1.5px)
}

.header__burger-bar:nth-child(3){
	top:calc(100% - 3px);
	width:75%;
	inset-inline-start: unset;
  inset-inline-end: 0;
}

.cross .header__burger-bar {
	background: white;
}

.cross .header__burger-bar:nth-child(1){
	transform:rotate(45deg);top:9px
}

.cross .header__burger-bar:nth-child(2){
	opacity:0
}

.cross .header__burger-bar:nth-child(3){
	transform:rotate(-45deg);
	top:9px;
	width:100%
}

/* ── hide desktop stuff, show burger below 768px ────────────── */
@media(max-width:767px){
	.header__nav,
  .header__discord,
  .header__account,
	.header__link--btn{
		display:none
	}
	
  .header__burger{
		display:block
	}
}



/* ─── 9. Mobile slide-out ──────────────────────────────── */
.header__mobile {
    position: fixed;
    top: 0;
    inset-inline-start: -100%;
    width: 100%;
    height: 100%;
    bottom: 0;
    background: #000;
    color: #fff;
    transition: 0.3s ease-in-out;
}

.header__mobile.menu-open{
	inset-inline-start: 0;
}

.header__mobile::-webkit-scrollbar {
    width: 6px;
    background-color: #6a6a6a;
}

.header__mobile::-webkit-scrollbar-thumb {
    background-color: #ffffff;
    border-radius: 10px;
}

.header__mobile::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #6a6a6a;
    border-radius: 10px;
}

.header__mobile-inner {
    height: 100%;
    overflow-y: auto;
    text-align: center;
    padding-top: 90px;
    padding-bottom: 50px;
}

.header__mobile-cta{
	margin-bottom:50px;
	display: flex;
  flex-direction: column;
  align-items: center;
	gap: 15px;
}

.header__mobile-btn {
    font-size: 24px;
    padding: 20px 45px;
    border-radius: 10px;
    border: 0;
    color: #fff;
    background: linear-gradient(136deg, #ff3dbd99, #ff4d0099);
    cursor: pointer;
    transition: 0.15s all ease-in-out;
}

.header__mobile-btn:hover, .header__mobile-btn:focus {
    box-shadow: 0 0 40px 10px rgba(255, 61, 189, 0.4), 0 0 20px rgba(255, 77, 0, 0.4);
    color: white;
}

.header__mobile-btn-link, .header__mobile-btn-link:hover, .header__mobile-btn-link:focus {
    font-weight: 600;
    font-size: 24px;
    padding: 20px 45px;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    transition: 0.15s all ease-in-out;
    border: 2px solid rgba(255, 77, 0, 0.6);
    outline: none;
}

.header__mobile-btn--signup {
    background: linear-gradient(136deg, #ff3dbd99, #ff4d0099);
    border: none;
}

.header__mobile-btn--signup:hover, .header__mobile-btn--signup:focus {
    border: none;
    box-shadow: 0 0 40px 10px rgba(255, 61, 189, 0.4), 0 0 20px rgba(255, 77, 0, 0.4);
}

.header__mobile-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.header__mobile-link {
    font-size: 24px;
    color: #fff;
    text-decoration: none;
    line-height: 1.25;
}

.header__mobile-link:hover, .header__mobile-link:focus {
    outline: none;
    color: white;
    opacity: 0.7;
}

.header__mobile-separator {
    width: 130px;
    height: 1px;
    margin: 30px auto 20px;
    background: linear-gradient(136deg, #ff3dbd99, #ff4d0099);
}

.header__mobile-discord img {
    width: 52px;
    margin: 30px auto 0;
}



/* ─── 10. Progress bar ──────────────────────────────── */
.header__progress {
    display: flex
;
}

.header__progress-bar {
    background: #ff9300;
    width: 0%;
    height: 3px;
    opacity: 0;
	/* transition: 0.2s opacity ease-in-out;
	transition: 6s width ease-in-out; */
}

html.is-progress .header__progress-bar {
	opacity: 1;
	width: 90%;
}




/********** FOOTER **********/

/* ───── CSS variables (easy theming) ───── */
:root{
  --footer-text:   #fff;
  --footer-link: #fff;
  --footer-link-h: #fff;
  --footer-gap-header: 20px;
	--footer-gap-header-mobile: 15px;
  --footer-gap-list: 7px;
	--footer-column: 15px;
  --footer-gap: 50px;
	--footer-gap-mobile: 30px;
}

/* ───── Structure / layout ───── */
.im-footer{
  font-size: 15px;
}

.footer__inner{
  display: flex;
  flex-direction: column;
  gap:var(--footer-gap);
  padding: 45px 10% 75px;
  font-size: 15px;
}

.footer__grid {
    display: grid;
    grid-template-columns: 20% 1fr;
    gap: 20%;
}

@media(max-width:1023px){
	.footer__inner{
		padding: 45px 60px 75px;
	}
	
		.footer__grid {
			grid-template-columns: 25% 1fr;
			gap: 10%;
		}
}

@media(max-width:767px){
	.footer__inner{
		gap: var(--footer-gap-mobile);
		padding: 45px 4% 60px;
	}
	
	.footer__grid {
    grid-template-columns: unset;
    gap: var(--footer-gap-mobile);
	}
}



/* Brand */
.footer__brand{
	display:flex;
	flex-direction:column;
	gap: var(--footer-gap-header);
}

h2.footer__logo{
	margin:0;
	font-size: 25px;
	line-height:1.2;
	color: var(--footer-link-h);
}

.footer__tagline{
	margin:0;
	opacity: .85;
	font-size: 15px;
	color: var(--footer-text);
}

.footer__social{
	display:flex;
	gap: var(--footer-gap-header);
	list-style:none;
	padding:0;
	margin:0;
}

.footer__social-link{
	display:inline-block;
	width: 25px;
}

.footer__social-link:focus-visible{
	outline:2px dashed var(--footer-link-h);
	outline-offset:2px;
}

@media(max-width:767px){
	.footer__brand{
		gap: var(--footer-gap-header-mobile);
	}
}



/* Navigation groups (Company / Support / Resources) */
.footer__nav {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--footer-column);
}

.footer__group{
	display:flex;
	flex-direction:column;
	gap: var(--footer-gap-header);
}

h3.footer__heading{
	margin: 0 0 0;
	font-size: 20px;
	color: var(--footer-link-h);
}

.footer__list,
.footer__lang-list{
	list-style:none;
	padding:0;
	margin:0;
	display:flex;
	flex-direction:column;
	gap: var(--footer-gap-list);
}

.footer__languages {
    display: flex;
    flex-direction: column;
    gap: var(--footer-gap-header);
}

.footer__lang-list{
	flex-wrap:wrap;
	row-gap:3px;
	flex-direction:row;
}

.footer__lang-list li:not(:last-child)::after {
    content: "•";
    color: var(--footer-link);
    margin-inline-start: var(--footer-gap-list);
}

.footer__list li a, .footer__lang-list li a {
    color: var(--footer-link);
}

@media(max-width:767px){
	.footer__group{
		gap: var(--footer-gap-header-mobile);
	}
}

@media(max-width:479px){
	.footer__nav {
			grid-template-columns: 1fr 1fr;
			gap: 30px var(--footer-column);
	}
}

/* Use cases — automatic columns */
.footer__usecases{
  --columns: 3;
  display: flex;
  flex-direction: column;
  gap: var(--footer-gap-header);
}

.footer__usecases-list{
  list-style:none;
  padding:0;
  margin:0;
  column-count:var(--columns);
  column-gap: var(--footer-column);
}

.footer__usecases-list li{
	break-inside:avoid;
	margin-bottom: var(--footer-gap-list);
}

.footer__usecases-list li a {
    color: var(--footer-link);
}

@media(max-width:479px){
  .footer__usecases{
		--columns: 2;
	}
}


/********** SIGN IN/SIGN UP POPUP (NOT LOGGED IN) **********/

/* ─── 0. Sign in/sign up modal ───────────────────────── */
.modal {
	display: none;
	align-items: center; /* Aligns vertically center */
	justify-content: center; /* Aligns horizontally center */
	position: fixed;
	z-index: 100;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7); /* Using rgba for better readability */
}

#popup-modal-container {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.modal-nav {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 9px 15px 0px;
}

#popup-modal-container .modal-content {
	background-color: #fefefe;
	margin: auto; /* Ensures margin is auto in all directions */
	padding: 30px 5px;
	border: 1px solid gray;
	border-radius: 10px;
	max-width: 390px; /* Adjusts max-width for larger screens */
	width: inherit;
	box-sizing: border-box; /* Ensures padding doesn't affect width */
	display: flex; /* Makes the content flex-container */
	flex-direction: column; /* Aligns children vertically */
	justify-content: center; /* Centers children vertically */
	position: relative;
	max-height: 90vh;
	overflow: hidden;
}

.panel-container {
	position: relative;
	width: 100%;
	/* Take full width of the parent (.modal-content) */
	min-height: 20vh;
	overflow: hidden;
	transition: opacity 0.3s ease;
	overflow-y: auto;
}

.panel-container::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
	background-color: #F5F5F5;
	border-radius: 10px;
}

.panel-container::-webkit-scrollbar
{
	width: 6px;
	background-color: #F5F5F5;
}

.panel-container::-webkit-scrollbar-thumb
{
	background-color: #C8CBCE;
	border-radius: 10px;
}


.modal .panel {
	position: absolute;
	top: 0;
	left: 25px;
	width: inherit;
	opacity: 0;
	visibility: hidden;
	transition: all 0.15s ease-in;
	pointer-events: none;
	width: calc(100% - 50px);
}

.panel>* {
	width: 100%;
}

.modal-header h2, .modal-header h3 {
	margin: 0;
	margin-top: 10px;
	line-height: 1;
	font-size: 32px;
}

#close-button,
#back-button {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

#close-button:hover,
#close-button:focus,
#back-button:hover,
#back-button:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

@keyframes rotate-animation {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(25deg);
	}
}

#close-button,
#back-button {
	opacity: 0.6;
	max-width: 15px;

}

#close-button:hover,
#back-button:hover {
	opacity: 1;
}

#back-button {
	float: left;
	transform: scaleX(-1);
	display: none;
}

.sign-in-divider {
	display: flex;
	align-items: center;
	text-align: center;
	margin: 25px 0;
}

.sign-in-divider-line {
	flex-grow: 1;
	border: none;
	margin: 0;
}

.sign-in-divider-text {
	padding: 0 15px;
	color: #878787;
	font-size: 13px;
	line-height: 1.25;
}

.signup-prompt {
	text-align: center;
	margin-bottom: 45px;
	margin-top: 5px;
	font-size: 17px;
	line-height: 1.25;
}

.signup-prompt a {
	color: #F76A6A;
	text-decoration: none;
	font-weight: bold;
}

.modal-header {

	text-align: center;
}

.modal-header h2 {
	margin: 0;
}

.email-button, #um-submit-btn {
/* 	background: #F76A6A !important; */
	background: black !important;
	position: relative;
	color: white !important;
	border: none;
	outline: none;
	cursor: pointer;
	font-size: 15px;
	text-align: center;
	overflow: hidden;
	border-radius: 5px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 100% !important;
	padding: 12px 20px;
	height: 52px;
	font-weight: 600 !important;
}

.parent-container {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}

#register-policy {
	display: none;
	margin: 0;
	margin-top: 25px;
	line-height: 1.25;
	font-size: 14px;
}

.panel-context {
	text-align: center;
	color: black;
}

.modal .sign-in-page-social-btn-container {
	display: flex;
    justify-content: center;
    align-items: center;
    max-width: 400px;
    border-radius: 5px;
    height: 52px;
    margin: 0 auto;
    border: solid 1px #DEDEDE;
    width: 100%;
}

.modal .sign-in-page-social-btn-container:not(:last-child) {
	margin-bottom: 10px;
}

.modal .sign-in-page-social-btn-container:hover {
	background: rgba(247, 106, 106, 0.15);
}

.sign-in-page-social-btn-container img {
	  vertical-align: middle;
    color: black;
    width: 28px;
    margin-right: 15px;
}

#sign-in-page-social-img-facebook {
    width: 30px;
}

.sign-in-page-social-btn-container span {
    vertical-align: middle;
    color: black;
    font-weight: 600;
    font-size: 15px;
}


#username-715,
#user_password-715,
#user_email-714,
#user_password-714,
#confirm_user_password-714 {
	border: none !important;
	border-bottom: 2px solid #DEDEDE !important;
	padding: 0px !important;
	transition: 0.5s all;
	color: #878787 !important;
	font-size: 17px !important;
}

.modal .um-field:first-child {
	padding: 0;
}

.modal .um-field-c > div {
	margin: 0 0 30px 0 !important;
}

.hidden {
	opacity: 0;
	pointer-events: none;
	/* Prevents interacting with the container while it's hidden */
}



.modal .panel.active {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
	pointer-events: inherit;
}

/* Slide out to the right */
.slide-out-right {
	transform: translateX(100%);
}

/* Slide in from the left */
.slide-in-left {
	transform: translateX(-100%);
}

/* Slide out to the left */
.slide-out-left {
	transform: translateX(-100%);
}

/* Slide in from the right - initially positioned off-screen to the right */
.slide-in-right {
	transform: translateX(100%);
}

.signup-prompt a {
	cursor: pointer;
}

.native-login {
	padding: 0px 50px;
}

.social-link {
	max-width: unset;
}

@media (max-width: 767px) {
	#popup-modal-container .modal-content {
		width: 92vw;
		padding: 20px 5px;
		padding-top: clamp(20px, 4vw, 30px);
		padding-left: clamp(15px, 3vw, 30px);
		padding-right: clamp(15px, 3vw, 30px);
		padding-bottom: clamp(20px, 4vw, 30px);
	}

	.modal-nav {
		padding-top: clamp(4px, 1vw, 9px);
		padding-right: clamp(10px, 2vw, 15px);
		padding-left: clamp(10px, 2vw, 15px);
	}

	.modal-header h2, .modal-header h3 {
		font-size: clamp(24px, 6vw, 32px);
	}

	.signup-prompt {
		margin-bottom: 30px;
		font-size: clamp(15px, 3.8vw, 17px);
	}

	.sign-in-divider {
		margin-top: clamp(20px, 5vw, 25px);
		margin-bottom: clamp(20px, 5vw, 25px);
	}
	
	.modal .panel {
		left: 10px;
		width: calc(100% - 20px);
	}
}

.modal-content__load-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.7);
	display: none;
}

.modal-content__load-img {
	filter: invert(1);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 70px;
	opacity: 0.5;
}



/* ─── 1. Sign in/sign up forms ───────────────────────── */
.created-signin-form-container:not(:first-child) {
	margin-top: 30px;
}

.created-signin-form label {
	color: black;
	font-size: 15px;
}

.created-signin-form-container label {
	position: absolute;
	left: -105%;
}

.created-signin-form-container input {
	width: 100%;
	border: none !important;
	border-bottom: 2px solid #DEDEDE !important;
	padding: 5px 0px !important;
	transition: 0.5s all;
	color: #878787 !important;
	font-size: 17px !important;
	outline: none;
	background: white;
}

.created-signin-form-container .created-signin-password-container input {
	padding-right: 25px !important;
}

.created-signin-password-container .created-signin-toggle-visible {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	height: 20px;
	width: 20px;
	object-fit: cover;
	border-radius: 50%;
	cursor: pointer;
}

.forgot-password-form .created-signin-password-container .created-signin-toggle-visible {
	right: 7px;
}

.created-signin-form-container input::placeholder {
	color: gray;
}

.created-signin-password-container {
    position: relative;
}

.created-signin-error {
	color: #E35D54;
	padding: 10px 0 0;
	display: none;
}

.created-signin-form-extra-container {
	display: flex;
	justify-content: space-between;
	margin-top: 17px;
	align-items: center;
}

.created-signin-form-extra-container > div {
	display: flex;
	align-items: center;
	gap: 5px;
	position: relative;
}

#created-signin-rememberme {
	display: none;
}

.created-signin-checkbox {
	width: 20px;
	height: 24px;
	margin-left: 1px;
}

label.created-signin-checkbox i {
	font-size: 20px;
	line-height: 24px;
	color: #aaa;
	transition: all .2s linear;
}

#created-signin-rememberme:checked + label.created-signin-checkbox i {
	color: #F76A6A;
}

label.created-signin-checkbox i::before {
	font-family: "Font Awesome 5 Free";
	font-style: normal!important;
	font-weight: 400!important;
	font-variant: normal!important;
	text-transform: none!important;
	speak: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

label.created-signin-checkbox i::before {
	content: "\f096";
}

#created-signin-rememberme:checked + label.created-signin-checkbox i::before {
	content: "\f14a";
}

.created-signin-form-forgot {
	color: gray!important;
	cursor: pointer;
	font-size: 15px;
}

.created-signin-form > div:last-child {
    position: relative;
    margin-top: 30px;
    overflow: hidden;
    border-radius: 5px;
}

form .created-signin-form-btn {
	width: 100%;
	border: none;
	outline: none;
	background: black !important;
	color: white !important;
	min-height: 47px;
	transition: 0.3s all ease-in-out;
}




/********** GET CREDITS WIDGET/BUY CREDITS POPUP (LOGGED IN) **********/

/* ─── 0. Standard get credits modal ───────────────────────── */
.get-credits-background {
	position: fixed;
	background: #000000b2;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 10;
	display: none;
}

.get-credits-wrapper {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.get-credits-container {
	border-radius: 10px;
	box-shadow: 0 0 0 1px #8898aa1a, 0 2px 5px 2px rgba(0, 0, 0, .1);
	background: white;
	max-width: 500px;
	width: 100%;
	padding: 30px 30px 25px;
	position: relative;
	transition: 0.15s all ease-in-out;
}

.get-credits-close-btn {
	position: absolute;
	right: 0;
	top: 0;
	width: 45px;
	padding: 15px;
	display: inline-flex;
	cursor: pointer;
}

.get-credits-close-btn img {
	pointer-events: none;
	transition: 0.15s all ease-in-out;
}

.get-credits-container .get-credits-title {
	text-align: center;
	font-size: 22px;
	line-height: 1;
	margin-bottom: 10px;
}

.get-credits-description {
	margin: 0;
	line-height: 1.25;
	text-align: center;
	font-size: 13px;
	color: black;
	margin-bottom: 20px;
}

.get-credits-description > span {
	font-weight: 600;
	display: none;
}

.get-credits-credits-display-container {
	position: relative;
}

.get-credits-circle-container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.get-credits-circle {
	fill: #ED8A19;
	filter: url(#get-credits-dropshadow);
}

.get-credits-container .get-credits-credit-amount {
	font-weight: 600;
	font-size: 18px;
	color: black;
	text-align: center;
	margin-bottom: 0px;
	margin-top: 0px;
	line-height: 1;
}

.get-credits-value-container {
	margin: 0;
	margin-bottom: 20px;
	font-size: 13px;
	text-align: center;
	color: black;
}

.get-credits-credits-choise-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin-bottom: 30px;
}

.get-credits-credits-choise-wrapper > div {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f1f1f1;
	border-radius: 300px;
	padding: 0 10px;
	transition: 0.15s all ease-in-out;
}

.get-credits-additive-btn {
	height: 30px;
	width: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	position: relative;
}

.get-credits-additive-btn:hover {
	opacity: 0.75;
}

.get-credits-additive-btn > div {
	background-color: #ED8A19;
	width: 16px;
	height: 3px;
	border-radius: 5px;
	transition: 0.15s all ease-in-out;
}

.get-credits-additive-btn > div:nth-child(2) {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(90deg);
}

.get-credits-input-container {
	margin-left: 12px;
	margin-right: 12px;
	border-radius: 4px;
	display: inline-flex;
	font-weight: 600;
	line-height: 1.15;
}

.get-credits-input-container > span {
	color: black;
}

#get-credits-input {
	padding: 0;
	min-width: 2ch;
	width: 2ch;
	max-width: 9ch;
	padding-left: 0px;
	border: unset;
	background-color: unset;
	outline: 0 none;
	color: black;
	text-align: center;
	display: inline-flex;
	font-weight: 600;
	flex: 0 0 auto;
	line-height: 1.15;
	transition: 0.15s all ease-in-out;
}

.get-credits-btn-wrapper {
	display: flex;
	justify-content: center;
	margin-bottom: 30px;
}

.get-credits-btn-cotainer {
	position: relative;
	border-radius: 100px;
	overflow: hidden;
}

.get-credits-btn-cotainer .get-credits-continue-btn {
	border: 0px;
	outline: none;
	color: white;
	background: black;
	padding: 10px 50px;
	transition: all 0.15s ease-in-out;
}

.get-credits-spinner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #3c3c3c;
	justify-content: center;
	padding: 10px;
	transition: 0.15s all;
	opacity: 0;
	display: none;
}

.get-credits-testimonial-wrapper {
	display: flex;
	gap: 15px;
	margin-bottom: 15px;
}

.get-credits-testimonial-container {
	flex: 1;
}

.get-credits-testimonial-container > div:first-child {
	justify-content: center;
	align-items: center;
	display: flex;
	gap: 3px;
	height: 22px;
}

.get-credits-testimonial-container > div > img {
	border-radius: 50%;
	margin-left: -10px;
}

.get-credits-testimonial-container > div > img:first-child {
	margin-left: 5px;
}

.get-credits-testimonial-container > div:nth-child(2) {
	text-align: center;
	font-size: 11px;
	color: black;
	font-weight: 600;
	line-height: 1.25;
	padding-top: 4px;
	transition: 0.15s all ease-in-out;
}

.get-credits-discord-container {
	display: flex;
	justify-content: center;
}

.get-credits-discord {
	color: black !important;
	text-decoration: underline !important;
	opacity: 0.75;
	font-size: 11px;
	transition: 0.15s all ease-in-out;
}

.get-credits-discord:hover {
	opacity: 1;
}

@media screen and (max-width: 767px) {
	.get-credits-wrapper {
		padding: 85px 4%;
		overflow-y: auto;
	}
	
	.get-credits-container {
		padding: 40px 15px 20px;
	}
	
	.get-credits-description {
		padding: 0;
	}
}



/* ─── 1. Credits modal at 0 credits ───────────────────────── */

.get-credits-container.dark {
	background: black;
}

.dark .get-credits-close-btn img {
	filter: invert(28%) sepia(66%) saturate(2494%) hue-rotate(3deg) brightness(112%) contrast(105%);
}

.get-credits-container.dark .get-credits-title:first-of-type {
	display: none;
}

.get-credits-container .get-credits-title:nth-of-type(2) {
	display: none;
}

.get-credits-container.dark .get-credits-title:nth-of-type(2) {
	color: white;
	display: block;
}

.dark .get-credits-description:first-of-type {
	display: none;
}

.get-credits-description:nth-of-type(2) {
	display: none;
}

.dark .get-credits-description:nth-of-type(2) {
	color: white;
	display: block;
	margin-bottom: 0px;
}

.dark .get-credits-circle-container, .get-credits-container.dark .get-credits-credit-amount, .dark .get-credits-value-container {
	opacity: 0;
	pointer-events: none;
}

.get-credits-credits-display-container > img {
	position: absolute;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	height: calc(100% - 20px);
	opacity: 0;
	pointer-events: none;
}

.dark .get-credits-credits-display-container > img {
	opacity: 1;
	pointer-events: inherit;
}

.dark .get-credits-credits-choise-wrapper > div {
	background: white;
}

.dark #get-credits-minus > div {
	background: #FF3DBD;
}

.dark #get-credits-plus > div {
	background: #FF4D00;
	transition: 0.15s all ease-in-out;
}

.dark .get-credits-btn-cotainer .get-credits-continue-btn {
	background: white;
	color: black;
	pointer-events: none;
	opacity: 0.5;
}

.dark .get-credits-testimonial-container > div:nth-child(2) {
	color: white;
}

.dark .get-credits-discord {
	color: white !important;
}