*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: "Geom", sans-serif;

}

/* container */
.froodl-container{
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
padding:20px;
}

/* HEADER */
.froodl-header{
background:#cfe5e3;
}

/* logo */
.froodl-logo{
font-size:24px;
font-weight:700;
color:#1c2b36;
}

/* nav */
.froodl-nav{
display:flex;
gap:30px;
}

.froodl-nav a{
text-decoration:none;
color:#2d3e50;
font-weight:500;
}

/* submit button */
.froodl-submit-btn{
background:#2eb872;
color:white;
padding:10px 20px;
border-radius:25px;
text-decoration:none;
font-weight:500;
}

/* mobile menu icon */
.froodl-menu-icon{
display:none;
font-size:26px;
cursor:pointer;
}

@media (max-width:768px){

.froodl-container{
flex-wrap:wrap;
}

.froodl-submit-btn{
display:block;
margin-left:auto;
margin-right:10px;
padding:8px 16px;
font-size:14px;
}

}

/* HERO */

.froodl-hero{
background:#cfe5e3;
padding:80px 20px;
}

.froodl-hero-container{
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:40px;
}

/* text */
.froodl-hero-text{
max-width:520px;
}

.froodl-hero-text h1{
font-size:48px;
color:#0e2b3d;
margin-bottom:20px;
}

.froodl-hero-text p{
color:#516b7b;
margin-bottom:30px;
font-size:18px;
}

/* button */

.froodl-start-btn{
background:#2eb872;
padding:14px 30px;
color:white;
text-decoration:none;
border-radius:30px;
font-weight:600;
display:inline-block;
}

/* image */

.froodl-hero-image img{
width:100%;
max-width:520px;
}






/* TABLET */

@media (max-width:992px){

.froodl-hero-container{
flex-direction:column;
text-align:center;
}

.froodl-hero-text{
max-width:100%;
}

}




/* MOBILE */

@media (max-width:768px){

.froodl-nav{
position:absolute;
top:70px;
right:-100%;
background:white;
flex-direction:column;
width:200px;
padding:20px;
transition:.3s;
}

.froodl-nav.active{
right:20px;
}

.froodl-menu-icon{
display:block;
}

/* .froodl-submit-btn{
display:none;
} */

.froodl-hero-text h1{
font-size:32px;
}

}
/* second section */
/* SECTION */
.community-trust-section{
    background:#f3f4f6;
    padding:80px 20px;
}

/* CONTAINER */
.community-trust-container{
    max-width:1200px;
    margin:auto;
    text-align:center;
}

/* HEADING */
.community-trust-heading h2{
    font-size:34px;
    color:#1e293b;
    margin-bottom:10px;
}

.community-trust-heading p{
    color:#64748b;
    margin-bottom:50px;
}

/* STATS GRID */
.community-trust-stats{
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
}

/* CARD */
.community-stat-card{
    background:white;
    padding:40px 30px;
    border-radius:14px;
    width:300px;
    box-shadow:0 8px 20px rgba(0,0,0,0.05);
    transition:0.3s;
}

.community-stat-card:hover{
    transform:translateY(-5px);
}

/* ICON */
.community-stat-icon{
    font-size:30px;
    margin-bottom:15px;
}

/* NUMBER */
.community-stat-card h3{
    font-size:28px;
    color:#1e293b;
    margin-bottom:10px;
}

/* TEXT */
.community-stat-card span{
    color:#64748b;
    font-size:15px;
}
/* TABLET */
@media (max-width:992px){

.community-trust-stats{
    gap:20px;
}

.community-stat-card{
    width:260px;
}

}

/* MOBILE */
@media (max-width:600px){

.community-trust-stats{
    flex-direction:column;
    align-items:center;
}

.community-stat-card{
    width:100%;
    max-width:320px;
}

}
/* thred section */
/* CTA SECTION */

.story-cta-section{
    background:#07223c;
    padding:80px 20px;
    text-align:center;
}

/* container */

.story-cta-container{
    max-width:900px;
    margin:auto;
}

/* title */

.story-cta-title{
    font-size:36px;
    color:#ffffff;
    font-weight:600;
    margin-bottom:30px;
}

/* button */

