:root {
--modal-bg:rgba(0,0,0,0.98);
--modal-height:calc(var(--vh) * 100);
--msg-1: "Looks like this file isn’t in a collection yet. Tap the file-plus icon to add it to your feed";
--msg-2: "This one doesn’t have a collection. Tap the file-plus icon so it shows on your feed";
--msg-3: "Oops, no collection here. Tap the file-plus icon to include it on your feed";
--msg-4: "Right now this media isn’t in any collection. Use the file-plus icon to attach it to your feed";
--msg-5: "Add this file to a collection with the file-plus icon and it will appear on your feed";
--anton: "Anton", sans-serif;
--anton:"Anton", sans-serif;
--cinzel:'Cinzel', open-sans;
--roboto:'Roboto', sans-serif;
--orbitron:'Orbitron', serif;
--smoochsans:'SmoochSans', sans-serif;
--lobster:'Lobster',serif;
--caveat:'Caveat', serif;

--arial: "Arial", sans-serif;
--georgia: "Georgia", serif; /* or 'Caveat' if intentional */
--courier: "Courier New", sans-serif;
--tahoma: "Tahoma", sans-serif;
--verdana: "Verdana", sans-serif;
--softfeel: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

--album-gap: 20px;
--image-height: 200px;
--border-radius: 14px;

--dark-bg: rgba(0,0,0, 0.8);
--off-bg:#fd9652;

--primary-border:#1b1f5a;
--brand-color: #363fc5;
--brand-bg-color: #f4f6f8;
--brand-text-color: #222;
--brand-btn-hover: #5058c5;
---brand-drop-svg:#9da3ec;
--brand-border:#989dcb;
--brand-tab-bg: #e0e7ef;
--brand-card-bg: #fff;
--brand-card-radius: 12px;
--brand-card-shadow: rgba(0, 0, 0, 0.04);
--brand-tag-color:rgb(168, 148, 60);
--branding-gradient-1: #f9fbfe;
--branding-gradient-2: #eff1ff;
--brand-logo-bg: #f9fbfe;
--brand-icon-color: #4a53ce;
--branding-border-color-after : #dce3eb;

--bv2-bg: linear-gradient(135deg, #fffdf8, #f5f4fa); /* Marble cream background */
--bv2-card-bg: #ffffff;
--bv2-deep-blue: #212343;
--bv2-gold: #e0aa3e;
--bv2-deep-gold: #b97d10;
--bv2-off: #b22340; /* the off-red contrast you wanted */
--bv2-muted: #7f7f8b;
--bv2-radius: 18px;
--bv2-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
--bv2-highlight-font: var(--cinzel);
--bv2-detail-font: var(--roboto);


--card-bg: #fff;
--card-shadow: rgba(0, 0, 0, 0.1);
--primary-text: #222;
--desc-text: #666;
--rainbow: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);


---brand-drop-svg:#9da3ec;
--color-primary: #363fc5; 
--color-primary-dark: #373d95;
--color-primary-hover: #4248a9; 
--color-hover:#8389f5;
--select-lang-bg:#787cc5;
--select-lang-border:#8e91cf;
--select-lang-color:#d8d8ff;
--color-danger: #dc3545;
--text-heading: #333;
--bg-dark:linear-gradient(145deg, #0f1117, #1a1d24);--bg-dark:linear-gradient(145deg, #0f1117, #1a1d24);
--ios-white:#f8fbfd;
--color-accent: var(--ios-white);
--color-text: #2c2c2c;
--color-border: #ccc;  
--color-paragraph: #b4b4b4;       
--color-muted: #6c757d; 
--color-background: #f0f2f5;  
--error: #DC143C;  
--success: #6cc971; 
--off: #b22340;
--dark-off: rgb(140, 38, 59);
--dark-off-light: rgb(255, 229, 234);

--main-red: #B32035;
--main-red-border: #8A1A2A;
--main-red-light: #E36A7A;

--lovely-dark:inear-gradient(145deg, #0f1117, #1a1d24);
--off-blue: #2c33a5;
--loud-blue: linear-gradient(to right, #2c2c3c, #363fc5, #6069e8); 
--loud-blue-border: #3e4390; 
--loud-blue-light: #b7bbf3; 
--loud-btn:#363fc5;

--primary-btn: #4c4cff; 
--primary-btn-hover: #6b6bff; 
--secondary-btn: #b0b3da;
--accent-btn: #d3b7f9;

--box-shadow:1px 1px 3px 5px rgba(199, 197, 197, 0.3);
--subtle-shadow:0.3px 0.5px 1px 0.5px rgba(199, 197, 197, 0.3);
--box-shadow-2:1px 1px 3px 5px rgba(107, 116, 111, 0.3);
--deep-shadow:6px 6px 4px 4px rgba(0,0,0,0.3);
--medium-shadow:2px 1px 3px 0.5px rgba(0,0,0,0.3);
--load-btn-bg: #ededff;
--load-btn-text: #b9b9ef;
--load-btn-hover: #e0e0e0;
--load-dot: #999;
--load-dot-active: #333;

--copy-btn-hover: #E56736; 
--copy-btn-bg: #FF7A45;
--btn-copy: var(--main-red-light); 
--btn-share: #00bfa6;   
--btn-download: #292f36; 
--btn-disabled: #b6b6b6; 

--fun-pink: #ff6f91;
--fun-teal: #00cec9;
--fun-yellow: #fdcb6e;

--ink: #0a0b10;
--glass: rgba(255,255,255,0.08);
--white: #fff;
--ink-40: rgba(0,0,0,.4);
--neon: #6aa2ff;
--neon-2: #8a5bff;
--focus: #b7bbf3;


--bg: #f5f7fb;
--card: #ffffff;
--shadow-1: 0 4px 12px rgba(0,0,0,0.08);
--shadow-2: 0 10px 30px rgba(0,0,0,0.18);

/* Accents (Apple-ish) */
--accent-pink: linear-gradient(135deg,#ff6f61,#ff3d7f);
--accent-blue: linear-gradient(145deg,#6a11cb,#2575fc);
--accent-orange: linear-gradient(135deg,#ff8a65,#ff5252);
--accent-surface: linear-gradient(145deg,#ffffff,#f2f2f7);
--icon-bg: rgba(0,0,0,0.45);

--lovely-dark:linear-gradient(145deg, #0f1117, #1a1d24);
--off-blue: #2c33a5;
--loud-blue: linear-gradient(to right, #2c2c3c, #363fc5, #6069e8); 
--loud-blue-border: #3e4390; 
--loud-blue-light: #b7bbf3; 
--loud-btn:#363fc5;
--aspect-img-bg: background: linear-gradient(135deg, rgba(216, 217, 221, 0.6), rgba(207, 216, 229, 0.4));

}



:root.portfolio-content-picker {
--color-primary: #363fc5;
--color-primary-dark: #2a2e9c;
--color-primary-hover: #4248a9;
--color-accent: #f8f9fa;
--color-text: #e6e8ff;
--box-shadow: 0 4px 15px rgba(54, 63, 197, 0.3);
--deep-shadow: 0 4px 10px rgba(195, 195, 226, 0.6);
--picker-bg-1: linear-gradient(145deg, #12142a, #1b1e41);
--picker-bg-2:var(--color-accent);
--picker-h3: #6e6d6d;
--picker-selected-border: #b08cc7;
}

*{
box-sizing: border-box;
margin: 0 auto ;
padding: 0;
}

.dark-light{
color:#121212 !important;
}

/*
confimr-starts
*/
.custom-confirm.hidden {
display: none;
}



.custom-confirm {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999999;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.custom-confirm-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.35);
backdrop-filter: blur(2px);
}

.custom-confirm-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 14px;
padding: 24px 20px;
width: 90%;
max-width: 455px;
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
text-align: center;
}

.custom-confirm-message {
white-space: pre-line !important; /* keep \n line breaks */
font-size: 15px;
line-height: 1.2;
margin-bottom: 20px;
color: #1c1c1e;
background: #f9f9fb;
border: 1px solid #e3e3e7;
border-radius: 10px;
padding: 10px 14px;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* style each line as if it's a checklist item */
.custom-confirm-message span {
display: block;
margin-bottom: 8px;
padding-left: 10px;
position: relative;
}


.custom-confirm-buttons {
display: flex;
justify-content: space-between;
gap: 12px;
}

.custom-confirm-buttons button {
flex: 1;
padding: 10px 0;
font-size: 16px;
border-radius: 10px;
border: none;
cursor: pointer;
transition: background 0.25s;
}

.custom-confirm-ok {
background: #007aff;
color: #fff;
}

.custom-confirm-ok:hover {
background: #005bb5;
}

.custom-confirm-cancel {
background: #f2f2f7;
color: #1c1c1e;
}

.custom-confirm-cancel:hover {
background: #d1d1d6;
}
/*** confirm-ends **/

#edit-expires-at select{
width:100% !important;
}
.no-download {
pointer-events: none;  
user-select: none;
-webkit-user-drag: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
}
.no-download::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: transparent;
z-index: 10;
pointer-events: all;
}

.step-header{
display:flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 100%;
margin: 0 auto 0;
padding-top: 1.2rem;

}
.step-header h3{
text-align: center;
}

.smart-header{
position: relative;
z-index:1;
margin-top: -.6rem;
display: flex;
width:auto;
gap:20px;
}


.smart-header svg{
color:#888;
width: 27px;
height: 27px;
cursor: pointer;
}

.smart-header svg:hover{
scale: 1.2;
color:var(--loud-btn);

}

.smart-header svg rect,
.smart-header svg path,
.smart-header svg circle,
.smart-header svg polygon,
.smart-header svg line,
.smart-header svg polyline{
pointer-events: none !important;
}


.smart-header span{
position: absolute;
top:.1rem;
right:-1.5rem;
background: #6245f2;
color:var(--color-accent);
padding:2px 5px;
border-radius: 1rem;
}

.smart-header h1{
font-size: 1.4rem;
color:#6f6f6f;
font-family: var(--cinzel);
font-weight: 400;
}


a.transition, button.transition{
transition: background 0.2s ease, transform 0.15s ease;
display: flex;
justify-content: center;
align-items: center;
}



.is-senstive-link{
display: flex;
justify-content: center;
align-items: center;
margin-left: .4rem ;
text-decoration: none !important;
background: #b0bfff;
height: 18px;
width: 18px;
border-radius: 50%;
font-size: 8px !important;
color:#636363;
padding: 2px 4px;
}

.step{
padding-bottom: 10rem !important;
}

/** -textbreaker **/
.step button{
max-width: 125px !important;
}
.load-pdf-text ,
.step button,
.first-portfolio,
.loadmore-btn,
#smartListsModal ul li a,
.expiration-status span,
.bank-account-mini button,
.medialib-block-left .browse-library,
.filter-label,
.album-count-content h4,
.album-count-content span,
.step-header h3,
.tab-block ul li{
word-break: keep-all;
white-space: nowrap; /* don't wrap text */
flex: 0 0 auto;
}



.separator{
display: inline-block;
position: absolute;
left:32%;
width:2px;
background:var(--color-accent);
height: 30px;
top:0;
}

.bg-error{
background: var(--error) !important;
}

.bg-success{
background:var(--success) !important;
}

.error{
color: var(--error) !important;
margin-bottom: 1rem !important;
}

.success{
color:var(--success) !important;
margin-bottom: 1rem !important;
}
.transition{
transition: all 0.3s ease;
}
.profile-message, .password-message {
font-size: 0.9rem;
margin-top: 8px;
transition: all 0.3s ease;
}

.back-btn{
cursor: pointer;
}

/* === Spinner Base === */
.loader-premium {
border-radius: 50%;
border: 3.5px solid transparent;
border-top-color:rgb(99, 84, 253);
animation: spinPremium 0.7s linear infinite;
display: inline-block;
width: 0;
height:0;
opacity: 0;
pointer-events: none;
}

.loader-premium-login.load{
  width: 30px;
height:30px;
border-top-color:rgb(243, 242, 254);
}

.loader-premium.load{
width: 22px;
height:22px;
opacity: 1;
pointer-events: auto;
}

.loader-premium-modal.load{
width: 55px;
height:55px;
opacity: 1;
pointer-events: auto;
}

.loader-premium-content,
.loader-premium-upload,
.loader-premium-metric,
.loader-premium-login
{
position: absolute;
}


.loader-premium-modal{
position: absolute !important;
top:50% !important;
left:50% !important;
}

.loader-premium-profile{
left:50%;
top:45%;
z-index:999999;
transform: translateX(-50%);

}

.loader-premium-profile.load{
position: relative;
}

.loader-premium-content{
top:65%;
left:28.5%;
}

.loader-premium-login{
top:42%;
left:50%;
}

/* === Animation === */
@keyframes spinPremium {
to {
transform: rotate(360deg);
}
}


.app-top{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 45%;
text-align: center;
}

.app-top h1 a{
color:var(--color-primary);
text-decoration: none;
}

.app-top h1 a:hover,
.app-top h1 a:focus,
.app-top h1 a:focus-visible,
.app-top h1 a:focus-within{
color:var(--color-muted)
}

.app-top svg{
color:var(--color-muted)
}



.top-context{
font-size: x-large;
color:var(--color-primary-dark);
}


body,html{
font-family: Arial, sans-serif;
height: 100vh;
background:var(--color-accent);
border-radius: 3rem !important;
border-radius: 3rem;
-webkit-overflow-scrolling: touch;
overflow: hidden; 
scrollbar-width: none; 
-ms-overflow-style: none; 
}

body::-webkit-scrollbar,
html::-webkit-scrollbar {
display: none;
}

.accent{
background:var(--accent-blue) !important;
border-radius: 3rem !important;
}

body.accent{
background:var(--accent-blue);
border-radius: 3rem;
}



body.style{
position: fixed;
left:50%;
transform: translateX(-50%);
margin:0 auto 0;
width: 100%;
max-width: 40%;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: var(--color-text);
background:var(--ios-white);
background: var(--ios-white);
box-shadow: var(--deep-shadow);
border:.3rem solid var(--loud-blue-border);
border-radius: 3rem;
}


#quickActionContainer,
.feed-top{
z-index:5000 !important;
}


.app-bottom-inner,
.feed-top,
#quickActionContainer{
position: fixed !important;
height:75px !important;
bottom: 0 !important;
width:100% !important;
left:50% !important;
transform: translateX(-50%);
will-change: transform, opacity;
}


h1 {
color: var(--color-primary);
margin-bottom: 1rem;
font-weight: 700;
}


.common-auth-header{
color:#ffff !important;
width: 100% !important;
font-family: var(--anton) !important;
font-size: 1.5rem !important;
max-width:82% !important
}

.layout-wrapper {
max-width: 100%;
width:100%;
margin: 0 auto 0;
display: flex;
flex-direction: column;
justify-content: start;
align-items: start;
min-height: 100vh;
}


#register-app-container{
background: white !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;

}

#registerFormBtn{
margin-top: 0 !important;
position: relative !important;
top:.4rem !important;
}

.register-container {
position: relative;
top:7rem;
padding: 40px;
border-radius: 12px;
width: 100%;
max-width: 100%;
}

.register-container h2 {
margin-bottom: 25px;
text-align: center;
font-weight: 600;
font-size: 24px;
}

.form-error{
opacity: 0.97;
border:.2px solid rgb(183, 81, 102) !important;
transition: opacity 0.4s ease-in-out;
}



.form-step {
visibility: hidden;
height: 0;
opacity: 0;
transform: translateY(-2rem);
pointer-events: none;
transition: 
opacity 0.3s ease,
transform 0.3s ease,
visibility 0s linear 0.3s, /* delay hiding visibility */
height 0s linear 0.3s;
overflow: hidden;
}

.form-step.visible {
visibility: visible;
height: auto;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
transition-delay: 0s, 0s, 0s, 0s; /* instant visibility for visible state */
}


.form-group {
margin-bottom: 18px;
}

label {
display: block;
margin-bottom: 6px;
font-size: 14px;
font-weight: 500;
color: #555;
}

[data-main="settings"] h3{
color: #444 ;
}

[data-main="settings"] input[type="text"],
#login-app-container input[type="text"],
#register-app-container input[type="text"]{
text-transform: capitalize !important;
}

[data-main="settings"] input[type="text"],
[data-main="settings"] input[type="email"],
[data-main="settings"] input[type="password"],
#login-app-container input[type="text"],
#login-app-container input[type="email"],
#login-app-container input[type="password"],
#register-app-container input[type="text"],
#register-app-container input[type="email"],
#register-app-container input[type="password"] {
width: 100%;
padding: 12px;
border-radius: 6px;
border: 1px solid #ccc;
font-size: 15px;
outline: none;
transition: border-color 0.2s;
text-transform:lowercase !important ; 
color:#666  !important;
}

[data-main="settings"]{
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
grid-template-columns:1fr;
position: relative;
top:135px;
}

[data-main="settings"] input:focus,
#login-app-container input:focus ,
#register-app-container input:focus  {
border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(220, 20, 60, 0.2);
}


.login-link {
text-align: center;
margin-top: 20px;
font-size: 14px;
}

.login-link a {
color: var(--color-primary);
text-decoration: none;
}

.login-link a:hover {
text-decoration: underline;
}
/** register-ends **/

/** login-starts **/
.auth-container {
display: flex;
align-items: center;
justify-content: center;
width: 100% ;
height: inherit;
}

.common-auth-btn{
  width:100%;
  max-width: 135px;
  cursor: pointer;
}

.app-container .back-btn{
position: absolute;
top:3rem;
left:1.5rem;
background: #c3c9da;
padding: 5px 10px;
color:#f7f5fe;
border-radius: .3rem;
}
[page-body="login"]{
  width:37%;
}
.app-container.style{
position: absolute;
height:100vh;
top:0;
margin:0 auto 0 !important;
width: inherit;
max-width: inherit;
align-self: center;
font-family: 'Inter', sans-serif;
background: var(--ios-white);
color: var(--color-text);
box-shadow: var(--deep-shadow);
border:.3rem solid var(--loud-blue-border);
border-radius: 3rem;
}

.login-container {
/* make height flexible to viewport and allow padding inside that height */
max-height: calc(100vh - 40px); 
box-sizing: border-box;    
padding: 40px;
padding-bottom: 4rem;
border-radius: 12px;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}

/* hide webkit scrollbar */
.login-container::-webkit-scrollbar {
display: none;
}

.login-container h2 {
margin-bottom: 25px;
text-align: center;
font-weight: 600;
font-size: 24px;
}
/** login-ends **/


.dashboard-header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
background: var(--color-primary);
border-radius: 12px;
color: white;
padding: 1rem;
}

.dashboard-header a{
color: white;
text-decoration: none;
}

.dashboard-header h1 {
font-size: 24px;
color:var(--color-accent);
position: relative;
}

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


/** dashboard-starts **/
.page-wrapper {
width:100%;
margin: 0 auto;
display: flex;
flex-direction: column;
min-height: 100vh;
}

.dashboard-wrapper{
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 100%;
margin: 3rem auto 0;

}
[data-wrapper="settings"]{
margin:  -1rem auto 0 !important;
}
[data-wrapper="view-field"]{
padding: 0;
}


.logout-btn {
padding: 8px 16px;
background: var(--color-danger, crimson);
border-radius: 6px;
color: white;
text-decoration: none;
font-weight: 500;
transition: background 0.3s;
}

.logout-btn:hover {
background: darkred;
}

[data-main="add-info"]{
width: 70%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}



.tab-block{
width: 75%;
}

.tab-block ul{
display: flex;
align-items: center;
gap: 15px;
width: 100%;
-webkit-overflow-scrolling: touch;
overflow-x: scroll; 
overflow-y: auto;  
scrollbar-width: none; 
-ms-overflow-style: none; 
}

.tab-block ul::-webkit-scrollbar {
display: none;
}
.tab-block ul li{
margin-bottom: 1rem;
list-style: none;
background: var(--color-border);
padding: .6rem;
border-radius: .3rem;
cursor: pointer;
width: auto;
}

.tab-block ul li.active-tab{
background: var(--off);
color:var(--color-accent);
}

[data-main="dashboard"]{
display: flex;
justify-content: flex-start;
gap:10px;
padding-bottom: 2rem;
}

[data-main="dashboard"]  .dashboard-card{
max-height: 200px;
height: 200px;
flex-grow: 1;
}


.tabcontent-block{
width: 85%;
margin-top: 2rem;
}


.dashboard-card {
width: 100%;
background: white;
padding: 25px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.dashboard-card h3 {
margin-bottom: 10px;
font-size: 18px;
}

.dashboard-ctas-single{
width: auto;
justify-self:flex-start !important;
}
.dashboard-ctas-double{
width:auto;
justify-self:flex-start !important;
}
.dashboard-ctas{
display: flex;
justify-content: flex-start !important;
margin: 0 !important;
gap:5px;
text-align: left !important;

}

.dashboard-ctas a,
.dashboard-ctas button{
word-break: keep-all !important;
text-wrap: none !important;
}

.dashboard-card p {
font-size: 14px;
color: #555;
margin-bottom: 15px;
}

.update-social-form input{
text-transform: lowercase !important;
}

.action-btn {
display: inline-block;
padding: 10px 20px;
background: var(--color-primary);
color: white;
text-decoration: none;
border-radius: 6px;
font-weight: 600;
max-width: auto;
width: auto;
}



.action-btn:hover {
background: var(--color-primary-dark, #a3001e);
}

.dashboard-card.muted {
opacity: 0.6;
pointer-events: none;
}
/** dashboard-ends **/

/** table **/
.table-wrapper {
width: 100% !important;
overflow: hidden !important;
margin: -4.5rem auto 2rem !important;

}

.table-title{
display: flex;
justify-content: space-between;
align-items: center;
}

.table-title svg{
color: var(--color-muted);
}

.table-title .feather-chevrons-right{
margin-top: .5rem !important;
}

.table-title a{
text-decoration: none ;
}


.styled-table li{
list-style: none !important;
}

.styled-table {
width: 100% !important;
border-collapse: collapse;
font-size: 16px;
background-color: #f9f9f9;
box-shadow: var(--medium-shadow);
max-width: 100% !important;
margin: 0 auto !important;
border-radius: .8rem !important;

}


.styled-table th,
.styled-table td {
padding: 12px 15px;
border-bottom: 2px solid #c3c9da;;
text-align: left;
white-space: nowrap; /* Prevents long content from wrapping awkwardly */
}
table thead{
width: 100% !important;
min-width: 100vw !important;
}

.styled-table thead tr {
background: #c0cbf3;
border-bottom: 2px solid #cdd3e6;;
color: #fff;
width: 100% !important;
min-width: 100vw !important;
}
.edit-link{
overflow-wrap: break-word;
white-space: normal;
}
.edit-link,
.delete-link {
color: #007bff;
text-decoration: none;
}

.edit-link:hover,
.delete-link:hover {
text-decoration: underline;
}


/** table-ends **/
#language-select{
border-radius:.6rem;
border:.15rem solid var(--off-blue) !important;
background: var(--select-lang-bg);
color: #555;
font-weight: 100;
font-family: var(--anton);
padding: .2rem;
}


.site-footer {
max-width: 100%;
width:100%;
background-color: #fff;
border-top: 1px solid var(--color-border);
padding: 1rem 0;
text-align: center;
font-size: 0.9rem;
color: var(--color-text-secondary, #6c757d);
margin-top: 2rem;
}

.footer-content {
width: 100%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 0 1.5rem;
}

.footer-nav a {
color: var(--color-primary);
margin: 0 0.5rem;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}

.footer-nav a:hover {
color: var(--color-primary-hover);
}


/*** add-info **/
.main-bottom{
display: flex;
align-items: flex-start !important;
justify-content: flex-start !important;
}

#optionsForm{
width: 100% !important;
max-width: 100% !important;
display: inline-block !important;
}

#step1 a, .table-wrapper a{
color: var(--color-primary-dark);
font-size: large;
}

#step3{
background:none;
box-shadow:none;
padding:none;
}


.portfolio-content-picker {
font-family: var(--roboto), sans-serif;
color: var(--color-text);
background-color: none !important;
box-shadow: none !important;
border-radius: 1rem;
width: 100%;
margin: 2rem auto 2rem;
padding: 1.5rem;
}
.portfolio-content-picker  select{
width: 100%;
border-radius: 5rem;
padding: 1.5rem;
color: var(--picker-h3);
font-family:  var(--roboto);
}



.portfolio-content-picker h3 {
font-weight: 400;
font-size: 1.2rem;
margin-bottom: 1rem;
letter-spacing: 0.05em;
color: var(--picker-h3);
font-family: var(--cinzel);

}

.portfolio-content-picker p{
font-family: var(--roboto);
padding:4px;
margin-bottom: .8rem;
text-align: center;
}
.portfolio-content-picker p a{
color:#5d64ec;
}

.portfolio-content-picker .contentTypeLists {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: flex-start;
background: none !important;
}


.portfolio-content-picker .contentTypeLists a {
cursor: pointer;
user-select: none;
flex-grow: 1;
padding: 0.4rem .5rem;
border-radius: 0.75rem;
box-shadow: var(--box-shadow);
background-color: var(--color-primary-dark);
color: var(--color-accent);
font-weight: 600;
text-align: center;
transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
display: inline-block;
}

.portfolio-content-picker .contentTypeLists a.selected {
box-shadow: none !important;
background: rgb(222, 222, 222) !important;
color: crimson !important;
position: relative;
}

.portfolio-content-picker .contentTypeLists a.selected::after{
position: absolute;
content: "";
left:5%;
bottom: 0;
height: 4px;
width: 90%;
background: crimson;
border-radius: 0.75rem;
}

.portfolio-content-picker .contentTypeLists a[data-type="with-media"] {
font-style: italic;
background-color: var(--color-primary);
}

.portfolio-content-picker .contentTypeLists a:hover,
.portfolio-content-picker .contentTypeLists a:focus {
background-color: var(--color-primary-hover);
box-shadow: 0 0 15px var(--color-primary-hover);
outline: none;
transform: translateY(-3px);
}

.portfolio-content-picker .contentTypeLists a:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 3px;
}

.portfolio-content-picker .btn-wrap {
margin-top: 1.5rem;
text-align: right;
}

.portfolio-content-picker button {
font-weight: 700;
padding: 0.7rem 1.8rem;
border-radius: 0.75rem;
border: none;
background-color: var(--color-primary);
color: var(--color-accent);
cursor: pointer;
transition: background-color 0.3s ease;
}

.portfolio-content-picker button:hover,
.portfolio-content-picker button:focus {
background-color: var(--color-primary-hover);
outline: none;
}


#step1{
padding: 1rem;
}
.second-next-btn{
max-width: 40% !important;
}
.first-next-btn-wrap{
width: auto !important;
max-width: 40% !important;
margin: 1rem auto 1rem !important;
}

.btn-wrap{
width:auto;
max-width: 30%;
margin: 0;
display: flex;
gap:20px;
align-items: center;
justify-content: flex-start;
padding-left: 1.5rem;
}

.addinfo-sellingpoint{
width:100%;
padding:5px 2px;
}

.addinfo-sellingpoint p , .addinfo-sellingpoint h1{
padding:4px 7px;
margin-left:.8rem;
}


#editForm{
width:100%;
max-width: 92%;
margin: 2rem auto 0;
}
.tabcontent-block textarea{
color:#555 !important;
-webkit-overflow-scrolling: touch;
overflow-y: scroll; 
overflow-x: hidden;  
scrollbar-width: none; 
-ms-overflow-style: none; 
height: 250px;
}
.tabcontent-block textarea::-webkit-scrollbar {
display: none;
}

.tabcontent-block textarea,
#editForm input[type="text"],
#editForm input[type="email"],
#editForm input[type="password"],
#editForm textarea{
width: 100% !important;
border-radius: .6rem !important;
border:.1rem solid #cbcbcb !important;
padding: 1.5rem !important;
}
#editForm select{
border:.1rem solid #cbcbcb !important;
}

[name="brand_color"] {
cursor: pointer !important;
appearance: none;
position:  relative !important;
top:.4rem;
-webkit-appearance: none;
border: none;
border-radius: 50% !important;
height: 30px !important;
width: 30px !important;
padding: 0;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
transition: box-shadow 0.2s ease, transform 0.2s ease;
border:.12rem solid #3d3d3d;
}
[name="brand_color"]:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
transform: scale(1.05);
}

[name="brand_color"]::-webkit-color-swatch-wrapper {
padding: 0;
border-radius: 50%;
}

[name="brand_color"]::-webkit-color-swatch {
border: none;
border-radius: 50%;
}

#fieldsContainer{
width:100%;
max-width: 100% !important;
margin-top: 1rem;
margin-left: 0 !important;
margin-right: 0 !important;
padding: 0 !important;
display: flex;
flex-direction: column;
justify-content:center;
align-items:center;
background: none !important;
position: relative;
}

.field-info, .field-media{
display: block !important;
}

#createModal , #createModal .general-modal-content, .general-modal{
padding: 0 !important;
}

#fieldsContainer .field-item{
  height: 470px;
background:var(--ios-white);
box-shadow:none !important;
position:  relative !important;
border: .1rem solid #f0f0f0;
margin-bottom: 4rem;
width:100% !important;
max-width: 100% !important;
min-width: 100% !important;
}

#fieldsContainer .field-item input[type="text"]{
caret-color: #007aff;
padding: 1.5rem !important;
}

#fieldsContainer .field-item input[type="text"],
#fieldsContainer .field-item textarea {
border: none !important;
border-bottom: 1px solid transparent !important;
background: transparent !important;
border-bottom: 1px solid #ccc !important;
font-family: var(--softfeel) !important ;
font-size: 17px !important;
}




#fieldsContainer  .field-item input[type="text"].caveat,
#fieldsContainer  .field-item textarea.caveat{
font-family:var(--caveat) !important;
}

#fieldsContainer  .field-item  input[type="text"].cinzel,
#fieldsContainer  .field-item textarea.cinzel{
font-family:var(--cinzel) !important;
}


#fieldsContainer  .field-item  input[type="text"].orbitron,
#fieldsContainer  .field-item textarea.orbitron{
font-family:var(--orbitron) !important;
}


#fieldsContainer  .field-item input[type="text"].arial,
#fieldsContainer  .field-item  textarea.arial {
font-family: var(--arial) !important;
}

#fieldsContainer  .field-item input[type="text"].softfeel,
#fieldsContainer  .field-item textarea.softfeel {
font-family: var(--softfeel) !important;
}

#fieldsContainer .field-item input[type="text"].courier,
#fieldsContainer  .field-item textarea.softfeel {
font-family: var(--courier) !important;
}

#fieldsContainer  .field-item input[type="text"].bold,
#fieldsContainer  .field-item textarea.bold {
font-weight: bold !important;
}

#fieldsContainer  .field-item input[type="text"].italic,
#fieldsContainer .field-item textarea.italic {
font-style: italic !important;
}

#fieldsContainer  .field-item input[type="text"].georgia,
#fieldsContainer  .field-item textarea.georgia {
font-family: var(--georgia) !important;
}

#fieldsContainer  .field-item input[type="text"].tahoma,
#fieldsContainer  .field-item textarea.tahoma {
font-family: var(--tahoma) !important;
}

#fieldsContainer  .field-item input[type="text"].verdana,
#fieldsContainer  .field-item textarea.verdana {
font-family: var(--verdana) !important;
}



.field-item input, .field-item textarea{
width: 100%;
padding: 1rem;
border: none !important;
background: transparent !important;
transition: border-bottom 0.2s ease;
margin-bottom: 1rem;
border-radius: .4rem;
border-bottom: 1px solid #ccc !important;
}

textarea, input{
  resize: none !important;        /* optional: prevent manual resizing */
  box-sizing: border-box !important; /* ensures padding is included in height */
}

.field-item textarea {
  height: 100px;       /* initial height */
  max-height: 150px;   /* maximum height before scrolling */
  overflow-y: auto;    /* show scrollbar if content exceeds max-height */
}

#createModal .field-item input[type="text"]:focus,
.field-item input:focus, .field-item textarea:focus,
#createModal .field-item textarea:focus{
outline: none !important;
border-bottom: 1px solid #ccc !important;
margin-bottom: 1.5rem !important;
}

#createModal .field-item textarea{
max-width: 100% !important;
width: 100% !important;
}


.field-item {
max-width:100%;
width:100%;
padding: 1rem;
margin:1rem auto 2rem !important;
border: 1px solid #ccc;
border-radius: 1rem;
background-color: #fefefe;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content:flex-start;
}

.field-top{
position: relative;
width: 100%;
display: grid;
grid-template-columns: 12fr 1fr;
gap:15px;
padding: 1rem;
}


.position-delete-btn{
position: absolute !important;
top:-42px !important;
right:.7rem !important;
padding-bottom: .6rem !important;
}



.file-wrap .feather-paperclip {
stroke:var(--loud-blue) !important;
color:var(--loud-blue-light) !important;
stroke-width: 2px !important;
}

.file-wrap{
position: absolute;
z-index: 9999999 !important;
left:0 !important;
top:75px;
width: 100% !important;
max-width: 100% !important;
padding: 10px 16px;
display: flex;
gap: 20px;
align-items: center;
padding: 5px 8px;
background: #fff;
border-bottom: 1px solid #eeeeee;
border-radius: 0;
user-select: none;
font-size: 14px;
overflow-y: scroll; 
overflow-x: auto;  
-webkit-overflow-scrolling: touch;
scrollbar-width: none; 
-ms-overflow-style: none; 
}


.file-wrap a{
cursor: pointer !important;
}




.file-wrap .feather-plus{
background: rgb(161, 166, 246) !important;
color:#fff !important;
}

.file-wrap a:hover{
height: 50px;
width:50px;
text-align: center !important;
display:flex !important;
justify-content: center !important;
align-items: center !important;
border-radius: 50%;
transition: color 0.2 ease-out;
margin-top:-7px !important;
}


.file-wrap-left{
display: flex;
}

.file-wrap input{
border:none !important;
background: none;
}

.file-wrap.grid{
grid-template-columns: 7fr 0.5fr !important;
}

.file-wrap svg{
width:27px ;
height: 27px;
}


.field-delete-btn svg{
color: rgb(184, 55, 81) !important;
}
.field-add-btn svg{
color: rgb(67, 76, 203) !important;
}



.file-wrap svg{
pointer-events: none !important;
}

.field-delete-btn svg, .field-add-btn svg, 
.field-promo-partner svg,
.field-partner svg,
.field-visibility svg,
.field-security svg,
.field-money svg{
border-radius:3rem;
padding: .2rem;
scale:1.3 !important;
width:35px !important;
height: 35px !important;
}


.field-security svg{
color: rgb(245, 72, 118) !important ;
}


.field-money svg{
color: rgb(74, 179, 135) !important;
}

.field-money a:hover{
background: rgb(65, 173, 112) !important ;
color: rgb(207, 254, 234) !important;
}

.field-security a:hover{
background: rgb(245, 72, 118) !important ;
color: rgb(253, 184, 207) !important;
}

.field-add-btn a:hover{
background-color: #ced6fa !important;
color: rgb(225, 227, 253) !important;

}
.field-delete-btn a:hover {
background-color: #f5a0a0 !important;
}

.field-delete-btn svg:hover ,
.field-add-btn svg:hover{
transition: 0.2s ease-in-out;
transform: scale(0.9);
}


.fileclipAnchor, .editMetaAnchor {
cursor: pointer;
}
.fileclipAnchor svg, .editMetaAnchor svg{
pointer-events: none;
width:35px !important;
height:35px !important;
}


.upload-info-block{
border-left: 4px solid #72b4e7 !important; 
}

.upgrade-info-block:hover {
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.upgrade-info-block h3 {
margin: 0 0 8px;
color: #333;
font-size: 1.1rem;
font-weight: 600;
}

.upgrade-info-block p {
color: #666;
font-size: 0.95rem;
margin-bottom: 10px;
line-height: 1.4;
}

.upgrade-info-block a{
cursor: pointer;
}
.upgrade-btn {
display: inline-block;
background-color: #7a4fff;
color: #fff;
font-weight: 500;
font-size: 0.95rem;
padding: 8px 16px;
border-radius: 6px;
text-decoration: none;
transition: background-color 0.25s ease;
}

.upgrade-btn:hover {
background-color: #663ee6;
}



.timezone-block{
border:.15rem solid var(--select-lang-border);
margin-bottom: 2rem !important;
padding:.6rem;
border-radius: 1rem;
}

#editModal .expirable-options,
.timezone-group,
#brandColorGroup{
grid-template-columns: 1fr 5fr !important;
}

#brandColorGroup{
margin: 1rem auto 2rem;
grid-template-columns: 1fr 5fr !important;
}

#brandColorGroup input{
width: 100% ;
height: 55px !important;
}

.expirable-options,
.timezone-group{
grid-template-columns: 1fr 4fr;
}

.expirable-options, #brandColorGroup,
.timezone-group{
display:grid;
align-items:center;
gap:10px;
justify-content: space-between;
width: 100%;
margin-top: -.6rem;
}

.copy-button{
max-width: auto !important;
width: auto !important;
font-size: x-small;
padding: .3rem !important;
text-align: center !important;
margin-top: -.15rem;
}

.preview-row{
display: grid;
grid-template-columns: 2fr 3fr 0.5fr;
gap:15px;
justify-content: space-evenly;
align-items: center;
width: 100%;
max-width: 100%;
padding: 0 !important;
}