.story-cta-button{
    display:inline-block;
    background:#2eb872;
    color:#ffffff;
    padding:14px 35px;
    border-radius:30px;
    font-size:16px;
    text-decoration:none;
    font-weight:500;
    transition:0.3s;
}

.story-cta-button:hover{
    background:#27a866;
}
/* tablet */

@media (max-width:992px){

.story-cta-title{
    font-size:30px;
}

}

/* mobile */

@media (max-width:600px){

.story-cta-title{
    font-size:24px;
}

.story-cta-button{
    padding:12px 28px;
    font-size:15px;
}

}
/* footer */
/* FOOTER SECTION */

.site-footer-section{
    background:#f2f3f5;
    padding:20px 15px;
}

/* container */

.site-footer-container{
    max-width:1200px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
}

/* footer links */

.site-footer-links{
    display:flex;
    gap:25px;
    flex-wrap:wrap;
}

.site-footer-links a{
    text-decoration:none;
    color:#5b6b7c;
    font-size:14px;
    transition:0.3s;
}

.site-footer-links a:hover{
    color:#000;
}

/* social icons */

.site-footer-social{
    display:flex;
    gap:15px;
}

.site-footer-social a{
    color:#5b6b7c;
    font-size:16px;
    transition:0.3s;
}

.site-footer-social a:hover{
    color:#000;
}
/* tablet */

@media (max-width:900px){

.site-footer-container{
    flex-direction:column;
    gap:15px;
}

}

/* mobile */

@media (max-width:600px){

.site-footer-links{
    justify-content:center;
    text-align:center;
    gap:15px;
}

.site-footer-social{
    justify-content:center;
}

}

/* header */
.storylist-header{
    background:#ffffff;
    border-bottom:1px solid #eee;
    padding:15px 20px;
}