.preview-row strong{
max-width: 75%;
width: 100%;
}

.preview-row a,
.preview-row span{
margin-left: -.3rem !important;
width: 100%;
max-width: 100%;
}

.preview-row strong, .preview-row a,
.preview-row span{
font-size: small;
}

.expirable-options select,
.timezone-group select{
width:100%;
}

.expirable-options input{
margin-top:-1rem !important;
}
.checkbox-parent{
margin: 0 !important;

}

.checkbox-parent .checkbox-group{
width: 100%;
left:0 !important;
margin: 0 !important;
display: flex !important;
}

.timezone-group select,
.expirable-options select {
padding: 1rem;
border:var(--color-border) solid .1rem;
border-radius:.6rem;
}

.checkbox-group{
max-width: 300px;
grid-template-columns: 0.5fr 10fr;
}

.form-title-group {
max-width: 640px !important;
min-width: 400px !important;
width: 100% !important;
grid-template-columns:1fr;
}

.checkbox-group , .form-title-group{
display: grid;
gap: 10px;
align-items: center;
justify-content: flex-start;
margin-top: 10px;
width: 100% !important;

}

.checkbox-group label{
margin-left: 1rem;
}

.options-section {
margin-top: 10px;
border-top: 1px dashed #ccc;
padding-top: 10px;
}


#step-2{
position: relative;
}



/* Shared Base Style */
.btn-share,
.btn-view,
.btn-activate,
.btn-deactivate,
.btn-edit {
color: white;
border: none;
padding: 6px 12px;
margin-top: 3px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Unique Variants */
.btn-share {
background-color: #3b82f6 !important; /* Blue */
}
.btn-share:hover {
background-color: #2563eb !important;
transform: scale(1.02);
}

.btn-preview {
background: #b4b4b4;
}



.btn-view {
background-color: var(--color-primary) !important;
}
.btn-view:hover {
background-color: var(--color-primary-hover) !important;
transform: scale(1.02);
}

.btn-activate {
background-color: var(--color-primary); 
}
.btn-activate:hover {
background-color: #16a34a !important;
transform: scale(1.02);
}

.btn-deactivate {
background-color: #f59e0b !important; /* Amber */
}
.btn-deactivate:hover {
background-color: #d97706 !important;
transform: scale(1.02);
}

.btn-edit {
background-color: #6b7280 !important; /* Cool gray */
}
.btn-edit:hover {
background-color: #4b5563 !important;
transform: scale(1.02);
}


.hidden {
display: none !important;
}

.field-item {
margin-bottom: 10px;
}


input[type="email"],
input[type="text"],
input[type="password"]{
padding: 1rem !important;
}

input[type="text"] {
max-width:100% ;
width: 100%;
margin-top: 4px;
margin-bottom: 10px;
}


button {
width: 100%;
border: none;
border-radius: 6px;
color: white;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease;
}

button:hover {
background-color: var(--color-primary-hover);
}


.question {
margin-top: 14px;
}

.preview {
margin-top: 12px;
background-color: var(--color-primary);
color: white;
padding: 8px 12px;
border-radius: 6px;
display: inline-block;
}

/* Preview card styling */
#previewContainer {
margin:1.5rem 0 1.5rem;
width:65%;
}

.preview-card {
border-radius: 8px;
padding: 15px;
max-width: 100%;
background-color: #f9f9f9;
}

.preview-card h3 {
margin-top: 0;
margin-bottom: 15px;
}
.preview-field {
margin-bottom: 10px;
}
.preview-field strong {
margin-right: 5px;
}

.copy-btn {
margin-left: 10px;
padding: 3px 8px;
font-size: 12px;
cursor: pointer;
border-radius: 4px;
border: none;
background-color: transparent;
color: inherit;
text-decoration: underline;

}


#optionsForm{
display:flex;
flex-direction:column;
justify-content: flex-start;
align-items: flex-start;
padding: 1rem;
}

#optionsForm label:first-child{
margin-top:2rem;
}


#editModal button{
max-width:200px;
display: flex;
justify-content: center;
}



.styled-table ul:first-child{
position: relative;
left:1.5rem;
}
.styled-table ul:first-child li{
margin-bottom: .2rem;
}

.td-actions{
display: grid;
grid-template-columns: repeat(2, 1fr);
margin: 1rem 0 0 !important;
width: 100% !important;
max-width: 150px !important;
align-items: center;
justify-content: flex-start;
gap: -3px;
}

.common-actions{
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-content: center;
align-items: center;
width: 50%;
margin: 0 auto;
position: relative;
left:2rem;
gap:7px;
}


.td-actions a, 
.common-actions a{
cursor: pointer;
color:var(--color-accent) !important;
padding: .3rem;
border-radius: 4rem;
}
.common-actions:last-child{
margin-top: .9rem;
margin-bottom: .9rem;
}

.td-actions a:nth-child(1){
background: var(--off);
}

.td-actions a:nth-child(2){
background: var(--success);
}

.common-actions a:nth-child(1) svg{
color: var(--color-text);
}

.common-actions a:nth-child(2) svg{
color: var(--success)
}

.common-actions a:nth-child(3) svg{
color: var(--error);
}
.common-actions a{
background: none !important;
}



.check-box-group{
display: flex;
justify-content: flex-start ;
margin: 0 !important;
max-width: 22%;
}

#optionsForm label{
margin-bottom:1.5rem;
width:100%;
}



.meta-info p{
margin-bottom: .3rem;
}

.logo-group {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
}

.logo-group img{
width: 100%;
width:100px;
height: 100px;
object-fit: cover;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: .6rem;
aspect-ratio: 1/1;
}

.tx-light-dark{
color:#555 !important;
}


#portfolioContent .brand-color{
margin-top: -.5rem !important;
}

#create-modal-content button{
border-radius: 3rem !important;
}

.optionDivs {
width: 100%;
display: flex !important;
margin: 1rem 0 1rem !important;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
position: relative;
height: 0 !important;
opacity: 0;
pointer-events: none;
transform: translateX(-100%);
transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
position: relative;
top:3rem;
}

.visibility-block{
margin:0 1rem !important;
position: relative !important;
top:2.5rem !important;
}

 .FieldselectDate {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
justify-content: center !important;
align-items:  center !important;
gap:10px !important;

}
.FieldselectDate select{
border:.1rem solid #dedede !important;
position: relative;
top:1rem ;
color:#565656 !important;
padding: 1rem !important;
}
.promo-partner-block p{
text-align: left !important;
margin-left: 0 !important;
position:relative;
left:0 !important;
}
.promo-partner-block{
position: absolute;
margin-top: 2rem;
}
.promo-partner-block.top{
top:0 !important;

}
.monetization-block, .visibility-block,
.promo-partner-block,
.partner-block{
top:2rem;
height: 0 !important;
opacity: 0;
pointer-events: none;
transform: translateX(-100%);
transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}
.monetization-block, .visibility-block,
.promo-partner-block{
position: relative;
}
.visibility-block-inner{
height:150px;
}

.visibility-block.visible,
.promo-partner-block.visible,
.partner-block.visible,
.optionDivs.visible,
.monetization-block.visible {
transform: translateX(0) !important;
opacity: 1 !important;
height: 100% !important;
pointer-events: auto !important;
transition: none !important;
}


.optionDivs label, .visibility-block label{
width: 100%;
display:grid;
margin:.8rem 0 .8rem !important;
gap:20px;
grid-template-columns: 0.5fr 14fr;
}

.optionDivs input{
margin: 0 !important;
}

.optionDivs label span,
.visibility-block label span{
display: flex;
align-items: flex-start;
max-width:100%;
width: 100%;
margin-left: 0 !important;
}

.meta-hr{
margin: 12px 0;
color:var(--color-border) !important;
background: var(--color-border) !important;
}



.media-edit-top svg:hover, 
.media-edit-top svg:active, 
.media-edit-top svg:focus,
.input-form-group-btn-wrap button:hover,
.input-form-group-btn-wrap button:active,
.input-form-group-btn-wrap button:focus{
background: #9e9bd2;;
}

.media-edit-top svg path, .media-edit-top svg line{
pointer-events: none;
}
.meta-trigger-icons{
display: flex;
gap: 5px;
}

.hidden{
display:none;
}

.media-meta-wrap-inner{
border-bottom-left-radius:.1rem solid #e8e8e8 !important;
border-bottom-right-radius:.1rem solid #e8e8e8 !important;
display: grid;
padding: 1rem;
}


.input-form-group{
margin: .8rem auto .8rem;
}
.m-checkgroup .span-check{
position: relative;
left:.5rem
}

.m-checkgroup {
display: flex !important;
align-items:flex-start !important;
gap: 6px;
cursor: pointer;
position: relative;
left: 0;
margin:0 !important;
}

/* Hide native checkbox */
.m-checkgroup input[type="checkbox"],
.m-checkgroup input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}



/* Custom checkbox */
.monetize-label{
margin-top: 6px !important;
}

.m-checkgroup {
display: inline-flex;
align-items: center;
cursor: pointer;
position: relative;
}

.m-checkgroup input {
position: absolute;
opacity: 0;
pointer-events: none;
}

/* Base box */
.m-checkgroup .span-check::before {
content: "";
width: 16px;
height: 16px;
display: inline-block;
border: 2px solid #493dce !important;
border-radius: 4px;
background: #e9e9e9 !important;
vertical-align: middle;
transition: all 0.2s ease;
position: relative;
}

/* Checkmark */
.m-checkgroup .span-check::after {
content: "";
position: absolute;
width: 5px;
height: 10px;
left: 6px;
top: 1px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
opacity: 0;
transition: opacity 0.2s ease;
}

/* Checked state */
.m-checkgroup input:checked + .span-check::before {
background: #493dce !important;
border-color: #493dce !important;
}

.m-checkgroup input:checked + .span-check::after {
opacity: 1;
}
.input-form-group{
width: 92%;
margin: 0 auto;
display: flex;
justify-content: center;
}

.input-form-group input, .input-form-group select,
.input-form-group textarea{
border-radius: 1.3rem;
border:.1rem solid #cfcfcf !important;
padding: 1.3rem;
max-width:100%;
width: 100%;
margin: .8rem auto .8rem;

}


.input-form-group textarea{
max-height: 100px;
overflow-y: scroll; 
overflow-x: auto;  
-webkit-overflow-scrolling: touch;
scrollbar-width: none; 
-ms-overflow-style: none; 
}

.input-form-group textarea::-webkit-scrollbar {
display: none;
}



.input-form-group-btn-wrap{
margin: .8rem auto .8rem;
}


.input-form-group-btn-wrap button{
background: #4e62bb;
color:rgb(241, 240, 255);
border:.1rem solid rgb(187, 185, 216);
padding: 7px 15px;
border-radius: 1rem;
width: auto;
font-size: 15px;
cursor: pointer;
}

/*** add-info-ends **/


/* welcome-starts */
#welcomeBody {
background: var(--loud-blue);
overflow: scroll !important;
}

#welcome-portfolio-container{
max-width: 40%;
overflow-y: auto !important;
overflow-x: hidden !important;
scrollbar-width: none; 
-ms-overflow-style: none; 
}

.welcome-inner{
height: 100vh;
overflow-y: auto ;
overflow-x: hidden;
position: relative;
z-index: 0;
transform: rotate(360deg);
scrollbar-width: none; 
-ms-overflow-style: none; 
background: var(--loud-blue) !important;
padding-bottom: 6rem !important;
transition:  height  0.3 ease;
}

.welcome-inner::-webkit-scrollbar,
#welcome-portfolio-container:-webkit-scrollbar {
display: none;
}


.welcome-inner::after{
width: 45%;
min-height: 100vh;
content: "";
position: absolute;
left:27.5%;
top:0;
border:.2rem solid #fff;
background: linear-gradient(145deg, #0f1117, #1a1d24);
border-radius: 4rem;
z-index: -1;
transition: min-height 0.3s ease;
overflow: hidden;
}

.welcome-inner.change::after{
min-height: calc(125vh + 724px +362px + 100px);
}

.pitch-block{
text-align: center;
width: 35%;
margin: 0 auto 5rem;
}

.pitch-block img{
width: 80%;
border-radius: 4rem;

}

.pitch-block-0 p {
opacity: 0;
}

.pitch-block-0 p.show{
opacity: 1;
transition:  opacity 0.3s ease-out;
}

.pitch-block-1 {
opacity: 0;
transform: translateX(-20rem);
transition: opacity 0.6s ease, transform 0.6s ease;
}


.pitch-block-1.change {
opacity: 1;
transform: translateX(0);
}

.pitch-block-2 {
opacity: 0;
transform: translateX(20rem);
transition: opacity 0.9s ease, transform 0.9s ease;
}

.pitch-block-2.change {
opacity: 1;
transform: translateX(0);
}

.pitch-block-3 {
opacity: 0;
transform: translateX(-20rem);
transition: opacity 0.9s ease, transform 0.9s ease;
}

.pitch-block-3.change {
opacity: 1;
transform: translateX(0);
}

.pitch-block h2{
font-size: 2.2rem;
}

.hero {
z-index: 10;
transform: rotate(360deg);
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 4rem 2rem;
}

.hero-inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width:600px;
width: 100%;
flex-wrap: wrap; /* enables responsiveness */
gap: 2rem;
z-index: 1;
}

.hero-text {
flex: 1 1 400px;
max-width: 600px;
text-align: left;
position: relative;
text-align: center !important;
top:5rem;
}

.pitch-block h2,
.hero-text h1{
font-weight: bold;
color: var(--color-accent);
margin-bottom: 1rem;
}

.hero-text h1 {
font-size: 2.8rem;

}

.pitch-block p,
.hero-text p {
font-size: 1.2rem;
color: var(--color-paragraph);
margin-bottom: 2rem;
}

.hero-text a {
display: inline-block;
background: var(--color-primary);
color: var(--color-accent);
font-weight: 600;
padding: 0.8rem 1.8rem;
border-radius: 12px;
text-decoration: none;
transition: background 0.3s ease;
text-align: center;
}

.hero-text a:hover {
background: var(--color-primary-hover);
}

.mockup-wrapper {
flex: 1 1 300px;
max-width: 485px;
z-index: -1;
}

.mockup-wrapper img {
width: 100%;
object-fit: cover;
border-radius: 28px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
transform: rotate(-5deg);
opacity: 0.75;
}


.welcome-top{
width:auto;
position: absolute;
z-index: 1;
margin-top: 1rem;
top:2rem;
right:5rem;
}



.hero-start-now{
position:relative;
transform: translateY(10rem) !important;
background: var(--off-blue) !important;
font-family: var(--orbitron);
}


#dashBtn, #logout{
color:var(--color-accent);
text-decoration: none;
padding: .4rem;
border-radius: .6rem;
font-family: var(--roboto);
}

#logout{
background: var(--main-red-light);
border:.1rem solid var(--main-red-border);
}

#dashBtn{
background:var(--bg-dark);
}

/* Modal Overlay */
.plv-modal-overlay {
position: fixed;
top: 0; 
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
}
.plv-modal-overlay.open { display: flex; }

.plv-modal-content {
background: #fff;
padding: 20px;
width: 400px;
border-radius: 6px;
position: relative;
}

.plv-modal-close-wrap {
position: absolute;
top: 8px;
right: 12px;
font-size: 20px;
background: none;
border: none;
cursor: pointer;
z-index: 900 !important;
margin-bottom: 1rem !important;
}
.dynamic-product-content-wrap h3{
margin-bottom: .8rem !important;
}

.dynamic-product-content-wrap{
margin-top: 1rem !important;
}

.dynamic-product-content-wrap textarea{
padding: .6rem;
border:.1rem solid #e0e0e1;
border-radius: .6rem;
}

.plv-modal-close-wrap button,
.plv-modal-close-wrap svg{
padding: .1rem !important;
display: flex;
justify-content: center;
align-items: center;
}

/* Dropdown */
.plv-dropdown {
position: absolute;
top: 88%;
left: 0;
background: #fff;
border: 1px solid #ccc;
z-index: 1001;
min-width: 120px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.plv-dropdown-item {
padding: 8px 12px;
cursor: pointer;
}
.plv-dropdown-item:hover {
background: #f5f5f5;
}

/* Scoped to #plv-root */
#plv-root , .plv-root{
font-family: 'Segoe UI', sans-serif;
width: 100% !important;
max-width: 100% !important;
display: flex;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
padding: 10px;
background: #e8edff;
border-radius: .8rem;
box-shadow: var(--medium-shadow);
position: relative;
}

.plv-brand{
display: flex;
align-items: center;
width: 185px;

}


.fast-actions{
display: flex !important;
justify-content: center;
align-items: center;
z-index: 100 !important;
gap:15px;
}

.fast-actions a:first-child svg{
color:#5050b6;
}

.fast-actions svg{
color:var(--color-accent) !important;
pointer-events: none;
}

.tooltip-state-btn {
position: relative;
cursor: pointer;
text-decoration: none !important;
}

.tooltip-state-btn::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%; /* position above */
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 6px 8px;
border-radius: 4px;
white-space: nowrap;
display: none;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
font-size: 12px;
z-index: 99999;
}

.tooltip-state-btn:hover::after {
opacity: 1;
display: block;
visibility: visible;
}

.fast-actions a{
position: relative !important;
color: var(--color-accent);
border-radius: .6rem;
padding: .2rem;
cursor: pointer !important;
pointer-events: all !important;

}


.delete-field-btn {
background: var(--off);
}


.stock-label{
display: none;
max-width: 90%;
margin: 0 auto .8rem;
}
.plv-root-info .plv-stock-out label{
display: flex;
width: 100% !important;
}


.stock-content-inner{
display:grid;
grid-template-columns: 2fr 2fr 0.5fr;
align-items: center;
margin: 0 auto .8rem;
}


.plv-root-info .stock-content-inner{
grid-template-columns: 1fr 1fr;

}

.plv-stock-balance{
margin-left: .8rem;
}



/* Header */
.plv-header {
display: flex;
font-weight: 600;
font-size: 14px;
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
}


.plv-head {
padding: 4px 8px;
flex: 1;
text-align: left;
}
.plv-menu-head { flex: 0.2; }
.plv-image-head { flex: 1; }
.plv-title-head { flex: 2; }
.plv-stock-head,
.plv-out-head,
.plv-balance-head { flex: 1; }



/* Product row */
.plv-list-item {
display: flex;
align-items: center;
gap: 6px;
border-bottom: 1px solid #cbcff4;
width: 100%;
max-width: 100%;
padding: 0;
position: relative;
}

.plv-list-item.list-active{
background:#7e84cf;
padding: 0 !important;
color:var(--color-accent);
}

@keyframes pulse-highlight {
0% {
background-color: #7980e1;
box-shadow: 0 0 0 0 rgba(106, 116, 251, 0.6);
}
50% {
background-color: #626cfa;
box-shadow: 0 0 0 6px rgba(106, 116, 251, 0.2);
}
100% {
background-color: #6a74fb;
box-shadow: 0 0 0 0 rgba(106, 116, 251, 0.0);
}
}

.just-updated {
background: #868ee4 !important;
color: var(--color-accent);
animation: pulse-highlight 1.5s ease-out 2 forwards;
border-radius: 6px;
transition: background 0.6s ease 3s, color 0.4s ease;
position: relative;
overflow: hidden;

}

.just-updated::before {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: rgba(255, 255, 255, 0.08);
border-radius: 6px; /* Clip to parent shape */
pointer-events: none;
animation: shine 2s ease-out 1;
z-index: 0;
}

@keyframes shine {
0% {
transform: translateX(-100%);
opacity: 0.2;
}
50% {
transform: translateX(0%);
opacity: 0.3;
}
100% {
transform: translateX(100%);
opacity: 0;
}
}

.plv-cell {
padding: 4px 6px;
flex: 1 1;
}


.plv-menu { flex: 0.2; }
.plv-image { flex: 0; cursor: pointer; }
.plv-title { flex: 2; }
.plv-stock,
.plv-stock-out,
.plv-stock-balance { flex: 1; }

.plv-media img{
max-width: 3.5rem;
object-fit: cover;
border-radius: .6rem;
box-shadow: var(--medium-shadow);
border:.2rem solid #8286b2;
}
.plv-media img:nth-child(2){
margin-left: -1.5rem;
border:.2rem solid #9da3ec;
}

.plv-image {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 0; /* We'll use overlap instead */
padding: 4px;
height: 50px; /* control the visual height of the stack */
overflow: visible;
}

.plv-product-img {
width: 40px;
height: 40px;
object-fit: cover;
border: .1rem solid var(--brand-border) ;
border-radius: 4px;
position: relative;
z-index: 1;
transition: transform 0.2s ease;
margin-left: -10px;
background: #fff;
box-shadow: var(--medium-shadow);
}

.plv-product-img:first-child {
margin-left: 0;
z-index: 3;
}
.plv-product-img:nth-child(2) {
z-index: 2;
}
.plv-product-img:nth-child(3) {
z-index: 1;
}

/* Optional hover effect */
.plv-image:hover .plv-product-img {
transform: scale(1.05);
}

.plv-exp{
margin-top: .6rem;
}



.plv-title-input,
.plv-stock-input,
.plv-stock-out-input {
width: 100%;
padding: 4px 6px;
font-size: 13px;
border: 1px solid #ccc;
border-radius: 3px;
}

.plv-stock-balance-value {
font-weight: 500;
font-size: 14px;
}

.plv-menu-btn {
background: transparent;
border: none;
font-size: 16px;
cursor: pointer;
margin-top: -.5rem;
}

.plv-menu-btn svg{
color:#007bff;
}


/*** update-starts **/
.vStep{
margin: 1rem auto 1rem;
width: 75% !important;
padding: 2rem;

}

.vStep .progress-wrapper{
margin-bottom: 1.5rem;
}

.vStep .visibility-btn{
margin-top: 1.5rem;
width: 100%;
min-width: 100% !important;
max-width: 100%;
padding: 1.5rem;
}

.vStep .visibility-dropdown {
position: relative;
}


.visibility-dropdown {
position: absolute;
left:0;
font-family: 'SF Pro Display', sans-serif;
width: 100%;
}


.visibility-btn {
position: relative;
left: 0 ;
width: 100%;
min-width: 255px;
max-width: 100%;
display: flex;
align-items: flex-start;
justify-content:flex-start;
gap:5px;
color: inherit;
padding: 10px 20px;
cursor: pointer;
font-size: 17px;
font-weight: 500;
background: linear-gradient(135deg, rgba(230, 230, 230, 0.6), rgba(140, 140, 236, 0.4));
border-radius:.8rem;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.07);
border: 1px solid rgba(255, 255, 255, 0.4);
backdrop-filter: blur(12px) saturate(140%);
}
.visibility-block-inner .visibility-btn{
border-radius: 4px !important;
height: 65px;
align-items: flex-start;
justify-content:center !important;
}

.visibility-block-inner .visibility-label,
.visibility-icon-first{
position:absolute !important;

}

.visibility-block-inner .visibility-label{
left: 35px !important;
top:18px !important;

}
.visibility-icon-first{
left: 155px !important;
top:20px !important;
}
.visibility-btn svg {
display: inline-block;
position: relative;
top:2px;
}

.visibility-options {
position: absolute;
top: 100%;
left: 0;
background: #1a1a1a;
box-shadow: 0 6px 14px rgba(0,0,0,0.2);
z-index: 100;
overflow: hidden;
width: 100%;
display: flex;
flex-direction: column;
margin:0 !important;
align-items: flex-start;
justify-content:flex-start;
}

.visibility-options.hidden {
display: none;
}

.visibility-option {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 6px;
padding: 6px 10px;
font-size: 13px;
cursor: pointer;
white-space: nowrap;
color: #fff;
margin:0 !important;
max-width:300px;
}

.visibility-option:hover {
background: rgba(255,255,255,0.05);
}

input[type="file"]{
z-index:500 !important;
}
.mini-brand-header {
width:100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 2px 8px;
font-family: 'Georgia', serif;
position: relative;
max-height: 36px;
}

.mini-brand-header h3{
color:#e3e6ff;
font-size:22px !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.mini-brand-header.no-border{
border-bottom:none !important;
}

.mini-logo {
width: 22px;
height: 22px;
background-color: #c8951f;
color: #fff;
font-weight: bold;
font-size: 12px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.mini-brand-text {
display: flex;
flex-direction: column;
line-height: 1.1;
overflow: hidden;
flex: 1;
}

.mini-name {
font-weight: 600;
font-size: 11px;
color: #ebebeb;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.mini-meta {
color: #cbcbcb;
font-size: 9.5px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

.mini-contact {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}

.phone-icon {
width: 12px;
height: 12px;
flex-shrink: 0;
color: #ffff !important;
}


.phone-number {
font-size: 10px;
color: #e7e7e7 !important;
white-space: nowrap;
}

.fade-in {
animation: fadeIn 0.4s ease-in-out;
}

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


.app-hidden-span{
display: none;
}
.brand-color{
display:inline-block !important;
width:30px !important;
height:30px !important;
border-radius:50% !important;
position: relative;
top:-.15rem;
}


.premium-inner{
position: relative;
top:75px;
padding: 2rem;
}

#settingsContainer{
align-items: center !important ;
}

.previewContent, .common-app-container{
position: relative;
}

.common-app-container{
width: 100%;
max-width: 100%;
display:flex;
justify-content: center !important;
align-items: flex-start !important;
height: 100vh; 
overflow-y: scroll !important;
overflow-x:hidden !important;
padding-left:0 !important;
padding-right: 0 !important;
padding-bottom: 15rem !important;
background: var(--ios-white);
}

.common-app-container.change{
height: var(--modal-height);
background: var(--modal-bg);
padding-bottom: 5rem !important;
overflow-y: hidden !important;
overflow-x:hidden !important;
}


.common-app-container.visible{
display: flex;
}
.common-app-container::-webkit-scrollbar{
display: none; /* Safari + Chrome */
}




.app-cover{
width: 100%;
max-width: 100%;
margin: 0 auto;
}



.dashboard-inner{
position: relative;
justify-self: center;
align-self: center;
}

.common-app-container h3, 
.dashboard-inner h3{
font-size: 1.6rem;
}

.preview-note{
color:var(--color-primary);
font-family: var(--cinzel);
font-size: 12px;
}



.top-history-navigations{
background: var(--loud-blue) !important;
position: absolute;
padding: 1rem;
top:0;
left:0;
width: 100%;
border-bottom: .1rem solid #b4b4b4;
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--cinzel);
z-index: 100;
margin-bottom: 1rem;
height: 75px;
}

.top-profile-avatar {
display: block;
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
border: 3px solid var(--loud-blue-border);
background: var(--loud-blue-light);
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
transition: transform 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
position: relative;
z-index:2  !important
}

.top-profile-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.top-profile-avatar img:hover {
transform: scale(1.1);
box-shadow: 0 6px 16px rgba(0,0,0,0.5);
}

/* Optional: glowing ring effect */
.top-profile-avatar::before {
content: '';
position: absolute;
top: -4px;
left: -4px;
width: calc(100% + 8px);
height: calc(100% + 8px);
border-radius: 50%;
background: linear-gradient(45deg, #6069e8, #363fc5, #2c2c3c);
z-index: -1;
filter: blur(6px);
opacity: 0.8;
}

#menu-vert-icon{
position: absolute;
top:1rem;
right:2rem;
}

.form-group textarea{
max-width: 100% !important;
width:100% !important;
margin:1rem 0 1rem !important;
height:85px;
}

.timezone-group label{
margin: 0 0 10px !important;
}
.form-group label, .timezone-group label{
text-align: left !important;
margin: 0 0 10px !important;
position:relative;
left:0 !important;
}
.registration-note{
max-width:78% !important;
margin: 0 auto 0;
line-height: 1.6;
color:#444;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.top-history-nav-holder{
cursor: pointer;
}

top-history-nav-holder a {
  pointer-events: none;
}

top-history-navigations svg,
.top-history-navigations a{
pointer-events: none;
}

.top-history-navigations a:nth-child(2){
margin-top: -1.2rem;
}
.top-history-navigations .feather-arrow-left{
color:var(--loud-blue-light) !important;
}

.top-history-navigations svg{
pointer-events: none;
margin-left: 2rem;
margin-bottom: 1rem;
color:var(--color-accent)
}

.dashboard-inner ul{
list-style: square;
margin:2.5rem auto 1rem;
max-width: 100%;
width: 100%;
justify-self: center;
}

.dashboard-inner li {
margin-bottom: 2rem;
width: 100%;
}


.dashboard-inner li a{
text-decoration: none;
color:var(--color-text);
font-size: 1.2rem;
cursor: pointer;
}

.dashboard-inner li a.active{
background: var(--color-primary);
color: var(--color-accent);
padding: .8rem;
border-radius: 1rem;
margin-bottom: 1.5rem;
transition: 0.2s ease-in-out;
scale:0.88;
background: var(--color-primary);
color: var(--color-accent);
padding: .8rem;
border-radius: 1rem;
}

.goUp{
top:3rem !important;
}

[data-svg="true"]{
cursor: pointer;
}

.medialib-block-left [data-svg="true"]{
margin:0 !important;
top:0 !important;
}

[data-svg="true"]{
pointer-events: auto !important;
z-index:10 !important;
width: 45px ;
height: 45px;
padding: 8px;
}

[data-nopointer="true"] path,
[data-nopointer="true"] circle,
[data-nopointer="true"] rect,
[data-nopointer="true"]  line,
[data-nopointer="true"] polygon,
[data-nopointer="true"] polyline,

[data-svg="true"] path,
[data-svg="true"] rect,
[data-svg="true"]  line,
[data-svg="true"] polygon,
[data-svg="true"] polyline
{
pointer-events: none !important;
}
#alphabetTabContainer{
padding-bottom: 20rem !important;
}



.content-top svg{
border-radius: .8rem !important;
}



.feed-top svg, 
.feed-top img,
.content-top svg{
width:55px;
height:55px 
}

.feed-top img{
object-fit: cover !important;

}

.feed-top svg, 
.feed-top img,
.content-top svg{
color:var(--loud-btn) !important;
cursor: pointer;
background: var(--ios-white) !important;
box-sizing: border-box !important;
box-shadow: var(--medium-shadow) !important;
padding: 7px !important;
border-radius: 50%;
scale: 1.2;
border:2px solid var(--loud-btn);
user-select: none;
resize:none;
}


.feed-top  span{
pointer-events: none;
}


.feed-top svg
{
cursor: pointer;
}

.feed-top  a{
padding: .6rem;
}

#softProfileContainer[data-svg="true"]{
scale:1.1;
box-sizing: border-box;
box-shadow: 0 6px 12px rgba(108, 99, 255, 0.3); /* subtle purple glow */
background: rgb(232, 232, 232);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}



.feed-top  a,
[data-svg="true"] 
{
background: rgb(232, 232, 232) !important;
margin-bottom: 1rem !important;
border-radius: 2rem !important;
}

.feed-top a:hover,
[data-svg="true"]:hover{
background: rgb(33, 33, 33) !important;
color:#fff !important;
}

.top-title{
position: absolute;
top:13%;
left:40%;
z-index: 1 !important;
width: auto;
}

.middle-right.align{
align-items: center !important;
}
.full-portfolio-name:hover{
color: var(--color-hover) !important;
scale:1.1;
transition: 0.2s ease-in-out;
}

.top-title.isexpired{
left:35%;
}

#app .top-title{
margin-top:3rem !important;
}

.top-title a{
position: relative;
display: flex;
margin-bottom: .6rem;
width: 100%;
}



#portfolioContext{
transform: translateX(75px) translateY(2px);
border-bottom: #aeaeae .1rem solid;
margin-right: 10px !important;
}


#portfolioContext{
pointer-events: none;
position:fixed;
z-index: 50 !important;
font-family: var(--cinzel);
color: #666 !important;

}

#contextLockInfo rect,  #contextLockInfo path{
pointer-events: none !important;
}


#contextLockInfo{
background:#7a4fff !important;
color:#ccd7ff !important;
width:30px;
height:30px;
padding: 3px;
border-radius: 50% !important;
pointer-events: auto !important;
cursor:  pointer !important;
z-index: 10;
margin: 0 !important;
}


#contextLockInfo:hover{
color:#e3fee7 !important;
background:#64c775 !important;
}

.app-middle{
position: absolute !important;
top:125px !important;
margin:0 auto 0;
background: var(--ios-white);
width: 100%;
padding-bottom: 8rem;
height:auto;
}

.middle-options{
position: relative;
width: 100%;
max-width: 100%;
padding:.4rem;
z-index: 0;
border-radius: .8rem;
}

.middle-right-media-container{
flex: 0 0 45%;
}

.middle-right-media-container.one-item{
flex: 0 0 100% !important;
}


.middle-options h3{
font-size: 21px !important;
}

.middle-options.mb{
margin-bottom: 2.5rem !important;
}

.private-info-block{
width: 100%;
max-width: 100%;
}

.private-info-block  h3{
color:#777;
font-family: var(--anton);
}

#tabListContainer{
list-style: none;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
width: 100%;
margin: 0 !important;
position: relative !important;
}


#alphabetTabContainer{
position: relative;
top:65px;
transition: 0.3s ease-in;
-webkit-overflow-scrolling: touch;
overflow-y: scroll; 
overflow-x: auto;  
scrollbar-width: none; 
-ms-overflow-style: none; 
padding-bottom: 4rem;
z-index: 500 !important;
transform: rotate(360deg);
max-height: 95vh;
}

#alphabetTabContainer.invisible{
opacity: 0 !important;
visibility: hidden;
pointer-events: none !important;
display: none;
transform: translateX(-7rem);
}

#alphabetTabContainer li {
text-decoration: none;
list-style: none;
}


.portfolio-alphabeted{
margin-bottom: 0.5rem;
height: 90px;
width: 90px;
max-width: 100%;
border-radius: .8rem;  
background: #c6cbd7;

display: flex;
justify-content: center;
align-items: center;

font-size: 13px;
font-family: var(--orbitron);
line-height: 1.2;
text-align: center;

user-select: none !important;
cursor: pointer !important;
resize: none !important;
padding: 1rem !important;
}


.portfolio-alphabeted:hover{
transition: 0.2s ease;
scale:0.9;
}

.portfolio-alphabeted.active{
scale:1.0;
transition:0.2s ease;
background: #000;
color:var(--color-accent);
}


.middle-first::-webkit-scrollbar {
display: none;
}

.middle-first a{
text-decoration: none;
}


.app-middle-list-image{
display: flex;
gap: 10px;
width: 70%;
margin: 0 0 1rem;
}


.app-middle-list-image img{
width:100px;
height:100px;
aspect-ratio: 1/1;
object-fit: cover;
object-position: center;
border-radius: 2rem;
box-shadow: var(--deep-shadow);
padding: 0 !important;
}


.view-option-status a {
padding: 5px 10px !important;
width: auto !important;
background: #000;
color: var(--color-accent);
text-decoration: none;
display: inline-block;
border-radius: 4px; /* optional */
}

.view-option-status a:hover {
transform: scale(0.88);
transition: transform 0.2s ease-in-out, background 0.2s ease-in-out;
}


.view-option-status a:nth-child(1) {
background: #f2620f;
}

.blocked, .mode-switcher span, .mode-switcher svg{
pointer-events: none !important;
}

.muted{
background: rgba(197, 197, 197, 0.5) !important;
}

.disabled{
background: rgba(197, 197, 197, 0.5) !important;
pointer-events: none !important;
}

.audio-disabled{
background: transparent !important;
pointer-events: none !important;
}
.app-middle a{
cursor: pointer;
}


.app-middle svg,
.app-middle span{
pointer-events: none;
}


.is-active-bg{
background:#b2ecc7 !important;
color:var(--color-text) !important;
}

.is-off-bg{
background:#f7799b;
color:var(--color-text);
}


.middle-first-create-btn button{
padding: 4rem !important;
}

.middle-first-create-btn{
position: absolute;
left:.4rem;
background: var(--color-primary);
color: var(--color-accent);
border-radius: 1rem;
padding: .4rem;
z-index: 0;
word-break: keep-all;
white-space: nowrap; 
flex: 0 0 auto;
margin-left: -.4rem;
}


.middle-first-create-btn:hover{
background: var(--off);
scale: 0.9;
transition: 0.2s ease-in-out;
}

.common-app-container button{
cursor: pointer !important;
user-select: none !important;
resize: none !important;
}

.user-avatar{
position: relative;
z-index: 10;
margin-bottom: .6rem;
width: 58px;
height:58px;
border-radius: 50%; /* perfect circle */
object-fit: cover;
border: 3px solid #9C27B0;
box-shadow:
0 2px 6px rgba(255, 94, 91, 0.6), /* subtle colored glow */
0 8px 15px rgba(255, 94, 91, 0.25);
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
filter: saturate(1.2) brightness(1.1); /* boost colors */
}

.user-avatar:hover,
.user-avatar:focus {
transform: scale(1.15) rotate(3deg);
box-shadow:
0 4px 12px rgba(255, 94, 91, 0.9),
0 12px 25px rgba(255, 94, 91, 0.5);
outline: none;
}


.middle-left{
z-index: 0 !important;
}

.middle-left ul{
text-decoration: none;
list-style: none;
font-family: var(--anton);
font-weight: 100;
margin: 1rem auto 1rem;
position: relative;
}

.middle-left ul li {
margin-bottom: 1.2rem;

}

.middle-left ul li a{
color:var(--color-muted);
text-decoration: none;
margin-left: .5rem;
}