.storylist-header-container{
    max-width:1200px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.storylist-logo{
    font-size:22px;
    font-weight:600;
}

.storylist-search{
    flex:1;
}

.storylist-search input{
    width:100%;
    padding:10px 15px;
    border-radius:25px;
    border:1px solid #ddd;
}

.storylist-submit-btn{
    background:#2eb872;
    color:white;
    padding:10px 22px;
    border-radius:25px;
    text-decoration:none;
    font-size:14px;
}

/* stroies */
.storylist-section{
    padding:40px 20px;
    background:#f7f7f7;
}

.storylist-container{
    max-width:1200px;
    margin:auto;
}

.storylist-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.storylist-card{
    background:white;
    border-radius:10px;
    overflow:hidden;
    padding-bottom:15px;
    transition:0.3s;
}

.storylist-card:hover{
    transform:translateY(-5px);
}

.storylist-card img{
    width:100%;
    height:180px;
    object-fit:cover;
}

.storylist-card h3{
    font-size:18px;
    padding:15px;
    margin:0;
}

.storylist-card p{
    font-size:14px;
    color:#666;
    padding:0 15px;
}

.storylist-meta{
    display:block;
    padding:10px 15px;
    font-size:13px;
    color:#888;
}
/* Tablet */

@media (max-width:1024px){

.storylist-grid{
grid-template-columns:repeat(2,1fr);
}

}

/* Mobile

@media (max-width:600px){

.storylist-grid{
grid-template-columns:1fr;
}

.storylist-header-container{
flex-direction:column;
align-items:flex-start;
gap:10px;
}

.storylist-submit-btn{
width:100%;
text-align:center;
}

} */



/* Mobile Responsive */

@media (max-width:768px){

.storylist-header{
padding:10px 15px;
}

.storylist-header-container{
flex-wrap:wrap;
gap:10px;
align-items:center;
}

/* Order set */

.storylist-logo{
order:1;
}

.storylist-search{
order:2;
width:100%;
}

.storylist-submit-btn{
order:3;
padding:7px 14px;
font-size:13px;
}

.header-notification{
order:4;
}

.profile-menu{
order:5;
}

/* search full width */

.storylist-search input{
width:100%;
padding:9px 12px;
}

/* profile smaller */

.profile-img{
width:32px;
height:32px;
}

/* dropdown mobile */

.notification-dropdown{
right:-30px;
width:200px;
}

.dropdown-menu{
right:-10px;
}

}


/* load more */
.storylist-loadmore-wrap{
text-align:center;
margin-top:40px;
}

.storylist-loadmore-btn{
background:#ff6600;
color:#fff;
border:none;
padding:12px 28px;
font-size:16px;
border-radius:6px;
cursor:pointer;
transition:0.3s;
}

.storylist-loadmore-btn:hover{
background:#e05500;
}
/* detail */
body{
font-family: Arial, Helvetica, sans-serif;
background:#f5f5f5;
margin:0;
}

.stories-detail-section{
padding:60px 20px;
}

.stories-detail-container{
max-width:900px;
margin:auto;

padding:40px;
border-radius:10px;
}

.stories-detail-title{
font-size:36px;
font-weight:700;
line-height:1.3;
margin-bottom:20px;
}

.stories-detail-subtitle{
font-size:18px;
color:#555;
margin-bottom:30px;
}

.stories-detail-author-row{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

.stories-detail-author{
display:flex;
align-items:center;
gap:12px;
}

.stories-detail-author-img img{
width:45px;
height:45px;
border-radius:50%;
}

.stories-detail-author-info h4{
margin:0;
font-size:16px;
}

.stories-detail-author-info span{
font-size:13px;
color:#777;
}

.stories-detail-follow{
border:1px solid #2ecc71;
background:#fff;
color:#2ecc71;
padding:8px 18px;
border-radius:20px;
cursor:pointer;
}

.stories-detail-meta{
color:#777;
font-size:14px;
display:flex;
gap:10px;
margin-bottom:30px;
}

.stories-detail-image img{
width:100%;
border-radius:10px;
margin-bottom:30px;
}

.stories-detail-content p{
font-size:17px;
line-height:1.7;
margin-bottom:18px;
}

.stories-detail-content h2{
margin-top:35px;
font-size:24px;
}
@media(max-width:768px){

.stories-detail-container{
padding:25px;
}

.stories-detail-title{
font-size:26px;
}

.stories-detail-subtitle{
font-size:16px;
}

.stories-detail-meta{
flex-wrap:wrap;
}

}
/* icon */
.stories-detail-share{

position:absolute;
left:-70px;
top:62%;

display:flex;
flex-direction:column;
gap:14px;

}

.stories-detail-share-icon{

width:38px;
height:38px;

border:1px solid #dcdcdc;
border-radius:50%;

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

color:#28a745;
font-size:16px;

background:#fff;
transition:0.3s;

}

.stories-detail-share-icon:hover{

background:#28a745;
color:#fff;

}
.stories-detail-container{
position:relative;
}
@media(max-width:900px){

.stories-detail-share{
display:none;
}

}

/* second section */
.stories-detail-author-section{
padding:60px 20px;
}

.stories-detail-author-container{
max-width:850px;
margin:auto;
}

.stories-detail-author-top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

.stories-detail-author-left{
display:flex;
align-items:center;
gap:15px;
}

.stories-detail-author-avatar{
width:55px;
height:55px;
border-radius:50%;
}

.stories-detail-author-meta h3{
margin:0;
color:#0f9d58;
font-size:18px;
}

.stories-detail-author-meta span{
font-size:13px;
color:#777;
}

.stories-detail-author-follow{
border:1px solid #0f9d58;
background:white;
color:#0f9d58;
padding:8px 20px;
border-radius:20px;
cursor:pointer;
}

.stories-detail-author-bio{
color:#555;
line-height:1.7;
margin:20px 0;
}

.stories-detail-author-social{
display:flex;
gap:20px;
font-size:22px;
color:#0f9d58;
margin-bottom:30px;
}

.stories-detail-divider{
border:none;
border-top:1px solid #ddd;
margin:30px 0;
}

.stories-detail-more-title{
font-size:18px;
margin-bottom:30px;
}

.stories-detail-more-btn-wrap{
text-align:center;
}

.stories-detail-more-btn{
border:1px solid #0f9d58;
background:white;
color:#0f9d58;
padding:10px 25px;
border-radius:25px;
cursor:pointer;
}
.stories-detail-author-section{
padding:60px 20px;
}

.stories-detail-author-container{
max-width:850px;
margin:auto;
}

.stories-detail-author-top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

.stories-detail-author-left{
display:flex;
align-items:center;
gap:15px;
}

.stories-detail-author-avatar{
width:55px;
height:55px;
border-radius:50%;
}

.stories-detail-author-meta h3{
margin:0;
color:#0f9d58;
font-size:18px;
}

.stories-detail-author-meta span{
font-size:13px;
color:#777;
}

.stories-detail-author-follow{
border:1px solid #0f9d58;
background:white;
color:#0f9d58;
padding:8px 20px;
border-radius:20px;
cursor:pointer;
}

.stories-detail-author-bio{
color:#555;
line-height:1.7;
margin:20px 0;
}

.stories-detail-author-social{
display:flex;
gap:20px;
font-size:22px;
color:#0f9d58;
margin-bottom:30px;
}

.stories-detail-divider{
border:none;
border-top:1px solid #ddd;
margin:30px 0;
}

.stories-detail-more-title{
font-size:18px;
margin-bottom:30px;
}

.stories-detail-more-btn-wrap{
text-align:center;
}

.stories-detail-more-btn{
border:1px solid #0f9d58;
background:white;
color:#0f9d58;
padding:10px 25px;
border-radius:25px;
cursor:pointer;
}

/* community */
.community-section{

padding:80px 20px;
background:#f5f5f5;

}

.community-container{

max-width:1200px;
margin:auto;

}

.community-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;

}

.community-card{

background:#eeeeee;
border-radius:14px;
padding:40px 20px;
text-align:center;
position:relative;

}

.community-avatar{

width:70px;
height:70px;
border-radius:50%;
overflow:hidden;
margin:-70px auto 15px;
border:6px solid #f5f5f5;

}

.community-avatar img{

width:100%;
height:100%;
object-fit:cover;

}

.community-name{

color:#2fb36d;
margin:10px 0 5px;
font-size:20px;

}

.community-stories{

color:#444;
font-size:14px;
margin-bottom:20px;

}

.community-follow-btn{

border:1px solid #2fb36d;
background:transparent;
color:#333;
padding:8px 35px;
border-radius:30px;
cursor:pointer;
transition:0.3s;

}

.community-follow-btn:hover{

background:#2fb36d;
color:white;

}

@media(max-width:900px){

.community-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:600px){

.community-grid{

grid-template-columns:1fr;

}

}

/* membership */
.member-section{
padding:80px 20px;
background:#f4f4f4;
}

.member-container{
max-width:1200px;
margin:auto;
}

.member-title{
text-align:center;
font-size:36px;
margin-bottom:60px;
}

.member-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
}