.has-expired{
margin-left: .6rem;
color:rgb(250, 93, 54);
font-size: 11px;
margin-top: .3rem;
}




.first-portfolio{
border-bottom: .1rem solid #dbdbdb;
text-decoration: none;
font-family: var(--cinzel);
color:var(--color-text);
width: 100%;
}

.tiny-pretty-text{
position: relative;
}



.uploadBlock {
padding: .4rem;
border-radius: 8px;
text-align: center;
cursor: pointer;
transition: background 0.2s ease;
position: absolute;
top:5px;
right: -5px;
transform: none;
z-index: 0 !important;
max-height: 30px !important;
}

.uploadBlock svg{
z-index: 0 !important;
color:#666;
margin-bottom: 25px !important;
}

.uploadBlock:hover {
background: #f9f9f9;
}

.upload-dropdown {
position:fixed;
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: 0.2s ease-in-out;
z-index: 500 !important;

}

.upload-dropdown.visible{
pointer-events:auto;
visibility: visible;
opacity: 1 !important;
}

.upload-dropdown ul{
position: relative;
left:1.3rem !important;
list-style-type: none;
background: var(--ios-white);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.07);
border: 1px solid rgba(214, 214, 214, 0.4);
border-radius: .4rem;
padding: .6rem;
}


.upload-dropdown ul  li{
margin-bottom: .8rem;
border-bottom: .1rem solid #e5e5e5;
width: 100%;
}

.upload-dropdown ul  li a{
color:#666;
word-break: keep-all;
white-space: nowrap; /* don't wrap text */
flex: 0 0 auto;
}

.portfolio-subheading{
position: absolute; 
top: 7rem;
left: 7.5%;
margin-top: 1rem !important;
margin-bottom: 1rem !important;
width: 85%;
text-align: center;
justify-self: center !important;
font-size: 1.3rem;
font-family: var(--cinzel);

}
.portfolio-subheading::after{
content: "";
position: absolute;
background: #e0e8f5;
top:100%;
left:17.5%;
height: .1rem;
width: 65%;
}

.middle-right-media-wrap {
scroll-snap-align: start;
display: inline-block;
color:var(--load-btn-text);
width: 100% !important;
height: auto;
padding: .8rem;
border-radius: .6rem;
font-family: var(--roboto);
}


.middle-right-media-wrap ul{
background: #c6cbd7;
display: inline-block;
width: 100% !important;
height: 200px;
text-decoration: none;
list-style: none;
}


.middle-right-media-wrap ul li{
width: 100% ;
}

.middle-right-non-media button{
background: var(--color-primary) !important;
}
.no-media-title{
font-family: var(--anton);
color:var(--color-muted);
}
.ui-card-rainbow{
margin-top: .8rem !important;
}
.ui-card-line{
display: inline-block;
height:1px;
width: 100%;
background: rgb(224, 224, 224);
}


.middle-audio-lists{
display: flex;
align-items: flex-start;
justify-content: flex-start;
width:100%;
max-width: 60%;
margin: 0;
flex-direction: column;
}

.realistic-pdf-shelf{
position: absolute;
align-items:center;
transform: translateY(1.5rem);
min-height:475px;
width:calc(100% - 1rem);
background: url('/assets/images/wooden-shelf.jpg') no-repeat center center;
background-size: cover;
}

.realistic-pdf-shelf .common-pfd-book{
min-width: 300px;
max-width: 300px;
min-width: 35vh;
height: 385px;
transform: translateY(-10px);
}

.mixed-media-hub .pdf-book
{
min-width: 165px !important;
max-height: 255px !important;
width:100% !important;
display: grid !important;
align-items: start !important;
justify-content: center !important;
height:auto;
position: relative !important;
top:-1rem !important;
}

.mixed-media-hub .pdf{
position: relative !important;
top: 35% !important;
}

.mixed-media-hub .pdf-book-title{
position: relative !important;
transform: translateY(-3rem) !important;
}

.pdf-book{
background: #fff;
border-left:1rem solid #d0b16f;
width: 105px;
height:100%;
margin-left:0 !important;
margin-right:0 !important;
margin-top:1.3rem !important;
box-shadow: var(--box-shadow);
padding:.5rem;
border-radius: .2rem;
cursor: pointer;
position: relative;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pdf-book:hover{
border-left:1rem solid #eed8a8;
}

.pdf-book:nth-child(1){
margin-left:  .8rem !important;
}


.pdf-book:last-child{
margin-right:  .8rem !important;
}


.pdf{
font-size: 13px !important;
margin-top: .4rem;
}

.pdf-book::after {
content: "";
position: absolute;
inset: 0;
border-radius: 0.2rem;
box-shadow: inset 0 1px 2px rgba(255,255,255,0.3);
}

.pdf-book-title{
font-size: 12px !important;
margin-top: 1rem;
position: relative;
z-index: 100;
transform: rotate(360deg);
}


.pdf-book-title:hover{
color:#2563eb;
}
/* Base styles as before (desktop/tablet) */
.no-glass{
backdrop-filter: none !important;
z-index: 0 !important;
box-shadow: none !important;
border:.1rem solid #c9c9c9 !important;
}



.glass-bg{
background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(240, 240, 255, 0.4));
background: var(--ios-white);
border-radius: 1.4rem;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.07);
border: 1px solid rgba(255, 255, 255, 0.4);
backdrop-filter: blur(12px) saturate(140%);
}

.glass-bg::before{
background: radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.35), transparent 60%);
}


.ios-white{
background: var(--ios-white);
}


.middle-right-media,
.realistic-audio-hub{
gap: 15px; /* consistent gap here */
}


.middle-right-media,
.realistic-audio-hub{
display: flex;
scroll-snap-type: x mandatory;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-padding: 0 50%; /* centers the snap */
scroll-behavior: smooth;
padding: 1rem;
width: 100%;
position: absolute;
}


.middle-right-media::-webkit-scrollbar{
display: none;
}


.middle-right-media::before, 
.realistic-audio-hub::before {
content: '';
position: absolute;
top: -30%;
left: -30%;
width: 160%;
height: 160%;
transform: rotate(15deg);
pointer-events: none;
z-index: 1;
}


.middle-right-media{
height: 400px; /* Desktop height */
}


.audio-mid-options{
width: 700px !important;
max-width:100% !important;

}

.realistic-audio-hub {
gap: 20px;
width:100%;
position: relative !important;
height: auto;
}

.audio-box{
position: relative;
left:-.5rem;
height: 260px;
background: rgba(0, 0, 0, 0.08);
box-shadow: var(--deep-shadow);
padding: 1rem !important;
margin-bottom: 1.5rem !important;
border-radius: 1rem;
}

.change-position{
position: absolute !important;
z-index:6000 !important;
left:0 !important;
top:50% !important;
transform: translateY(-50%) !important;
}


.pdf-book:hover,
audio, video, img {
transform: translateY(-4px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.realistic-audio-hub{
width: 500px;
max-width: 100%;
}

.realistic-audio-hub audio{
height: 150px;
background: transparent !important;
}


.audio-actions{
display: grid;
position: absolute;
top:75px;
left:82%;
z-index: 100;
gap:35px;

}

.audio-actions a{
cursor: pointer;
}

.custom-audio-cover-1 img,
.custom-audio-cover img{
position: absolute !important;
top:-22.5px !important;
left:0 !important;
object-fit: cover !important;
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
z-index: 0 !important;
}



/* custom-video-starts */
.realistic-video-hub{
width: 100%;
max-width: 100%;
height:100%;
display: grid;
flex-direction: column;
justify-content: center;
align-items: center;
gap:25px;
padding-bottom: .8rem;
}

.video-box{
min-height: 500px;
max-height: 550px;
width:650px;
max-width: 100%;
background: rgba(0, 0, 0, 0.7);
border-radius: .8rem;
padding:14px 7px;
box-shadow: 0 10px 30px rgba(65, 65, 65, 0.25);
font-family: 'SF Pro Display', 'Helvetica Neue', sans-serif;
position: relative;
background: rgba(0, 0, 0, 1);
z-index: 0 !important;
}



.realistic-video-hub video{
min-height: 500px;
max-height: 500px;
height:100%;
width:100%;
object-fit: contain;
background: rgba(0, 0, 0, 0.5);
position: relative;
z-index: 2 !important;
}

.realistic-video-hub svg{
color:var(--loud-blue-light) !important;

}

.custom-video-player .control-btn{
padding: 6px !important;
text-align: center !important;
position: absolute !important;
z-index:99999 !important;
left:5px;
transform: translateY(-5px) !important;
cursor: pointer !important;
}

.custom-video-player .control-btn svg{
pointer-events: none;
}

.custom-video-player .controls svg{
width:24px;
height: 24px;
}

[data-minimize="video"] svg,
[data-video="more-options"] svg{
background: rgba(0, 0, 0, 0.5);
border:.1rem solid #343434;
cursor: pointer;
width:24px;
height: 24px;
}

[data-minimize="video"]{
right:55px;
display:flex;
gap:20px;
}

[data-video="more-options"]{
right:5px;
}

[data-video="more-options"],
[data-minimize="video"] {
position: absolute !important;
top:10px !important;
z-index: 99999 !important;
rotate: 360deg !important;
}

.common-svg rect, 
.common-svg path,
.common-svg circle, 
.common-svg line,
.common-svg polyline, 
.common-svg polygon{
pointer-events: none;
}
.custom-video-player .controls {
padding: 12px 16px;
background: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(8px);
color: #fff;
transition: all 0.3s ease;
position: absolute;
left: 0;
z-index: 5 !important;
bottom: 0;
width:100%;
max-width: 100%;
border-bottom-right-radius: 1rem;
border-bottom-left-radius: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
gap:20px;
}

.controls .common-svg{
position: relative !important;
z-index: 500 !important;
width:30px !important ;
height:30px !important;
left:15px;
pointer-events: auto !important;
}

.controls .common-svg rect,
.controls .common-svg path,
.controls .common-svg line,
.controls .common-svg polygon,
.controls .common-svg polyline{
pointer-events: none !important;
}

.custom-video-player .seek-bar-wrapper {
position: relative;
flex-grow: 1;
display: flex;
justify-content: space-between;
align-items: center;
height: 40px;
}

.custom-video-player .seek-bar {
-webkit-appearance: none;
appearance: none;
width: 78px; 
height: 7px;
background: linear-gradient(
90deg,
rgba(28, 45, 227, 0.3),
rgba(255, 255, 255, 0.2),
rgba(108, 119, 240, 0.3)
);
border-radius: 5px;
cursor: pointer;
transition: width 0.3s ease, height 0.3s ease;
box-shadow: 0 2px 10px rgba(28, 45, 227, 0.4);
backdrop-filter: blur(6px);
}

/* Expand width on hover or interaction */
.custom-video-player .seek-bar:hover,
.custom-video-player .seek-bar:focus,
.custom-video-player .seek-bar:active {
width: 40%; /* Expand to full width of the wrapper */
height:10px;
}

/* Thumb */
.custom-video-player .seek-bar::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
height: 14px;
width: 14px;
border-radius: 50%;
background: #fff;
border: none;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
transition: all 0.2s ease;
}

.custom-video-player .seek-bar::-moz-range-thumb {
height: 14px;
width: 14px;
border-radius: 50%;
background: #fff;
border: none;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
transition: all 0.2s ease;
}



.custom-video-player .time {
font-size: 12px;
color: rgba(255, 255, 255, 0.8);
min-width: 75px;
text-align: right;
margin-right: 10px;
transform: translateX(15px) !important;
}

/** custom-video-endss **/
.middle-right-desc{
display: grid;
grid-template-columns: 5fr 0.5fr;
align-items: center;
}

.bottom-viewer-options{
display: flex;
align-items: flex-start;
width: 100%;
margin-top: .7rem;
gap:5px;
}

.viewer-btn-block{
display: flex;
align-items: center;
gap:5px;
margin: 0;
}


.viewer-btn-block button,
.bank-account-mini button:nth-child(4),
.bank-account-mini button:nth-child(5){
padding: 4px 10px !important;
font-size: 12px !important;
border-radius: 6px;
border: none;
font-weight: 500;
cursor: pointer;
user-select: none;
min-width: auto;
line-height: 1.2;
color: #fff;
}

/* Copy Button */
button.btn-copy {
background: var(--btn-copy);
}
button.btn-copy:hover {
background: #8c8c8c;
}

/* Share Button */
button.btn-share {
background: var(--btn-share);
}
button.btn-share:hover {
background: var(--btn-share-hover);
}

/* Download Button */
button.btn-download {
background:  var(--btn-download);
}
button.btn-download:hover {
background:  var(--btn-download-hover)
}


/* Disabled Button */
button:disabled,
button.btn-disabled {
background: var(--btn-disabled);
color: #9e9e9e;
cursor: not-allowed;
}

.bottom-viewer-options p{
margin-left: 0 !important;
}

.bottom-status-block{
display: grid;
grid-template-columns: 1fr 6fr;
width: 100%;
max-width: 155px;
margin: 0 !important;
padding: 0 !important;
align-items: flex-start;
}
.bottom-status-block span{
position: relative;
top:1.5px;
padding: 0 !important;
}

.bottom-viewer-options button{
width: auto;
}


.middle-right-title {
font-size: 19px ;
margin:0 0 25px ;
color:var(--color-muted);
font-family: var(--anton);
font-weight: 100;
position: relative;
top:.8rem;
left:100px !important;
}

.expires-in-title{
display: grid;
grid-template-columns: 1fr 1fr;
gap:10px;
width: 100%;
}

.expires-in-title svg{
width: 16px;
height: 16px;
}
.expires-in-title span{
margin: 0 !important;
font-size: 13px !important;
}
.middle-options:not(:first-child){
margin-top: 1rem;
}



.middle-right-media-wrap  p{
font-size: 16px;
margin-bottom: .3rem;
font-family: var(--roboto);
color:#737373;
}

.middle-right img{
width:100%;;
object-fit: cover;
border-radius: .8rem;

}


.view-option-status{
width: 55%;
display: grid;
grid-template-columns: repeat(3, 1fr) !important;
margin: 0 auto .8rem !important;
gap: 5px;
z-index: 0;
}



.exp-status-left{
pointer-events: none !important;
}
.exp-status-left svg{
width: 17px;
height: 17px;
}

.opt-status-right svg{
width: 22px !important;
height: 22px !important;
margin-top: .2rem;
scale: 1.1;
}







.portfolio-tab-view svg:hover{
transition:0.2s ease-in-out;
background: var(--color-primary);
color:var(--color-accent);
}

#porfolio-view-container{
align-items: baseline !important;

}
.porfolio-view {
width: 100%;
position: relative !important;
top:5rem !important;
}

.porfolio-view ul {
text-decoration: none;
list-style: none;
}
.porfolio-view ul li{
border-bottom: .1rem solid #dbdbdb;
margin-bottom: 1rem;
padding: .8rem;
}

.portfolio-cta{
display: flex;
align-items:flex-start;
justify-content: flex-start;
width: 35%;
margin: 0 !important;
gap: 15px;
position: relative;
margin-top:1rem !important;
margin-bottom: .8rem !important;
}
.portfolio-cta button{
padding: .4rem !important;
}
.portfolio-cta button:hover{
transition: 0.2s ease-in-out;
background: var(--off);
scale: 0.88;
}
.portfolio-tab-view{
position: absolute;
right: 1rem;
cursor: pointer;
z-index: 2;
}

#pdfLoadBtn{
transform: rotate(-90deg);
}

.action-loadmore-block.position{
position: fixed !important;
top:700px !important;
left:50% !important;
transform: translateX(-50%) !important;
}

.gap{
display: inline-block;
position: relative;
width:100%;
height: 45px;
transform: rotate(-90deg);
}

.action-loadmore-block{
display: none;
position: relative;
bottom: 85px;
/*
position:sticky !important;
bottom:2rem;
margin-top:auto;
*/
}

.action-pdfloadmore-block {
position: relative;
top:-1rem;
z-index:1000 !important;
}
.action-loadmore-block, .action-pdfloadmore-block {
justify-content: center;
align-items: center;
margin: 0 auto 0;
width: auto;
padding-bottom: 1rem;
}
.action-loadmore-block.display{
display: flex;
}


.loadmore-btn ,
.pdfloadmore-btn{
width: auto;
background: var(--load-btn-bg) !important;
color: var(--load-btn-text) !important;
border: none;
border-radius: 2rem;
padding: 0.6rem 1.5rem;
font-size: 0.9rem;
font-family: var(--roboto);
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
cursor: pointer;
transition: background 0.2s ease;
position: relative;
overflow: hidden;
z-index:0 !important;
}

.loadmore-btn:hover,
.pdfloadmore-btn:hover {
background: var(--load-btn-hover);
}

.loadmore-btn .dot , .pdfloadmore-btn .dot{
display: none;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--load-dot);
animation: bounce 1.2s infinite ease-in-out;
}

.loadmore-btn.loading .dot,
.pdfloadmore-btn.loading.dot {
display: inline-block;
}

.pdfloadmore-btn .dot:nth-child(1) { animation-delay: 0s; }
.pdfloadmore-btn .dot:nth-child(2) { animation-delay: 0.15s; }
.pdfloadmore-btn .dot:nth-child(3) { animation-delay: 0.3s; }


.loadmore-btn .dot:nth-child(1) { animation-delay: 0s; }
.loadmore-btn .dot:nth-child(2) { animation-delay: 0.15s; }
.loadmore-btn .dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes bounce {
0%, 80%, 100% {
transform: scale(0.9);
opacity: 0.5;
}
40% {
transform: scale(1.2);
opacity: 1;
}
}

.load-text, .load-pdf-text {
margin-left: 0.5rem;
}

.loadmore-btn.loading .load-text,
.loadmore-btn.loading .load-pdf-text  {
opacity: 0;
transition: opacity 0.2s ease;
}



.pdf-book-cover {
max-width:100px;
height: 100px;
display: flex;
align-items: stretch;
cursor: pointer;
width: 100%;
border-radius: 4px;
box-shadow: 0 3px 8px rgba(0,0,0,0.15);
background: linear-gradient(to bottom, #fcefe3, #f3f3f3);
overflow: hidden;
font-family: 'Segoe UI', sans-serif;
transition: transform 0.2s ease;
position: relative;
}


.pdf-cta{
position: relative;
top:2.5rem;
font-size: 11px !important;
}
.pdf-tag{
position: absolute;
top:0;
}

.pdf-tag-title{
position: relative;
top:.6rem;
background:#4f4d4c;
color:var(--color-accent) !important;
padding: .6rem;
border-radius: 50%;
display: inline-block;
height: 22px;
font-size: 9px !important;
width: 22px;
display: flex;
align-items: center;
justify-content: center;
}

.pdf-book-cover:hover {
transform: scale(1.02);
}

.book-spine {
width: 10px;
background: linear-gradient(to right, #322b28, #150f0c);
box-shadow: inset -1px 0 0 rgba(0,0,0,0.1);
}

.book-front .book-content {
width:100%;
}
.book-front{
padding: 12px;
flex: 1;
background: #fff;
}
.book-front, .book-front .book-content {

display: flex;
align-items: center;
justify-content: center;
border-radius: .2rem;
}

.book-front h3{
position: relative;
z-index:5;
font-size: 1.4rem;
color: #333 !important;
text-align: center;
line-height: 1.2em;
}

.book-front p{
position: relative;
z-index:5;
font-size: .8rem;
color: #5f5f5f !important;
width:155px;
max-width:65%;
text-align: justify;
line-height: 1.2em;
}

.book-title {
font-size: 14px;
font-weight: 600;
color: #333;
text-align: center;
line-height: 1.2em;
max-height: 2.4em;
overflow: hidden;
}

.pdf-preview-wrapper {
position: relative;
max-width: 100%;
background: #fff;
padding: 8px;
border: 1px solid #eee;
border-radius: 6px;
}


#previewPdfModal [data-closemodal]{
position: absolute;
top:-.4rem !important;
}

[data-closemodal] svg{
user-select: none;
-webkit-user-drag: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
user-drag:none !important;
-webkit-user-drag: none !important;
}

#previewPdfModal [data-closemodal] svg{
color:#777 !important;
position: relative;
top:25px;
}

.media-preview{
margin-bottom: 1rem;
border-radius: 6px;
overflow: hidden;
background: #f7f7f7;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
transition: all 0.3s ease-in-out;
}

.media-preview video,
.media-preview audio,
.media-preview embed {
width: 100%;
max-height: 200px;
display: block;
border: none;
outline: none;
}

.media-preview.pdf embed {
height: 200px;
}

.media-preview.audio {
padding: 1rem;
}

.media-preview.audio audio {
width: 100%;
}

.media-preview.video video {
max-height: 400px;
}


/** bottom-starts ***/
.app-bottom.height{
height: 70px;
}

.app-bottom-inner{
display:grid;
grid-template-columns: 1fr 6fr 1fr;
justify-self: center !important;

opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(20%);
transition:
transform 0.6s cubic-bezier(0.25, 1, 0.5, 1),
opacity 0.4s ease,
visibility 0s linear 0.6s;
z-index:0 !important;

max-width: inherit !important;
border-bottom-left-radius: 3rem;
border-bottom-right-radius: 3rem;
border-top-left-radius: .4rem;
border-top-right-radius: .4rem;
width: 100% !important;
height: auto;
max-height: auto;
padding-left: 0!important;
padding-right: 0. !important;
padding-top: 1rem !important;
border-top:.1rem solid #d4d4d4;
overflow: hidden !important;
}


.app-bottom-inner.visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(0);
transition:
transform 0.6s cubic-bezier(0.25, 1, 0.5, 1),
opacity 0.4s ease,
visibility 0s linear 0s;
z-index: 9999999;
}


.feed-top{
width:100% !important;
max-width: 100% !important;
}


#quickActionContainer,
.feed-top{
bottom:1rem !important;
z-index: 999999 !important;
}


#quickActionContainer::before{
content: "";
position: fixed;
left:0;
bottom:-.8rem;
z-index:0 !important;
max-width: 97% !important;
width:100% !important;
left:50%;
transform: translateX(-50%);
height: 100%;
background:var(--ios-white);
border-bottom-right-radius: 3rem;
border-bottom-left-radius: 3rem;
border-top:.1rem solid #dfdfdf;
}


#quickActionContainer.invisible{
display: none;
}


#quickActionContainer a{
position: relative;
top: -1rem;
height: 55px;
width:55px;
padding: 5px 10px;
justify-content: center;
align-items: center;
display: flex;
color:var(--loud-btn) !important;
cursor: pointer;
background: var(--ios-white) !important;
box-sizing: border-box !important;
box-shadow: var(--medium-shadow) !important;
border:2px solid var(--loud-btn);
border-radius: 50%;
user-select: none;
resize:none;
cursor: pointer;
pointer-events: auto;
transition: width 0.2 ease-out;
}


#quickActionContainer img{
height: 49px;
width:49px;
pointer-events: none ;
}

#quickActionContainer svg{
height: 35px;
width:35px;
pointer-events: none ;

}
[data-action="notification"]{
position:relative;
}

[data-action="notification"] span{
pointer-events: none;
position:absolute;
top:-.3rem;
text-align: center;
place-items:center;
display:flex;
justify-content: center;
background:#ef4d41;
color:#ffe8e6;
font-size:8px;
padding: 5px 10px;
width:18px;
height:18px;
border-radius: 50%;

}

#quickActionContainer img{
border-radius: 50%;
object-fit: cover;
margin-top: .6rem;
}



.feed-top-inner img,
.feed-top-inner svg{
top:0 !important;
margin:0 !important
}
.feed-top-inner{
height: 88px;
}


.feed-top-inner{
gap:25px;
}
.quick-container-inner{
width:55%;
display: flex;
gap:10px;
flex-direction: row;
align-items: center !important;
position: relative;
top:2rem;
padding:.4rem;
justify-content: center !important;
}




.app-bottom-inner.grid-column{
grid-template-columns: 5fr 1fr;
padding: .8rem;
}


.app-bottom svg path, .app-bottom polyline, .app-bottom svg polygon
.app-bottom svg line{
pointer-events: none;
}

.app-bottom svg{
width:35px;
height:35px;
scale: 1.23;
border:.15rem solid  rgb(84, 93, 160);
border-radius: 50%;
color:var(--color-accent);
padding: .2rem;
background: linear-gradient(145deg, #0f1117, #1a1d24);
position: relative;
top:1rem;
cursor: pointer;
}
.bottom-right{
cursor: pointer;
position: relative;
left:.6rem;
}


.bottom-right svg{
pointer-events: none;
}


.bottom-left svg:hover, 
.bottom-right svg:hover,
.portfolio-tab-view svg:hover{
transition:0.2s ease-in-out;
background: #1a1b22;
color:rgb(248, 248, 255);
border:.15rem solid rgb(137, 131, 250);
animation: bouncePop 0.3s ease;
}


.app-bottom textarea{
width: 100% !important;
border-radius: .6rem;
position: relative;
margin:0 1rem 0;
border:.1rem solid var(--color-border);
-webkit-overflow-scrolling: touch;
overflow-y: scroll; 
overflow-x: auto;  
scrollbar-width: none; 
-ms-overflow-style: none; 
font-family: var(--roboto) !important;
padding: 1.2rem !important;
resize: none;
color:#7b7b7b;
outline-color:var(--loud-blue);
}


.app-bottom::-webkit-scrollbar{
display: none;
}


.visible-text-area, .bottom-middle{
width: 100% ;
}

.visible-text-area {
transition: opacity 0.4s ease-in-out;
opacity: 0;
animation: fadeInOpacity 0.8s ease forwards;
animation-delay: 0.5s;
}

@keyframes fadeInOpacity {
from { opacity: 0; }
to { opacity: 1; }
}
.visible-text-area textarea.addOpacity {
opacity:1;
transition: opacity 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.bottom-right a.clicked {
animation: bouncePop 0.3s ease;
}

@keyframes bouncePop {
0%   { transform: scale(1); }
50%  { transform: scale(1.2); }
100% { transform: scale(1); }
}
/** bottom-ends***/

.smart-link-card {
max-width: 450px;
background: #fff;
border: 1px solid #eee;
border-radius: 12px;
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: #111;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
position: relative;
}

.smart-link-card .lock-icon {
position: absolute;
top: 16px;
right: 16px;
width: 23px;
height: 23px;
stroke: #6245f2;
}

.smart-link-card h2 {
font-size: 20px;
margin-bottom: 8px;
}

.expiry {
font-size: 14px;
color: #777;
margin-bottom: 16px;
}

.file-types {

display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 10px;
}
.file-type {
display: flex;
align-items: center;
font-size: 14px;
color: #333;
gap: 6px;
margin: .6rem 0 .6rem !important;
}

.file-type svg {
width: 18px;
height: 18px;
stroke-width: 1.5;
}

.pdf svg {
stroke: #f76c5e;
}

.image svg {
stroke: #007aff;
}

.video svg {
stroke: #ff9500;
}

.audio svg {
stroke: #34c759;
}

.mixed svg{
stroke: #189cee;
}
.smart-link-card.dark {
max-width: 400px;
background: #111;
border: 1px solid #333;
border-radius: 12px;
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: #f5f5f5;
box-shadow: 0 1px 3px rgba(255, 255, 255, 0.05);
position: relative;
}

.smart-link-card.dark .lock-icon {
position: absolute;
top: 16px;
right: 16px;
width: 20px;
height: 20px;
stroke: #0a84ff;
}

.smart-link-card.dark h2 {
font-size: 20px;
margin-bottom: 8px;
color: #fff;
}

.smart-link-card.dark .expiry {
font-size: 14px;
color: #bbb;
margin-bottom: 16px;
}

.smart-link-card.dark .file-types {
display: flex;
flex-wrap: wrap;
gap: 12px;
}

.smart-link-card.dark .file-types {

display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 10px;
}
.smart-link-card.dark .file-type {
display: flex;
align-items: center;
font-size: 14px;
color: #ddd;
gap: 6px;
margin: .6rem 0 .6rem !important;
}


.smart-link-card.dark .pdf svg {
stroke: #ff453a;
}

.smart-link-card.dark .image svg {
stroke: #0a84ff;
}

.smart-link-card.dark .video svg {
stroke: #ff9f0a;
}

.smart-link-card.dark .audio svg {
stroke: #32d74b;
}
/** contact-lists **/
/* Container for API actions */
/** domain-starts **/
.api-actions {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
padding: 10px 16px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
margin-bottom: 12px;
}

/* Premium badge */
.custom-badge {
display: inline-block;
font-size: 14px;
font-weight: 500;
color: #1c1c1e;
background: rgba(245, 245, 247, 0.9);
border: 1px solid rgba(0,0,0,0.08);
border-radius: 10px;
padding: 6px 14px;
line-height: 1.4;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: all 0.25s ease-in-out;
cursor: default;
}

.custom-badge:hover {
background: rgba(235, 235, 240, 0.95);
border-color: rgba(0,0,0,0.12);
}



/* Optional: different color variants for partnership types */
.partnership-type-private {
background: rgba(255, 229, 100, 0.15);
border-color: rgba(255, 196, 0, 0.3);
color: #b38600;
}

.partnership-type-public {
background: rgba(100, 210, 255, 0.15);
border-color: rgba(0, 135, 255, 0.3);
color: #0066cc;
}

/* Copy Key link style */
.api-actions a {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
font-size: 14px;
font-weight: 500;
color: #007aff;
text-decoration: none;
padding: 6px 12px;
border-radius: 10px;
background: rgba(0, 122, 255, 0.08);
transition: all 0.25s ease;
}

.api-actions a:hover {
background: rgba(0, 122, 255, 0.15);
}




.token-generate-block {
display: flex;
gap: 12px;
padding: 14px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(12px);
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
justify-content: center;
align-items: center;
}
#backtoDomainForm{
background: linear-gradient(180deg, #6e6eef 0%, #2c2cdf 100%);
color:#fff;
}

.token-generate-block a {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
font-size: 15px;
font-weight: 500;
text-decoration: none;
padding: 10px 18px;
border-radius: 12px;
color: #111;
background: linear-gradient(180deg, #fff 0%, #f5f5f7 100%);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), inset 0 1px rgba(255, 255, 255, 0.6);
transition: all 0.25s ease;
cursor: pointer;
}

.token-generate-block a:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.6);
}

.token-generate-block a:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), inset 0 1px rgba(255, 255, 255, 0.4);
}

.token-generate-block a:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.3), inset 0 1px rgba(255, 255, 255, 0.6);
}

/* --- Step Containers --- */
.domain-step-1,
.domain-step-2 {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 16px;
padding: 24px;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
margin-bottom: 24px;
transition: all 0.3s ease-in-out;
}

.hidden {
display: none !important;
}

/* --- Headings --- */
.domain-step-1 h3,
.domain-step-2 h3 {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
font-size: 20px;
font-weight: 600;
color: #111;
margin-bottom: 18px;
}

/* --- Token Block --- */
.token-generate-block {
display: flex;
gap: 12px;
padding: 14px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(12px);
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
justify-content: center;
align-items: center;
margin-bottom: 24px;
}


.token-generate-block a {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
font-size: 15px;
font-weight: 500;
text-decoration: none;
padding: 10px 18px;
border-radius: 12px;
color: #111;
background: linear-gradient(180deg, #fff 0%, #f5f5f7 100%);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), inset 0 1px rgba(255, 255, 255, 0.6);
transition: all 0.25s ease;
cursor: pointer;
}

.token-generate-block a:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.6);
}

.token-generate-block a:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), inset 0 1px rgba(255, 255, 255, 0.4);
}

.token-generate-block a:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.3), inset 0 1px rgba(255, 255, 255, 0.6);
}

/* --- Form Groups --- */
.form-group {
display: flex;
flex-direction: column;
margin-bottom: 18px;
}

.form-group label {
font-size: 14px;
font-weight: 500;
color: #1c1c1e;
margin-bottom: 6px;
}

.form-group input,
.form-group textarea,
.form-group select {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
font-size: 15px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(0,0,0,0.1);
background: rgba(255,255,255,0.95);
color: #111;
transition: all 0.2s ease;
}
.form-group textarea:focus,
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: #007aff;
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
}

/* --- Buttons --- */
.btn-wrap,
.contact-btn-wrap {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 18px;
}

.btn-wrap button,
.contact-btn-wrap button {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
font-size: 15px;
font-weight: 600;
padding: 10px 22px;
border-radius: 12px;
border: none;
cursor: pointer;
transition: all 0.25s ease;
color: #fff;
background: #007aff;
box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

.btn-wrap button:hover,
.contact-btn-wrap button:hover {
background: #005bb5;
box-shadow: 0 6px 16px rgba(0, 91, 181, 0.3);
}

.btn-wrap button:active,
.contact-btn-wrap button:active {
transform: translateY(1px);
box-shadow: 0 3px 10px rgba(0, 91, 181, 0.3);
}

/* --- Select Wrapper --- */
.select-wrapper {
position: relative;
}

.select-wrapper select {
appearance: none;
-webkit-appearance: none;
padding-right: 30px;
background-image: url('data:image/svg+xml;utf8,<svg fill="%23111" height="12" viewBox="0 0 24 24" width="12" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 12px;
cursor: pointer;
}
/*** domain-ends **/

.domain-item-detail{
text-align:left !important;
display:grid;
margin: 0 !important;
flex-direction: column;
justify-content: flex-start;
align-items:flex-start;
}
.domain-item-detail span{
margin:0 0 10px !important;
text-align:left !important;
}
.contact-top{
display: flex;
align-items: center;
justify-content: space-evenly !important;
margin-left: 0 !important;

}
.contact-top a{
margin: 0 !important;
background: #363fc5;
color:var(--color-accent)
}

.contact-top svg{
pointer-events: none;
}

[data-tabcontent="contacts"]{
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

[data-tabcontent="contacts"] p,
[data-tabcontent="contacts"] h3{
text-align: center !important;
}
[data-tabcontent="contacts"] h3{
color:#4f5052;
}
.contact-btn-wrap{
display: flex;
justify-content: center;
align-items: center;
gap:15px;
}
.contact-btn-wrap button{
max-width: 100px ;
padding: 10px ;
color:var(--color-accent);
margin: 0 ;
}

.contact-btn-wrap button:first-child.upgrade {
max-width: 100% !important;
display: inline-block !important;
background-color: #7a4fff !important;
color: #fff !important;
font-weight: 500 !important;
font-size: 0.95rem !important;
padding: 8px 16px !important;
border-radius: 6px !important;
text-decoration: none !important;
transition: background-color 0.25s ease !important;
}


.contact-btn-wrap button:first-child{
background: #12142a;
}
.contact-btn-wrap button:last-child{
background: #9395b1;
}
.contact-top a.active{
background: #4d60f0;
color:var(--color-accent);
}
.contact-top a{
cursor: pointer;
padding: 2px 5px !important;
height: 30px;
}

.contact-top a:hover{
background: #4d60f0;
transition: 0.2s ease-in-out;
color:var(--color-accent);
}

.contact-top a:focus{
background: #4df0a7;
}
.contacts-list {
max-width: 500px;
margin: 40px auto;
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
overflow: hidden;
background: #f9f9f9;
}
.contact-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 16px;
border-bottom: 1px solid #eee;
}
.contacts-list.focused{
background: rgba(200, 200, 200, 0.9);
}

.contact-item:last-child {
border-bottom: none;
}
.contact-name {
flex: 1;
}
.contact-actions{
display: grid;
gap:10px;
}
.contact-actions svg{
pointer-events: none;
}
.contact-actions button {
margin-left: 8px;
padding: 0px 0.5px;
border: none;
border-radius: 6px;
cursor: pointer;
}
.contacts-list .contact-edit-btn {
background: #b9b9d4 !important;
color: white;
}
.contacts-list .contact-delete-btn {
background: #ff3b30;
color: white;
}


.bank-account-mini {
display: grid;
margin-left:0 !important;
max-width: 85%;
grid-template-columns: 2fr 3.5fr 2fr 2fr 1fr;
gap: 6px;
flex-wrap: nowrap;
}
.bank-account-mini.adjust{
grid-template-columns: 2fr  2fr 3.5fr 2fr 1fr ;
}

.bank-account-mini button:nth-child(1),
.bank-account-mini button:nth-child(2),
.bank-account-mini button:nth-child(3){
font-size: 12px !important;
}



.account-part {
padding: 4px 8px;
background: #f3f3f3;
color: #5d5d5d;
border: 1px solid #ccc;
border-radius: 4px;
white-space: nowrap;
flex: 1 1 auto;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
}


.select-contact-wrapper label {
display: block;
margin-bottom: 6px;
font-weight: 500;
color: #222;
}

.select-contact-wrapper select {
width: 100%;
padding: 12px 16px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 12px;
background: #f9f9f9;
appearance: none;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
transition: all 0.2s ease-in-out;
}

.select-contact-wrapper select:focus {
border-color: #007aff;
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
background: #fff;
}

.modal-contact-lists select{
border:.1rem solid #e4e4e4 !important;
border-radius: 5px;
}

.pay-input-group {
display: flex;
gap: 1px; /* Keeps them tight but separated */
background: #f1f1f4;
border:.1rem solid #e4e4e4;
border-radius: 50px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.pay-input-group input {
flex: 1;
border:none;
outline: none;
padding: 12px 16px;
background: transparent;
font-size: 16px;
font-weight: 500;
color: #333;
}

.pay-input-group input:first-child {
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
}

.pay-input-group input:last-child {
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
max-width: 100px;
text-align: center;
}
.pay-next-button{
background: linear-gradient(to right, #4a4a4f, #202025);
}

.pay-back-button{
background: linear-gradient(to right, #c0c7f6, #6276fa);
}


.pay-next-button, .pay-back-button {
display: inline-block;
width: 100%;
padding: 16px;
margin-top: 16px;
color: #fff;
font-size: 14px;
font-weight: 600;
text-align: center;
border: none;
cursor: pointer;
border-radius: 50px;
transition: background 0.3s ease;
}

.pay-next-button:hover,
.pay-back-button:hover {
background: linear-gradient(to right, #202025, #4a4a4f);
}


#shareModal svg{
margin-top: .4rem;
margin-left: 1rem;
cursor: pointer;
}

#shareModal svg:hover{
scale:1.2;
}
#shareModal svg path, 
#shareModal svg line,
#shareModal svg rect,
#shareModal svg polygon,
#shareModal  svg polyline{
pointer-events: none;
}

.footer {
position: relative;
padding-bottom: 3rem;
top:5rem;
margin:3rem auto 0;
color: var(--color-accent);
text-align: center;
padding: 1rem;
font-family: var(--roboto);
font-size: 0.9rem;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
width: 100%;

}
.app-name{
text-transform: uppercase;
}

.footer a{
color:var(--dark-off-light);
text-decoration: none;
}


.set-options {
position: absolute !important;
top: 3.6rem !important;
left: 0 !important;
background: #fff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
border-radius: 0.6rem;
z-index: 50000 !important;
list-style: none;
width: 180px;
max-height: 190px;
padding: 0.6rem 0;
border: 1px solid rgba(0, 0, 0, 0.08);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
transform: translateY(-10px);
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 0.88rem;
color: #3a3a3a;
}

/* Show + animate dropdown */
.set-options.visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}

/* Tiny arrow on top */
.set-options::before {
content: "";
position: absolute;
top: -8px;
left: 20px;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 8px solid #fff;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
border-radius: 2px;
}

.set-options li {
margin: 0;
padding: 0.5rem 1rem;
border-bottom: 1px solid #eee;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: background-color 0.2s ease;
}

.set-options li:last-child {
border-bottom: none;
}

.set-options li:hover,
.set-options li:focus-within {
background-color: #f7f7f7;
}

.set-options li a {
flex-grow: 1;
text-decoration: none;
color: #333;
font-weight: 600;
user-select: none;
}

.set-options input[type="color"] {
border: none;
width: 30px;
height: 30px;
cursor: pointer;
margin-left: 0.5rem;
border-radius: 6px;
padding: 0;
appearance: none;
}

.set-options svg {
stroke: #666;
width: 20px;
height: 20px;
margin-left: 0.6rem;
flex-shrink: 0;
transition: stroke 0.2s ease;
}

.set-options li:hover svg {
stroke: #8c263b; /* accent color on hover */
}


.smart-intro-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, #2c2c3c, #363fc5, #6069e8);
backdrop-filter: blur(8px);
z-index: 9999;
overflow: hidden !important;
display: none;
cursor: pointer;
}
.smart-intro-overlay.visible{
display: flex;
}
.intro-image {
flex: 1;
min-width: 50%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

.intro-message {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
color: white;
padding: 40px;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(6px);
width: 100%;
}

.intro-message h1 {
font-size: 3rem;
margin: 0 0 20px;
font-weight: 600;

}

.intro-message p {
font-size: 1.5rem;
line-height: 1.5;
}
.smart-intro-close {
position: absolute;
top: 12px;
right: 12px;
width: 28px;
height: 28px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: white;
font-size: 16px;
z-index: 99999999 !important;
backdrop-filter: blur(4px);
transition: opacity 0.3s ease;
opacity: 0;
}

.smart-intro-card:hover .smart-intro-close {
opacity: 1;
}


.common-general-modal input,
.common-general-modal select,
.custom-portfolio input{
border-radius: 1.5rem !important;
border:.1rem solid #aeaeae !important;
}

.common-general-modal h3{
margin-bottom: 1rem;
}

[name="expires_at"]{
padding: .3rem;
border:.1rem solid #aeaeae !important;
}

.common-general-modal button{
background: var(--primary-btn);
border:.1rem soid var(--primary-btn-hover);
}

.common-general-modal button,
.saved-portfolio a, .custom-portfolio a{
width: auto;
padding: .6rem;
cursor:pointer;
border-radius: 2rem;
color:#fafaff;
}



.portfolio-area{
margin-top: 2.5rem !important;
}

.saved-portfolio, .custom-portfolio{
display: grid;
justify-content: center;
align-items: center;
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
gap:10px;
transition: all 0.2 ease-in-out;
}


.saved-portfolio a, .custom-portfolio a{
margin-top: -1.4rem;
background: var(--accent-btn);
}

.custom-portfolio, .saved-portfolio {
margin: 2rem auto 0 !important;
grid-template-columns: 10fr 1fr;
}

.smart-edit-details{
display: flex; 
align-items: center;
width: 40%;
margin-left: 0 !important;
gap:10px;
}

#partnerSmartBtnWrap{
  position: relative;
  transform: translateY(-55px);
}


[data-upload-btn="true"]:hover{
color: var(--primary-btn-hover);
scale:1.2;
}



.preview-right .pdf-cover{
height: 250px;
max-height: 100%;
width: 215px;
max-width: 100%;
max-width: 100%;
margin:12px auto 12px;
align-items: center !important;
justify-content: center !important;
cursor: pointer;
position: relative;
z-index: 1000 !important;
}




/** text-toolbar **/
.toolBarWrap{
width:100%;
left:0;
}

.text-toolbar-inline {
display: flex;
gap: 10px;
align-items: center;
padding: 5px 8px;
background: #fff;
border-bottom: 1px solid #eeeeee;
border-radius: 0;
user-select: none;
font-size: 14px;
overflow-y: scroll; 
overflow-x: auto;  
-webkit-overflow-scrolling: touch;
scrollbar-width: none; 
-ms-overflow-style: none; 
}

/* Optional: hide vertical scrollbar if appears */
.text-toolbar-inline::-webkit-scrollbar,  .file-wrap::-webkit-scrollbar{
display: none !important;
}

.text-toolbar-inline::-webkit-scrollbar-track ,
.file-wrap::-webkit-scrollbar-track{
background: transparent;
}

.text-toolbar-inline::-webkit-scrollbar-thumb,
.file-wrap::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,0.2);
border-radius: 3px;
}


.font-option {
cursor: pointer;
padding: 0.1rem 0.4rem;
border-radius: 3px;
border: 1px solid transparent;
transition: border-color 0.2s;
}

.font-option:hover {
border-color: #666;
background-color: #f0f0f0;
}

.font-option.active {
border-color: #007BFF;
background-color: #D0E7FF;
}

.btn-bold, .btn-italic {
cursor: pointer;
border: none;
background: none;
font-weight: 700;
font-size: 16px;
padding: 0 6px;
line-height: 1;
}

.btn-italic {
font-style: italic;
}

.text-toolbar-inline {
display: flex;
gap: 0.5rem;
margin: 0.5rem 0;
user-select: none;
font-size: 14px;
}

.font-option {
cursor: pointer;
padding: 0.1rem 0.4rem;
border-radius: 3px;
border: 1px solid transparent;
transition: border-color 0.2s;
}

.font-option:hover {
border-color: #666;
background-color: #f0f0f0;
}

.font-option.active {
border-color: #007BFF;
background-color: #D0E7FF;
}

.btn-bold, .btn-italic {
cursor: pointer;
border: none;
background: none;
font-weight: 700;
font-size: 16px;
padding: 0 6px;
line-height: 1;
}

.btn-italic {
font-style: italic;
}

/** text-toolbar-ends **/
/** feed-starts **/
.feed-cover{
margin: 0 auto 0;
}

.feed-left{
margin: 0 auto;
position:relative;
top:0;
margin-left: 15px;
z-index:500 !important;
width:auto;
max-width: 250px;
overflow: hidden;
}


.middle-first{
width:100px;
max-width: 250px;
margin: 0 auto;
position: absolute;
top:-100px;
margin-left: 0;
left:15px;
z-index:500 !important;
overflow: hidden;
}

.feed-left.toggle{
position: absolute !important;
}

.content-top{
position:  absolute !important;
left:37px;
padding-bottom: .7rem;
padding-top: .3rem;
z-index: 500 !important;
cursor:  pointer !important;
max-width:60px !important;
}


.feed-top svg path,
.feed-top svg rect,
.feed-top svg line,
.feed-top svg polyline,
.feed-top svg polygon,
.feed-top svg circle, 
.content-top  svg path,
.content-top svg rect,
.content-top svg line,
.content-top svg polyline,
.content-top svg polygon,
.content-top  svg circle, 
.media-card-meta-icon svg path,
.media-card-meta-icon svg rect,
.media-card-meta-icon svg line,
.media-card-meta-icon svg polyline,
.media-card-meta-icon svg polygon,
.media-card-meta-icon svg circle
{
pointer-events: none;
}


.feed-users-avatar {
position: absolute;
top:0 ;
left:15px;
z-index:3000;
max-height: 100vh;
overflow-y: auto;
overflow-x: hidden;
padding: 10px 0;
scroll-snap-type: y mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
display:grid;
gap: 5px; 
margin: 0 !important;
opacity: 0;
visibility: hidden;
pointer-events: none !important;
transform: translateY(-2rem) scale(1);
transition:
opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
visibility 0.45s ease-in-out;
}


.feed-users-avatar.visible {
opacity: 1;
visibility:visible;
pointer-events: auto !important;
transform: translateY(0) scale(0.95);
}

/* Optional: slide-down variant for natural "exit" feel */
.feed-users-avatar.visible[data-slide="down"] {
transform: translateY(2rem) scale(0.95);
}



.feed-users-avatar::-webkit-scrollbar {
display: none;
}

.feed-users-avatar a {
scroll-snap-align: start;
margin: 6px 0; 
}

.first-child{
margin-top: 15px;
}

.active-user{
border: 3px solid var(--fun-pink) !important;
box-shadow:
0 2px 6px rgba(245, 82, 79, 0.6), /* subtle colored glow */
0 8px 15px rgba(255, 94, 91, 0.25) !important;
}

.feed-users-avatar img {
width: 88px;
height: 88px;
object-fit: cover;
border-radius: 50%;
border: 3px solid #007aff;
box-shadow:
0 2px 6px #3a6695, /* subtle colored glow */
0 8px 15px  #b0d4f9,;
transition: transform 0.2s ease;
cursor: pointer;
display: block;
position: relative;
z-index: 1;
}

.feed-users-avatar img:hover {
transform: scale(0.98) rotate(-3deg);
border-color: #a3cdfb;
box-shadow: 0 6px 20px rgba(0, 122, 255, 0.3);
filter: saturate(1.2);
}

/* Optional subtle animation */
.feed-users-avatar a:nth-child(3n) img {
animation: subtlePop 4s ease-in-out infinite;
}

@keyframes subtlePop {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.04); }
}

/* Pulse ring on hover */
.feed-users-avatar a::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 66px;
height: 66px;
border-radius: 50%;
transform: translate(-50%, -50%) scale(0.95);
background: rgba(0, 122, 255, 0.08);
transition: transform 0.3s ease, opacity 0.3s ease;
z-index: -1;
opacity: 0;
}
.feed-users-avatar a:hover::before {
transform: translate(-50%, -50%) scale(1.2);
opacity: 1;
}

.feed-right{
padding-bottom: 15rem !important;
position: absolute;
min-width: 100%;
max-width: 100%;
left:0;
user-select: none;
resize: none;
}



.feed-right, .middle-right {
width: 100%;
margin:0 auto 0;
display: flex;
flex-direction: column;
gap: 40px; /* increase gap between cards */
}

/* Prevent dragging ghost images */
.media-card img, .media-card video,
.pdf-canvas {
user-select: none;
pointer-events: auto; /* still clickable if you want */
-webkit-user-drag: none; /* Safari/Chrome */
-moz-user-drag: none;    /* Firefox */
-ms-user-drag: none;     /* old IE/Edge */
user-drag: none;
}

.media-card {
width: 100%;
border-radius: 16px;
overflow: hidden;
transition: box-shadow 0.3s ease-in-out;
will-change: transform;
position: relative;
user-select: none;
resize: none;
}

.media-card.opacity{
animation: pulseOpacity 1.2s ease-in-out infinite;
}


@keyframes pulseOpacity {
0%   { opacity: 0.3; }   /* low intensity */
50%  { opacity: 0.6; }   /* higher intensity */
100% { opacity: 0.3; }   /* back to low */
}

[data-ismedia="true"]{
cursor: pointer;
outline: none !important;
}

.media-card:hover {
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}


.media-carousel{
gap:30px;
}
.realistic-pdf-shelf{
gap:20px;
}


.media-carousel,
.realistic-pdf-shelf{
display: flex;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-left: 16px;
padding-right: 5px;
scroll-padding-left: 16px;
scroll-behavior: smooth;
user-select: none;
resize: none;
}



.media-carousel::-webkit-scrollbar ,
realistic-pdf-shelf::-webkit-scrollbar{
display: none;
}

/* Default settings for mobile/small devices */
.media-slide {
scroll-snap-align: start;
flex: 0 0 400px;
height:450px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
border-radius: 12px;
}

/** repairs inconsistency when media-carouel has on one media-slide*/
.media-carousel.one-item{
overflow-x: auto;
overflow-y: auto;
align-items: center;
justify-content: center;
padding-left:0;
padding-right:0;
scroll-padding-left: 0;
scroll-behavior: smooth;
gap:10px;
}

.one-item{
min-width:385px;
max-width:100%;
}

.pdf-cover.pdf-one-item{
scroll-snap-align: start;
flex: 0 0 75% ;
}

.common-media-obj.one-item {
scroll-snap-align: start;
flex: 0 0 100%;
}

img.one-item{
width:385px;
max-width:100%;
justify-self: center !important;
}
/** repairs inconsistency when media-carouel has on onne media-slide*/
.media-slide img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
transition: transform 0.3s ease;
}

.media-slide video {
background: #000;
}

.media-card-metrics {
display: flex;
justify-content: space-between;
padding: 1rem 1.25rem;
font-size: 0.9rem;
color: #666;
border-top: 1px solid #eee;
background :var(--ios-white);
}



.media-card-metrics svg{
width: 19px;
height: 19px;
position: relative;
top: .3rem;
}

.media-card-meta-icon {
position: absolute;
transform: translateY(-10px);
right: 12px;
z-index: 10;
background: rgba(255,255,255,0.7);
border-radius: 8px;
padding: 0.4rem;
cursor: pointer;

}

.media-card-meta-icon svg {
width: 20px;
height: 20px;
fill: #333;
}

.media-card-meta-icon svg{
pointer-events: none;
}


.media-dropdown {
position: fixed;
z-index:2;
background: white;
border-radius: 6px;
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
padding: 0.5rem 0;
min-width: 160px;
transition: opacity 0.2s ease;
}

.media-dropdown  svg{
pointer-events: none;
}
.media-dropdown ul {
margin: 0;
padding: 0;
list-style: none;
}

.media-dropdown li {
padding: 0.75rem 1rem;
font-size: 0.875rem;
cursor: pointer;
transition: background 0.2s ease;
}

.media-dropdown li:hover {
background: #f0f0f0;
}




.horizontal .video-preview-inner{
width:100%;
height: auto;
flex:0 0 400px !important;
}

.feed-video-preview-box .video-preview-inner{
width:100%;
height: 100%;
flex:0 0 100% !important;
}


.feed-video-preview-box{
position: relative;
height:100% !important;
width:100% !important;
min-width: 100% !important;
max-width: 100% !important;
border-radius: .8rem;
background: rgba(0, 0, 0, 0.9);
}

.aspect-cover-img{
object-fit: cover;
height:80%;
border-radius: 0;
box-shadow:none;
background: none;
}

.aspect-cover-not-img{
height:65%;
}

.aspect-parent, .profile-content .aspect-parent{
padding: 8px;
border-radius: 12px;
backdrop-filter: blur(12px) saturate(140%) !important;
}

.profile-content .aspect-parent{
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.07);
border: 1px solid rgba(255, 255, 255, 0.4) !important;
background: var(--aspect-img-bg) !important;
}

.aspect-one{
width:100% !important;
aspect-ratio: 1/1;
}

.aspect{
background: var(--aspect-img-bg) !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.07) !important;
border-radius: 12px !important ;
border: 1px solid rgba(255, 255, 255, 0.4) !important;
backdrop-filter: blur(12px) saturate(140%) !important;
width:100%;
}

.aspect img{
border-radius: 0 !important;
border: none !important;
box-shadow:none !important;
}

.aspect.fit{
object-fit: contain !important;
padding:8px !important;
height: 100%;
}


.feed-premium-audio {
width:100%;
max-width: 100%;
border-radius: 20px;
overflow: hidden;
margin: 0 auto;
box-shadow: 0 12px 30px rgba(0,0,0,0.3);
color: #fff;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
backdrop-filter: blur(20px);
}


/* === Dynamic Dreamy Backgrounds === */
.feed-premium-audio-inner {
height:355px;
padding: 20px;
position:relative;
padding:20px 18px 16px;
border-radius:inherit;
backdrop-filter: blur(18px);
isolation:isolate;
z-index: 0;
}

.feed-premium-audio-inner::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
z-index: -1;
opacity: 0.9;
background: linear-gradient(135deg, #ff8a00, #e52e71);
animation: bgFlow 12s ease infinite;
background-size: 300% 300%;
}