.member-card{
background:white;
border-radius:12px;
padding:40px 30px;
position:relative;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
text-align:left;
}

.member-card.popular{
border-top:4px solid #8e6dfd;
}

.member-badge{
position:absolute;
top:-20px;
right:30px;
padding:10px 18px;
border-radius:30px;
color:white;
font-size:14px;
}

.free-badge{background:#3fa7ff;}
.pro-badge{background:#8e6dfd;}
.prime-badge{background:#ff7a18;}

.member-plan-name{
font-size:22px;
margin-bottom:10px;
}

.member-desc{
font-size:14px;
color:#666;
margin-bottom:25px;
}

.member-price{
font-size:32px;
font-weight:bold;
margin-bottom:30px;
}

.member-price span{
font-size:14px;
color:#666;
}

.member-features{
list-style:none;
padding:0;
margin-bottom:30px;
}

.member-features li{
margin-bottom:12px;
font-size:14px;
}

.member-features .disable{
color:#aaa;
}

.member-btn{
width:100%;
padding:12px;
border:1px solid #2fb36d;
background:transparent;
border-radius:6px;
cursor:pointer;
transition:0.3s;
}

.member-btn:hover{
background:#2fb36d;
color:white;
}

@media(max-width:900px){

.member-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:600px){

.member-grid{
grid-template-columns:1fr;
}

}

/* login */
.login{
max-width:380px;
margin:80px auto;
text-align:center;
}

.login h1{
font-size:34px;
margin-bottom:30px;
}

.login form{
display:flex;
flex-direction:column;
text-align:left;
}

.login label{
font-size:14px;
margin-bottom:6px;
margin-top:10px;
}

.login input[type="text"],
.login input[type="password"]{
width:100%;
padding:10px;
border:1px solid #ccc;
border-radius:4px;
font-size:14px;
}

.login-remember{
display:flex;
align-items:center;
gap:8px;
margin:12px 0;
font-size:14px;
}

.login button{
margin-top:10px;
padding:10px;
background:#5a7bd8;
color:white;
border:none;
border-radius:4px;
cursor:pointer;
font-size:14px;
width:90px;
}

.login button:hover{
background:#3f63c4;
}

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

.login-links a{
color:#2aa44f;
text-decoration:none;
}

.login-links a:hover{
text-decoration:underline;
}

.login-footer{
margin-top:40px;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:12px;
font-size:13px;
}

.login-footer a{
color:#2aa44f;
text-decoration:none;
}

.login-footer a:hover{
text-decoration:underline;
}

/* RESPONSIVE */

@media(max-width:500px){

.login{
margin:60px 20px;
}

.login h1{
font-size:28px;
}

}

/* profile dashboard */
.dashboard-page *{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial;
}

.dashboard-page{
background:#f6f7f8;
min-height:100vh;
}

.dashboard{
max-width:1100px;
margin:auto;
padding:20px;
}

/* NAVIGATION */
/* 
.dashboard-nav{
display:flex;
flex-wrap:wrap;
gap:15px;
justify-content:center;
background:#eef1ef;
padding:10px;
border-radius:10px;
}

.dashboard-link{
text-decoration:none;
color:#2c8f55;
padding:8px 14px;
border-radius:6px;
font-size:14px;
}

.dashboard-link.active{
background:white;
box-shadow:0 2px 5px rgba(0,0,0,0.1);
} */




/* Existing styles for dashboard nav (desktop) */
.dashboard-nav {
  display: flex;
  flex-wrap: wrap;
  /* gap: 15px; */
  justify-content: center;
  background: #eef1ef;
  padding: 10px;
  border-radius: 10px;
}

.dashboard-link {
  text-decoration: none;
  color: #2c8f55;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 14px;
}

.dashboard-link.active {
  background: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Mobile: menu button */
.dashboard-menu-btn {
  display: none;
  position: fixed;
  top: 61px;
  left: 4px;
  background: #2c8f55;
  color: white;
  padding: 10px 15px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
  z-index: 1200;
  user-select: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Modal overlay */
.dashboard-modal-overlay {
  display: none;
  position: fixed;
  inset: 0; /* shorthand for top:0; right:0; bottom:0; left:0 */
  background: rgba(0, 0, 0, 0.35);
  z-index: 1150;
}

/* Modal style for dashboard nav on mobile */
.dashboard-nav.modal-open {
  position: fixed;
  top: 40%;
  left: 13%;
  transform: translate(-50%, -50%);
  flex-direction: column;
  background: #eef1ef;
  border-radius: 10px;
  padding: 20px 25px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 1200;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  justify-content: flex-start;
}

/* Modal links vertical in modal */
.dashboard-nav.modal-open .dashboard-link {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

/* Close button inside modal - optional, can add if you want */
/* You can add a close button in the modal if needed */

/* Responsive rules */
@media (max-width: 768px) {
  /* Show menu button */
  .dashboard-menu-btn {
    display: block;
  }

  /* Hide default dashboard nav */
  .dashboard-nav:not(.modal-open) {
    display: none;
  }
}



/* profile */
.profile{
max-width:700px;
margin:auto;
padding:40px 20px;
}

.profile-heading{
text-align:center;
font-size:28px;
margin-bottom:30px;
}

/* TOP PROFILE */

.profile-top{
text-align:center;
margin-bottom:30px;
}

.profile-avatar{
position:relative;
display:inline-block;
}

.profile-avatar img{
width:120px;
height:120px;
border-radius:50%;
object-fit:cover;
}

.profile-edit{
position:absolute;
top:5px;
right:5px;
background:#ff4d4d;
color:#fff;
width:26px;
height:26px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:12px;
cursor:pointer;
}

.profile-username{
margin-top:10px;
font-size:20px;
}

.profile-status{
background:#2ecc71;
color:#fff;
padding:4px 10px;
border-radius:20px;
font-size:12px;
display:inline-block;
margin-top:5px;
}

/* FORM */

.profile-form{
margin-top:20px;
}

.profile-row{
display:flex;
flex-direction:column;
margin-bottom:18px;
}

.profile-row label{
font-weight:600;
margin-bottom:6px;
}

.profile-row input,
.profile-row textarea,
.profile-row select{
padding:10px;
border:1px solid #ddd;
border-radius:6px;
font-size:14px;
}

.profile-note{
font-size:12px;
color:red;
margin-top:5px;
}

/* SECTION TITLE */

.profile-section{
margin:30px 0 15px;
color:#ff5a4a;
font-size:18px;
}

/* RESPONSIVE */

@media(max-width:600px){

.profile{
padding:20px;
}

.profile-heading{
font-size:24px;
}

}

/* account */
.account{
max-width:600px;
margin:auto;
padding:40px 20px;
}

.account-title{
text-align:center;
font-size:30px;
margin-bottom:40px;
}

.account-form{
width:100%;
}

.account-row{
display:flex;
align-items:center;
margin-bottom:18px;
gap:20px;
}

.account-row label{
width:220px;
font-weight:600;
font-size:14px;
}

.account-text{
font-size:14px;
color:#333;
}

.account-row input{
flex:1;
padding:10px;
border:1px solid #ddd;
border-radius:4px;
font-size:14px;
}

.account-btn{
width:100%;
margin-top:10px;
padding:12px;
background:#000;
color:#fff;
border:none;
cursor:pointer;
font-size:14px;
letter-spacing:1px;
}

.account-btn:hover{
background:#222;
}


/* Responsive */

@media(max-width:600px){

.account-row{
flex-direction:column;
align-items:flex-start;
}

.account-row label{
width:100%;
}

.account-row input{
width:100%;
}

}

/* edit story */
.my_story_container{
    width:90%;
    margin:auto;
    font-family:Arial;
}

.my_story_top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
}

.my_story_tabs span{
    margin-right:20px;
    cursor:pointer;
    color:#666;
}

.my_story_tab_active{
    color:#2ca66f;
    border-bottom:2px solid #2ca66f;
    padding-bottom:5px;
}

.my_story_search button{
    border:1px solid #ccc;
    background:white;
    padding:5px 10px;
    cursor:pointer;
}

.my_story_filters{
    margin-bottom:20px;
}

.my_story_filters button{
    border:1px solid #2ca66f;
    background:white;
    padding:6px 14px;
    border-radius:20px;
    margin-right:8px;
    cursor:pointer;
}

.my_story_filter_active{
    background:#2ca66f;
    color:white;
}

.my_story_grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:20px;
}

.my_story_card{
    border:1px solid #e5e5e5;
    border-radius:6px;
    overflow:hidden;
    background:white;
}

.my_story_image{
    position:relative;
}

.my_story_image img{
    width:100%;
    display:block;
}

.my_story_badge{
    position:absolute;
    top:10px;
    left:10px;
    background:#2ca66f;
    color:white;
    font-size:12px;
    padding:4px 8px;
    border-radius:3px;
}

.my_story_content{
    padding:15px;
}

.my_story_content h3{
    font-size:16px;
    margin-bottom:10px;
    color:#2ca66f;
}

.my_story_date{
    font-size:13px;
    color:#666;
    margin-bottom:6px;
}

.my_story_rating{
    color:#2ca66f;
    margin-bottom:10px;
}

.my_story_meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    font-size:13px;
    color:#555;
}
.my_story_menu{
    position:absolute;
    top:10px;
    right:10px;
}

.my_story_dots{
    font-size:18px;
    cursor:pointer;
}

.my_story_dropdown{
    position:absolute;
    top:25px;
    right:0;
    background:white;
    border:1px solid #ddd;
    border-radius:6px;
    width:120px;
    display:none;
    box-shadow:0 3px 10px rgba(0,0,0,0.1);
}

.my_story_dropdown a{
    display:block;
    padding:8px 12px;
    text-decoration:none;
    color:#333;
    font-size:14px;
}

.my_story_dropdown a:hover{
    background:#f5f5f5;
}

/* hover pe open */
.my_story_menu:hover .my_story_dropdown{
    display:block;
}

/* click pe open */
.my_story_menu.active .my_story_dropdown{
    display:block;
}

/* edit story */
.my_story_edit_container{
max-width:800px;
margin:auto;
padding:20px;
background:#fff;
border:1px solid #ddd;
border-radius:6px;
}

.my_story_edit_group{
margin-bottom:20px;
display:flex;
flex-direction:column;
}

.my_story_edit_group label{
font-weight:600;
margin-bottom:6px;
}

.my_story_edit_group input,
.my_story_edit_group textarea{
padding:10px;
border:1px solid #ccc;
border-radius:4px;
font-size:14px;
width:100%;
}

.my_story_edit_editor{
min-height:220px;
resize:vertical;
}

.my_story_edit_editor_toolbar{
display:flex;
gap:8px;
border:1px solid #ddd;
border-bottom:none;
padding:8px;
background:#f5f5f5;
}

.my_story_edit_editor_toolbar button{
border:none;
background:white;
padding:6px 10px;
cursor:pointer;
border-radius:4px;
}

.my_story_edit_tags{
display:flex;
gap:6px;
flex-wrap:wrap;
margin-bottom:5px;
}

.my_story_edit_tags span{
background:#e6e6e6;
padding:4px 8px;
border-radius:4px;
font-size:13px;
}

.my_story_edit_permalink{
color:#ff4d4d;
}

.my_story_edit_actions{
display:flex;
gap:10px;
align-items:center;
margin-top:20px;
}

.my_story_edit_actions select{
padding:8px;
}

.my_story_edit_update{
background:#000;
color:#fff;
border:none;
padding:8px 16px;
cursor:pointer;
}

.my_story_edit_delete{
border:1px solid #2e8b57;
background:white;
color:#ff4d4d;
padding:8px 16px;
cursor:pointer;
}

@media(max-width:768px){

.my_story_edit_container{
padding:15px;
}

.my_story_edit_actions{
flex-wrap:wrap;
}

.my_story_edit_actions button,
.my_story_edit_actions select{
width:100%;
}

}
.my_story_edit_tag_box{
border:1px solid #ccc;
padding:6px;
display:flex;
align-items:center;
flex-wrap:wrap;
gap:5px;
position:relative;
}

.my_story_edit_tag_input{
border:none;
outline:none;
flex:1;
min-width:120px;
}

.my_story_edit_selected_tags{
display:flex;
gap:5px;
flex-wrap:wrap;
}

.my_story_edit_tag_chip{
background:#e5e5e5;
padding:3px 8px;
border-radius:4px;
font-size:13px;
display:flex;
align-items:center;
gap:4px;
}

.my_story_edit_tag_remove{
cursor:pointer;
}

.my_story_edit_tag_clear{
cursor:pointer;
margin-left:auto;
}

.my_story_edit_tag_dropdown{
border:1px solid #ccc;
border-top:none;
max-height:150px;
overflow:auto;
display:none;
list-style:none;
padding:0;
margin:0;
}

.my_story_edit_tag_dropdown li{
padding:8px 10px;
cursor:pointer;
}

.my_story_edit_tag_dropdown li:hover{
background:#4e83d8;
color:white;
}
#my_story_edit_editor{
height:300px;
background:#fff;
}

.ql-toolbar{
border-radius:6px 6px 0 0;
}

.ql-container{
border-radius:0 0 6px 6px;
font-size:15px;
}

/* invoice */
.invoice-container{
max-width:1200px;
margin:auto;
padding:30px;
background:#fff;
border-radius:8px;
}

.invoice-title{
text-align:center;
margin-bottom:25px;
}

.invoice-top-bar{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
flex-wrap:wrap;
}

.invoice-filters label{
margin-right:15px;
font-size:14px;
cursor:pointer;
}

.invoice-default-btn{
padding:8px 18px;
border:1px solid #ccc;
background:#f5f5f5;
border-radius:4px;
cursor:pointer;
}

.invoice-table-wrapper{
overflow-x:auto;
}

.invoice-table{
width:100%;
border-collapse:collapse;
}

.invoice-table th,
.invoice-table td{
padding:12px;
border-bottom:1px solid #eee;
text-align:left;
}

.invoice-paid{
color:green;
font-weight:bold;
}

.invoice-unpaid{
color:#ff9800;
font-weight:bold;
}

.invoice-cancelled{
color:red;
font-weight:bold;
}

.invoice-refunded{
color:#2196f3;
font-weight:bold;
}

/* message */
.message-container *{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, sans-serif;
}


.message-container{
width:100%;
min-height:100vh;
background:#f5f5f5;
padding:30px;
}

.message-wrapper{
display:flex;
gap:30px;
}

/* LEFT */

.message-sidebar{
width:320px;
background:#fff;
padding:20px;
border-radius:6px;
}

.message-title{
margin-bottom:15px;
}

.message-search{
width:100%;
padding:10px;
border:1px solid #ccc;
border-radius:4px;
margin-bottom:10px;
}

.message-start-btn{
width:100%;
padding:10px;
background:#eaf7ed;
border:1px solid #2ecc71;
border-radius:4px;
cursor:pointer;
margin-bottom:10px;
}

.message-alert{
background:#f8d7da;
color:#842029;
padding:10px;
border-radius:4px;
font-size:14px;
}

/* RIGHT */

.message-chat-area{
flex:1;
background:#fff;
border-radius:6px;
display:flex;
align-items:center;
justify-content:center;
padding:40px;
}

.message-empty{
text-align:center;
max-width:400px;
}

.message-icon{
font-size:60px;
margin-bottom:15px;
}

.message-text{
font-size:18px;
font-weight:600;
color:#333;
}


/* RESPONSIVE */

@media (max-width:768px){

.message-wrapper{
flex-direction:column;
}

.message-sidebar{
width:100%;
}

.message-chat-area{
padding:30px 20px;
}

.message-text{
font-size:16px;
}

}
/* notification */

.notification-container *{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, sans-serif;
}

.notification-container{
width:100%;
padding:30px;
background:#f5f5f5;
display:flex;
justify-content:center;
}

.notification-box{
width:100%;
max-width:800px;
background:#fff;
border:1px solid #ddd;
border-radius:10px;
padding:15px 20px;
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:10px;
}

.notification-left{
display:flex;
gap:10px;
}

.notification-btn{
padding:7px 16px;
border-radius:20px;
border:1px solid #2ecc71;
background:white;
cursor:pointer;
font-size:14px;
}

.notification-btn.active{
background:#2ecc71;
color:white;
}

.notification-right{
display:flex;
gap:10px;
}

.notification-filter,
.notification-menu{
width:34px;
height:34px;
border:1px solid #2ecc71;
background:white;
border-radius:6px;
cursor:pointer;
font-size:16px;
display:flex;
align-items:center;
justify-content:center;
}


/* MOBILE */

@media(max-width:600px){

.notification-box{
flex-direction:column;
align-items:flex-start;
}

.notification-right{
align-self:flex-end;
}

}
/* submit story form */
.post-container{
max-width:900px;
margin:auto;
padding:40px 20px;
text-align:center;
}

.post{
width:100%;
padding:12px;
margin-bottom:20px;
font-size:16px;
}

textarea{
width:100%;
height:200px;
padding:10px;
margin-bottom:20px;
font-size:16px;
}

.submit{
padding:12px 25px;
border-radius:20px;
border:1px solid #1abc9c;
background:white;
cursor:pointer;
}


/* MODAL */

.modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
justify-content:center;
align-items:center;
padding:10px;
}

.modal-content{
background:white;
width:90%;
max-width:900px;
padding:20px;
border-radius:6px;
max-height:90vh;
overflow:auto;
}

.modal-header{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
}

.close{
background:none;
border:none;
font-size:26px;
cursor:pointer;
}

.modal-body{
display:flex;
gap:20px;
margin-top:20px;
}

.left,
.right{
flex:1;
}

.modal-body input,
.modal-body textarea{
width:100%;
padding:10px;
margin:10px 0;
font-size:15px;
}

.modal-footer{
margin-top:20px;
display:flex;
flex-wrap:wrap;
gap:10px;
}

.submit-now{
background:black;
color:white;
padding:12px 20px;
border:none;
}

.schedule{
background:none;
border:none;
color:green;
cursor:pointer;
}


/* RESPONSIVE */

@media(max-width:768px){

.post-container{
padding:20px;
}

.modal-body{
flex-direction:column;
gap:10px;
}

.modal-content{
width:95%;
padding:15px;
}

textarea{
height:150px;
}

.submit-now,
.schedule{
width:100%;
text-align:center;
}

}