@keyframes bgFlow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Multiple dreamy/sci-fi backgrounds to swap */
.feed-premium-audio-inner-bg-1::before{ background: radial-gradient(120% 120% at 10% 0%, #4f7bff, transparent 55%), radial-gradient(120% 140% at 90% 100%, #9b4dff, transparent 55%), linear-gradient(135deg,#101223,#2b2f66); }
.feed-premium-audio-inner-bg-2::before{ background: radial-gradient(120% 120% at 20% 20%, #00a8ff, transparent 50%), radial-gradient(120% 120% at 80% 80%, #ff3db7, transparent 50%), linear-gradient(135deg,#0f0f2a,#2a1a5e); }
.feed-premium-audio-inner-bg-3::before{ background: conic-gradient(from 210deg at 70% 30%, #2a34ff, #6a00ff, #00b7ff, #2a34ff); filter:saturate(1.15) brightness(1.1); }
.feed-premium-audio-inner-bg-4::before{ background: radial-gradient(100% 100% at 30% 70%, #3b8cff 0%, transparent 60%), radial-gradient(100% 100% at 75% 25%, #8b5bff 0%, transparent 60%), linear-gradient(145deg,#0b0e1c,#1a1f3d); }
.feed-premium-audio-inner-bg-5::before{ background: conic-gradient(from 120deg at 30% 60%, #4450ff, #6b3bff, #2fd0ff, #4450ff); }
.feed-premium-audio-inner-bg-6::before{ background: linear-gradient(135deg,#1b1f42,#2c33a5), radial-gradient(60% 60% at 60% 30%, #7a84ff 0%, transparent 70%); mix-blend-mode: screen; }
.feed-premium-audio-inner-bg-7::before{ background: radial-gradient(70% 70% at 20% 20%, #5f7dff 0%, transparent 60%), conic-gradient(from 300deg at 80% 70%, #9b6bff, #2db6ff, #9b6bff); }
.feed-premium-audio-inner-bg-8::before{ background: linear-gradient(160deg,#0e1328 0%, #212c7a 60%, #3d49e0 100%); }

@keyframes bgFlow{
0%{ background-position:0% 50% }
50%{ background-position:100% 50% }
100%{ background-position:0% 50% }
}

/* Top controls (minimal hit area, no SVG needed for now) */
.feed-premium-audio-top{
display:flex;
justify-content:space-between !important;
align-items:center;
}
.feed-premium-audio-top .common-top-control{
width:34px; height:34px; border-radius:10px;
background:var(--glass);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.25);
display:flex; 
align-items:center;
justify-content:center;
cursor: pointer;
}
.feed-premium-audio-top .common-top-control::before{
content:""; width:14px; height:14px; border:2px solid #fff; opacity:.9; border-radius:3px;
}
.feed-premium-audio-top .control-more-btn::before{
width:3px; height:3px; border:none; border-radius:50%;
background: #fff; box-shadow:0 -6px 0 #fff, 0 6px 0 #fff;
}

/* Middle: icon + title */
.feed-premium-audio-middle{
display:flex; flex-direction:column; align-items:center; gap:12px;
padding:16px 0 6px;
}

.feed-custom-audio-icon{
display:flex;
flex-direction:column;
align-items:center; 
gap:12px;
margin-top: -20px;
}

/* Title */
.feed-cover-title{
margin:6px 0 0; 
font-weight:700; 
letter-spacing:.2px;
font-size:1.4rem ;
font-family: var(--caveat);
text-shadow:0 2px 10px rgba(0,0,0,.35);
}

/* ===== PURE CSS ICONS ===== */
.icon{ position:relative; width:78px; height:78px; }
.icon::before, .icon::after{ content:""; position:absolute; display:block; }

/* Jukebox: arched cabinet, speaker, base */
.feed-jukebox-icon {
position: relative;
width: 50px;
height: 60px;
border-radius: 12px;
background: #111;
box-shadow: inset 0 0 8px rgba(255,255,255,.2), 0 8px 20px rgba(0,0,0,.35);
}

/* Speaker grille (circle) */
.feed-jukebox-icon::before {
content: "";
position: absolute;
left: 50%;
top: 55%;
transform: translate(-50%,-50%);
width: 32px;
height: 32px;
border-radius: 50%;
background: repeating-radial-gradient(circle, #fff 0 2px, transparent 3px 5px);
box-shadow: inset 0 0 8px rgba(0,0,0,.6);
}

/* Cone top */
.feed-jukebox-icon::after {
content: "";
position: absolute;
left: 50%;
top: -8px;
transform: translateX(-50%);
width: 24px;
height: 14px;
background: #fff;
clip-path: ellipse(50% 40% at 50% 50%);
box-shadow: 0 2px 4px rgba(0,0,0,.4);
}
/* Treble note: stem + head + flag */
.feed-treble-note-icon {
position: relative;
width: 60px;
height: 60px;
background: rgba(0, 0, 0, 0.1);
filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
padding: .3rem;
border-radius: .8rem;
}

/* Stem */
.feed-treble-note-icon::before {
content: "";
position: absolute;
left: 60%;
top: 5%;
width: 4px;
height: 70%;
background: #fff;
border-radius: 2px;
}

/* Head (circle) */
.feed-treble-note-icon::after {
content: "";
position: absolute;
left: 35%;
bottom: 10%;
width: 22px;
height: 22px;
background: #fff;
border-radius: 50%;
box-shadow: inset -4px -2px 0 rgba(0,0,0,.3);
}

/* Flag */
.feed-treble-note-icon span {
content: "";
position: absolute;
left: 60%;
top: 5%;
width: 14px;
height: 18px;
background: #fff;
clip-path: polygon(0 0, 100% 0, 0 100%);
transform: skewY(-10deg);
}

/* Microphone: capsule + grill + stand */
.feed-microphone-icon{
position:relative;
}
.feed-microphone-icon::before{
/* capsule */
left:28%; top:16%; width:44%; height:46%;
background: repeating-linear-gradient(180deg, rgba(255,255,255,.95) 0 3px, rgba(255,255,255,.7) 3px 6px);
border-radius:16px;
box-shadow: inset 0 0 0 2px rgba(0,0,0,.15), 0 6px 18px rgba(0,0,0,.28);
}
.feed-microphone-icon::after{
/* stem + base (two parts with shadows via multiple backgrounds) */
left:42%; width:12px; bottom:18%; top:55%;
background:#fff;
box-shadow:
0 16px 0 0 #fff,
0 22px 0 0 rgba(255,255,255,.9);
border-radius:2px;
}

/* Headphone: arc + cups */
.feed-headphone-icon::before{
/* arc using borders */
left:16%; right:16%; top:18%; height:44%;
border:4px solid rgba(255,255,255,.95);
border-bottom:none;
border-radius:40px 40px 0 0;
}
.feed-headphone-icon::after{
/* cups */
left:14%; right:14%; top:48%; height:16%;
background:
radial-gradient(circle at 20% 50%, #fff 0 60%, transparent 61%) left/32% 100% no-repeat,
radial-gradient(circle at 80% 50%, #fff 0 60%, transparent 61%) right/32% 100% no-repeat;
border-radius:8px;
filter: drop-shadow(0 8px 16px rgba(0,0,0,.35));
}

/* Bottom controls */
.feed-premium-audio-controls{
display:flex;
align-items:center; 
justify-content: space-between;
gap:12px;
background: rgba(0,0,0,.18);
padding:10px 12px; border-radius:14px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
position: absolute;
width:75%;
left:50%;
transform: translateX(-50%);
bottom: 3rem;
height: 65px;
}

/* Play/Pause CSS buttons (no SVG) */
.feed-premium-audio-controls .control-btn{
width:36px; height:36px; border-radius:50%;
background: var(--glass);
box-shadow: 0 6px 14px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
position:relative; 
border:none; 
cursor:pointer;
}


.feed-premium-audio-controls .control-play-btn::before{
content:"";
position:absolute; 
left:41%; top:50%;
transform: translate(-40%,-50%);
width:0; height:0;
border-left:10px solid #fff;
border-top:7px solid transparent;
border-bottom:7px solid transparent;
}
.feed-premium-audio-controls .control-pause-btn::before,
.feed-premium-audio-controls .control-pause-btn::after{
content:""; position:absolute; top:23%; width:4px; height:54%; background:#fff; border-radius:2px;
}
.feed-premium-audio-controls .control-pause-btn::before{ left:33%; }
.feed-premium-audio-controls .control-pause-btn::after { right:33%; }

.feed-premium-audio-controls  .time{
font-size:12px; opacity:.9; min-width:40px; text-align:right; }

/* Base slim style */
.feed-seek-bar,
.feed-volume-bar {
-webkit-appearance: none !important;
appearance: none !important;
height: 4px !important;              /* slimmer by default */
border-radius: 999px !important;
outline: none !important;
background: linear-gradient(90deg, #2c33a5, #6069e8) !important;
box-shadow: inset 0 1px 2px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.12) !important;
flex: 1 !important;
min-height: 15px !important;
transition:width 0.2s ease !important;   /* smooth expansion */
position: relative;
z-index: 100 !important;
cursor: pointer;
}

.feed-seek-bar{
max-width: 75px;
}

.feed-volume-bar{
transform:rotate(-90deg);
max-width:30px;
}


/* Expand on interaction 
.feed-seek-bar:hover,
.feed-seek-bar:active,
.feed-seek-bar:focus-visible,
.feed-volume-bar:hover,
.feed-volume-bar:active,
.feed-volume-bar:focus-visible {
max-width: 125px !important;
}*/

/* Thumbs */
.feed-seek-bar::-webkit-slider-thumb{
border-radius: 50% !important;
}


.feed-seek-bar::-webkit-slider-thumb,
.feed-volume-bar::-webkit-slider-thumb {
-webkit-appearance: none !important;
appearance: none !important;
width: 16px !important;
height: 16px !important;
background: #fff !important;
box-shadow: 0 2px 6px rgba(0,0,0,.35), 0 0 0 3px rgba(138,91,255,.25) !important;
cursor: pointer !important;
}

.feed-volume-bar::-webkit-slider-thumb{
border-end-start-radius: 50%;
border-end-end-radius: 50%;
rotate: -90deg;
margin-left:.7rem;
}

.feed-seek-bar::-moz-range-thumb,
.feed-volume-bar::-moz-range-thumb {
width: 16px !important;
height: 16px !important;
border: none !important;
border-radius: 50% !important;
background: #fff !important;
box-shadow: 0 2px 6px rgba(0,0,0,.35), 0 0 0 3px rgba(138,91,255,.25) !important;
}



.gallery-stack {
position:relative;
z-index: 10;
width: 50px;
height: 50px;
margin-bottom: .7rem;
user-select: none;
cursor: pointer;
}


.square {
pointer-events: none;
position: absolute;
width: 40px;
height: 40px;
border: 2px solid var(--loud-blue-border);
border-radius: 12px;             /* rounder corners for a softer look */
box-sizing: border-box;
box-shadow: 0 6px 12px rgba(108, 99, 255, 0.3); /* subtle purple glow */
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.back {
top: 0;
left: 10px;
background-color: var(--fun-pink);
border-color: var(--fun-pink);
}

.middle {
top: 10px;
left: 5px;
background-color: var(--fun-teal);
border-color: var(--fun-teal);
}

.front {
top: 15px;
left: 0;
background-color: var(--fun-yellow);
border-color: var(--fun-yellow);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}

.front img {
width: 100%;
height: 100%;
object-position: center;
object-fit: cover;
border-radius: 12px;
pointer-events: none;
}





.gallery-stack:hover .square {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(108, 99, 255, 0.6);
}

/** feed-ends **/

.profile-bio-text {
white-space: pre-wrap;
font-family: system-ui, sans-serif;
line-height: 1.6;
font-size: 15px;
width:650px;
max-width: 92%;
margin:0 auto;
}


.profile-inner {
max-width:100%;
margin: 115px auto 0 !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
border-radius: 20px;
}

.profile-content.change,
.profile-inner.change{
display: none !important;
}

.profile-inner .gallery-stack a{
cursor: pointer;
}

.profile-header {
max-height: 250px;
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 1.5rem;
border-bottom: 1px solid #eaeaea;
}

.about-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-drag: none;
  position: relative;
    outline: none;
  outline-color: none;
 outline-width: 0 !important;
 outline-offset: 0 !important;
 outline-style: none !important;
}


.about-tab::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
    outline: none;
  outline-color: none;
 outline-width: 0 !important;
 outline-offset: 0 !important;
 outline-style: none !important;
}

    /** anime-head **/ 
.anime-icon {
width: 40px;
height: 40px;
position: absolute;
top:0;
z-index: 1;
background: #ffe0bd;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 0 1px rgba(0,0,0,0.2);
}

.anime-icon.bg{
  background: var(--loud-blue-light) !important;
box-shadow: 0 0 1px rgba(0,0,0,0.2) !important;
}

.anime-icon::before {
content: '';
position: absolute;
top: -5px;
left: 0;
width: 100%;
height: 20px;
background: #2e2e2e;
border-radius: 50% 50% 0 0;
  outline: none;
  outline-color: none;
 outline-width: 0 !important;
 outline-offset: 0 !important;
 outline-style: none !important;
}

.eye {
position: absolute;
width: 7px;
height: 7px;
background: #222;
border-radius: 50%;
top: 18px;
animation: blink 5s infinite;
}

.eye.left {
left: 10px;
}

.eye.right {
right: 10px;
}


.profile-inner [data-custom-target="about"]:hover{
  background: none ;
  border:none;
  box-shadow: none ;
  transform: translateY(-5px);
  transition:transform 0.2 ease-out;
  outline: none;
  outline-color: none;
 outline-width: 0 !important;
 outline-offset: 0 !important;
 outline-style: none !important;
}

@keyframes blink {
0%, 97%, 100% {
height: 4px;
}
98% {
height: 1px;
}
99% {
height: 4px;
}
}

.mini-mouth {
position: absolute;
width: 6px;
height: 3px;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
border-bottom: 1.5px solid #222;
border-radius: 0 0 50% 50%;
}
    /** anime-head-ends **/

.profile-header-left {
display: flex;
align-items: center;
flex-direction: column;
}

.profile-header-left form input{
z-index:5000 !important;
}

.profile-header-left img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
border: 4px solid var(--loud-blue-light);
background: #f2f2f2;
}

.profile-username {
font-size: 1.3rem;
font-weight: 600;
color: #111;
}

.profile-right{
align-items: flex-end;
}

.profile-right, .profile-right-content{
display:flex;
flex-direction: column;
gap: 0.3rem;

}

.profile-right-content{
align-items: flex-start;
}

.profile-right-content span{
width:200px;
}


.profile-right-content button{
position: relative;
left:-58px;
}

.profile-right-content.invisible{
opacity:0;
transition:opacity 0.3 ease-in-out;
height: 0;
width:0;
pointer-events: none;
}

.profile-right-content {
font-size: 0.9rem;
color: #444;
pointer-events: auto;
}

.profile-inner button {
width: auto;
margin-top: 0.4rem;
padding: 0.45rem 1.1rem;
background: var(--primary-btn);
color: #fff;
border: none;
border-radius: 10px;
font-weight: 500;
transition: background 0.2s ease-out;
cursor: pointer;
}

.profile-right button:hover {
background: var(--primary-btn-hover);
}

/* ---------- Tabs ---------- */
.profile-tabs{
margin-top: 2rem;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
transition: background 0.2s ease-out;
}

.home-tab{
position: relative;
z-index: 3;
left:0;
top:7px;
}

.profile-tabs-inner {
position: relative;
width:auto;
display: flex;
justify-content: center;
align-items: center;
padding: .7rem;
height: 100%;
max-height: 70px;

}

/*
.profile-tabs-inner.change_width{
width: 45%;
}
*/

.profile-tabs a {
flex: 1;
text-align: center;
color: #666;
font-size: 0.85rem;
font-weight: 500;
transition: all 0.2s ease-out;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;

}


.profile-tabs svg path,
.profile-tabs svg rect,
.profile-tabs svg line,
.profile-tabs svg polyline,
.profile-tabs svg polygon,
.profile-tabs svg circle
{
pointer-events: none !important;
}

.profile-tabs a:hover,
.profile-tabs a.active {
color: var(--primary-btn);
}

.profile-tabs a:hover svg,
.profile-tabs a.active svg {
stroke: var(--primary-btn);
}

/* ---------- Tab Content ---------- */
.profiletab-container {
position: relative;
margin-top: 1.5rem;
z-index: 0;
display: flex;
flex-direction: column;
width: 100%;
}

.access-area{
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
position: absolute;
left:0;
top:10%;
padding: 1rem;
}
.overlay p{
color:var(--loud-blue-light);
}

.overlay {
min-height: 135vh;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.85),
rgba(0, 0, 0, 96)  ,
rgba(0, 0, 0, 98)  ,
rgba(0, 0, 0, 5)  
);
z-index: 7000;
display:hidden !important;
}

.overlay button{
z-index: 999999 !important;
pointer-events: auto !important;
}

[data-tabcontent="about"]{
padding: 1rem;
}


.profiletab-content {
position: absolute;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.35s ease;
width: 100%;
max-width: 100%;
top: 0;
left: 0;
z-index: 100 !important;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

.profiletab-content.active {
position: relative;
opacity: 1;
visibility: visible;
transform: translateY(0);
}

.time{
user-select: none !important;
resize: none !important;
}

/** grid-overlay **/
.monetized-overlay-different{
background: rgba(10, 10, 10, 0.75);
backdrop-filter: blur(0);
z-index: 5;
}
.monetized-overlay-common{
background: rgba(10, 10, 10, 0.75);
backdrop-filter: blur(2px);
z-index: 5;
}


.monetized-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
border-radius: inherit;
}

#previewPdfModal{
z-index:999999999999999999 !important;
background:#fff !important;
}


/*** pdf-reader **/
.pdf-canvas-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center; /* horizontal center when smaller */
align-items: flex-start;
background: none;
box-sizing: border-box;
overflow-y: auto;
overflow-x: auto; /* allow horizontal scroll if zoomed in */
-webkit-overflow-scrolling: touch;
border-radius: 3rem !important;
position: relative;
}

.pdf-canvas-container::-webkit-scrollbar {
display: none;
}

.pdf-canvas {
display: block;
margin-top:0;
border-radius: 3rem !important;
font-size: 42px ;
max-width: 125vw;  /* never overflow container */
height: auto;      /* keep aspect ratio */
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', 
sans-serif !important;
}

.pdf-download {
display: inline-block;
margin-top: 6px;
padding: 4px 8px;
font-size: 12px;
background: #c8951f;
color: white;
text-decoration: none;
border-radius: 4px;
font-family: sans-serif;
}


#zoomTopNavigations {
display: flex;
align-items: center;
justify-content: center;
width: 35%;
left:50%;
transform: translateX(-50%);
gap:15px;
border: none !important;
background: none !important;
margin-top: .6rem;
z-index: 2;

-webkit-user-drag: none !important;
user-drag:none !important;
user-select: none !important;
-webkit-user-drag: none !important;
-webkit-touch-callout: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
resize: none !important;
}


#zoomTopNavigations svg{
pointer-events: none;
justify-self: center;
color:#626cfa;
border-radius: 50%;
border:.2rem solid #9696f1;
background: transparent;
width: 30px;
height: 30px;
padding: 0.5px;
-webkit-user-drag: none !important;
user-drag:none !important;
user-select: none !important;
-webkit-user-drag: none !important;
-webkit-touch-callout: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
resize: none !important;
}

#zoomTopNavigations button{
display: flex;
align-items: center;
background: none;
border:none;
outline: none !important;
}


.textLayer div {
cursor: pointer;
user-select: none;
}
.textLayer span {
background: transparent;
transition: background 0.2s ease;
}



.pdf-footer {
margin-top: 55px;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(12px);
border-top: 1px solid rgba(255, 255, 255, 0.2);
display: flex;
flex-direction: column;
justify-content: flex-end; /* align buttons right */
align-items: center;
padding: 1rem 2rem;
color: #fff;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 14px;
border-radius: .8rem;
box-shadow: 0 -4px 10px rgba(0,0,0,0.1);
z-index: 999;
}


.preview-pdf-footer{
width:55%;
position: absolute;
z-index: 99999999999;
top:35%;
left:50%;
transform: translate(-50%, -35%);
background: rgba(12, 12, 12, 0.8);
}

.pdf-footer p{
font-size: 11px !important;
margin-bottom: .7rem;
}
.pdf-footer-inner{
display: flex;
gap: 20px;
justify-content: flex-end;
align-items: center;
}



.pdf-footer a {
padding: 0.5rem 1rem;
background: rgba(255,255,255,0.1);
color: #fff;
border-radius: 12px;
text-decoration: none;
font-weight: 500;
transition: all 0.2s ease-in-out;
}
.pdf-footer a:hover {
background: rgba(255,255,255,0.2);
transform: translateY(-1px);
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.pdf-footer span {
font-weight: 700;
color: #ffd700; /* subtle highlight for price */
}

.pdf-footer span{
pointer-events: none;
}


.pdf-cover-replacer {
position: absolute;
inset: 0;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
background-size: cover;
color: white;
text-align: center;
padding: 2rem;
}

.pdf-cover-inner {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(12px);
border-radius: 12px;
padding: 3rem 2rem;
max-width: 600px;
width: 90%;
}

.pdf-replacer-title {
font-size: 2rem;
font-weight: 700;
margin-bottom: 0.8rem;
line-height: 1.2;
font-family: var(--anton);
}


.pdf-replacer-author{
font-size: 1rem;
margin-bottom: 1.2rem;
}

.pdf-cover.book-style-1 .pdf-author{
color:#444 !important;
}

.pdf-replacer-author,
.pdf-author {
font-weight: 300;
opacity: 0.8;
font-family: var(--anton);
text-align: center;
}

.pdf-replacer-excerpt {
font-size: 1rem;
line-height: 1.6;
opacity: 0.9;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
/** pdf-reader **/

/*** grid-overlay-ends **/
/** grid-changes **/
.change-zindex{
z-index:1000;
}


/** grid-changes-ends **/
/* ---------- About Section ---------- */
.profiletab-content[data-content="about"] {
background: #f9f9ff;
border-radius: 14px;
padding: 2rem 1.25rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.profiletab-content[data-content="about"] h1 {
font-size: 1.6rem;
color: var(--primary-btn);
text-align: left !important;
margin-left: 0 !important;
}

.profiletab-content[data-content="about"] p {
font-size: 1rem;
line-height: 1.65;
color: #333;
}

/* ---------- Gallery Icon ---------- */
.gallery-tab {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
}

.gallery-tab::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
}


#GalleryBottom img{
margin-top: 0 !important;
top:0 !important;
}

#GalleryBottom{
margin-top: 0 !important;
}
.gallery-stack {
position: absolute;
bottom: 7px;
width: 36px;
height: 36px;
}

.square.front {
width: 100%;
height: 100%;
border-radius: 8px;
overflow: hidden;
border: 2px solid var(--loud-blue-border);
}

.square.front img {
width: 100%;
height: 100%;
object-fit: cover;
}


.metrics {
width:100%;
max-width: 100%;
margin: 2rem auto;
padding: 1rem;
background: #fff;
border-radius: 20px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
text-align: center;
}

.metrics h2 {
font-size: 1.5rem;
color: #111;
margin-bottom: 1rem;
}

.metrics h3 {
font-size: 1.1rem;
color: #333;
}

.metrics p {
color: #555;
margin-bottom: 0.5rem;
font-size: 0.95rem;
}


.chart-container {
margin-top: 2rem;
}

.bar-graph-wrapper{
position:relative;
}

#piechartContainer{
margin:1rem auto 0;
display:grid;
grid-template-columns: repeat(2, 1fr);
justify-content: center;
align-items: center;
width:100%;
max-width: 500px;
gap:15px;
}

.engagement-type{
position: absolute;
left:0;
top:50%;
transform: translateY(-50%);
rotate:-90deg;
}

/* Chartist styling */
.ct-bar {
stroke: #4c4cff;
stroke-width: 20px;
}

.ct-label {
color: #888;
font-size: 0.75rem;
}

.ct-grid {
stroke: #eee;
stroke-dasharray: 2px;
}

/** custom-cover **/
.preview-right .custom-audio-cover{
height: 275px;
width:100%;
max-width: 100%;
max-height: 100%;
background: linear-gradient(135deg, rgba(9, 12, 194, 0.6), rgba(170, 184, 254, 0.6));
margin: 15px auto 15px;
}

.preview-right .custom-audio-cover .cover-title{
font-size: 1.35rem !important;
font-family: var(--caveat);
}

.preview-right .custom-audio-cover  audio{
position: absolute !important;
left:50% !important;
top:50% !important;
transform:translate(-50%, -50%) !important;
max-height: 75px !important;
width:188px !important;
}

.common-custom-cover{
width: 300px;
min-width: 100%;
max-width: 100%;
aspect-ratio: 7/4;
height: 100%; /* fill parent height */
padding: 1rem;
border-radius: 16px;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
text-align: center;
box-sizing: border-box;
position: relative;
overflow: hidden;
}

.custom-audio-cover-0 img {
max-width: 100%;
min-width: 100%;
max-width: 100%;
position:absolute;
top:0;
height: 100%;
object-fit: cover;
object-position: center;
}

.custom-audio-cover {
background: linear-gradient(
135deg,
rgba(255, 0, 54, 0.9) 0%,     /* rich red */
rgba(255, 87, 34, 0.7) 35%,   /* orangey-red */
rgba(30, 0, 255, 0.5) 100%    /* hint of blue */
);
background-blend-mode: screen;
border: 2px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
position: relative;
}

.custom-audio-cover::before {
content: "";
position: absolute;
top: -20%;
left: -20%;
width: 140%;
height: 140%;
background: repeating-linear-gradient(
45deg,
rgba(255, 255, 255, 0.04),
rgba(255, 255, 255, 0.04) 2px,
transparent 2px,
transparent 6px
);
opacity: 0.3;
pointer-events: none;
transform: rotate(5deg);
}


.custom-audio-cover-1 {
background:
linear-gradient(
to right,
#FF3F8B 49.5%,  /* vibrant pink */
#FFB547 49.5%,  /* bright orange */
#FFB547 100%
);
border: 2px solid #fff;
}

.custom-audio-cover-2 {
background: linear-gradient(to right, black 50%, white 50%);
}

.custom-audio-cover-2::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 1px;
background-color: #888;
transform: translateX(-0.5px);
pointer-events: none;
}

.custom-audio-cover-3 {
/* Lightning gradient background with sharp bright streak */
background:
linear-gradient(135deg,
#0f2027 0%, /* dark blue-black */
#203a43 40%, 
#2c5364 45%, 
#00ffd5 50%, /* bright cyan streak */
#2c5364 55%,
#203a43 60%,
#0f2027 100%);
box-shadow: 0 8px 25px rgba(0, 255, 213, 0.6);
border: 2px solid #00ffd5;
}

.custom-audio-cover-5-base {
/* Lightning gradient background with bright streak — now royal blue */
background: linear-gradient(
135deg,
#0f1a6d 0%,         /* deep navy */
#1c2de3 40%,        /* your blue */
#1c2de3 45%,
#ffffff 50%,        /* reflective streak */
#1c2de3 55%,
#1c2de3 60%,
#0f1a6d 100%
);
box-shadow: 0 8px 25px rgba(28, 45, 227, 0.6);
border: 2px solid rgba(28, 45, 227, 0.9);
backdrop-filter: blur(8px);
}

.custom-audio-cover-5 {
background: linear-gradient(
135deg,
rgba(28, 45, 227, 0.77) 0%,
rgba(60, 40, 255, 0.85) 25%,
rgba(130, 150, 255, 0.4) 60%,
rgba(255, 255, 255, 0.15) 100%
);
background-blend-mode: overlay;
backdrop-filter: blur(12px);
}

/* Subtle white lightning/glass texture */
.custom-audio-cover-5::before {
content: "";
position: absolute;
top: -20%;
left: -20%;
width: 140%;
height: 140%;
background: repeating-linear-gradient(
60deg,
rgba(255, 255, 255, 0.03),
rgba(255, 255, 255, 0.03) 2px,
transparent 2px,
transparent 6px
);
opacity: 0.3;
pointer-events: none;
transform: rotate(5deg);
}

.custom-audio-cover-4 {
background-color: #6B77FF; 
}

/* Vertical lightning stripe on the left side with brighter colors and glow */
.custom-audio-cover-4::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 14px;
height: 100%;
background:
repeating-linear-gradient(
to bottom,
#7D8AFF 0 10px,
#5A6EFF 10px 14px
);
filter: drop-shadow(0 0 10px #7D8AFF);
border-top-left-radius: 16px;
border-bottom-left-radius: 16px;
z-index: 2;
}

.custom-audio-cover,
.custom-audio-cover-2,
.custom-audio-cover-3,
.custom-audio-cover-4,
.custom-audio-cover-5{
width: 275px !important;
max-width: 100% !important;
}


.custom-audio-cover .headphones {
width: 60px;
height: 60px;
border: 4px solid #ffffffcc;
border-radius: 50%;
margin-bottom: 0.75rem;
position: relative;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(2px);
}

.custom-audio-cover .headphones::before,
.custom-audio-cover .headphones::after {
width: 8px;
height: 24px;
content: "";
position: absolute;
background: #ffffffcc;
top: 50%;
transform: translateY(-50%);
border-radius: 4px;
}

.custom-audio-cover .headphones::before {
left: -12px;
}

.custom-audio-cover .headphones::after {
right: -12px;
}

.common-custom-cover audio{
width: 120px;
height: 55px;
max-width: 100%;
outline: none;
border-radius: 6px;
padding: 0.25rem;
z-index: 3;
margin-top: 1rem;
background-color: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}


.custom-audio-cover-2 .headphones {
width: 60px;
height: 60px;
border: 4px solid #fff;
border-radius: 50%;
margin-bottom: 0.75rem;
position: relative;
}


.custom-audio-cover-2 .headphones::before,
.custom-audio-cover-2 .headphones::after {
content: "";
position: absolute;
width: 8px;
height: 24px;
background: #fff;
top: 50%;
transform: translateY(-50%);
border-radius: 4px;
}

.custom-audio-cover-2 .headphones::before {
left: -12px;
}

.custom-audio-cover-2 .headphones::after {
right: -12px;
}



/* Jukebox icon made with CSS shapes */
.jukebox-icon {
position: relative;
width: 60px;
height: 80px;
border-radius: 20px 20px 10px 10px;
background: #00ffd5;
box-shadow:
inset 0 5px 10px rgba(255, 255, 255, 0.4),
0 4px 8px rgba(0, 255, 213, 0.5);
margin-bottom: 1rem;
}


/* Details on jukebox - layered semicircles and lines */

.jukebox-icon::before {
content: '';
position: absolute;
top: 12px;
left: 12px;
width: 36px;
height: 36px;
border-radius: 50%;
background: #0f2027;
box-shadow: 0 0 6px #00ffd5;
}


.jukebox-icon::after {
content: '';
position: absolute;
top: 52px;
left: 12px;
width: 36px;
height: 12px;
background: linear-gradient(90deg, #00ffd5 0%, #0f2027 50%, #00ffd5 100%);
border-radius: 6px;
box-shadow: 0 0 6px #00ffd5;
}


.cover-title  {
position: absolute !important;
top:75% !important;
left:10% !important ;
width:100%;
max-width: 80%;
z-index:0;
font-size: 16px;
font-weight: 700;
margin: 0 auto 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}




/* Mic container - brighter base */
.microphone-icon {
position: relative;
width: 48px;
height: 72px;
background: #8799FF;
border-radius: 24px 24px 16px 16px;
box-shadow:
0 0 12px 3px #A5B9FF,
inset 0 0 10px #D6E1FF;
margin-bottom: 1rem;
z-index: 3;
}

/* Mic base - vertical rectangle with white glow */
.microphone-icon::before {
content: '';
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: 12px;
height: 40px;
background: #B3BFFF;
border-radius: 6px;
box-shadow:
0 0 8px 2px #D1D9FF,
inset 0 0 6px 2px #E5EAFE;
z-index: 4;
}


/* Mic head - circle on top with strong white highlight */
.microphone-icon::after {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 24px;
height: 24px;
background: #8A9FFF;
border-radius: 50%;
box-shadow:
0 0 10px 3px #C1CCFF,
inset 0 4px 6px 0 #F0F4FF;
z-index: 5;
}

/* Title styling */


/* Description styling */
.custom-audio-cover-4 .cover-description {
font-size: 14px;
font-weight: 400;
color: #D1D8FF;
max-width: 90%;
margin: 0 auto;
z-index: 3;
}


/** media-filter-starts **/
.field-wrap {
/*
position: absolute;
left:0;
top:7rem;
*/
margin: 55px auto 0;
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
padding: 1rem;
}

.common-field, .edit-media-area{
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: 0 !important;
opacity: 0;
pointer-events: none;
transform: translateX(100%);
transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.common-field{
position: relative;
top:2rem;
}

.common-field.visible{
height: 100% !important;
}

.common-field.visible, 
.edit-media-area.visible {
transform: translateX(0) !important;
opacity: 1 !important;
pointer-events: auto !important;
}

.edit-media-area.visible{
display:flex;
}

.preview-wrap{
  position: relative;
top:3rem;
display:grid;
grid-template-columns: 1fr 2fr !important;
justify-content: flex-start !important;
align-items: flex-start !important;
place-items: start;
justify-self: center !important;
margin-left:0 !important;

padding-bottom: .5rem !important;
gap:30px;

pointer-events: none;
opacity:0;
height: 0 ;
transition: opacity 0.4s ease-in-out;
}

.preview-wrap.visible{
opacity:1;
height:700px ;
pointer-events: auto;
transition:none !important;
}



.preview-wrap .remove-media-btn{
position: absolute !important;
top:0 !important;
right: 1rem !important;
z-index: 5000 !important;
}

.preview-wrap .remove-media-btn svg{
color: #4ba5ff !important;
}


.hidden{
display: none !important;
}

/** video-preview-starts **/
.changed-media-box {
width: 80% !important;
height:100%  !important;
border:none !important;
border-radius: 6px;
transition:border 0.3s ease-out;
background: none !important;
box-shadow: none !important;
position: absolute;
top:0;
left:10% !important;
}


.preview-right{
  user-select: none;
  resize: none !important;
position: relative;
top:-2rem;
width: auto !important;
padding:10px 5px;
height:435px !important;
border-radius: 12px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.07);
border: 1px solid rgba(255, 255, 255, 0.4);
backdrop-filter: blur(12px) saturate(140%);
background: var(--aspect-img-bg);

overflow: hidden; /* Prevent overflow due to video scaling */
border-radius: 12px; 

font-family: 'SF Pro Display', 'Helvetica Neue', sans-serif;
z-index: 0 ;
display: flex;
flex-direction: column;
justify-content: start !important;
align-items: flex-start !important;
z-index:0;
}


.changed-media-box  img{
object-fit: contain !important;
object-position: center !important;
height:100% !important;
max-width:100% !important;
padding: .6rem;
background: none !important;
box-shadow: none !important;
}
.step-4{
  position: relative;
}
#formStep{
  position: fixed;
  left:0;
  width:100%;
bottom:35px;
  z-index:99999999 !important
}

.video-preview-box{
position: relative;
height:355px;
width:350px;
background: rgba(0, 0, 0, 0.9);
border-radius: .8rem;
}



.video-preview-inner{
width:100%;
height: 100%;
}

.video-preview-inner a{
cursor: pointer;
}

.video-preview-inner .preview-control-btn{
width:55px;
height: 55px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.3);
}

.video-preview-top  a {
width:35px;
height: 35px;
border-radius: .4rem;
background: rgba(89, 89, 89, 0.3);
cursor: pointer;
}

.video-preview-inner .preview-control-btn,
.video-preview-top  a {
cursor: pointer;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color:#ddd;
}



.video-preview-top{
position:absolute !important;
top:0 !important;
right:.5rem !important;
z-index: 100;
}

.feed-video-preview-box .video-preview-top{
right:-2.5rem !important;
}

.video-preview-inner .preview-control-btn:hover,
.video-preview-top  a:hover{
background: rgba(0, 0, 0, 0.7);
color:var(--loud-btn);
scale:0.88;
}

.video-preview-inner .preview-control-btn svg{
width:35px;
height: 35px;
position: relative;
left:.9px;
}



.video-preview-top svg{
width:20px;
height: 20px;
}

.video-preview-middle{
width:100%;
margin: 0 auto;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}



.video-preview-middle video{
position: absolute !important;
left:50% !important;
top:50% !important;
transform: translate(-50%, -50%) !important;
z-index:0 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height:100% !important;
object-fit:scale-down !important;
border-radius: 4px !important;
justify-self: center !important ;

}


.video-preview-middle .controls-wrap{
position: relative;
}

.feed-right .video-preview-bottom{
width: 100% !important;
}



.video-preview-bottom{
border: 2px solid rgba(33, 33, 33, 0.7);
position: absolute;
z-index: 100 !important;
bottom: 0;
width: 100%;
margin: 0 auto;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.4);
padding: .6rem;
}



.video-preview-bottom .preview-time{
color:var(--loud-blue-light) !important;
font-size: 12px;
min-width: 70px;
align-self: end;
position: relative;
top:0 !important;
}

.medialib-list-box .preview-seek-bar ,
.medialib-list-box .preview-time{
position: relative;
top:-.8rem !important;
}

.video-preview-bottom .preview-time,
.video-preview-bottom .preview-seek-bar{
user-select: none !important;
resize: none !important;
}


.video-preview-bottom .preview-seek-bar {
flex: 1;
margin-right: 10px;
appearance: none;
height: 6px;
border-radius: 4px;
background: #444;
cursor: pointer;
align-self: center;
border: none !important;
width:65%;
}


/* Track */
.video-preview-bottom .preview-seek-bar::-webkit-slider-runnable-track {
height: 6px;
border-radius: 4px;
background: var(--loud-blue);
}
.video-preview-bottom .preview-seek-bar::-moz-range-track {
height: 6px;
border-radius: 4px;
background: var(--loud-blue);
}

/* Thumb */
.video-preview-bottom .preview-seek-bar::-webkit-slider-thumb {
appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--loud-blue-light);
border: 2px solid var(--loud-blue-border);
margin-top: -3px; /* align with track */
}
.video-preview-bottom .preview-seek-bar::-moz-range-thumb {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--loud-blue-light);
border: 2px solid var(--loud-blue-border);
}

/** video-preview-ends **/


.preview-wrap img{
max-height: 100% !important;
height:100% !important;
border:none !important;
width:100% !important;
max-width: 100%;
margin-left:0;
object-position: center !important;
  user-select: none;
  resize: none !important;
}


.preview-span.style{
height:100px;
position: absolute;
left:12%;
top:.5rem;
transition: 0.2s ease-out;
}

.preview-span img{
object-fit: contain;
width: 100%;
height: 100%;
border-radius: 2rem;
}


.preview-span  audio, .preview-right audio{
height: 150px;
width: 100%;
}
.preview-span  video{
width: 100%;
}

.preview-span audio, 
.preview-right audio,
.preview-span a,
.preview-span video {
aspect-ratio: 1/1;
object-fit: contain;
border-radius: .6rem;
border: .1rem solid #dcdcde;
box-shadow: var(--medium-shadow);
margin-top:.4rem;
}


.preview-span .pdf-book{
position: relative;
top:-1.1rem;
height: 50px;
width: 55px;
}
.preview-span .pdf{
margin-top:-.5rem !important;

}
.preview-span .pdf-book-title{
top:-.7rem !important;
font-size: 0.6rem !important;
}

.preview-span a
{
max-width: 3rem;
}

.preview-left{
max-width: 285px;
margin-left: 0 !important;
max-height: 120px;
}

.feature-heading{
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: rgba(255, 255, 255, 0.7);
padding-left: 2px;
text-align: left !important;
font-size: 14px ;
}


.filter-name{
width:200px;
max-width: 100%;
}


.media-filter p{
color:#fff;
font-size: 12px !important;
}


.media-filter {
backdrop-filter: blur(22px) saturate(180%);
background: rgb(0, 0, 0, 0.9);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
margin-left: 0 !important;
align-items: flex-start !important;
justify-content:  flex-start !important;
padding: 8px;
overflow-x: auto;
overflow-y: hidden !important;
scroll-behavior: smooth;
gap: 16px;
height: auto !important;
height: 100% !important;
}

.media-filter a{
color: #444 !important;
text-decoration: none !important;
}

/* Hide native scrollbar */
.media-filter::-webkit-scrollbar {
display: none;
}
.media-filter {
-ms-overflow-style: none;
scrollbar-width: none;
}

.media-filter-inner {
display: flex;
gap: 10px;
margin-left: 0 !important;
align-items: flex-start !important;
justify-content:  flex-start !important;
padding-bottom: .5rem !important;
margin-top: -.8rem;
}

.media-button {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
padding: 16px 10px;
border-radius: 50%;
font-size: 15px;
transition: all 0.2s ease;
cursor: pointer;
margin-bottom: .8rem !important;
}

/* ICON BASE */
.filter-icon, .animate-icon {
width: 55px;
height: 55px;
border-radius: 50% !important;
margin-left: 8px;
position: relative;
display: inline-block;
}

.filter-icon:hover, .animate-icon:hover{
background: rgba(255, 255, 255, 0.2); 
transform: scale(0.85);
}

.filter-icon:active, .animate-icon:active{
transform: scale(0.88);
background: rgba(255, 255, 255, 0.3);
}

/* ========== FILTER ICONS ========== */

.blur-icon::before {
content: '';
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
background: radial-gradient(circle at center, #fff 20%, transparent 60%);
}

.brightness-icon::before {
content: '';
display: block;
width: 100%;
height: 100%;
border: 2px solid #d8d8ff;
border-radius: 50%;
box-shadow: 0 0 0 7px #dedede inset;
}

.contrast-icon::before {
content: '';
display: block;
width: 100%;
height: 100%;
background: linear-gradient(to right, #fff 50%, transparent 50%);
border-radius: 50%;
}

.grayscale-icon::before {
content: '';
display: block;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
45deg,
#fff,
#fff 2px,
#aaa 2px,
#aaa 4px
);
border-radius: 50%;
}

.sepia-icon::before {
content: '';
display: block;
width: 100%;
height: 100%;
background-color: #b38b6d;
border-radius: 50%;
}

/* ========== ANIMATION ICONS ========== */

@keyframes spin {
to { transform: rotate(360deg); }
}

.twirl-icon::before {
content: '';
display: block;
width: 100%;
height: 100%;
border: 2px solid #fff;
border-top-color: transparent;
border-radius: 50%;
animation: spin 1s linear infinite;
}

@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.3); opacity: 0.7; }
}

.pulse-icon::before {
content: '';
display: block;
width: 100%;
height: 100%;
background: #fff;
border-radius: 50%;
animation: pulse 1s infinite ease-in-out;
}

@keyframes wiggle {
0%, 100% { transform: rotate(0); }
25% { transform: rotate(6deg); }
75% { transform: rotate(-6deg); }
}

.wiggle-icon::before {
content: '';
display: block;
width: 100%;
height: 100%;
background: #fff;
border-radius: 2px;
animation: wiggle 0.5s infinite;
}

@keyframes zoomLoop {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.4); }
}

.zoom-icon::before {
content: '';
display: block;
width: 100%;
height: 100%;
background: #fff;
border-radius: 50%;
animation: zoomLoop 1.2s infinite ease-in-out;
}

@keyframes glitch {
0% { transform: translate(0); }
20% { transform: translate(-1px, 1px); }
40% { transform: translate(1px, -1px); }
60% { transform: translate(-1px, -1px); }
80% { transform: translate(1px, 1px); }
100% { transform: translate(0); }
}

.glitch-icon::before {
content: '';
display: block;
width: 100%;
height: 100%;
background: #fff;
animation: glitch 0.3s infinite;
}

/** treble-clef ***/
.music-icon-box {
width: 50px;
height: 50px;
border-radius: 12px;
background: rgba(28, 45, 227, 0.55); /* bluish-violet glass */
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
top:35px;
}


.music-icon {
position: relative;
width: 18px;
height: 28px;
}

.note-stem {
position: absolute;
width: 3px;
height: 22px;
background: white;
left: 8px;
top: 0;
border-radius: 2px;
}

.note-head {
position: absolute;
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
bottom: 0;
left: 3px;
transform: rotate(-20deg);
}

.note-flag {
position: absolute;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 8px solid white;
left: 9px;
top: 0;
transform: rotate(30deg);
}
/** music-icon **/
/*** media-filter-ends **/

/*** modal-changes **/
/** for-feed **/
[data-type="audio"] .grid-audio-controls{
bottom: 205px;
height: 120px;
z-index:100 !important;
}
[data-type="audio"]  .custom-audio-cover-0 .cover-title{
position: absolute;
top:82px !important;
font-size: 17px !important;
z-index: -1 !important;
}


[data-type="audio"] .custom-audio-cover-0 .jukebox-icon{
top:67% !important;
z-index: 0 !important;
}


[data-type="audio"] .jukebox-icon{
position: absolute;
left:50%;
transform: translateX(-50%);
top:35%;
width: 120px;
height: 120px;
}

[data-type="audio"] .jukebox-icon::before {
top: 12px;
left:50%;
transform: translateX(-50%);
width: 76px;
height: 76px;
}



[data-type="audio"] .music-icon-box{
top:100px ;
width: 100px;
height: 100px;
}


[data-type="audio"] .music-icon {
top:-12px;
}


[data-type="audio"] .note-stem{
width: 5px;
height: 45px;
left: 8px;
top: 0;
}

[data-type="audio"]  .note-flag{
left: 11px;
top: 0;
transform: rotate(32deg);
}

[data-type="audio"] .note-head {
width: 15px;
height: 15px;
bottom: -20px;
left: 3px;
transform: rotate(-20deg);
}
/** /for-feed **/

.monetized{
filter:blur(2px);
}

.monetized-clicked{
filter:blur(4px);
}

.no-click{
pointer-events: none !important;
z-index:0 !important;
}




.monetized, .is-external{
color:#fff;
text-align: center;
font-size: 11px;
font-family: var(--roboto);
}

.range-controls{
padding: 18px 26px;
border-radius: 0;
background: rgba(0, 0, 0, 0.2);
backdrop-filter: blur(8px);
color: #fff;
transition: all 0.3s ease;
position: absolute !important;
left: 0;
z-index: 5000;
bottom:0;
width:100%;
max-width: 100%;
border-bottom-right-radius: 1rem;
border-bottom-left-radius: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
gap:20px;
}


[data-action="more-options"]{
max-height: 35px !important;
max-width: 35px !important;
width:100% !important;
height:100% !important;
}



.media-ul{
color:#777 !important;
background: rgba(255, 255, 255, 0.77) !important;
position: fixed !important;
max-width:100px;
width:100% !important;
display:flex !important;
flex-direction: column !important;
align-items:flex-start !important;
justify-content: flex-start !important;
text-align: left !important;
margin:0 !important;
padding: .6rem;
right:0;
z-index:0 !important;
max-height: 0;
opacity:0;
transform: translateX(3rem);
transition: opacity 0.3s ease-out, transform 0.3s ease-out;
pointer-events: none;
top:100%;
}


.media-ul.visible{
max-height: 88px !important;
opacity:1 !important;
transform: translateX(0) !important;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out !important;
pointer-events: auto;
z-index:999999 !important;
}

.media-ul  a{
margin-bottom: .8rem;
}

.video-preview-bottom .preview-seek-bar.active,
.video-preview-bottom .preview-seek-bar.focus{
width:75% !important;
}





.monetized-overlay-middle{
position: absolute !important;
width:100%;
left:0;
z-index:0 !important;
display:flex;
flex-direction: column;
align-items:center;
justify-content: center;
padding: 1rem;
text-align: center;
pointer-events: none;
}

.monetized-overlay-middle p{
font-size: 14px !important;
font-family: var(--roboto);
position: relative !important;
z-index:4 !important;
}


.monetized-overlay-middle  svg{
width:35px !important;
height: 35px !important;

}
.monetized-overlay svg{
pointer-events: none;
}

/*** modal-changes-ends **/

/** feed-uploader-starts **/
.feed-loader-container{
width: 100%;
transition: 0.3s ease, transform 0.3s ease;
opacity: 0;
transform: translateY(-10px);
}

.feed-loader-container.show{
opacity:1;
transform: translateY(0);
}

.feed-loader-container.fade-out{
opacity:0;
transform: translateY(-10px);
}

#profileProgressBar{
position:absolute;
width: 75%;
margin:1rem auto;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}


.feed-loader-container.margin{
margin-top: 1rem;
}



.feed-loader{
height: 15px;
width: 100%;
background: #363fc5;
border-radius: 2rem;
position: relative;
overflow: hidden;
display: inline-block;

}

.feed-loader.lightgreen{
background:#d3fdd3;
}

.feed-loader-bar{
position: absolute;
background: #b7bbf3;
width: 0;
height: 100%;
border-radius: 2rem 0 0 2rem;
transition: width 0.2s ease linear; /* smooth animation */
}

.feed-loader-bar.green{
background:#7fd47f;
}



.feed-loader-bar.complete{
border-radius: 2rem !important;
}

.feed-loader-msg{
font-size: 16px;
margin-top: 10px;
margin-bottom: 15px;
text-align: center;
font-weight: 600;
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.6s ease, transform 0.6s ease;
}

.feed-loader-msg.blue{
color: #a0aaf9;
}

.feed-loader-msg.green{
color:#9ae5ad
}


.feed-loader-msg.show{
opacity: 1;
transform: translateY(0);
}
/* feed-loader-ends */

@keyframes fadeInScale {
0% {
opacity: 0;
transform: scale(0.95);
}
100% {
opacity: 1;
transform: scale(1);
}
}

/* optional: add checkmark icon */
.feed-upload-success::before {
content: "✔ ";
font-weight: bold;
}
/* Make each wrap a horizontal scroll container */

/* Each media item */
.feed-upload-previewer-wrap img,
.feed-upload-previewer-wrap video,
.feed-upload-previewer-wrap .feed-upload-audio-wrap,
.feed-upload-previewer-wrap .feed-upload-pdf-wrap {
flex: 0 0 auto;          /* prevent shrinking */
}
/** feed-uploader-ends **/

/** medialib-starts **/
.medialib-right-inner img, .medialib-right-inner video {
display:block; max-width:100%; 
}

.medialib-container{ 
margin:0 auto 0;
width:1024px;
max-width:100%;
padding: 1rem;
background: var(--bg);
-webkit-tap-highlight-color: transparent;
}


#recentGroupName{
right:1rem !important;
color: #e6e7ff;
padding: 3px 7px;
font-size: .8rem !important;
top:-30px !important;
text-wrap: normal !important;
word-break: break-all;
flex:0 0 165px;
max-width: 165px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

#softContentLibContainer{
position:relative;
top:-55px;
}

#softContentLibContainer  .browse-camera-icon{
pointer-events: none !important;
}

/* upload-button.css */
.soft-upload-btn {
position:sticky;
margin-top:auto;
bottom:25%;
display: flex;
align-self: center;
justify-self: center;
z-index:999999999999 !important;
gap: 8px;
width:auto;
max-width: auto;
padding: 12px 20px;
margin-top: 16px;
font-size: 16px;
font-weight: 500;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
color: #fff;
background: linear-gradient(135deg, #007aff, #0051a8);
border: none;
border-radius: 12px;
box-shadow: var(--deep-shadow);
cursor: pointer;
transition: all 0.25s ease-in-out;
-webkit-tap-highlight-color: transparent;
pointer-events: auto;
}

.soft-upload-btn:hover {
background: linear-gradient(135deg, #006ae6, #004c99);
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(0, 122, 255, 0.35);
}

.soft-upload-btn:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2);
}

.soft-upload-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.opacity{
opacity: 0.4;
}

.soft-upload-btn.uploading{
opacity: 0.88;
pointer-events: none;
cursor: not-allowed;
transform: none;
box-shadow: none;
}


#browseFileLibrary, #media_cover{
position: relative;
z-index: 500000000 !important;
}

.medialib-block-left svg path,
.medialib-block-left svg rect,
.medialib-block-left svg line,
.medialib-block-left svg linearGradient,
.medialib-block-left svg circle,
.medialib-block-left svg polyline,
.medialib-block-left svg polygon{
pointer-events: none;
}


.medialib-block-left svg{
cursor:pointer !important;
pointer-events: auto !important;
}

.medialib-block-right{ 
width:100%; 
}


.medialib-right-inner{
display:grid;
align-items: flex-start !important;
grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)) !important;
gap:5px;
}

.medialib-right-inner.change{
display: none;
}

#softContentLibContainer .medialib-right-inner{
position:relative;
top:-2rem;
margin:0;
padding:0;
}

#softContentLibContainer .medialib-right-inner{
position:relative;
top:-2rem;
margin:0;
padding:0;
}
.medialib-block-left a{
cursor: pointer !important;
pointer-events: all !important;
}
#mediaLibContainer,
.portfolio-state-container{
margin-top: 10px;
}

#softContentLibContainer .medialib-block-left{
box-shadow:none;
background:none !important;
margin-top:1rem !important;
top:0 !important;
position: relative !important;
z-index: 300;
padding: 1rem !important;
}


.medialib-block-left{
display:inline-flex;
position: relative;
gap:15px;
align-items:center !important;
justify-content: center !important;
background: var(--accent-surface);
height:55px;
border-radius:16px;
padding:.6rem;
box-shadow: var(--shadow-1);
width:96% !important;

}

.medialib-block-left a{
cursor:  pointer !important;
}


.rem-middle-icons{
display: flex;
gap:30px;
}
.medialib-block{
display:grid;
grid-template-columns: 240px 1fr; 
gap: 1.5rem;
align-items:flex-start;
}
#medialibUploadIcon{
cursor: pointer !important;
position:relative !important;
z-index:500 !important;
pointer-events: all !important;
left:1rem;
}


.medialib-block-left .browse-library{
cursor: pointer !important;
display:inline-flex;
align-items:center;
gap:.5rem;
padding:.25rem;;
border-radius:12px;
height: 55px;
border:.1rem solid #ebebeb;
background:var(--ios-white);
color:#333;
text-decoration:none;
font-weight:600;
}

.medialib-block-left .browse-library span{
user-select: none;
resize: none;
}



.medialib-list-box {
width: 100%;         /* take full column width */
aspect-ratio: 1 / 1; /* force square shape */
display: flex;
align-items: center;
justify-content: center;
border-radius: 16px;
position: relative;
border-radius: 1rem;
z-index:0;
}

.medialib-list-box[data-unlinked="true"]{
border: 2px dashed rgba(255, 77, 77, 0.6);
box-shadow: 0 0 6px rgba(255, 77, 77, 0.3);
}

.medialib-list-box[data-uploaded="true"]{
border: 2px dashed rgba(92, 117, 220, 0.6);
box-shadow: 0 0 6px rgba(78, 112, 198, 0.3);
}

.medialib-list-box[data-uploaded="true"] svg{
position: absolute;
left: 50%;
transform: translateX(-50%);
}

.medialib-list-box[data-uploaded="true"] img{
  border-radius: 1rem;
}

.medialib-list-box[data-unlinked="true"],
.medialib-list-box[data-uploaded="true"]{
border-radius: 12px;
}

.medialib-list-box[data-unlinked="true"]::after{
content: var(--msg-2);
background: rgba(255, 77, 77, 0.9);
top: 50%;
left:0;
}

.medialib-list-box[data-uploaded="true"]::after {
  content:'Just attached awaiting upload';
  background: rgba(85, 85, 212, 0.9);
  top: 75%;
  left:50%;
  transform: translateX(-50%);
  flex:0 0 100%;
  text-wrap: nowrap;
  word-break: keep-all;
}

.medialib-list-box[data-unlinked="true"]::after,
.medialib-list-box[data-uploaded="true"]::after {
position: absolute;
z-index:3000;
color: white;
font-size: 11px;
font-weight: 500;
padding: 2px 6px;
border-radius: 6px;
backdrop-filter: blur(3px);
}

.medialib-list-box:hover{
transform: translateY(-3px);
box-shadow: var(--shadow-2);
}

.medialib-glass-bg{
background: var(--glass);
backdrop-filter: blur(12px);
}

.medialib-list-img{
position:absolute;
z-index:1;
inset:0;
width:100%;
height:100%;
}


.medialib-list-img img,
.medialib-list-img video{
width:100%;
height:100%;
object-fit: cover; 
border:0;
border-radius:1rem;

}


.pdf-cover-image {
  height: 100%;
  object-fit: cover;
  position: absolute;
  z-index: 9999999;
  object-position: center 70%; /* pushes focus slightly downward */
}



.media-meta-wrap{
position:absolute;
top:8px; right:8px;
display:flex;
gap:8px;
opacity:0;
transition: opacity .18s ease;
z-index:2;
width: 100%;
max-width: 100%;
}

.media-meta-wrap.visible{
opacity:1;
}


#moveCollectionModal .general-modal-content{
padding: 1rem !important;
}
.medialib-list-box:hover .media-meta-wrap{ opacity:1; }

.media-edit-top{
display:flex;
gap:8px;
align-items:center;
position: relative;
z-index:5000;
}

[data-pointer="true"]{
pointer-events:all !important;
cursor: pointer !important;
}

.heart-icon path {
fill: #ccc !important;
transition: fill 0.3s ease !important;
}
.heart-icon.pulse path {
overflow: visible !important;
position: absolute !important;
top:0;
margin-left:-.6rem ;
transform: translateX(-50%), translateY(-1rem);
z-index: 100;
scale:1.04 !important;
background: none !important;
box-shadow: none !important;
transition: fill 0.3s ease , transform 0.3s ease !important;
}
.heart-icon.favorited path {
fill: crimson !important;
}

@keyframes pulse-once {
0% {
transform: scale(1);
}
40% {
transform: scale(1.5) !important;
}
100% {
transform: scale(1);
}
}



.media-edit-top svg,
.media-edit-top a svg{
width:25px; 
height:25px;
stroke:#fff !important;
background: var(--icon-bg) !important;
border-radius:50% !important;
padding:4px !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
top:0 !important;
margin: 0 !important;
}



.media-card .medialib-pdf-cover{
width: 88%;
height: 85% !important;
top:50%;
max-width: 300px;
transform: translateY(-50%);
}

/* “Folded corner” */
.medialib-pdf-cover::after{
content:"";
position:absolute;
top:0; right:0;
width:48px; height:48px;
background: rgba(255,255,255,0.32);
clip-path: polygon(0 0, 100% 0, 100% 100%);
filter: blur(.2px);
}

/* “Spine” */
.medialib-pdf-cover::before{
content:"";
position:absolute;
left:0; top:0; bottom:0;
width:10px;
background: rgba(0,0,0,0.12);
}

.medialib-pdf-cover-meta h3{
margin:0 0 .25rem 0;
font-size:1rem;
font-weight:800;
letter-spacing:.2px;
font-family: var(--anton) !important;
}

.medialib-pdf-cover-meta p{
margin:0;
font-size:11px ;
opacity:.92;
font-family: var(--roboto)!important;
}

/** pdf-starts **/

.profiletab-content .book-front, #portfolioContentContainer .book-front{
flex-direction: column !important;
width: 90%;
}
.media-card .book-front{
width: 94%;
}
.media-card .common-pfd-book{
width:93%;
}
.pdf-cover {
width: 90%;
height: 90%;
width: 330px;
max-width: 100%;
background: linear-gradient(135deg, #3e2f2b, #5c4033); /* warm brown leather feel */
border-radius: 8px;
position: relative;
padding: 1.2rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: "Georgia", serif;
color: #fefefe;
cursor: pointer;

/* Depth + realism */
transform: perspective(800px) rotateY(-4deg);
box-shadow:
-4px 4px 12px rgba(0, 0, 0, 0.1),
inset -2px 0 6px rgba(0, 0, 0, 0.15); /* spine feel */
transition: transform 0.35s ease, box-shadow 0.35s ease;
text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}


.pdf-cover:hover {
transform: perspective(800px) rotateY(0deg) scale(1.02);
box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}

/* Shared text rules */
.pdf-cover h3, 
.pdf-cover p {
pointer-events: none;
}
.pdf-cover h3 {
font-size: 1.15rem;
font-weight: bold;
margin-bottom: 0.5rem;
text-align: center;
color: #fffbe6;
letter-spacing: 0.3px;
}
.pdf-cover p {
font-size: 0.85rem;
opacity: 0.85;
text-align: center;
line-height: 1.4;
color: #fdfdfd;
}


.pdf-cover::before {
content: '';
position: absolute;
left: -6px;
top: 12%;
bottom: 12%;
width: 4px;
background: linear-gradient(to bottom, #372b28, #1c1311);
border-radius: 2px;
box-shadow: 1px 0 3px rgba(0,0,0,0.4);
}

.pdf-cover::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset -8px 0 6px -6px rgba(255,255,255,0.25);
pointer-events: none;
}


.view-counter {
position: absolute;
bottom: 5px;
left: 12px;
display: flex;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.85); /* light gray-white, works on dark */
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* makes it visible on light bg */
z-index: 99;
}


.child-view-counter:last-child{
margin-left: .5rem;
}

.view-counter svg {
width: 16px;
height: 16px;
position:relative;
top:.2rem;
flex-shrink: 0;
opacity: 0.85;
color:#dedede;
}


/* Base popup styles */
.monetized-popup {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.85);
color: #fff;
border-radius: 8px;
padding: 12px 16px;
font-family: system-ui, sans-serif;
text-align: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
z-index: 9999999999 !important;
pointer-events: auto;
transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Normal popup for modal / full-size view */
.monetized-popup.normal {
width: 260px;
max-width: 90%;
font-size: 14px;
top:50%;
transform: translateY(-50%);
}



.monetized-popup.normal p {
margin: 0 0 8px 0;
}


.monetized-popup.normal .buy-now-btn {
background-color: #1db954; /* Apple Music / Spotify-like green */
color: #fff;
border: none;
border-radius: 6px;
padding: 6px 12px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease;
}


.monetized-popup .buy-now-btn span{
pointer-events: none !important;
}

.monetized-popup.normal .buy-now-btn:hover {
background-color: #1ed760;
}

/* Mini popup for grid items */
.monetized-popup.mini {
width: 140px;
font-size: 12px;
padding: 6px 8px;
border-radius: 6px;
}

.monetized-popup.mini p {
margin: 0 0 4px 0;
}

.monetized-popup.mini .buy-now-btn {
background-color: #1db954;
color: #fff;
border: none;
border-radius: 4px;
padding: 4px 8px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s ease;
}

.monetized-popup.mini .buy-now-btn:hover {
background-color: #1ed760;
}

/* Optional: fade-in animation */
.monetized-popup.show {
opacity: 1;
transform: scale(1);
}

.monetized-popup.hide {
opacity: 0;
transform: scale(0.95);
pointer-events: none;
}

.ribbon{
background: #c0392b;
color: white;
font-size: 0.65rem;
}

.ribbon{
position: absolute;
z-index: 5000 !important;
top: 0.6rem;
right: -0.4rem;
padding: 0.2rem 0.6rem;
transform: rotate(12deg);
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
border-radius: 4px;
font-weight: bold;
text-transform: uppercase;
}

.iscover-ribbon{
top:30px;
right:25px;
}

.pdf-cover.book-style-1  h3, .pdf-cover.book-style-1  p{
width:100% !important;
max-width:355px !important;
}
.pdf-cover.book-style-1 {
background: linear-gradient(135deg, #6a11cb, #2575fc);
color: #fff;
width:94% !important;
}
.pdf-cover.book-style-2 {
background: linear-gradient(135deg, #a2b1f9, #677ce8);
color: #fff;
}
.pdf-cover.book-style-3 {
background: linear-gradient(135deg, #a5eeac, #8bb789);
color: #fff;
}

/* Shared Book Spines */
.pdf-cover.book-style-1::before,
.pdf-cover.book-style-2::before,
.pdf-cover.book-style-3::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 10px;
background: rgba(0,0,0,0.12);
}

/* Shared Top Highlights */
.pdf-cover.book-style-1::after,
.pdf-cover.book-style-2::after,
.pdf-cover.book-style-3::after {
content:"";
position:absolute;
top:0;
right:0;
width:48px;
height:48px;
background: rgba(255,255,255,0.25);
clip-path: polygon(0 0, 100% 0, 100% 100%);
filter: blur(.4px);
}

/* Text refinements */
.pdf-cover.book-style-1 h3,
.pdf-cover.book-style-2 h3,
.pdf-cover.book-style-3 h3 {
margin: 0 0 0.25rem 0;
font-size: 1rem;
font-weight: 800;
letter-spacing: 0.25px;
}
.pdf-cover.book-style-1 p,
.pdf-cover.book-style-2 p,
.pdf-cover.book-style-3 p {
margin: 0;
font-size: 0.8rem;
opacity: 0.9;
}


.medialib-pdf-cover img, .modal-pdf-cover img{
  width:100%;
  height:100%;
  position: absolute;
  top:0;
  left:0;
  object-fit: cover;
object-position: center;
border-radius: 4px !important;
  filter: brightness(1.05) contrast(1.1);
}

.modal-pdf-cover{
  background: none !important;
}

/* spine effect on the image itself */
.profile-content .medialib-pdf-cover .img::before,
#mediaModal .medialib-pdf-cover .img::before {
content: "";
position: absolute;
width:20px;
height: 100%;
inset: 0;
background: linear-gradient(
  to right,
  rgba(0,0,0,0.5) 0%,
  rgba(0,0,0,0.3) 4%,
  rgba(255,255,255,0.05) 8%,
  rgba(255,255,255,0) 20%
);
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
z-index: 2;
pointer-events: none;
}

.medialib-pdf-iscover{
  background: none !important;
}

.medialib-pdf-cover {
  width: 330px;
max-width: 100%;
height: 100%;
background: var(--accent-orange);
position:relative;
inset:0;
display:flex;
flex-direction:column;
align-items: center;
justify-content:center;
padding:1rem;
color:#fff;

font-family: "Georgia", serif;
cursor: pointer;
color: #fefefe;
text-shadow: 0 1px 1px rgba(0,0,0,0.3);

/* Depth */
box-shadow:
-4px 4px 12px rgba(0,0,0,0.1),
inset -2px 0 6px rgba(0,0,0,0.15);
transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.medialib-pdf-cover:hover{
transform: perspective(800px) rotateY(0deg) scale(1.02);
box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}

.common-pdf-content h4,
.common-pdf-content h3{
  text-align: center;
}

.medialib-pdf-cover p {
font-size: 0.85rem;
opacity: 0.85;
text-align: center;
line-height: 1.4;
color: #fdfdfd;
}
.common-pdf-content h3, .common-pdf-content p{
pointer-events: none;
}
/*** pdf-ends **/

.medialib-custom-cover{
background: var(--accent-blue);
position:absolute;
inset:0;
z-index:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:.7rem;
text-align:center;
padding:1rem;
color:#fff;
border-radius: 1rem;
}

/* vinyl/cassette vibe */
.medialib-custom-cover::before{
background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 55%, rgba(0,0,0,0.12) 56%, rgba(0,0,0,0.0) 60%);
content:"";
position:absolute;
width:140px; 
height:140px;
border-radius:50%;
inset:0; margin:auto;
filter: blur(.2px);
pointer-events:none;
z-index: 0 !important;
}


.medialib-custom-cover .music-icon-box{
width:68px !important; 
height:68px !important;
border-radius:50% !important;
background: rgba(88, 103, 243, 0.9) !important;
display:flex !important;
align-items:center; justify-content:center !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3) !important;
position:absolute !important; 
top:50% !important;
transform: translateY(-50%) !important;
z-index: 0 !important
}

.medialib-custom-cover .music-icon{ 
width:28px !important;
height:28px !important;
position:relative !important; 
left:50% !important;
transform: translateX(-50%) !important;
color:rgba(107, 61, 246, 0.8) !important;
}

/* Each bar */
.medialib-custom-cover .music-icon-box .eq-bars{
width:100%;
display: flex;
transform: translateY(-10px);
justify-content: center;
align-items: center;
}
.medialib-custom-cover .music-icon-box .eq-bars span {
background:rgb(248, 119, 145);
display: inline-block !important;
width: 4px !important;
height: 12px !important;
border-radius: 2px !important;
position: relative !important;
left:-1rem !important;
top:20px !important;
z-index:100 !important;
}

.medialib-custom-cover .music-icon-box .eq-bars span.animate{
animation: eq-pulse 1s infinite ease-in-out !important;
}

/* Offset animations for different bars */
.medialib-custom-cover .music-icon-box .eq-bars span:nth-child(2){
animation-delay: 0.2s;
}
.medialib-custom-cover .music-icon-box .eq-bars span:nth-child(3){
animation-delay: 0.4s;
}
.medialib-custom-cover .music-icon-box .eq-bars span:nth-child(4){
animation-delay: 0.6s;
}

/* Pulse animation */
@keyframes eq-pulse {
0%, 100% { transform: scaleY(0.3); }
50% { transform: scaleY(1); }
}

.medialib-custom-cover .cover-title{
margin:.5rem 0 0 !important;
font-size:.95rem !important;
font-weight:700 !important;
letter-spacing:.2px !important;
text-shadow: 0 1px 2px rgba(0,0,0,0.25) !important;
position: relative;
z-index:0 !important;
opacity: 0.6;
transform: translateY(-1px);
}

/* Controls row */
.medialib-grid-audio-controls{
margin-top:100px;
display:flex;
align-items:center;
gap:.6rem;
font-size:.8rem;
}

.feed-audio-details-wrapper{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transform: translateY(-9px);
gap:15px;
}


.medialib-grid-audio-controls .control-btn{
position: absolute !important;
top:50% !important;
left:50% !important;
transform: translate(-50%, -50%)!important;
width:40px !important; 
height:40px !important;
border-radius:50% !important;
display:flex; align-items:center !important; justify-content:center !important;
background: rgba(196, 162, 253, 0.9) !important;
box-shadow: 0 2px 10px rgba(188, 199, 249, 0.18), inset 0 0 0 1px rgba(131, 150, 249, 0.35) !important;
z-index: 999999 !important;
/*
rotate: 360deg !important;
*/
}


.medialib-grid-audio-controls svg{ color:#fff !important; 
display: inline-block;
width:30px;
height:30px;
cursor: pointer;}

.medialib-grid-audio-controls .time{
min-width:40px;
position: relative;
left:15px;
text-align:left;
opacity:.95;
}

.medialib-grid-audio-controls .seek-bar{
width:90px; 
height:4px;
-webkit-appearance: none !important;
appearance: none !important;          /* slimmer by default */
border-radius: 999px !important;
outline: none !important;
background: linear-gradient(90deg, #2c33a5, #6069e8) !important;
box-shadow: inset 0 1px 2px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.12) !important;
flex: 1 !important;
transition:width 0.2s ease !important;   /* smooth expansion */
position: relative;
z-index: 100 !important;
cursor: pointer;
}

.medialib-grid-audio-controls .seek-bar::-webkit-slider-thumb{
-webkit-appearance: none !important;
appearance: none !important;
width: 10px !important;
height: 8px !important;
background: #fff !important;
box-shadow: 0 2px 6px rgba(0,0,0,.35), 0 0 0 3px rgba(138,91,255,.25) !important;
cursor: pointer !important;
}

.medialib-grid-audio-controls .seek-bar::-moz-range-thumb{
width: 10px !important;
height: 8px !important;
border: none !important;
border-radius: 50% !important;
background: #fff !important;
box-shadow: 0 2px 6px rgba(0,0,0,.35), 0 0 0 3px rgba(138,91,255,.25) !important;
}

.medialib-custom-cover audio{
display:none;
}

.medialib-block-right h3{
margin: 0 0 .5rem 0;
font-weight:700;
letter-spacing:.2px;
color:#111;
}
/** medialib-ends **/
/** album-starts **/
.cutsom-photo-icon:hover {
transform: scale(1.1);
box-shadow: 0 6px 16px rgba(0,0,0,0.25);
background-color: #d2dbfa;
}

.custom-photo-icon {
width: 40px;
height: 40px;
pointer-events: none;
background-color: #fff !important;
border-radius: 12px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 4px;         /* spacing between squares */
padding: 0;        /* remove padding so squares stay inside */
box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
position: relative;
}
#fieldItemPhotoIcon{
border-radius: 50%;
height: 30px;
width: 30px;
background-color: #ededff !important;
box-shadow:var(--medium-shadow);
}
#fieldGalleryIcon{
top: 0 !important;;
margin-top:-1.3rem !important;
}

.visibility-block .field-item-header{
margin-top:-25px !important
}

.monetization-block .field-item-header{
margin-top:-30px !important
}
.common-field .field-item-header{
margin-top:5px !important;
}
.optionDivs .field-item-header{
top:-30px !important
}
.field-item-header{
position: absolute !important;
right: .5rem !important;
padding: .4rem !important;
top:-20px !important;
font-size: 0.76rem !important;
margin:0 !important;
}

#fieldItemPhotoIcon .palette{
width:14px;
height:14px;
border-radius: 50%;
}
#fieldItemPhotoIcon .palette.bottom-right{
bottom:-1.2px;
right:-12px;
}
.palette {
pointer-events: none;
border-radius: 4px;
background-clip: content-box;
-webkit-background-clip:content-box;
-moz-background-clip: content-box;
width:17px;
height:17px;

}
.palette.bottom-right{
position: absolute;
right:-14px;
bottom:1px;
}
/* Palette colors */
.palette.top-left { background: #ff3b30; }
.palette.top-right { background: #ff9500; }
.palette.bottom-left { background: #34c759; }
.palette.bottom-right { background: #0a84ff; }
.album-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: var(--album-gap);
max-width: 100% !important;
min-width: 100% !important;
width:100% !important;
box-sizing: border-box;
margin: 20px auto;
padding: 0 !important;
padding-bottom: 10rem !important;
}




.album {
position: relative;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 10px;
background-color: #fff;
border-radius: var(--border-radius);
padding: 12px;
box-shadow: 0 6px 16px rgba(0,0,0,0.08);
max-width: 100% !important;
min-width: 100% !important;
width:100% !important;
box-sizing: border-box;
position: relative;
scroll-snap-type: x mandatory;
overflow-x: scroll;
overflow-y: hidden;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
opacity:0.99;
transition: width 0.3s ease-in-out, opacity 0.3s ease-in-out;
}


.album-active{
background: #f1f4ff;
transform:translateY(-5px);
scale:0.99;
}


.album .medialib-pdf-cover h3{
font-size: 22px !important;
}

.album-header {
position:absolute;
z-index:5000;
left:0;
display: flex;
justify-content: space-between;
align-items: center;
max-width: 100% !important;
min-width: 100% !important;
width:100% !important;
padding:0 !important;
box-sizing: border-box;
}

.album-edit-actions-top {
gap:15px !important
}
.album-edit-actions-top svg{
width:30px !important;
height: 30px !important;
}

#filterCollectionModal .album-title ,
#albumModal .album-title{
font-size: 16px;
font-family: var(--cinzel);
font-weight: 700;
color: #1c1c1e;
}
.album-count-content h4{
margin-top: 16px !important;
}

.album-count-media-preview {
display: flex;              /* horizontal row */
gap: 6px;                   /* space between items */
margin-top: 8px;            /* space below the counts */
flex-wrap: wrap;     
margin-bottom: 1rem;
}

.album-count-media-preview img,
.album-count-media-preview video ,
.album-count-media-preview .medialib-pdf-cover,
.album-count-media-preview .medialib-custom-cover
{
max-width: 45px !important;                /* small thumbnail width */
max-height: 45px !important;               /* fixed height */
object-fit: contain !important;          /* maintain aspect ratio, crop if necessary */
border-radius: 4px;         /* slightly rounded corners */
border: 1px solid #ddd;     /* subtle border */
cursor: pointer;            /* indicate clickable if needed */
transition: transform 0.2s, box-shadow 0.2s;
}

.album-count-media-preview img:hover,
.album-count-media-preview video:hover 
.album-count-media-preview .common-pfd-book:hover,
.album-count-media-preview .medialib-custom-cover:hover
{
transform: scale(1.05);      /* subtle zoom on hover */
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Optional: make videos fit nicely */
.album-count-media-preview video {
display: block;
}

.photo-count {
font-size: 0.8rem;
color: #8e8e93;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.album-images {
display: flex;
overflow-x: auto;
gap: 8px;
padding-bottom: 4px;
scroll-behavior: smooth;
margin-top:2.5rem;
}

.album-counts {
display: flex;
gap:8px;
justify-content: flex-start;
height: var(--image-height) !important; /* match the image height */
flex-shrink: 0;
}

.album-count-content {
display: flex;
flex-direction: column;
justify-content: center;
background: linear-gradient(145deg, #4a4a4a, #2c2c2c); /* premium gradient */
max-width: 100% !important;
max-height: auto; /* match the image height */
padding: 20px 10px;
border-radius: var(--border-radius);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
color: #f2f2f7;
font-weight: 600;
text-align: center !important;
letter-spacing: 0.5px;
}

.album .medialib-pdf-cover{
max-width:225px;
width: 100%;
max-height: var(--image-height); /* match the image height */
}

.album .medialib-custom-cover h3{
font-size: 18px !important;
}
.album video{
border-radius: .8rem;
background:rgba(0,0,0, 0.8);
}
.album .medialib-custom-cover{
position: relative !important;
}
.album video, .album .medialib-custom-cover{
min-width: 225px !important;
width:235px !important;
max-height: var(--image-height) !important; /* match the image height */
}

.album-count-content span {
display: block;
margin-bottom: 6px;
color: #d2d2d2;
font-size: 14px !important;
opacity: 0;
transform: translateX(-20px); /* start slightly left */
animation: slideIn 0.5s forwards;
font-family: var(--roboto);
}

/* stagger animation for each line */
.album-count-content span:nth-child(1) { animation-delay: 0.3s; }
.album-count-content span:nth-child(2) { animation-delay: 0.55s; }
.album-count-content span:nth-child(3) { animation-delay: 0.6s; }
.album-count-content span:nth-child(4) { animation-delay: 0.75s; }

@keyframes slideIn {
to {
opacity: 1;
transform: translateX(0);
}
}

@keyframes glowText {
0% {
color: #c5c8e8;
text-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
}
50% {
color: #c1c1cc;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}
100% {
color: #d2d2d2;
text-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
}
}

.album-count-content span:last-child {
margin-bottom: 0;
}

.album-images img {
height: var(--image-height) !important;
width: auto;
max-width: 255px;
border-radius: var(--border-radius);
object-fit: cover;
flex-shrink: 0;
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s;
}

.album-images img:hover {
transform: scale(1.05);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.album-images::-webkit-scrollbar {
height: 6px;
}

.album-images::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.2);
border-radius: 3px;
}

.album-dropdown {
display: none;
position: absolute;
scroll-snap-type: x mandatory;
overflow-x: scroll;
overflow-y: hidden;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
width:100%;
left:0;
bottom: 12px;
flex-direction: row;
background: #fff;
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
padding: 8px 0;
z-index: 10;
}

.album-dropdown.visible{
display:flex;
}

.album-dropdown::-webkit-scrollbar, 
.album-webkit-scrollbar{
display: none;
}

.album-dropdown .dropdown-btn {
background: none;
border: none;
padding: 10px 16px;
text-align: left;
font-size: 0.95rem;
color: #1c1c1e;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}

.album-dropdown .dropdown-btn:hover {
background: rgba(10,132,255,0.1); /* iOS-style highlight */
color: #0a84ff;
}

.album-dropdown .dropdown-btn.delete:hover {
background: rgba(255,59,48,0.1);
color: #ff3b30;
}

/* Show dropdown on album click/focus */
.album:focus .album-dropdown,
.album.active .album-dropdown {
display: flex;
}

.album-actions {
display: flex;
justify-content: center;
align-items: center;
gap: 16px; /* space between icons */
padding: 10px 0 0 0; /* space above actions */
justify-content: flex-start; /* align to left by default */
align-items: center;
border-top: 1px solid #e0e0e0; /* subtle separation */
}

.album-actions svg {
width: 28px;
height: 28px;
stroke: #4a4a4a;
cursor: pointer;
transition: transform 0.2s ease, stroke 0.2s ease, filter 0.2s ease;
border-radius: 8px;
padding: 4px;
}

.album-actions svg:hover {
transform: scale(1.15); /* slight pop on hover */
stroke: #0a84ff; /* iOS blue highlight */
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15)); /* subtle depth */
background-color: rgba(10, 132, 255, 0.08); /* subtle highlight behind icon */
}

.album-actions svg.remove-delete-media-btn:hover {
stroke: #ff3b30; /* red for destructive action */
background-color: rgba(255, 59, 48, 0.08);
filter: drop-shadow(0 4px 10px rgba(0,0,0,0.2));
}

/** album-ends **/
/** f-modal-starts **/
#filterCollectionModal,
#albumModal{
background-color: #f2f2f7;
padding: 0;
}

#filterCollectionModal h3, #albumModal  h3{
text-align: center;
margin: 1rem auto 1rem;
padding:10px;
font-family: var(--anton);
font-size: 24px;
}


#filterCollectionModal .general-modal-content,
#albumModal .general-modal-content{
padding:0 !important;
}

.filter-modal {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: absolute;
top: 0;
left: auto;
width: inherit;
height: 90vh;
overflow-y: auto;
margin: auto;
padding: 10px;
border-radius: 22px;
background-color: #f2f2f7;
backdrop-filter: blur(40px) saturate(150%);
-webkit-backdrop-filter: blur(20px) saturate(150%);
box-shadow: 0 8px 30px rgba(224, 224, 224, 0.25);
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
color: #444;
}

.f-modal-inner {
position: relative;
margin-top: 55px;
}

/* ==========================
GLOBAL VARIABLES
========================== */
:root {
--move-distance: 40px;       /* how far it travels left/right */
--move-duration: 1.8s;       /* how long animation runs */
--move-ease: cubic-bezier(.22, .9, .33, 1);  /* smooth Apple-style motion */
--dot-size: 8px;
--dot-color: #007aff;
}

/* ==========================
BASE STYLING
========================== */
.tiny-object {
pointer-events: none; /* just visuals */
}

/* ==========================
SLIDE ANIMATIONS (object moves)
========================== */
@keyframes slide-horizontal {
0%   { transform: translateX(0); }
25%  { transform: translateX(var(--move-distance)); }
75%  { transform: translateX(calc(var(--move-distance) * -1)); }
100% { transform: translateX(0); }
}

/* use this to start horizontal sliding */
.animate-slide {
animation: slide-horizontal var(--move-duration) var(--move-ease) infinite;
will-change: transform;
}

/* DOT ELEMENT - procedural, independent of object size */
.tiny-object::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: var(--dot-size);
height: var(--dot-size);
background: var(--dot-color);
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0;
pointer-events: none;
}




/* ==========================
DOT ANIMATION
========================== */
@keyframes dot-move {
0%   { transform: translateX(0); opacity: 0.3; }
20%  { opacity: 1; }
50%  { transform: translateX(var(--move-distance)); opacity: 1; }
80%  { opacity: 1; }
100% { transform: translateX(0); opacity: 0.3; }
}

.dot-wrap {
display: flex;
gap: 5px;
margin-left: -1.2rem;
position: absolute;
z-index:9999;
pointer-events: none; /* purely visual */
}

.dot-wrap span {
display: inline-block;
width: var(--dot-size);
height: var(--dot-size);
border-radius: 50%;
background: var(--dot-color);
border: 0.1rem solid var(--dot-color);
opacity: 0.3;
transform: translateX(0);
}

/* Apply animation individually to each dot with a small delay for sequential effect */
.dot-wrap span:nth-child(1) { animation: dot-move var(--move-duration) var(--move-ease) infinite; animation-delay: 0s; }
.dot-wrap span:nth-child(2) { animation: dot-move var(--move-duration) var(--move-ease) infinite; animation-delay: 0.1s; }
.dot-wrap span:nth-child(3) { animation: dot-move var(--move-duration) var(--move-ease) infinite; animation-delay: 0.2s; }
.dot-wrap span:nth-child(4) { animation: dot-move var(--move-duration) var(--move-ease) infinite; animation-delay: 0.3s; }
.dot-wrap span:nth-child(5) { animation: dot-move var(--move-duration) var(--move-ease) infinite; animation-delay: 0.4s; }
.dot-wrap span:nth-child(6) { animation: dot-move var(--move-duration) var(--move-ease) infinite; animation-delay: 0.5s; }

/* Optional: hide/show control */
.dot-wrap.hidden { display: none; }
.dot-wrap.show { display: flex; }

/* ==========================
COMBINED SHORTCUT
========================== */
.animate-move {
animation: slide-horizontal var(--move-duration) var(--move-ease) infinite;
}
.animate-move::after {
animation: dot-loop var(--move-duration) var(--move-ease) infinite;
opacity: 1;
}

.filter-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 0.7rem 1rem;
border-radius: 1rem;
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
margin-bottom: 15px;
transition: all 0.3s ease-in-out;
}

.filter-header:hover {
background: rgba(255, 255, 255, 0.35);
box-shadow: 0 4px 18px rgba(0,0,0,0.1);
}

/* Common media sizing */
.filter-header img,
.filter-header video {
width: 3.5rem;
height: 3.5rem;
border-radius: 0.8rem;
object-fit: cover;
aspect-ratio: 1 / 1;
border: 1px solid rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.15);
box-shadow: var(--medium-shadow);
}
.tiny-media-wrap{
display: grid;
grid-template-columns: 1fr 4fr 2fr;
align-items: center;
justify-content: center;
gap:5px;
}
/* For audio and PDF tiny cards */
.tiny-audio-cover,
.mini-pdf-cover {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
max-width:6rem;
height: 4.5rem;
padding: 0.3rem 0.6rem;
border-radius: 0.8rem;
background: rgba(255, 255, 255, 0.25);
border: 1px solid rgba(255,255,255,0.4);
box-shadow: 0 1px 4px rgba(0,0,0,0.05);
color: #1b1b1b;
font-weight: 500;
overflow: hidden;
box-shadow: var(--medium-shadow);
}

.tiny-badge {
font-size: 0.65rem;
color: rgba(0,0,0,0.6);
margin-bottom: 0.1rem;
letter-spacing: 0.3px;
text-transform: uppercase;
margin-top: 20px;
}

.tiny-title {
font-size: 0.75rem;
font-weight: 600;
color: #111;
text-wrap: normal;
word-break: break-all;
flex:0 0 100%;
margin-top: 7px;
}

/* iOS-style badge look */
.custom-badge {
font-size: 0.8rem;
font-weight: 600;
background: linear-gradient(135deg, #e3e3e3, #ffffff);
color: #000;
padding: 0.4rem 0.7rem;
border-radius: 2rem;
box-shadow: inset 0 0 1px rgba(255,255,255,0.7), 0 1px 2px rgba(0,0,0,0.1);
text-shadow: 0 1px rgba(255,255,255,0.4);
white-space: nowrap;
flex-shrink: 0;
}

.filter-title {
font-size: 1.2rem;
font-weight: 600;
letter-spacing: 0.5px;
color: #333;
}

.filter-modal a {
cursor: pointer !important;
}

#closeFilterBtn {
position: absolute !important;
top: 1rem !important;
right: 1rem !important;
background: none;
border: none;
font-size: 1.6rem;
color: #ddd !important;
cursor: pointer !important;
transition: 0.2s;
}

#closeFilterBtn:hover {
color: #fff;
transform: scale(1.1);
}

.filter-list {
display: flex;
flex-direction: column;
gap: 14px;
padding-bottom: 3rem;
}

.filter-item {
display: grid;
grid-template-columns: 50px 50px 300px 70px; 
/* checkbox | icon | label | actions */
align-items: center;
width: 100%;
padding: 14px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
box-shadow: inset 0 1px 1px rgba(255,255,255,0.1), 0 4px 10px rgba(0,0,0,0.2);
cursor: pointer;
transition: all 0.25s ease;
}

.filter-item:hover {
background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
transform: translateX(-3px);
}

/* Checkbox */
.filter-checkbox {
flex:0 0 35px;
display: flex;
justify-content: center;
align-items: center;
}

.filter-checkbox span{
pointer-events: none;
}
/* Icon */
.modal-filter-icon {
border-radius: 12px !important;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: white;
font-size: 1.2rem;
margin-left: 10px;
}
#filterCollectionModal .modal-filter-icon{
height: 37px;
width:35px;
}
#moveCollectionModal .modal-filter-icon{
flex:0 0 35px;
height: 37px;
}
/* Label */
.filter-info {
display: flex;
flex-direction: column;
line-height: 1.3;
}
.filter-label {
font-size: 0.95rem;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-left: 10px;
}

#moveCollectionModal .filter-label{
flex:0 0 250px;
margin-top: .4rem;
}

.filter-count {
font-size: 0.8rem;
opacity: 0.8;
}

/* Actions */
.filter-actions {
width: 70px;
display: flex;
justify-content: flex-end;
gap: 10px;
}
.filter-actions svg {
color: #999 !important;
cursor: pointer;
}
.filter-actions svg:last-child {
margin-left: 10px;
}
.filter-actions svg:hover,
.filter-actions svg:focus {
color: #7088f1 !important;
transition: 0.2s ease-out;
}

/* Types */
.filter-pdf {
background: linear-gradient(135deg, #ff3b30, #ff6b6b);
}
.filter-audio {
background: linear-gradient(135deg, #34c759, #66d985);
}
.filter-video {
background: linear-gradient(135deg, #007aff, #5ac8fa);
}
.filter-image {
background: linear-gradient(135deg, #af52de, #d283f5);
}

/* Consistent override in modal */
#moveCollectionModal .filter-info {
width: 250px;
flex-direction: row;
}

.filter-mixed-items {
display: flex;
flex-direction: column;
}
/** f-modal-ends **/

.progress-wrapper {
height: 35px;
background: rgba(255, 255, 255, 0.4);
overflow: hidden;
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.6);
width:100%;
}

.progress-bar {
width: 0%;
height: 100%;
background: linear-gradient(90deg, #4facfe, #00f2fe, #4facfe);
background-size: 200% 100%;
animation: gradientShift 3s infinite linear;
border-radius: 14px;
box-shadow: inset 0 1px 2px rgba(255,255,255,0.4), 0 1px 3px rgba(0,0,0,0.15);
transition: width 0.35s cubic-bezier(.4,0,.2,1);
}

.progress-text {
position: absolute;
width: 100%;
top: 0;
left: 0;
text-align: center;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.2px;
line-height: 26px;
color: rgba(0,0,0,0.7);
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
pointer-events: none;
}

/* Subtle moving gradient */
@keyframes gradientShift {
0%   { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}

/* Pulse effect on completion */
@keyframes pulseGlow {
0%   { box-shadow: 0 0 0 0 rgba(0, 242, 254, 0.6); }
70%  { box-shadow: 0 0 15px 6px rgba(0, 242, 254, 0); }
100% { box-shadow: 0 0 0 0 rgba(0, 242, 254, 0); }
}

.progress-bar.complete {
animation: gradientShift 3s infinite linear, pulseGlow 1.6s ease-out forwards;
}

.bar-graph {
display: flex;
gap: 12px;
align-items: flex-end;
height: 200px;
padding: 16px;
background: #f5f5f5;
border-radius: 12px;
}

.bar-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}

.bar {
position: relative;
width: 40px;
height: 100%;
display: flex;
align-items: flex-end;
background: #eee;
border-radius: 6px;
overflow: hidden;
}

.bar-fill {
width: 100%;
background: #3498db;
display: flex;
justify-content: center;
align-items: flex-end;
color: #fff;
font-size: 10px;
font-weight: bold;
border-radius: 6px 6px 0 0;
}

.bar-label {
text-align: center;
margin-top: 8px;
font-weight: 500;
font-size:10px !important;
}

.bar-tooltip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
padding: 4px 8px;
font-size: 12px;
background: rgba(0,0,0,0.75);
color: #fff;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
}


.bar:hover .bar-tooltip {
opacity: 1;
}

/** promo-partner-starts **/
[data-tabcontent="ticket-date"]{
position: relative;
top:3rem;
}
.promo-dates-wrap{
position: relative;
top:5rem;
}

.partner-header {
display: flex;
justify-content: space-between;
gap: 0.5rem; /* space between buttons */
background: #f2f2f7; /* subtle iOS-style background */
padding: 0.5rem;
border-radius: 12px;
border: 1px solid #d1d1d6; /* subtle border like iOS segmented control */
max-width: 420px; /* optional, container width */
margin: 0 auto 1rem;
position: relative;
z-index:100;
}

.partner-header button {
flex: 1;
padding: 0.5rem 0.8rem;
border: none !important;
border-radius: 8px; /* rounded corners like iOS */
background: #ffffff !important;
color: #007aff !important; /* iOS blue */
font-size: 14px !important;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease-in-out;
max-width: 200px !important;
user-select: none;
resize:none;
}




.partner-header button:hover {
background: #f0f0f5; /* subtle hover effect */
}

.partner-header button:active,
.partner-header button.active {
background: #007aff;
color: #ffffff;
}

.ticket-price-group,
.create_number_participants{
  position: relative !important;
 transform:translateY(-2rem) !important;
}
.edit_private_access_fields{
position: relative;
top:87px;
transform: translateY(0);
}
.private_access_fields {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
max-width: 100%;
width:100%;
transform: translateY(-87px);
margin: 0 auto 0 !important;
padding-bottom: 1rem;
}
.mt-top-small{
margin-top:.7rem !important;
}
.p-top-up{
position:  relative !important;
top:-1rem !important;
}
.mb-small{
margin-bottom: 1rem !important;
}
.ticket-group{
margin: 1.5rem 0 1.5rem !important;
}
.ticket_purchase_status .select-wrapper{
max-height: 100px !important;
}
#ticket-btn-group{
position: relative !important;
top:2rem !important;
}

.ticket_purchase_status .select-wrapper select{
position: relative !important;
top:-2rem !important;
}


.drawing-time-parent{
position: relative !important;
top:-3rem !important;
width:100%;
max-width:100%;
}

.private_access_fields label {
color:#666;
margin: 0 !important;

}

.private_access_fields input[type="text"],
.private_access_fields select {
width: 96% !important;
margin:0 !important;
border-radius: 12px !important;
border: 1px solid #dedede !important;
font-size: 1rem !important;
background: #f9f9f9 !important;
transition: border 0.2s, background 0.2s !important;
-webkit-appearance: none !important;
cursor: pointer !important;
}

.private_access_fields input:focus,
.private_access_fields select:focus {
border-color: #007aff;
outline: none;
background: #fff;
}

/* === Capsule style grouping === */
.capsule {
display: flex;
border: 1px solid #ddd;
border-radius: 12px;
overflow: hidden;
background: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.capsule select {
flex: 1;
border: none;
padding: 12px;
font-size: 1rem;
background: transparent;
text-align: center;
cursor: pointer;
}

.capsule select + select {
border-left: 1px solid #ddd;
}

/* Section headers (optional) */
.section-title {
font-size: 1.1rem;
font-weight: 600;
color: #555;
margin-bottom: 6px;
}
/** promo-partner-ends **/
.password-group{
display:grid;
grid-template-columns: 8fr 1fr;
width:100%;
margin:0 !important;
align-items: center;
}
.password-group svg{
background: none !important;
box-shadow: none !important;
border:none !important;
}
/**coming-soon **/
.coming-soon{
background-image: url('https://images.unsplash.com/photo-1503264116251-35a269479413?auto=format&fit=crop&w=1500&q=80');
}

.coming-soon, .app-adjust{
position: relative;
height: 100vh;
width: 100%;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.coming-soon::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(54, 63, 197, 0.3), rgba(255, 255, 255, 0.15));
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
z-index: 1;
}

.app-adjust::before {
content: "";
position: absolute;
inset: 0;
min-height: 200vh;
background-image: url('/assets/images/bg.png');
}

.coming-soon .overlay {
position: absolute;
left:50%;
transform: translateX(100%);
inset: 0;
background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.2), transparent 70%);
z-index: 2;
}

.coming-soon .content {
position: absolute;
z-index: 3;
text-align: center !important;
margin: 0 auto 0;
color: #fff;
max-width:75%;
left:50%;
transform: translateX(-50%);
padding: 0 20px;
animation: fadeIn 1.2s ease-out forwards;
}

.coming-soon h3 {
font-size: 2.4rem;
font-weight: 700;
margin-bottom: 0.8rem;
letter-spacing: -0.5px;
background: linear-gradient(90deg, #fff, var(--brand-drop-svg));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.coming-soon p {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 2rem;
line-height: 1.6;
}

.coming-soon button {
width: auto;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
border: none;
border-radius: 14px;
padding: 0.9rem 2.2rem;
font-size: 1rem;
color: #fff;
font-weight: 600;
letter-spacing: 0.3px;
box-shadow: 0 8px 20px rgba(54, 63, 197, 0.35);
transition: all 0.3s ease;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
cursor: pointer;
}

.coming-soon button:hover {
background: var(--color-primary-hover);
box-shadow: 0 10px 25px rgba(66, 72, 169, 0.45);
transform: translateY(-2px);
}

@keyframes fadeIn {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
/** coming-soon **/
/** redirection **/
#redirectHtml, .redirect-page {
margin: 0;
padding: 0;
height: 100%;
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
background: linear-gradient(135deg, #f0f0f5 0%, #ffffff 100%);
display: flex;
justify-content: center;
align-items: center;
color: #1c1c1e;
}

.redirect-page .card {
position: relative;
max-width: 480px;
width: 90%;
text-align: center;
padding: 3rem 2rem 2rem 2rem;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
border-radius: 24px;
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
animation: fadeIn 0.6s ease forwards;
}

.redirect-page h1 {
font-weight: 600;
font-size: 2rem;
margin-bottom: 1rem;
}

.redirect-page p {
font-weight: 400;
font-size: 1rem;
color: #6c6c70;
margin-bottom: 2rem;
}

.redirect-page .icon-container {
position: absolute;
top: -50px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 100px;
background: #fff;
border-radius: 50%;
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
display: flex;
justify-content: center;
align-items: center;
animation: float 2s ease-in-out infinite;
}

.redirect-page .icon-container svg {
width: 60px;
height: 60px;
fill: #dcd6ff;
stroke: #4d3af7;
stroke-width: 2;
}

.redirect-page .icon-container .cross {
position: absolute;
top: 5px;
right: 5px;
width: 18px;
height: 18px;
stroke: #ff3b30;
stroke-width: 2.5;
stroke-linecap: round;
}

.redirect-page a.button {
display: inline-block;
padding: 0.8rem 2rem;
background: #4d3af7;
color: #fff;
border-radius: 12px;
text-decoration: none;
font-weight: 600;
transition: 0.3s ease, transform 0.3s ease;
cursor: pointer;
}

.redirect-page a.button:hover {
background: #2213a7;
transform: scale(1.05);
}

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

@keyframes float {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-10px); }
}
/** redireection-ends **/
/** custom-note-book **/
.customized-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffffff15, #ffffff05);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.customized-icon:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35), 0 4px 10px rgba(0,0,0,0.2);
}

.customized-icon .writing {
  position: absolute;
  top: 0;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: block;
  color: #cdcdcdcc;
  font-size: 9px;
  letter-spacing: 1px;
  pointer-events: none;
  user-select: none;
  line-height: 1.3; /* slightly more spacing for paragraph feel */
  white-space: pre-wrap; /* preserves line breaks but allows wrapping */
  overflow-wrap: break-word; /* ensures words wrap nicely */
  z-index: 0;
}

.customized-icon svg.feather-edit-2 {
  position: absolute;
  z-index: 100;
  width: 24px;
  height: 24px;
  color: #838ffb;
  z-index: 2;
  transition: transform 0.25s ease, color 0.25s ease;
}

.customized-icon:hover svg.feather-edit-2 {
  transform: rotate(-10deg) scale(1.1);
  color: rgb(79, 83, 203);
}
/** custom-note-book-ends **/
/** mouse-icon **/
.click-icon {
  position: relative;
  width: 36px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s ease;
}

.click-icon:hover {
  transform: translateY(-2px) scale(1.1);
}

/* Mouse body */
.mouse-body {
  position: relative;
  width: 24px;
  height: 36px;
  border-radius: 12px;
  border: 2px solid  rgba(255,255,255,0.72);
  background: linear-gradient(145deg, #ffffff10, #ffffff05);
  box-shadow: inset 0 -2px 6px rgba(0,0,0,0.2), 0 4px 8px rgba(0,0,0,0.15);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* Mouse scroll wheel */
.mouse-scroll {
  width: 4px;
  height: 8px;
  margin-top: 4px;
  border-radius: 2px;
  background: #838ffb;
  animation: scrollAnim 1s infinite alternate;
}

@keyframes scrollAnim {
  0% { transform: translateY(0); }
  100% { transform: translateY(4px); }
}

/* Mouse tail */
.mouse-tail {
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 6px;
  border-radius: 1px;
  background:  rgba(255,255,255,0.72);
  transform: rotate(-20deg);
}
/** mouse-icon-ends **/
/*** cover ***/

.cover-upload {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "San Francisco", sans-serif;
  width: 220px;
  margin: 0 auto;
}

.cover-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}

.cover-upload-group {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}


.cover-preview {
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  background: #f7f7f7;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  height: 100px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cover-preview:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}


.cover-preview img.uploaded-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: .7rem;
}

.cover-preview .cover-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  color: rgba(0,0,0,0.3);
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.cover-preview img.uploaded-cover:not([src=""]) + .cover-placeholder {
  opacity: 0;
}

.upload-btn {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background-color: #007aff;
  padding: 6px 16px;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.upload-btn:hover,
.upload-btn:focus {
  background-color: #005bb5;
  transform: translateY(-1px);
}
/*** cover-ends **/
/** update-ends **/

/** modal-starts  **/
.color{
color:#fecec9;
}
.select-wrapper {
width: 100%;
margin-bottom: 2rem;
}



.select-wrapper select {
width: 100%;
font-size: 16px;
padding: 20px !important;
border: 1px solid #8d8d8d !important;
background-color: white !important;

/* Force consistent rendering across browsers */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

/* Optional: Fake dropdown arrow */
background-image: url('data:image/svg+xml;utf8,<svg fill="gray" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
}

.flex-center{
display: flex;
align-items: center;
justify-content: center;
}
.p-small{
padding: .8rem;
}
.mr-1{
margin-left: -.8rem;
}

.ml-1{
margin-left: .8rem;
}

.ml-2{
margin-left: 1.5rem !important;
}
.ml-3{
margin-left: 2.5rem !important;
}

.mb-1{
margin-bottom: 1rem !important;
}
.mb-3{
margin-bottom: 3rem !important;
}
.mb-5{
margin-bottom: 3rem !important;
}

.mt-06{
margin-top: .6rem !important;
}

.mt-1{
margin-top: 1rem !important;
}

.mt-2{
margin-top: 2rem !important;
}
.mt-3{
margin-top: 2rem !important;
}
.mt-4{
margin-top: 1rem !important;
}

.mt-5{
margin-top: 5rem !important;
}

.mt-6{
margin-top: 6rem !important;
}


.mt-8{
margin-top: 8rem !important;
}

.tx-center{
text-align: center !important;
}

.fs{
font-size: 14px !important;
}

.text-dark-light{
color:#666 !important;
}


/** premium pitch **/

.upgrade-info-block-settings{
margin: 3rem auto 1rem !important;
max-width:100% !important;
}

#premium-portfolio-container .upgrade-info-block-settings{
max-width:75% !important;
}
.upgrade-info-block {
background: linear-gradient(135deg, #f9f9f9, #fff);
border: 1px solid #e0e0e0;
border-left: 4px solid #7a4fff; /* soft royal purple accent */
padding: 16px 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
font-family: 'Helvetica Neue', sans-serif;
max-width: 420px;
margin: 3rem auto 1rem;
transition: box-shadow 0.3s ease;
}

.upload-info-block{
border-left: 4px solid #72b4e7 !important; 
}

.upgrade-info-block:hover {
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.upgrade-info-block h3 {
margin: 0 0 8px;
color: #333;
font-size: 1.1rem;
font-weight: 600;
}

.upgrade-info-block p {
color: #666;
font-size: 0.95rem;
margin-bottom: 10px;
line-height: 1.4;
}

.upgrade-info-block a{
cursor: pointer;
}



.upgrade-btn {
display: inline-block;
background-color: #7a4fff;
color: #fff;
font-weight: 500;
font-size: 0.95rem;
padding: 8px 16px;
border-radius: 6px;
text-decoration: none;
transition: background-color 0.25s ease;
}

.upgrade-btn:hover {
background-color: #663ee6;
}

/*** sharing **/
#otherOptionsModal span, #otherOptionsModal svg{
pointer-events: none;
}


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

@keyframes scaleIn {
from {
transform: scale(0.9);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}

.filter-btn{
cursor: pointer;
}


.filter-btn svg{
color:var(--brand-color) !important;
pointer-events: none;
position:  relative !important;
/*
transform: translateY(.6rem) !important;
*/
}




#welcome-user{
font-size: 2rem;
font-family: var(--cinzel);
font-weight: 500;
}


#filterModal{
  max-width:inherit !important;
height:inherit !important;
width: 100% !important;
}


#moveCollectionModal, #albumModal{
  width: 100% !important;
max-width:100% !important;
height:inherit !important;
}

.general-modal, #previewPdfModal
{
position: fixed !important;
top: 0 !important;
display: none;
flex-direction: column;
align-items:flex-start;
z-index:0;
box-shadow: var(--deep-shadow);
border: 0.1rem solid #e0e7ef;
pointer-events: none;
opacity: 0;
transform: translateY(3rem);
transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
overflow-y:auto !important;
overflow-x: hidden !important;
border-radius: 3rem;
  width: inherit !important;
max-width:inherit !important;
height:inherit !important;

/*
border:.3rem solid var(--loud-blue-border);
*/
}

.common-meta-modal .general-modal-content{
position: relative;
top: 6rem;
align-items:center !important;
justify-content: center !important;

}

.general-modal.border, #previewPdfModal.border{
border:.3rem solid var(--loud-blue-border);
}


#previewPdfModal.show-modal{
opacity: 1;
transform: translateY(0);
pointer-events: auto;
z-index:4000;
display: flex;;
}


#bottomModal{
height: 10vh !important;
opacity: 1 !important;
top: 90% !important;
}



.general-modal.visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
z-index:999999;
display: flex;
}

#lockModal.visible{
z-index:6000;
}

[data-closemodal="shareModal"]:hover{
transition: none !important;
scale:1 !important;
transform: translateX(-1rem) !important;
transition: transform 0.4s ease-in-out !important;
}

[data-closemodal]:hover{
transition: 0.4s ease-in-out;
scale:1.2;

}

[data-closemodal] svg{
z-index: 1000;
pointer-events: none;
color:var(--color-primary);
width:30px;
height: 30px;
}

[data-more="create-svg"]{
pointer-events: none;
}


[data-modal="moreCreateOptions"]{
top:1rem !important;
left:2rem !important
}

[data-closemodal] ,[data-modal="moreCreateOptions"]{
cursor: pointer;
transform: rotate(360deg);
position: absolute !important;
z-index: 9999999 !important;

}
#closeShareModal{
position: fixed !important;
transform :translateX(88%) !important;
}

.share-header{
display:flex;
align-items: center;
justify-content: space-between;
gap:15px;
}

[data-closemodal]{
position: absolute;
right: 2rem;
top:15px;
padding: .8rem;
}

[data-closemodal] svg{
color: #000 !important;
}

#lockModal .general-modal-content,
#metricModal .general-modal-content {
top:3rem;
}


[data-button="submit"]{
background: #000 !important;
color:var(--color-accent);
border-radius:5rem;
padding: 10px 20px;
width: auto !important;
display: flex;
align-items: center;
justify-content: center;
}

[data-button="submit"]:hover{
background: var(--off-bg) ;
transition: 0.2s ease-in-out;
scale:0.9;
}

.addmore-wrap{
background: var(--bv2-off);
padding: .6rem;
border-radius: .3rem;
color:#fff;
cursor: pointer;
}
.addmore-wrap a{
pointer-events: none;
}
#editFieldModal .general-modal-content{
padding: 2rem !important;
}
#editFieldModal header{
margin: 1rem;
font-size: 1.4rem;
font-family: var(--anton);
color:#555;
}


#editFieldModal .checkbox-group{
margin-left: 0 !important;
}
#editModal, #editFieldModal{
background: rgba(255, 255, 255, 1);
}


.step-header-field {
font-size:15px;
display: grid;
gap:5px;
margin-left:0 !important;
max-width: 85%;
width:100%;
}


.step-header-field a{
padding:10px;
border-radius: .4rem;
cursor: pointer;
color:#fafaff;
}

.step-header-field a:nth-child(1){
background: var(--accent-btn);
}

.step-header-field a:nth-child(2){
background: var(--accent-orange);
}

.step-header-field a:last-child{
background: var(--accent-blue);
}


#editFieldModal .form-group{
display: grid;
margin: .8rem auto .8rem ;
}
#editFieldModal .form-group input,
#editFieldModal .form-group select{
padding: 1.2rem;
width: 100%;
}
#editFieldModal .form-group label{
margin-bottom: .6rem;
margin-left: .6rem;
}

#editModal form,
#editFieldModal form{
margin-top: 2rem;
}


#otherOptionsModal{
align-items: center !important;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(4px) brightness(0.9); 
-webkit-backdrop-filter: blur(4px) brightness(0.9);
}
#otherOptionsModal ul,
#filterModal ul {
padding: 5rem;
text-decoration: none;
list-style: none;
width: 100% !important;

margin: 0 !important;
display: inline-block;
font-family: var(--roboto);
font-weight: 500 !important;
}


#otherOptionsModal ul{
max-width: 100%  !important;
left:0 !important;
-webkit-overflow-scrolling: touch;
overflow-x: hidden; 
overflow-y: auto;  
scrollbar-width: none; 
-ms-overflow-style: none; 

}
#otherOptionsModal ul::-webkit-scrollbar {
display: none;
}

#otherOptionsModal li{
cursor: pointer !important;
}

#filterModal ul {
max-width: 35% !important;
}
#otherOptionsModal ul li,
#filterModal ul li{
margin-bottom: 2.5rem;
width: 100%;
max-width: 100%;
display: grid;
grid-template-columns: 1fr 2fr;
}


#filterModal ul li span{
position: relative !important;
margin-top:1.2rem !important;
font-size: 1.5rem;
word-break: keep-all !important;
white-space: nowrap !important; 
flex: 0 0 auto !important;

}

.last-span{
margin-left: 1rem;
}

#otherOptionsModal ul svg{
position: relative;
}
#otherOptionsModal ul li {
width: 100%;
}
#otherOptionsModal ul li a:not(:nth-child(3)){
background: #dce3eb;
border:.1rem solidd #555;
border-radius: 50%;
}

#filterModal ul li a {
display:grid !important;
grid-template-columns: 1fr 6fr !important;
color: #525151 !important;
text-decoration: none !important;
}

#otherOptionsModal ul li a{
width: 50px;
height: 50px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#otherOptionsModal ul li:nth-child(1) a {
transform: rotate(-5deg) scale(1.05);
background: linear-gradient(145deg, #1f45db, #f0f4f9);
box-shadow: 2px 4px 10px rgba(160, 159, 159, 0.1);
}

.guest-active{
background: linear-gradient(145deg, #3ca177, #e2fff6) !important;
}

#otherOptionsModal ul li:nth-child(2){
border-bottom: .1rem solid #d5d4d2;
border-top: .1rem solid #d5d4d2;
padding: 4px;
pointer-events:  none !important;
}
#otherOptionsModal ul li:nth-child(2) a {
transform: rotate(-5deg) scale(1.05);
background: linear-gradient(145deg, #dce3eb, #f0f4f9);
box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1);
}

#otherOptionsModal ul li:nth-child(3) a {
transform: rotate(4deg) scale(1.08);
background: radial-gradient(circle at 30% 30%, #e0e7ff, #c7d2fe);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}
#otherOptionsModal ul li:nth-child(4) a {
transform: rotate(-3deg) scale(1.08);
background: linear-gradient(145deg, #fecaca, #f87171);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
clip-path: polygon(10% 12%, 90% 0%, 100% 100%, 0% 100%);
border: 1px solid #fca5a5;
}
#otherOptionsModal ul li:nth-child(5) a {
transform: rotate(2deg) scale(1.05);
background: linear-gradient(135deg, #fdba74, #fb923c);
box-shadow: 0 5px 14px rgba(0, 0, 0, 0.2);
clip-path: polygon(5% 10%, 95% 0%, 100% 100%, 0% 100%);
border: 1px solid #fb923c;
}

#otherOptionsModal ul li:nth-child(6) a {
transform: rotate(-7deg) scale(0.98);
background: linear-gradient(120deg, #fde68a, #fcd34d);
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
border-radius: .6rem !important;
pointer-events:  none !important;
}

#otherOptionsModal ul li:nth-child(6){
border-bottom: .1rem solid #e7dcb6;
border-top: .1rem solid #e7dcb6;
padding: 4px;
}


#otherOptionsModal ul li:nth-child(8) a {
transform: rotate(3deg) translateY(-2px);
background: linear-gradient(135deg, #a7f3d0, #6ee7b7);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

#otherOptionsModal ul li:nth-child(9) a {
transform: rotate(-2deg) scale(1.1);
background: linear-gradient(45deg, #fbcfe8, #f9a8d4);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

#otherOptionsModal ul li:nth-child(10) a {
transform: rotate(6deg);
background: conic-gradient(from 180deg at center, #fff1f2, #fecaca);
box-shadow: -2px 4px 12px rgba(0, 0, 0, 0.08);
}

#otherOptionsModal ul li:nth-child(11) a {
transform: scale(0.95) rotate(-4deg);
background: linear-gradient(90deg, #e0f2fe, #bae6fd);
box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.1);
}
#otherOptionsModal ul li a:hover,
#filterModal  ul li a:hover{
transform: scale(1.15) rotateZ(2deg);
transition: transform 0.3s ease;
}

#otherOptionsModal ul li span{
width: 400px;
margin-left: 1rem;
position: relative;
top: .8rem;
font-family: var(--roboto);
font-size: 1.5rem;
}

.category-dropdown-top{
margin-top: 4rem !important;
position: relative;
}



#categoryDropdown{
position:absolute !important;
height: 200px !important;
width: 200px ;
min-width: 200px;
top:100px;
left:0;
background: var(--color-accent) !important;
box-shadow: none !important;
align-items: flex start !important;
border-radius: .6rem;
}

#categoryDropdown  [data-closemodal]{
top:-4rem !important;
right:0 !important;
margin-bottom: 0 !important;

}
#categoryDropdown  [data-closemodal] svg{
background: #3e3f43;
border-radius: 50%;
color:var(--color-accent) !important;
padding: 4px ;
width:17px;
height: 17px !important;
}



#categoryDropdown ul{
display: flex !important;
justify-content: flex-start !important;
align-items: flex-start !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0;
margin-top: -1rem !important;
z-index: 100;
text-align: left !important;
}

#categoryDropdown ul li{
width: 100% !important;
max-width: 100% !important;
margin-bottom: 1rem;
border-bottom: .1rem solid #dedede;
padding: 2px;
}


#categoryDropdown a {
word-break: keep-all;
white-space: nowrap; /* don't wrap text */
flex: 0 0 auto;
font-size: 15px !important;
}

#categoryDropdown  .list-heading {
border-bottom: .1rem solid #c6c6f4 !important;
position: relative;
top:-3rem;
margin-left: 0 !important;
margin-top: 1rem;
margin-bottom: 0 !important;
z-index: 0 !important;
}
#categoryDropdown  .list-heading a{
font-size: 15px !important;
font-weight: bolder;
}

#categoryDropdown ul li:hover {
color: #6faaf7;
font-weight: 600;

}

#categoryDropdown a.active {
box-shadow: 0 1px 5px rgba(95, 105, 247, 0.3);
background-color: rgba(95, 105, 247, 0.12);
color: #5f69f7;
font-weight: 700;
font-size: 18px;
}


#filterModal, #createModal, #lockModal, #metricModal,
#mediaMonetizationModal{
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(4px) brightness(0.9); 
-webkit-backdrop-filter: blur(4px) brightness(0.9);
}

#filterModal {
align-items:flex-start;

}
#filterModal ul{
margin: 0 !important;
padding: 1rem;
}
#filterModal a{
font-family: var(--anton);
color: var(--desc-text);
}


.general-modal-content{
position: relative;
width: 100% !important;
max-width: 100% !important;
padding-bottom: 2rem !important;
-webkit-overflow-scrolling: touch;
overflow-y: auto; 
overflow-x: hidden;  
scrollbar-width: none; 
-ms-overflow-style: none; 
padding-bottom: 4rem !important;
}


#moveCollectionModal .general-modal-content{
max-height: 78vh;
}

.general-modal-content::-webkit-scrollbar {
display: none;
}


#createModal form{
width: 100%;
max-width: 100%;
padding: 0 !important;
margin:  0 !important;
}

#metricModal{
-webkit-overflow-scrolling: touch;
overflow-x: scroll; 
overflow-y: auto;  
scrollbar-width: none; 
-ms-overflow-style: none; 
}

#metricModal::-webkit-scrollbar {
display: none;
}

#createModal,
#mediaMetaModal,
#mediaMonetizationModal,
#lockModal,
#metricModal,
#uploadModal{
justify-content:center !important;
background: rgba(255, 255, 255, 0.9); /* rich dark, not flat black */
backdrop-filter: blur(4px) brightness(0.9); /* blur + darken */
-webkit-backdrop-filter: blur(4px) brightness(0.9);
}

.custom-icon {
display: inline-block;
width: 40px;
height: 40px;
border-radius: 50%;
position: relative;
cursor: pointer;
margin-right: 0.6rem;
transform-style: preserve-3d;
}

/* 1. Cool Blue Orb - slow tilt + glow */
.icon-1 {
background: linear-gradient(145deg, #6a9eff, #3358f4);
box-shadow:
0 6px 15px rgba(52, 102, 255, 0.6),
inset -2px -2px 6px rgba(255, 255, 255, 0.7);
animation: tiltRotate 6s ease-in-out infinite;
}
.icon-1::before {
content: '';
position: absolute;
top: 12px; left: 14px;
width: 14px; height: 14px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
filter: blur(2px);
pointer-events: none;
}

/* 2. Warm Orange Sphere - pulse + rotate */
.icon-2 {
background: linear-gradient(135deg, #fcd34d, #fb923c);
box-shadow:
0 6px 18px rgba(251, 146, 60, 0.7),
inset 2px 2px 8px rgba(255, 255, 255, 0.4);
animation: pulseRotate 4s ease-in-out infinite;
}

/* 3. Minty Green Bubble - sway + subtle scale */
.icon-3 {
background: linear-gradient(120deg, #d1fae5, #6ee7b7);
box-shadow:
0 5px 12px rgba(34, 197, 94, 0.5),
inset -2px -2px 6px rgba(255, 255, 255, 0.6);
animation: swayScale 5s ease-in-out infinite;
}

/* 4. Purple Glow Orb - slow spin + glow */
.icon-4 {
background: linear-gradient(135deg, #a78bfa, #7c3aed);
box-shadow:
0 8px 20px rgba(124, 58, 237, 0.7),
inset 2px 2px 8px rgba(255, 255, 255, 0.5);
animation: slowSpinGlow 8s linear infinite;
}
.icon-5 {
background: linear-gradient(135deg, #3279d5, #6496f1);
box-shadow:
0 8px 20px rgba(56, 128, 192, 0.7),
inset 2px 2px 8px rgba(255, 255, 255, 0.5);
animation: slowSpinGlow 8s linear infinite;
}
.icon-5 svg{
color:#ffff;
}

@keyframes tiltRotate {
0%, 100% { transform: rotateX(0deg) rotateY(0deg); }
50% { transform: rotateX(10deg) rotateY(15deg); }
}

@keyframes pulseRotate {
0%, 100% { transform: scale(1) rotate(0deg); box-shadow: 0 6px 18px rgba(251,146,60,0.7); }
50% { transform: scale(1.1) rotate(15deg); box-shadow: 0 8px 24px rgba(251,146,60,0.9); }
}

@keyframes swayScale {
0%, 100% { transform: translateX(0) scale(1); }
50% { transform: translateX(6px) scale(1.05); }
}

@keyframes slowSpinGlow {
0% { transform: rotate(0deg); box-shadow: 0 8px 20px rgba(124, 58, 237, 0.7); }
50% { box-shadow: 0 12px 28px rgba(124, 58, 237, 1); }
100% { transform: rotate(360deg); box-shadow: 0 8px 20px rgba(124, 58, 237, 0.7); }
}


.plv-root{
font-family: 'Segoe UI', sans-serif;
display: flex;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 6px;

border-radius: .4rem;
box-shadow: var(--medium-shadow);
transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
background: #fff !important;
position: absolute !important ;
left:0 !important;
top:100% !important;
z-index: 4000 !important;

pointer-events: none;
transform: translateX(-3rem);
opacity: 0;
max-height: 275px;
overflow-x: auto;
overflow-y: auto;
padding-left: .8rem;
padding-right: .8rem;
padding-top: .8rem;
padding-bottom: .7rem !important;
}


.field-media-row .plv-root{
top:62% !important;
}

.plv-root ul svg,
.filter-dropdown ul svg{
pointer-events: none;
position: relative;
top: .18rem;
width: 19px;
height: 19px;
color:var(---brand-drop-svg) !important;
margin-right: .4rem;
}




.plv-root.visible{
opacity: 1;
pointer-events: all;
transform: translateX(0);
}


.plv-root ul,
.filter-dropdown ul{
list-style: none;
margin: 0 auto !important;
text-align: left !important;
padding: 0 !important;
flex-direction: column;
justify-content: flex-start;
align-items: center;
position: relative;
}
.list-heading{
border: none !important;
}
.plv-root ul li,
.filter-dropdown li{
margin-bottom: 1rem;
border-bottom: .1rem solid var(--brand-tab-bg);
width: 100% !important;


}

.plv-root ul li a,
.filter-dropdown ul li a{
text-decoration: none;
cursor: pointer !important;
}



/** card-media-starts **/
.ui-card-list {
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: center;
align-items: center;
margin: 3rem auto 0;
}

.ui-card-item {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--card-bg);
box-shadow: 0 4px 12px var(--card-shadow);
border-radius: 10px;
overflow: hidden;
padding: 1rem;
flex-wrap: wrap;
margin-bottom: 1rem !important;
width:100% !important;
max-width:100% !important;
justify-self: center !important;
position: relative;
}

.ui-card-item .plv-root{
top:3rem !important;
}
.ui-card-item .plv-root svg{
top:.2rem !important;
}

.ui-card-left {
display: flex;
align-items: flex-start;
margin-right: 1rem;
}

.ui-card-dots {
background: transparent;
border: none;
font-size: 1.5rem;
cursor: pointer;
}

.ui-card-middle {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 0; 
}

.ui-card-images {
display: flex;
flex-wrap: nowrap;
justify-content: center;
gap: 20px;
max-width: 100%;
position: relative;
left:.5rem;
}

.ui-card-images img {

width: 100px;
height: 100px;

object-fit: cover;
border-radius:1rem;
box-shadow: var(--medium-shadow);
}

.ui-card-text {
text-align: center;
position: relative;
margin-top: 0.5rem;
}
.ui-card-left button{
padding-bottom: 1rem;
margin-bottom: .8rem;
}
.ui-card-left svg{

color:var(---brand-drop-svg);
}
.ui-card-title {
margin: 0;
color: var(--primary-text);
font-weight: bold;
}

.ui-card-desc {
color: var(--desc-text);
margin: 0.3rem 0;
font-size: 0.9rem;
max-width:90%;

}

.ui-card-rainbow {
height: 3px;
width: 100%;
background: var(--rainbow);
background-size: 200% 100%;
animation: rainbowSlide 3s linear infinite;
border-radius: 3px;
margin-top: 5px;
}

@keyframes rainbowSlide {
0% {
background-position: 0% 50%;
}
100% {
background-position: 200% 50%;
}
}

.ui-card-right {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-left: 1rem;
}

.ui-card-btn {
padding: 0.5rem 0.8rem;
background:var(--brand-color);
color: #fff;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 0.9rem;
width: 100px;
text-align: center;
}

.ui-card-btn span{
position: relative !important;
top: -.4rem !important;
}

/* Optional styling */
.ui-card-images.downloading {
position: relative;
opacity: 0.6;
pointer-events: none;
}

.ui-card-images.downloading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 32px;
height: 32px;
margin: -16px 0 0 -16px;
border: 3px solid rgba(0, 0, 0, 0.2);
border-top-color: #000;
border-radius: 50%;
animation: spin 0.8s linear infinite;
z-index: 10;
}

@keyframes spin {
to {
transform: rotate(360deg);
}
}


.custom-slideshow-modal {
position: fixed;
width: 100%;
z-index: 9999;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}

.custom-slideshow-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.75);
}

.custom-slideshow-content {
position: relative;
background: #1f1f2e;
padding: 20px;
border-radius: 12px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
z-index: 1;
max-width: 90vw;
max-height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
}

.custom-slideshow-image {
max-width: 100%;
max-height: 70vh;
border-radius: 10px;
}

.custom-slideshow-close {
position: absolute;
top: 12px;
right: 20px;
cursor: pointer;

}
.custom-slideshow-close svg,
.custom-slideshow-nav svg{
pointer-events: none;
width: 32px;
height: 32px;
color: var(---brand-drop-svg);
}


.custom-slideshow-nav {
display: flex;
justify-content: space-between;
width: 120px;
margin-top: 10px;
}


.custom-slideshow-nav button {
background: var(--brand-color) !important;
color: white;
border: none;
font-size: 24px;
border-radius: 6px;
padding: 6px 12px;
cursor: pointer;
}
/** card-media-ends **/


.changed-photos-preview {
display: grid;
grid-template-columns: repeat(5, 170px);
align-items: flex-start;
justify-content: flex-start;
gap: 15px; 
padding: 0.5rem 0;
width: 100% ;
max-width: 100%;
}


.remove-media-btn svg{
color: #6872f9  !important;
pointer-events: none;
}

.remove-media-btn {
position: absolute;
top:0;
z-index: 100;
left:0;
background: none !important;
border:none !important;
margin: .6rem 0 -1rem .6rem;
outline: none !important;
outline-color:  none !important;
outline-width: 0 !important;
}
.remove-media-btn:hover{
scale:1.2;
outline: none !important;
outline-color:  none !important;
outline-width: 0 !important;
background: none !important;
border:none !important;
}

.changed-media-box video {
width: 100% !important;
height:100% !important;
object-fit: cover;
border-radius: 4px;
}

.changed-media-box audio {
width: 100% !important;
height:100% !important;
}


#plv-preview-container .pdf-book-cover {
width: 100% !important;
height: 170px !important;
}

#uploadModal .pdf-tag-title {
top:-2.2rem !important;
}

#plv-preview-container .pdf-tag-title {
font-size: 12px;
color: #444;
margin-bottom: 4px;
}


#plv-preview-container .pdf-cta {
font-size: 11px;
color: #007bff;
text-decoration: underline;
cursor: pointer;
}


/** share-modal-starts ***/
#shareModal {
inset: 0;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}


#shareModal .modal-backdrop {
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.53);
backdrop-filter: blur(8px);
animation: fadeIn 0.3s ease forwards;
border-radius: 3rem;
z-index: -1;
}

#shareModal .modal-content {
position: absolute;
padding: 2rem;
width: 100%;
max-width: 400px;
height:450px !important;
min-height: 450px !important;
margin: auto;
animation: scaleIn 0.3s ease forwards;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
overflow: hidden;
background: var(--ios-white);
border-radius: 1.5rem;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

#shareModal button,
#shareModal a {
width: 100% !important;
}

#shareModal .modal-content h3 {
font-size: 1.25rem;
font-weight: 600;
color: #333;
}

.modal-contact-lists {
padding: 1rem 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
width: 100%;
}



.platform-buttons {
display: flex;
flex-direction: column;
gap: 0.75rem;
}

.platform-buttons button {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1rem;
padding: 0.75rem 1rem;
border: none;
border-radius: 12px;
background: #f4f4f4;
cursor: pointer;
transition: background 0.2s ease;
}

.platform-buttons button:hover {
background: #eaeaea;
}

#shareModal .close-btn {
margin-top: 1.5rem;
background: none;
border: none;
color: #888;
font-size: 0.9rem;
cursor: pointer;
}

.share-options {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem 0;
width: 100%;
}

.share-btn {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
font-size: 1rem;
font-weight: 500;
padding: 0.75rem 1rem;
border-radius: 50px;
border: none;
color: #fff;
cursor: pointer;
transition: transform 0.2s ease;
position: relative;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.share-btn::before {
content: "";
width: 12px;
height: 12px;
border-radius: 50%;
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
}

.share-btn:hover {
transform: translateY(-2px);
}

.modal-input-block {
display: grid;
width: 100%;
margin: 0;
align-items: center;
gap: 10px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all 0.2s ease-in-out;
overflow: hidden;
height: 0 !important;
}

.modal-input-block.show {
pointer-events: all;
visibility: visible;
opacity: 1;
height: auto !important;
}

.modal-input-block button {
padding: 0.7rem !important;
}

.modal-input-block input {
border: #a365bb 0.2rem solid;
box-shadow: var(--medium-shadow);
text-transform: lowercase !important;
}

.modal-input-block input::placeholder {
color: #793d90;
font-size: 0.85rem;
text-transform: lowercase !important;
}

/* Platform styles */
.whatsapp {
background: #25D366;
}

.whatsapp::before {
background: #1ebc59;
}

.viber {
background: #7360F2;
}

.viber::before {
background: #5a49d1;
}

.instagram {
background: linear-gradient(45deg, #feda75, #d62976, #962fbf, #4f5bd5);
}

.instagram::before {
background: #feda75;
}

.sms {
background: #34C759;
}

.sms::before {
background: #2ebc50;
}

[data-todo="copy-link"] {
background: #3293ee !important;
}

[data-todo="copy-link"]::before {
background: #a8d4fd !important;
}

/* Animations */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@keyframes scaleIn {
0% {
opacity: 0;
transform: scale(0.95);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/*** share-modal-ends ***/
/** modal-ends **/

/** responsive **/
/*
@media (hover:none){
.media-meta-wrap{ opacity:1; }
}
*/
@supports (padding: max(0px)) {
.app-bottom-inner ,
.app-container.style,
#quickActionContainer,
.general-modal,
.feed-top{
/* make sure it floats above iPhone gesture area */
padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}
}


@media(max-width:1650px){
body.style,
.app-bottom-inner,
.feed-top,
.app-container.style,
#quickActionContainer
{
max-width: 50%;
}

.general-modal, #previewPdfModal{
max-width: 50%;
left:25%;
}
.hero-text {
top:3rem;
}
.welcome-inner::after{
width: 65%;
left:17.5%;
min-height: 100vh;
transition:  min-height  0.3 ease;
}
.welcome-inner.change::after{
min-height: calc(100vh + 724px +362px/2);
}

.pitch-block{
width: 55%;
}
#otherOptionsModal  ul {
max-width: 55% !important;
}
}

@media screen and (max-width: 1450px) {
  [page-body="login"]{
  width:55%;
}
.app-bottom-inner,
.feed-top
{
max-width: 67%;
}
    .app-container.style{
    max-width: 67%;
left:50% !important;
transform: translateX(-50%) !important;
  }

body.style{
max-width: 67%;
}

#quickActionContainer{
left:0;
max-width: 100%;
width: 68%;
left:50% !important;
transform: translateX(-50%) !important;
}

#quickActionContainer::before{
max-width: 100%;
width: 100%;
}

.preview-pdf-footer{
width:67%;
left:50% !important;
transform: translateX(-50%) !important;
}
.general-modal,
#previewPdfModal{
max-width: 67%;
left:50% !important;
transform: translateX(-50%) !important;
}

.filter-item {
width:60%;
}


.filter-item {
width:60%;
}
.realistic-pdf-shelf {
min-height: 445px;
}
.realistic-pdf-shelf .common-pfd-book{
width:288px !important;
min-width: 288px !important;
}
.medialib-right-inner{
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
}
.audio-card-wrapper {
max-width: 455px;
height: 320px;
}

.general-modal, #previewPdfModal{
left:17.5%;
}


.middle-first ul:last-child{
padding-bottom: 4rem;
}
}


@media(max-width:1350px){
.optionDivs{
width: 35%;
}

.btn-wrap{
width:auto;
max-width: 55%;
}
}

/* Responsive visibility tweaks */
@media screen and (min-width: 1024px) {
.media-carousel {
padding-right: 50px;
}
}

/* Landscape */
@media screen and (max-width: 932px) and (max-height: 430px) {
/* Styles for tall devices like iPhone 14 Pro Max landscape */

}




/* Specifically for short-height devices like Nest Hub */
@media (min-width: 600px) and (max-width: 1024px) and (max-height: 699px) {
body.style,
.app-container.style,
#quickActionContainer{
max-width: 75% ;
background: red !important;
}

.app-bottom-inner,
.feed-top,
.general-modal
{
max-width: 75% ;
}

.general-modal,
#previewPdfModal{
max-width: 75%;
left:12.5%;
}

.filter-modal {
height: 600px;
}

.media-slide {
width: 100%;
max-height: 62vh;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: 12px;
}
.feed-users-avatar {
max-height: 47vh;
}
.app-middle {
top: 5rem !important;
}
.middle-right {
top: 0;
}
.smart-header{
margin-top: 25px;
}

}
/* Standard tablets and iPads */
@media (min-width: 600px) and (max-width: 1024px) and (min-height: 700px) {
.general-modal,
#previewPdfModal{
max-width: 75%;
left:12.5%;
}


.media-slide {
width: 100%;
max-height: 77vh;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: 12px;
}
.feed-users-avatar {
max-height: 75vh;
}

body.style,
.app-container.style,
#quickActionContainer{
max-width: 100%;
}



.app-bottom-inner,
.feed-top,
.general-modal,
#previewPdfModal
{
max-width: 100%;
}

}

/*** ipads **/
@media screen and (max-width: 768px) and (max-height: 1024px) {
#softContentLibContainer .media-edit-top {
position: absolute;
z-index:7000;
width: 96%;
left: 50%;
transform: translateX(-50%);
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(50px, auto);  
gap: 10px; 
justify-items: center; 
top: 0;
padding: 5px 0;
}

#softContentLibContainer .media-edit-top svg {
width: 35px;
height: 35px;
cursor: pointer;
transition: transform 0.2s ease;
}

#softContentLibContainer .media-edit-top svg:active {
transform: scale(0.95); /* tap feedback */
}

.filter-item {
width:78%;
}

.realistic-pdf-shelf {
min-height:450px;
}

#quickActionContainer{
width: 100% !important;
}

body.style,
.app-container.style,
#quickActionContainer{
max-width: 100%;
left:0 !important;
transform: translateX(0) !important;
}

}

/* Portrait bottom-all-mobiles */
/* Styles for tall devices like iPhone 14 Pro Max portrait */
@media screen and (max-width: 430px) and (max-height: 932px) {

#quickActionContainer,
.app-bottom-inner,
.feed-top {
bottom:0 !important;
width:100% !important;
left:0 !important;
margin-bottom: .8rem !important;
background:none !important;;
max-height:75px !important;
}


#quickActionContainer a{
position: relative;
bottom: 0 !important;
width: 50px;
height: 50px;
}
}



@media screen and (max-width:896px) and (max-height: 414px) {

}


@media screen and (max-width: 480px) and (max-height: 854px) {
body.style,
.app-container.style,
#previewPdfModal,
.general-modal {
max-width: 100%;
}
}

@media screen and (max-width: 360px) and (max-height: 640px) {

}

@media screen and (max-width: 384px) and (max-height: 640px) {
}


@media(max-width:1080px){
    [page-body="login"]{
  width:65%;
}
.medialib-block{
grid-template-columns: 1fr !important; 
}


.welcome-inner.change::after{
min-height: calc(125vh + 724px + 362px + 100px);
}

#otherOptionsModal  ul {
max-width: 67% !important;
left:50% !important;
transform: translateX(-50%) !important;
}

.changed-photos-preview {
grid-template-columns: 1fr 1fr 1fr !important;
}


[data-main="dashboard"]{
display: grid !important;
grid-template-columns: 1fr 1fr !important;
}

[data-main="dashboard"]  .dashboard-card{
max-height: 100%  !important;
height:100% !important;
flex-grow: 1;
}

.dashboard-card form{
padding-bottom: 10rem !important;
}

#contactForm{
margin-top:-1.5rem !important;
}
}



@media(max-width:950px){
.pitch-block{
width: 75%;
}
.welcome-inner::after{
width: 92%;
left:50% !important;
transform: translateX(-50%) !important;
}

.app-top{
max-width: 65%;
text-align: center;
}

[data-wrapper="settings"]{
margin: 0 auto 0 !important;
}


[data-main="add-info"]{
width: 100% !important;

}

.dashboard-card:nth-child(1){
margin-top: -2.5rem;
}



.tab-block ul li{
max-width: 100%;
font-size:small;
text-align: center;
}
.styled-table {
font-size: 14px;
}

.styled-table th,
.styled-table td {
padding: 10px;
}

.table-wrapper {
padding: 10px;
}


.optionDivs{
width: 80%;
}
.expirable-options, 
.timezone-group{
flex-direction:column;
justify-content:flex-start;
margin:-1rem 0 0;
}


.expirable-options select,
.timezone-group select{
margin:-.6rem 0 1rem;
}

[data-main="add-info"]{
width: 100%;
}
[data-main="view-field"]{
width: 100%;
padding: 1rem;
}
.view-option-status{
width: 75%;
}

}


@media(max-width: 768px) {
.app-container, body.style {
position: absolute;
top:0;
left: 0;
right: 0;
height: 100vh;
height: 100dvh; 
box-sizing: border-box;
padding-bottom: env(safe-area-inset-bottom, 0px);
transition: height 0.2s ease; /* smooth resizing */
}

[page-body="login"]{
width:92%;
}
.pdf-footer p{
font-size: 9px !important;
}
  .album-grid{
    padding-bottom: 20rem !important;
  }
  .preview-wrap{
grid-template-columns: 1fr !important;

  }
  .preview-right{
    width:85% !important;
  }
.app-container::after {
content: " ";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: env(safe-area-inset-bottom, 20px);
background: rgba(255,0,0,0.2);
pointer-events: none;
}



.preview-pdf-footer{
width:88%;
}



.profile-inner{
padding-bottom: 7rem;
}



.monetized-overlay-middle{
width:70%;
left:15%;
}

.general-modal,
#previewPdfModal{
max-width: 100%;
left:0;
}

#filterModal ul{
max-width: 75% !important;
}

.plv-root ul svg,
[data-top="dashboard"] .filter-btn svg,
.filter-dropdown ul svg{
top:-.4rem !important;
}
.ui-card-item {
flex-direction: column;
align-items:flex-start;
}

.ui-card-right {
flex-direction: row;
margin-top: 1rem;
}

.ui-card-btn {
width: auto;
}
.ui-card-btn span{
position: relative;
top: -.3rem;
}
/** modal **/
#content-common-app-container{
padding: 0 !important;
}
.realistic-video-hub{
max-width: 640px !important;
min-width:100% !important;
padding: 0 !important;

}
.video-mid-options{
padding: 0 !important;
max-width: 100% !important;
min-width:100% !important;
}

.video-box{
min-height: 355px !important;
padding-top: 20px !important;
max-width: 100% !important;
width:100% !important;
min-width:100% !important;
}

.video-box video{
object-fit: contain !important;
min-height: 100% !important;
max-height: 88% !important;
min-width:100% !important;
}



.profile-tabs-inner.change_width{
width: 65%;
}


.medialib-block{
grid-template-columns: 1fr;
width: 100%;
}
.smart-edit-details{
width: 75%;
}
.footer {
top:1rem;
}


.cover-title {
position: relative;
top:0.5rem;
font-size: 14px;
padding: 0 0.5rem;
white-space: normal;
line-height: 1.2;
overflow: visible;
text-overflow: unset;
}

.common-custom-cover audio {
max-width: 100%;
padding: 0.2rem;
transform: translateY(0) !important;
}

.goUp{
top:3rem !important;
}

#otherOptionsModal ul li span{
width: 200px;
}
#otherOptionsModal  ul {
position:  relative !important;
top: 3rem !important;
padding: 0 !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: flex-start !important;
height: 500px !important;
}
.tab-block{
width: 90%;
}

.changed-photos-preview {
grid-template-columns:1fr 1fr !important;
}

body.style,
.app-container.style{
max-width: 100% !important;
width:100% !important;
}
.portfolio-subheading{
left:12.5%;
width: 75% !important;
}

.dashboard-ctas-single{
width: auto;

}
.dashboard-ctas-double{
width:auto;
position: relative;
left:0;
}
.custom-portfolio, .saved-portfolio {
margin:0 auto 0 !important;
}

.portfolio-content-picker .contentTypeLists {
width: 100%;
max-width: 92% !important;
justify-content: center;
align-items: center;
}

.portfolio-content-picker .contentTypeLists a.group1{
width: calc(92%/5) !important;
margin: .4rem auto .4rem;
flex-grow: 0 !important;
}
.portfolio-content-picker .contentTypeLists a.group2 {
width: calc(92%/4) !important;
margin: .4rem auto .4rem;
flex-grow: 0 !important;
}
.portfolio-content-picker .contentTypeLists a.group3{
width: calc(92%/3) !important;
margin: .4rem auto .4rem;
flex-grow: 1;
}

.portfolio-content-picker .contentTypeLists a {
font-size: 1rem;

}
.styled-table ul:first-child{
left:0;
}
.user-info{
flex-direction: column;
}
.action-btn{
margin-bottom: 1rem;
}
.plv-image {
justify-content: space-around;
height: auto;
flex-wrap: nowrap;
gap: 4px;
}

.plv-product-img {
margin-left: 0;
max-width: 150px !important;
width: 30% !important;
height: auto;
flex: 1;
}


table thead{
width: 100% !important;
min-width: 100% !important;
}
.plv-dropdown {
top: 10%;
left:35%;

}
.stock-content-inner{
justify-content: center;
}

.stock-content-inner, .stock-content{
width: 100% !important;
max-width: 96% !important;
}
.stock-label{
display: block;
}
#plv-root {
padding: 6px;
background: none;
gap:20px;
margin: -1.5rem auto 3rem;
}

.plv-list-item {
flex-direction: column !important;
align-items: flex-start !important;
max-width: 90%;
width: 100%;
padding: 1rem;
}

.plv-cell {
flex: 1 1 100%;
width: 100%;
padding: 6px 0;
}

/* Reduce padding and font size for smaller screens */
#plv-root {
padding: 6px;
background: none;
gap:20px;
}

.plv-list-item{
border-bottom: #a6a6c6 .1rem solid;
background: #e8edff;
max-width: 90%;
width: 100%;
border-radius: .8rem;
box-shadow: var(--medium-shadow);
}

.plv-title-input,
.plv-stock-input,
.plv-stock-out-input {
font-size: 12px;
padding: 4px;
}

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

.plv-menu-btn {
align-self: flex-end;
}

.plv-modal-content {
width: 90%;
}


.btn-wrap{
width:auto;
max-width: 100% !important;
margin: 0 -.8rem 0 !important;
gap:0px !important
}
#previewContainer {
width:100%;
}


.hero-text{
text-align: center;
}
.app-top{
max-width: 85%;
align-items: center;
}
.app-top svg{
position: relative;
top:-.3rem;
}
.td-actions{
display: grid;
grid-template-columns: 1fr 1fr;
position: relative;
left:-2.5rem;
}

}


@media(max-width:650px){
.modal-media-common-container {
flex: 0 0 250px;
}
}

@media(max-width:600px){
.filter-header {
flex-wrap: wrap;
justify-content: center;
gap: 6px;
}

.filter-header img,
.filter-header video {
width: 3rem;
height: 3rem;
}

.custom-badge {
font-size: 0.75rem;
padding: 0.3rem 0.6rem;
}

.tiny-audio-cover,
.mini-pdf-cover {
width: auto;
padding: 0.4rem 0.7rem;
}
.info-mid-options{
width:320px !important;
max-width:100% !important;
}
.middle-options{
width: 100%;
max-width:100%;
margin-left:0 !important;
left:0 !important;
}

.mini-brand-header {
width:50%;
}

.audio-box{
max-width: 100%;
width:300px !important;
background: none !important;
box-shadow: var(--deep-shadow);
}

.audio-cover{
height: 100%;
aspect-ratio: 1/1;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
place-items: center;
}

.audio-cover img{
height: 100%;
}
.realistic-audio-hub audio{
position: relative;
top:-35px !important;
max-width: 100%;
width:300px !important;
margin:0 auto 0;
place-content: center;
place-self: center;
justify-self: center !important;
}

.audio-actions{
position: absolute;
width:100%;
left:0;
top: 70%;
justify-content: space-evenly;
}

.realistic-audio-hub{
width: 100% !important;
max-width: 100% !important;
}


.profile-tabs-inner{
width:88%;
}

.profile-header {
height:200px;
max-height: 200px;
position: relative;
left:25px;
}

.album-images img {
height: 120px;
}
.album-title {
font-size: 1.1rem;
}
}



@media(max-width:550px){
  #editFieldModal .general-modal-content{
padding: 1rem !important;
}
.filter-item {
width:88%;
}
.smart-header{
margin-top: 20px;
}

.app-bottom-inner, #quickActionContainer,
.feed-top {
position: fixed !important;
}


.video-box{
max-height: 550px;
height: 550px;
}

.video-box video{
height: auto;
min-height: 450px;
max-height: 100%;
object-fit: contain;
}
.video-box .control-btn svg{
margin: 0 !important;
left:0 !important;
top:0 !important;
}

.video-box .control-btn {
position: fixed;
top:-225px;
left:50%;
transform:translateX(-50%);
background: rgba(0, 0, 0, 0.25);
box-sizing: border-box;
width:40px;
height:40px;
scale:1.3;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}

.video-box .control-btn:hover{
background: var(--loud-blue-light) !important;
color:#fff !important;
scale: 1.2 !important;
}

.media-filter-inner {
gap: 0 !important;
}
#createModal .general-modal-content{
padding: 0 !important;
}
.filter-icon, .animate-icon {
width: 45px;
height: 45px;
}

.filter-icon:hover, .animate-icon:hover{
background: rgba(255, 255, 255, 0.2); 
transform: scale(0.99);
}

.preview-wrap .remove-media-btn{
left:185px !important;
}

.preview-wrap img{
height: 100% !important;
}
.preview-left{
position: relative;
left:0 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
}
.media-filter  {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
}

.preview-wrap{
grid-template-columns: 1fr;
width:100% !important;
max-width: 100% !important;
position: relative !important;
left:0 !important;
justify-content: center !important;
align-items: center !important;
}

.preview-right{
position: relative;
left:0 !important;
width: 100% !important;
}

.btn-delete-field{
transform: translateY(48px);
}
.bank-account-mini {
grid-template-columns: 2fr 4fr 2fr 1fr;
width: 100% !important;
max-width: 100% !important;
}
.bank-account-mini.adjust{
grid-template-columns: 2fr 2fr 4fr 1fr ;
width: 100% !important;
max-width: 100% !important;
}

.bank-account-mini button:nth-child(4),
.bank-account-mini button:nth-child(5){
width: auto !important;
max-width:  auto !important;
}

.viewer-btn-block-info {
position: relative;
left:85px;
}


.bottom-status-block.absolute{
position: absolute;
top:70%;
}

.top-title.isexpired{
left:25%;
}

.dashboard-inner ul{
max-width: 96%;
margin-left: 1rem;
}


.portfolio-subheading{
font-size: 1.1rem;
}
.hero-text h1 {
font-size: 2rem !important;
}


.top-context{
font-size:20px;
}
.logo-group {
width: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
.optionDivs{
width: 100%;
}
.expirable-options, 
.timezone-group{
grid-template-columns: 1fr;
}

.check-box-group{
max-width: 33%;
}

.portfolio-subheading{
top:10% !important;
z-index: 10000 !important;
}
.audio-mid-options{
width: 100% !important;
left:-1.3rem !important;
position:  absolute !important;

}
.realistic-audio-hub {
height: 355px;

}
}

@media(max-width:500px){
.content-top svg{
width:45px;
height: 45px;
}
.content-top{
left:22.5px;
}
}


@media(max-width: 485px) {
      [page-body="login"]{
  width:100%;
}
  .redirect-page h1 { font-size: 1.5rem; }
.redirect-page .icon-container { width: 80px; height: 80px; top: -40px; }
.redirect-page .icon-container svg { width: 45px; height: 45px; }

#fieldsContainer .field-item{
margin-bottom: 1.5rem !important;
padding-bottom: 2rem !important;
}
#ticket-btn-group{
top:4rem !important;
}

.domain-step-1,
.domain-step-2 {
padding: 18px;
}

.token-generate-block {
flex-direction: column;
gap: 10px;
}

.btn-wrap,
.contact-btn-wrap {
flex-direction: column;
gap: 10px;
}
.album-grid{
grid-template-columns: 1fr;
}


.medialib-grid-audio-controls .seek-bar{
width:45px !important; 
height:4px;
}
.medialib-custom-cover .cover-title{
font-size: 11px !important;
}

.filter-item {
width:100%;
}
.realistic-pdf-shelf {
min-height:400px;
top:50%;
}
.realistic-pdf-shelf .common-pfd-book{
max-width: 155px !important;
width:269px !important;
min-width: 269px !important;
height: 335px;
}

.medialib-container{
padding: 0;
}

.medialib-right-inner{
grid-template-columns: repeat(2, 1fr) !important;
gap:5px !important;
}

.quick-container-inner, .feed-top-inner{
width:92%;
}

.app-bottom-inner{
display:grid;
margin-top:0 auto 0;
gap:0;
grid-template-columns: 1.2fr 4fr 1.2fr;
}

.feed-loader-msg{
font-size: 14px;
}
.feed-premium-audio-inner {
height:300px;
}
.feed-right{
padding: 0;
gap:20px!important;
}

.media-slide {
max-height: 455px;
flex: 0 0 88% ;
}

.media-carousel {
padding-left:0;
padding-right: 0;
}


.uploadBlock{
right:-10px;
}
.video-box{
min-height: 390px !important;
max-height: 390px !important;
}

.video-box .control-btn {
top:-195px;
}

.video-box video{
height: 100% ;
min-height: 200px !important;
max-height: auto;
object-fit: contain;
}

.video-box .control-btn {
top:-100px;
}

.audio-mid-options{
width:100% !important;
max-width: 100% !important;
}
.profile-header{
gap:25px;
}


.middle-right-title {
left:0 !important;
}

.middle-right-media img{
max-height: 100% !important;
height: 100% !important;
min-height: 100% !important;
}

.audio-cover audio,   
.audio-cover img{
left:100% !important;
width: 100% !important;
max-width: 100% !important
}
.audio-cover{
width: 100% !important;
max-width: 100% !important;
}
.audio-cover .audio-actions{
left:70px !important;
}


.audio-cover audio{
top:0 !important;
}

.audio-box {
height: 300px;
}

.grid-pdf-title {
font-size: 18px !important;
}

.grid-pdf-excerpt {
font-size: 16px;
}


.gallery-grid{
grid-template-columns: 1fr 1fr 1fr;
gap:4px;
}

.grid .control-btn{
top: -65px !important;
}

.grid-audio{
width: 95% !important;
}

.grid audio {
left:-1rem;
max-width:100%;
width:100%;
min-width:152px;
}

.grid{
height: 185px;
max-height: 185px;
}

.middle-first{
margin-left: 10px;
}

.middle-options h3{
left:0 !important;
margin: 0 !important;
}

.middle-options p, .middle-options h3{
text-align: center !important;
}

#contextLockInfo{
margin-left: 0 !important;
transform: translateX(.5rem);
}

.portfolio-alphabeted {
height: 75px;
width: 75px;
font-size: 11px;
padding: 0.8rem !important;
}

.intro-message h1 {
font-size:2rem;
margin: 0 0 20px;
font-weight: 600;
font-family: var(--anton);
}

.intro-message p {
font-size:1rem;
line-height: 1.5;
font-family: var(--cinzel);
}

.pitch-block img{
width: 100%;
}

.welcome-inner.change::after{
min-height: calc(200vh + 724px + 362px/1.5);
}

.viewer-btn-block{
margin-top: -.3rem !important;
margin-bottom: 2rem !important;
left:0 !important;
margin-left: 0 !important;
}


.changed-photos-preview {
grid-template-columns:1fr !important;

}

.common-app-container{
margin-bottom: 2rem !important;
}

.hero-start-now{
transform: translateY(7rem) !important;
}
}




@media(max-width:480px){
.view-option-status{
width: 75%;
justify-self: center !important;
}

.mini-brand-header {
width:100%;
}


.timezone-block input::placeholder{
font-size: .8rem;
}
.portfolio-content-picker h3 {
font-size: 1rem;
}
.portfolio-content-picker .contentTypeLists a {
font-size: .9rem;

}


.btn-wrap{
width:auto;
max-width: 92%;
}

.portfolio-subheading{
width:50%;
left:20%;
margin-top:1.5rem !important;
}
.feather-lock{
width: 18px;
height: 18px;
z-index: 100 !important;
margin-top: .4rem;
}
}



@media(max-width:435px){
.mini-brand-header {
left:-1rem;
}

.middle-right-media-container{
flex: 0 0 94%;
}

.feed-upload-video-wrap{
flex:0 0 200px;
width: 200px !important;
height: 200px;
}

.feed-upload-audio-wrap{
flex:0 0 195px;
max-width: 195px;
height: 65px;
}

.feed-upload-img-wrap {
height: 185px;
max-width: 115px;
}
.feed-upload-previewer {
padding: 10px;
max-width: 900px;
margin: 10px auto;
}
/* PDF Book Style */
.feed-upload-pdf-wrap {
width: 145px;
min-height: 200px;
}

.middle-first{
width:75px;
left:2px;
margin-left: 5px;
}


.profile-tabs-inner.change_width{
width: 78%;
}
.profile-tabs-inner{
width:100%;
}
.grid{
height: 155px;
max-height: 155px;
}
.feed-users-avatar img {
width: 58px;
height: 58px;
}
.portfolio-alphabeted {
height: 60px;
width: 60px;
font-size: 9px;
padding: 0.8rem !important;
}

.welcome-inner::after{
min-height: 90%;
}
.smart-header h1{
font-size:15px !important;
}

.smart-header span{
margin-top: 0;
top:0;
font-size: 10px !important;
}



#portfolioContext{
font-size: 14px !important;
}

.view-option-status{
padding-bottom: 1rem !important;
}

.app-bottom svg{
width:29px;
height:29px;
scale: (1.0);
}


.expiration-status{
width: 100% !important;
max-width: 100% !important;
}
.expiration-status span{
font-size: 11px !important;
}

}



@media(max-width:430px){
#welcome-user{
text-align: center !important;
font-size:1.3rem !important;
margin-top: 20px;
}

.feed-premium-audio-controls{
bottom: 1.5rem;
}

.media-slide {
max-height: 415px;
}


.feed-premium-audio-inner {
height:285px;
}



.modal-footer {
gap: .3rem;
padding: .4rem;
}

.audio-actions{
top:45px;
display: grid !important;
left:98px;
}


.audio-box svg{
width:26px;
height: 26px;
}
.middle-options .cover-title {
position: relative;
top:0;
height: 50px;
}

.custom-audio-cover,
.custom-audio-cover-2,
.custom-audio-cover-3 ,
.custom-audio-cover-4 {
padding:.6rem;
}


.common-custom-cover audio {
max-width: 65%;
padding: 0.2rem;
transform: translateY(1rem) !important;
height: 100% !important;
}

.bottom-status-block {
margin-top: 10px !important;
}
.feather-lock{
width: 16px;
height: 16px;
z-index: 100 !important;
}
#otherOptionsModal ul li span{
font-size: 1.3rem !important;
}


#portfolioContext {
font-size: 13px;
}

.dashboard-ctas a,
.dashboard-ctas button{
padding: .75rem;
}
.hero-text h1 {
font-size: 1.6rem !important;
margin:1rem 0 1rem;
}

select{
font-size:13.5px !important;
}

.addinfo-sellingpoint {
width:100%;
}

.addinfo-sellingpoint h1{
font-size:1.5rem;
}

.addinfo-sellingpoint p{
font-size:16px;
}

.app-top h1{
font-size: 1.5rem;
}

.middle-options h3{
font-size: 16px !important;
}

.middle-options-right p{
font-size: 15px !important;
padding:.8rem !important;
}
.grid [data-action="max"]{
right:1rem !important;
}

.grid .controls input{
margin-left: -40px !important;
min-width: 60px !important;
}

.grid .common-top-control{
right:7px !important;
}


.middle-options .music-icon-box,
.profile-inner .music-icon-box  {
width: 35px;
height: 35px;
}

.middle-options .music-icon ,
.profile-inner .music-icon{
height: 24px;
}

.grid-audio .seek-bar{
display: none;
}

.grid .seek-bar:active,
.grid  .seek-bar:focus,
.grid  .seek-bar.active {
width: 40px;
height: 6px;
}


.grid .grid-audio-controls .seek-bar{
-webkit-appearance: none;
width: 20px;
height: 4px;
}


/* On user interaction: grow */
.grid .grid-audio-controls .seek-bar-::-moz-range-thumb:hover {
transform: scale(1.1);
}

.grid .grid-audio-controls .seek-bar:active,
.grid .grid-audio-controls .seek-bar:focus,
.grid .grid-audio-controls .seek-bar.active {
width: 60px;
height: 6px;
}

.grid-audio-controls .controls input{
margin-left: -10px !important;
min-width:30px !important;
max-width: 45px !important;
}

.grid .controls .time{
position: relative;
margin:0 !important;
left: -35px !important;

}

.grid-audio-controls .time{
font-size:11px !important;
position: relative;
left:-12px !important;
}

.grid-audio-controls .control-btn{
transform:translateX(-12px);
}

#moveCollectionModal .modal-filter-icon{
flex:0 0 23px;
height: 23px;
border-radius: 4px !important;
}

.filter-label {
font-size: 0.88rem;
max-width: 275px !important;
word-break: break-word !important; /* break long words only if needed */
white-space: normal !important; /* allows wrapping */
flex: 0 0 100%;
}

}



@media(max-width:415px){
.app-container.style{
height:100vh;
top:0;
}

#moveCollectionModal .filter-info {
width:100%;
}
.medialib-grid-audio-controls .seek-bar{
width:35px !important; 
height:4px;
}
.medialib-custom-cover .cover-title{
font-size: 9px !important;
}

.middle-options .music-icon-box,
.profile-inner .music-icon-box{
position: absolute;
top:20px ;
}


.middle-options .cover-title{
position: absolute !important;
top:40% !important;
}


}



@media(max-width:375px){
.filter-label {
font-size: 0.8rem;
}


#moveCollectionModal .modal-filter-icon{
flex:0 0 22px;
height: 22px;
border-radius: 4px !important;
}
.api-actions{
flex-direction: column;
}
.mini-brand-header h3{
font-size:18px !important;
}

.realistic-pdf-shelf{
min-height:375px;
max-height: 375px;
height: 355px;
}

.realistic-pdf-shelf .common-pfd-book{
min-width: 225px !important;
max-width: 225px !important;
width:225px !important;
height:300px;
}
.medialib-block-left  .browse-camera-icon{
width:50px;
height:50px;
}
.medialib-block-left .browse-library{
font-size: 14px;
}

.smart-header{
margin-top: 25px;
}
.info-mid-options{
width:300px !important;
max-width:100% !important;
}


.media-slide {
max-height: 375px;
}
.media-card-metrics {
font-size: 0.9rem;
margin-top:-8px;
}



.welcome-inner::after{
min-height: 88%;
}

.bottom-viewer-options button{
width: auto;
position: relative;
left:.5rem;
}


.viewer-btn-block{
margin-top: -.3rem !important;
margin-bottom: 1rem !important;
}
.hero-inner {
top:15rem;
}
.dashboard-ctas a,
.dashboard-ctas button{
padding: .65rem;
}
.top-history-navigations{
position: absolute;
}

.grid-pdf-title {
font-size: 14px !important;
}

.grid-pdf-excerpt {
font-size: 11px !important;
}

.feed-upload-previewer-bottom {
margin-bottom: 19px;
margin-top: 0;
}

.feed-upload-previewer{
margin-top:-10px;
}

}



@media(max-width:362px){
.hero-start-now{
transform: translateY(5rem) !important;
}


.phone-number {
position:relative;
z-index: 50;
left:0;
top:-.9rem;

}
.mini-contact{
display: grid !important;
grid-template-columns: 1fr ;
}
.mini-brand-header{
position: relative;
top:-.5rem;
}
.mini-meta {
position: absolute;
top:1.5rem;
margin-left: 1.2rem;
font-size: 8px;
}
/*** update-starts **/
.mini-brand-header {
justify-content: space-evenly;
gap: 5px;
padding: 1px 4px;
height: 65px;

}

.info-mid-options{
width:100% !important;
max-width:100% !important;
}
}



@media(max-width:340px){
.m-checkgroup .span-check::before {
width: 14px !important;
height: 14px !important;
}
.filter-checkbox input{
height:12px !important;
width:12px !important;
}
.filter-checkbox {
flex:0 0 12px !important;
}

.filter-label {
font-size: 0.7rem !important;
word-break: break-all !important; /* break long words only if needed */
white-space: normal !important; /* allows wrapping */
}


#moveCollectionModal .modal-filter-icon{
flex:0 0 18px !important;
height: 18px !important;
margin-top: 2px !important;
}
#is-image-horizontal{
top:5% !important;
}

.profile-header {
left:15px;
}


.grid video{
object-fit: contain !important;
height:186px !important;
max-height:100% !important;
padding-bottom: 75% !important;
}


.audio-box{
height: 265px !important;
}


.audio-actions{
left:110px;
top:30px !important;
}

.common-custom-cover audio {
transform: translateY(1.5rem) !important;
}

.viewer-btn-block{
position:  relative !important;
left:-.6rem !important;
}

.viewer-btn-block button,
.bank-account-mini button:nth-child(4),
.bank-account-mini button:nth-child(5){
padding: 4px !important;
font-size: 11px !important;
}

.mini-name{
font-size: 10px !important;
}


.bottom-status-block.relative{
position: relative !important;
top:-27px !important;
}


.middle-options.nopadding{
padding: 0 !important;
}

#editfieldModal .general-modal-content{
  padding: .6rem !important;
}

#is-video-horizontal{
top:10px !important;
}

}

@media(max-width:328px){
.medialib-container [data-modal="createModal"]{
position: relative;
left: -.8rem !important;
}
#softContentLibContainer .media-edit-top svg {
width: 30px !important;
height: 30px !important;
}
.filter-header .custom-badge{
font-size: 0.65rem !important;
text-wrap: nowrap !important;
flex: 0 0 auto !important;
word-break: keep-all !important;
}
.filter-info {
width:auto;
}

.feed-premium-audio-inner {
height:255px;
}


.media-slide {
max-height: 325px;
flex: 0 0 92%;
}
/* PDF Book Style */
.feed-upload-pdf-wrap {
width: 100px;
min-height: 160px;
}


.profile-header {
left:0;
padding-left:.4rem;
}


.field-item{
padding: .7rem !important;
}

.grid-pdf-title {
font-size: 12px !important;
}

.grid-pdf-excerpt {
font-size: 10px !important;
}
.grid audio {
left:-1.3rem;
}
.portfolio-alphabeted {
height: 52px;
width: 52px;
font-size: 8px;
padding: 0.6rem !important;
}
.viewer-btn-block button,
bank-account-mini button:nth-child(4),
.bank-account-mini button:nth-child(5){
font-size: 10px !important;
}

.middle-right-media img {
max-height: 240px !important; /* full container height */
}

.video-box{
min-height: 325px !important;
max-height: 325px !important;
}

}


@media(max-width:299px){
.viewer-btn-block.row{
flex-direction: row;
}

.profile-header{
gap:15px;
}

.profile-header {
height:175px;
max-height: 175px;
}
.video-box{
min-height: 300px !important;
max-height: 300px !important;
}

.media-slide {
max-height: 265px;
}
.medialib-block-left .browse-library{
font-size: 12px;
}
.filter-header img{
width:2.5rem;
height: 1.8rem;
max-width: 2.5rem;

}
}



@media (max-width: 267px) {
.app-container.style{
min-height: 72vh ;
}
.register-container {
position: relative;
top:0;
}
#quickActionContainer a{
width: 42px;
height: 42px;
}
.filter-header {
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
gap: 6px;
padding: 0.4rem;
}


.tiny-audio-cover h4,
.mini-pdf-cover h4 {
font-size: 0.55rem;
text-align: center;
margin: 0;
}

.tiny-badge,
.custom-badge {
font-size: 0.55rem;
padding: 0.15rem 0.35rem;
}


.login-header{
word-break: keep-all;
text-wrap: nowrap;
flex: 0 0 auto;
}

.filter-actions svg:last-child{
margin-left: 0;
margin-top:10px;
}

.modal-filter-icon{
position: relative;
top: 6px !important;
}
.filter-label{
max-width: 115px !important;
font-size: 0.7rem !important;
word-break: break-word !important; /* break long words only if needed */
white-space: normal !important; /* allows wrapping */
flex: 0 0 115px;
}

.filter-info {
position: relative;
left:0;
transform: translateX(0) ;

}

.medialib-list-box{
height: 135px;
}


.media-slide {
max-height: 215px;
flex:0 0 78%;
}


.video-box{
min-height: 235px !important;
max-height: 235px !important;
}


#alphabetTabContainer{
left:-.5rem;
}
.middle-first ul:last-child{
padding-bottom: 5rem;

}


[data-svg="true"]
.feed-top  img{
width:37px !important;
height:37px !important;
}

.feed-top  img{
margin: 0 !important;
}


.portfolio-alphabeted {
width:50px;
height:50px;
font-size: 8px !important;
}


.smart-header{
margin-top: 45px;
}

.profile-header{
gap:10px;
}
.viewer-btn-block button,
bank-account-mini button:nth-child(4),
.bank-account-mini button:nth-child(5){
font-size: 9px !important;
}
.middle-options h3{
font-size: 14px !important;
}


.profile-header-left button{
padding: .6rem !important;
}


.profile-header{
position: relative;
top:0;
}

.profile-right{
position: relative;
top:-1.2rem;
}


.profile-header-left img {
width: 100px;
height: 100px;
}

.profile-right-content span{
width:150px !important;
}
.profile-right-content {
position: relative;
top:-20px;
}

.profile-right-content button{
left: -27px;
}
.profile-right-content button,
.profile-header-left button{
padding: .4rem !important;
font-size: 14px;
}

.profile-header-left button{
position: relative;
top:0;
left:10px;

}
.profile-right-content span{
font-size:14px;
}

.medialib-block-left svg{
width:40px !important;
height: 40px !important;
}



#softContentLibContainer .media-edit-top {
gap:10px !important;
grid-template-columns: repeat(4, 1fr);
}

#softContentLibContainer .medialib-right-inner{
display:grid;
align-items: flex-start !important;
grid-template-columns: 1fr !important;
gap:25px !important;
}
#softContentLibContainer .medialib-list-box{
height: 155px;
}
.mini-brand-header h3{
font-size: 0.7rem !important;
}
#welcome-user{
text-align: center !important;
font-size: 0.8rem !important;
margin-top: .8rem;
}
}

@media(max-width:245px){
#quickActionContainer a{
width: 37px;
height: 37px;
}
.medialib-block-left svg{
width:35px !important;
height: 35px !important;
}

.medialib-block-left .browse-library{
font-size: 10px;
}
.media-slide {
max-height: 155px;
flex:0 0 78%;
}

.video-box{
min-height: 200px !important;
max-height: 200px !important;
}


.profile-header{
gap:5px;
}
.profile-right-content span{
font-size:13px;
}
.gallery-grid{
display: grid;
grid-template-columns: 1fr 1fr ;
}



.monetized, .is-external{
font-size: 9px;
}

.view-option-status{
width: 88%;
}

.view-option-status svg{
width:21px !important;
height: 21px !important;
}
.view-option-status a{
padding: 4px !important;
}
.viewer-btn-block{
margin: 0 auto 0 !important;
}

.middle-options p{
margin-left: -0.5rem  !important;
position: relative;
font-size: 15px !important;
}
}