.nav.nav-tabs.about-btn, .timeline-btn {border-bottom: 0 none;display: inline-block;width: 72%;}
.nav.nav-tabs.about-btn > li, .timeline-btn > li {margin-right: 5px;display: inline-block;margin-bottom: -1px;}
.nav.nav-tabs.about-btn > li a.active, .timeline-btn > li a.active {background: #088dcd none repeat scroll 0 0;color: #fff;border-radius: 5px;font-size: 14px;padding: 7px 10px;display: inline-block;border-bottom: 0px !important;}
.nav.nav-tabs.about-btn > li a, .timeline-btn > li a {background: #f8f8f8 none repeat scroll 0 0;border-radius: 5px;color: #088dcd;font-size: 14px;padding: 7px 10px;display: inline-block;border:1px solid #e1e1e1;}

.btn-create-event {position: fixed; bottom: 20px; right: 20px; z-index: 1000;}
.btn-create-event a {background:#0055ff; width: 50px; height: 50px; color: #ffffff; border-radius: 50%;line-height: 50px;text-align: center;display: inline-block;position: relative;transition: all .25s ease-in;}
.btn-create-event a span {display: none1; transition: all .25s ease-in;position: absolute; right: 0px; background:#0055ff; height: 50px; border-radius: 12px; color: #fff; width: 18px; z-index: -1;opacity: 0;}
.btn-create-event a:hover span {display: block;transition: all .25s ease-in; right: 18px; width: 180px;opacity: 1;}
.input-group-append {cursor: pointer;}

.form-control {line-height: 25px;height: 38px;font-size: 14px;display: inline-block;border: 2px #eee solid;position: relative; z-index: 10; background-color: unset;}
.chat-form .form-control:focus {background-color: unset;}
.chat-form .form-group:after {z-index: 1;}

/*--- setting page --*/
.seting-mode {display: inline-block;margin-top: 20px;width: 100%;}
.seting-mode > label {float: right;}
.seting-mode > i {color: #92929e;font-size: 16px;margin-right: 8px;vertical-align: middle;}
/*--- Simple HTML/CSS switch ---*/

/* Select 2 css */
.select2-container { min-width: 100%; } 
.select2-results__option { padding-right: 20px; vertical-align: middle; } 
.select2-results__option:before { content: ""; display: inline-block; position: relative; height: 20px; width: 20px; border: 2px solid #e9e9e9; border-radius: 4px; background-color: #fff; margin-right: 20px; vertical-align: middle; } 
.select2-results__option[aria-selected=true]:before { font-family:fontAwesome; content: "\f00c"; color: #fff; background-color: #f77750; border: 0; display: inline-block; padding-left: 3px; } 
.select2-container--default .select2-results__option[aria-selected=true] { background-color: #fff; } 
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #eaeaeb; color: #272727; } 
.select2-container--default .select2-selection--multiple { margin-bottom: 10px; border:2px #eee solid !important;} 
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple { border-radius: 4px; } 
.select2-container--default.select2-container--focus .select2-selection--multiple { border-color: #f77750; border-width: 2px; } 
.select2-container--default .select2-selection--multiple { border-width: 2px; } 
.select2-container--open .select2-dropdown--below { border-radius: 6px; box-shadow: 0 0 10px rgba(0,0,0,0.5); z-index: 10000;} 
.select2-selection .select2-selection--multiple:after { content: 'hhghgh'; } /* select with icons badges single*/ 
.select-icon .select2-selection__placeholder .badge { display: none; } 
.select-icon .placeholder { display: none; } 
.select-icon .select2-results__option:before, .select-icon .select2-results__option[aria-selected=true]:before { display: none !important; /* content: "" !important; */ } 
.select-icon  .select2-search--dropdown { display: none; }

/*--- setting page --*/
.seting-mode {display: inline-block;margin-top: 20px;width: 100%;}
.seting-mode > label {float: right;}
.seting-mode > i {color: #92929e;font-size: 16px;margin-right: 8px;vertical-align: middle;}
/*--- Simple HTML/CSS switch ---*/
.switch {display: inline-block;position: relative;width: 45px;height: 20px;border-radius: 20px;background: #dfd9ea;transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    vertical-align: middle;cursor: pointer;}
.switch::before {content: '';position: absolute;top: 1px;left: 2px;width: 17px;height: 17px;background: #fafafa !important;transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    border: 0 !important;border-radius: 100% !important;}
.switch:active::before {box-shadow: 0 2px 8px rgba(0,0,0,0.28), 0 0 0 20px rgba(128,128,128,0.1);}
input:checked + .switch {background: #72da67;}
input:checked + .switch::before {left: 27px;background: #fff !important;}
input:checked + .switch:active::before {box-shadow: 0 2px 8px rgba(0,0,0,0.28), 0 0 0 20px rgba(0,150,136,0.2);}

#privacy p { color: #7d7e9e; font-size: 14px; line-height: 24px; font-family: 'Roboto', sans-serif; margin-top: 10px; font-weight: 300; }
.seting-mode > span {font-weight: 500;}

.card-body {position: relative;}
.emoji-wrap {bottom: 40px !important;}

.custom-card {position: relative;margin-top: 30px !important;}
.custom-card .form-group {position: relative;}
.custom-card .form-group button {position: absolute; right: 0px; top:8px; background: none;border:0px;}
.custom-card .form-group button i {color:#fff;font-size: 20px;padding: 9px;border-radius: 0px 3px 3px 0px;}

.comment {position: relative; border-bottom: 1px solid #e1e1e1; padding: 10px 0px;}
.card .comment:last-child {border-bottom: 0px;}

.comment_readonly button {display: none;}
.x_editable_textarea {outline: none;border: none; background: none !important;}
.x_editable_textarea:focus {box-shadow: none !important;}
textarea {resize: none;}

.custom_status_stories {padding-right: 0px !important;}
.custom_status_stories  .modal-dialog {max-width: 100%;margin: 0px;}
.custom_status_stories  .modal-dialog .modal-content {height: 100vh;border-radius: 0px;}
.custom_status_stories  .modal-dialog .modal-content .modal-body {padding: 0px;}
.custom_status_stories  .modal-dialog .modal-content .modal-body .close {position: absolute; right: 20px;top: 20px;background: #fff;border-radius: 13px;width: 26px; height: 26px;text-align: center;line-height: 13px;}

.post-new {display: inline-block;padding-top: 20px;width: 100%;} 
.post-newmeta {display: inline-block;width: 100%;padding-right: 12px;position: relative;}
.post-categoroes {display: inline-block;list-style: outside none none;margin-bottom: 15px;padding-left: 0;width: 100%;}
.post-categoroes > li {background: #f3f5f5 none repeat scroll 0 0;border-radius: 20px;color: #787d98;cursor: pointer;display: inline-block;font-size: 13px;margin-bottom: 8px;padding: 5px 15px;width: 49%;}
.post-categoroes > li i {color: #b8bdd8;margin-right: 3px;}
.thumbnails {overflow: scroll;overflow-x: scroll;overflow-x: hidden;max-height: 200px;position: relative;margin-top: 15px;margin-left: 15px;}
.dropzone {border: 1px dashed rgba(0, 0, 0, 0.2);border-radius: 10px;padding: 10px;min-height: 150px;background: #fff;}  
.post-new .c-form {margin-top: 0;vertical-align: top;width: 100%;padding-left: 12px;}
.c-form {display: inline-block;position: relative;width: 100%;}
.post-new .c-form textarea, .post-new .c-form input {background: #fff none repeat scroll 0 0;border: 1px solid #eaeaea;border-radius: 7px;color: #535165;font-size: 13px;margin-bottom: 20px;padding: 12px 20px;width: 100%;}
.select-box {float: right;font-size: 13px;margin-top: 30px;position: relative;vertical-align: middle;width: 45%;}
.main-btn {color: #fff !important;border-color: #0065F5;background: #0065F5;}
.post-new .c-form .main-btn {border-radius: 5px;padding: 6px;width: 100%;margin-bottom: 20px;}  
.c-form .main-btn {border-radius: 5px;padding: 6px;width: 100%;margin-bottom: 20px;}  
.c-form textarea, .post-new .c-form input {background: #fff none repeat scroll 0 0;border: 1px solid #eaeaea;border-radius: 7px;color: #535165;font-size: 13px;margin-bottom: 20px;padding: 12px 20px;width: 100%;}
.compose-option {position: relative;}    
.compose-option span { display: block; padding: 0 8px;} 
.compose-option input {    position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0; cursor: pointer;}

.thumbnails {overflow: scroll;overflow-x: hidden;max-height:200px;position: relative;margin-top: 15px;margin-left: 15px;}
.thumbnails .thumbs-img {width:100%;max-width: calc(25% - 10px);height: 130px;object-fit: cover;background: #fff;overflow:hidden;border-radius:10px;border:1px solid #bfbfbf;position: relative;display: inline-block;}
.thumbnails .thumbs-img .thumbActions {position: absolute;right:5px;top:5px;}
.thumbnails .thumbs-img img {object-fit: cover;width:120px;height: 130px;}
.thumbnails .thumbs-img .thumbActions .tb-trash {background: rgba(255,255,255,.6);width:20px;height:20px;border-radius:20px;line-height: 20px;margin-left: 5px;color:#000;text-align: center;display: inline-block;font-size: 12px;}
.thumbnails .thumbs-img .thumbActions .tb-edit {background: rgba(255,255,255,.6);width:20px;height:20px;border-radius:20px;line-height: 20px;margin-left: 5px;color:#000;text-align: center;display: inline-block;font-size: 12px;}
.thumbnails .thumbs-img .thumbActions .tb-delete {background: rgba(255,255,255,.6);width:20px;height:20px;border-radius:20px;line-height: 20px;margin-left: 5px;color:#000;text-align: center;display: inline-block;font-size: 12px;}
.thumbnails .thumbs-img .thumbActions .tb-trash:hover, .thumbnails .thumbs-img .thumbActions .tb-delete:hover, .thumbnails .thumbs-img .thumbActions .tb-edit:hover {background: rgba(255,255,255,1);}
.btn-post {color:#fff;background: #30A7A7;border-color: #30A7A7;padding-left:30px;padding-right:30px;}
.btn-post:hover {color:#fff;background: #30A7A7;border-color: #30A7A7;}

.thumbnails .thumbs-video {width:100%;max-width: calc(25% - 10px);height: 130px;object-fit: cover;background: #fff;overflow:hidden;border-radius:10px;border:1px solid #bfbfbf;position: relative;display: inline-block;}
.thumbnails .thumbs-video video {width: auto;height: 100%;}
.thumbnails .thumbs-video .thumbActions {position: absolute;right:5px;top:5px;}
.thumbnails .thumbs-video .thumbActions .tb-trash {background: rgba(255,255,255,.6);width:20px;height:20px;border-radius:20px;line-height: 20px;margin-left: 5px;color:#000;text-align: center;display: inline-block;font-size: 12px;}
.thumbnails .thumbs-video .thumbActions .tb-edit {background: rgba(255,255,255,.6);width:20px;height:20px;border-radius:20px;line-height: 20px;margin-left: 5px;color:#000;text-align: center;display: inline-block;font-size: 12px;}
.thumbnails .thumbs-video .thumbActions .tb-delete {background: rgba(255,255,255,.6);width:20px;height:20px;border-radius:20px;line-height: 20px;margin-left: 5px;color:#000;text-align: center;display: inline-block;font-size: 12px;}
.thumbnails .thumbs-video .thumbActions .tb-trash:hover, .thumbnails .thumbs-video .thumbActions .tb-delete:hover, .thumbnails .thumbs-video .thumbActions .tb-edit:hover {background: rgba(255,255,255,1);}

.new-comment span button {background: transparent none repeat scroll 0 0;border: 0 none;cursor: pointer;position: absolute;right: 5px;top: 17px;}
.new-comment span button i {color: #92929e;font-size: 20px;transform: rotate(90deg);}

.comment_readonly button {display: none;}

.x_editable_textarea {outline: none;border: none; background: none !important;}
.x_editable_textarea:focus {box-shadow: none !important;}

.popup-back {position: relative;font-size: 15px;}
.popup-back:before {background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0;border-radius: 100%;content: "";height: 30px;left: 50%;position: absolute;top: 50%;transform: translate(-50%, -50%) scale(1);transition: all 0.2s linear 0s;width: 30px;}

.custom-popup-head {position:relative;}
.custom-popup-head .btn-checkin {position: absolute; right: 0px;top:-10px;}

.popup-head {display: flex;flex-shrink: 0;align-items: center;justify-content: space-between;padding: 1rem 1rem;border-bottom: 1px solid #e1e1f0;border-top-left-radius: calc(.3rem - 1px);border-top-right-radius: calc(.3rem - 1px);position: relative;text-align: center;}
.popup-head .popup-back {position: absolute;left: 0px;}

#table-scroll a {color: #000;}

.card-body .owl-carousel .owl-item img {min-height: 400px; object-fit: cover;}
.card-body .owl-carousel .owl-item .item {overflow: hidden; max-height: 400px;}
.post-edit .owl-carousel .owl-item img {min-height: 400px; object-fit: cover;}
.post-edit .owl-carousel .owl-item .item {overflow: hidden; max-height: 400px;}

.featured-stories-img-size .owl-carousel .owl-item img {min-height: unset;}

.aud-vid {position: relative;}
.aud-vid:before {content:'';display: block;padding-top:400px;}
.audio-player {position: absolute;top: 0;bottom: 0;left: 0;width: 100%;height: 100%;border: 0;}

.drop-options {}
.drop-options a {}

.search-form-2 button {position: absolute;top: 15px;right: 15px;color: #999;width: 16px;height: 16px;background: none;border: none;cursor: pointer;}
.search-form-2 button i {position: relative;top:-3px;left: 0px;}
.avatar .friends_pic {width: 60px; height: 60px; object-fit: cover;}
.dropdown-menu .card-body {cursor: pointer;}

/* .display-img {max-width: 100%;min-height: 550px;object-fit: cover;} */
.display-img {width: 100%; min-height: 250px; object-fit: cover; border-radius: 7px;}

.group-feed {display: inline-block;width: 100%;position: relative;}
.group-avatar {display: inline-block;position: relative;width: 100%;}
.group-avatar > img {border-radius: 10px;display: inline-block;width: 100%}
.group-avatar > a {background: #fff none repeat scroll 0 0;border-radius: 20px;bottom: 20px;font-size: 13px;padding: 6px 18px;position: absolute;right: 20px;}
.group-avatar > a > i {color: green;margin-right: 5px;}
.group-dp {bottom: 25px;display: inline-block;left: 25px;margin: 0;position: absolute;}
.group-dp > img {border: 3px solid #fff;border-radius: 100%;max-width: 135px;}
.grp-info {display: inline-block;padding: 16px 5px;position: relative;width: 100%;}
.grp-info.about > h4 {display: inline-block;width: auto;font-size: 22px;font-weight: 500;margin-bottom: 20px;vertical-align: middle;}
.grp-info > h4 > span {color: #088dcd;display: block;font-size: 11px;}
.grp-info > ul.joined-info {float: right;margin-top: 10px;list-style: outside none none;margin: 0;padding: 0;}
.grp-info > ul > li {color: #92929e;display: inline-block;font-size: 13px;margin-right: 20px;vertical-align: middle;}
.grp-info > ul > li > span {color: #1f273f;font-weight: 500;}
.custom-cover-icon {position: absolute;right: 20px !important;top: 20px !important;bottom: unset !important;background: #fff;border-radius: 15px;box-sizing: border-box;padding: 5px 10px;font-size: 12px;}
.custom-cover-icon #cover_image {opacity: 0;position: absolute;top: 0px;right: 0px;bottom: 0px;left: 0px;width: 127px;height: 27px;cursor: pointer;}
.edit-profile-pic {position: absolute;right: -5px !important;top: 20px !important;bottom: unset !important;background: #fff;border-radius: 15px;box-sizing: border-box;padding: 7px 10px;font-size: 12px;}
.edit-profile-pic #image {opacity: 0;position: absolute;top: 0px;right: 0px;bottom: 0px;left: 0px;width: 32px;height: 32px;cursor: pointer;}

.ctm-settings-tabs .nav-item {min-width: 120px;text-align: center;}
.ctm-settings-tabs .nav-item i {margin-right: unset !important;margin-bottom: 7px;}

.earntable {width: 100%;border-collapse: collapse;margin: 20px 0;background-color: #fff;border-radius: 10px;overflow: hidden;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
        }
.earntable th, .earntable td {
            padding: 16px;
            text-align: left;
            color: #4b5c6b;
            font-size: 13px;
        }
.earntable th {
            background-color: #f9fbfd;
            font-weight: 600;
            color: #6c757d;
        }
.earntable td {
            border-top: 1px solid #f0f0f0;
        }
.earntable tr:hover {
            background-color: #f1f5fb;
        }
.earntable th, .earntable td {
            text-align: center;
        }

.w45 {width: 45px !important; height: 45px;}
.evant-profile {font-size: 12px;line-height: 16px;display: inline-block;float: left;}     
.evant-profile .eventby {white-space: nowrap;width: 100px;overflow: hidden;text-overflow: ellipsis;margin-bottom: -4px;display: inline-block;position: relative;}   
.evant-profile .handlename {display: block;white-space: nowrap;width: 120px;overflow: hidden;text-overflow: ellipsis;margin-bottom: -4px;position: relative;}

.sponsored-ads {border: 1px solid #ddd;}
.sponsored-item img {object-fit: cover;border-radius: 5px;}
.sponsored-item p {margin: 5px 0 0 0 !important;}

.ads-table {width: 100%;border-collapse: collapse;margin: 20px 0;background-color: #fff;border-radius: 10px;overflow: hidden;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);}
.ads-table th, .earntable td { padding: 5px; text-align: left; color: #4b5c6b; font-size: 13px;}
.ads-table th { background-color: #f9fbfd; font-weight: 600; color: #6c757d;}
.ads-table td {border-top: 1px solid #f0f0f0;}
.ads-table tr:hover {background-color: #f1f5fb;}
.ads-table th, .ads-table td {text-align: center;}


.add-new-stry .avatar img {width: 50px; height: 50px;}
.card .card-body .avatar img {width: 50px; height: 50px;}
.card .card-body .avatar .w-100 {width: 100px; height: 100px;}
.createpostimg {width: 30px !important; height: 30px !important;}
.card .card-body h4 {text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.h250 img {width: 100%;}

.item .card .card-body .avatar img {width: 25px !important; height: 25px !important;}
.select2-container .select2-results__option {padding:4px 10px; font-size: 13px;}
.select2-container .select2-results__option:before {margin-right: 10px;}
.select2-container--default .select2-selection--multiple {margin-bottom: 0;}
.form-select {border: 2px solid #eee;}
.select2-container--default .select2-selection--multiple .select2-selection__choice {font-size: 13px;}
.select2-container .select2-search--inline .select2-search__field {margin-top: 0;}

.friends_pic {width: 65px !important; height: 65px !important;}
.navigation { padding-top: calc(60px + 6px);}
.chat-left, .chat-wrapper, .modal-popup-body { height:calc(100vh - 140px);}
#reportsmodal .modal-body {background: aliceblue;}
.reportstabs {
    display: flex;
}

.reportstab {
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid #ccc;
    margin-right: 5px;
}

#lineChart {width: 100% !important;}

.reportstab.active {
    background-color: #eee;
}
.chart-container { /* Style for both charts */
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    justify-content: space-around; /* Distribute charts evenly */
    width: 90%;
    margin: 20px auto;background: #fff;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #e1e1e1;
}

canvas {
    width: 100%; /* Adjust as needed */
    height: 400px;
    margin-bottom: 20px; /* Add some spacing */
}
.nav-header {height: 60px;}

/* Shoping page left panel*/
/* ===== Shop filters layout (scoped) ===== */
.shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.btn-filters{display:none}
@media (max-width:1399.98px){.btn-filters{display:inline-flex}}

#shopLayout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:24px}
@media (max-width:1399.98px){#shopLayout{grid-template-columns:1fr}}

.fp-panel{background:#eaf2fb;border:1px solid #dfe9f8;border-radius:14px;padding:18px;
  position:sticky;top:90px;max-height:calc(100vh - 110px);overflow:auto}
.fp-panel h4{margin:0 0 12px;font-size:18px}
.fp-section{margin-bottom:22px}
.fp-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fp-dot{position:relative;padding-left:16px}
.fp-dot:before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:#5b7db6}
/* --- Brand row --- */
.fp-brand{
    display:flex;                 /* use flex, not grid */
    align-items:center;
    gap:12px;
    padding:6px 4px;
    border-radius:10px;
  }
  .fp-brand:hover{ background:#f2f6fd; }
  
  .fp-name{
    flex:1 1 auto;                /* keeps label in the middle */
    color:#334155;
    font-weight:700;
    letter-spacing:.2px;
  }
  
  .fp-count{
    color:#64748b;
    font-weight:700;
    min-width:28px;
    text-align:right;
    font-variant-numeric: tabular-nums; /* aligns numbers nicely */
  }
  
  /* keep your existing .fp-radio styles; just ensure it doesn't grow */
  .fp-radio{ flex:0 0 18px; }
.fp-radio{inline-size:18px;block-size:18px;border:2px solid #d1d5db;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:#fff}
.fp-radio[data-checked="true"]{border-color:#3b82f6;box-shadow:0 0 0 4px rgba(59,130,246,.2)}
.fp-radio[data-checked="true"]::after{content:"";width:8px;height:8px;border-radius:50%;background:#3b82f6}
.fp-count{color:#64748b;font-weight:600}

.fp-pills{display:flex;flex-wrap:wrap;gap:10px}
.fp-pill{border:1px solid #e5e7eb;background:#fff;color:#111827;border-radius:999px;padding:9px 13px;font-weight:600;cursor:pointer}
.fp-pill[data-active="true"]{border-color:#c7d7f5;box-shadow:0 0 0 3px #9ec5fe}

.fp-swatches{display:flex;flex-wrap:wrap;gap:14px}
.fp-swatch{width:46px;height:46px;border-radius:50%;border:3px solid #fff;outline:2px solid #dbe7fb;cursor:pointer}
.fp-swatch[data-active="true"]{outline-color:#3b82f6;transform:scale(1.04)}

.fp-range{position:relative;padding:10px 0 6px}
.fp-track,.fp-progress{position:absolute;left:0;right:0;height:4px;border-radius:999px;top:50%;transform:translateY(-50%)}
.fp-track{background:#dbe7fb}
.fp-progress{background:#3b82f6;left:0;right:0}
.fp-range input[type=range]{position:absolute;left:0;right:0;width:100%;height:24px;background:none;margin:0;-webkit-appearance:none}
.fp-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#111827;border:3px solid #fff;box-shadow:0 0 0 2px #111827}
.fp-labels{display:flex;justify-content:space-between;color:#6b7280;font-weight:600;font-size:14px;margin-top:6px}

/* Off-canvas for filters (<= 1400px) */
.offcanvas-filter{position:fixed;inset:0;background:rgba(15,23,42,.32);display:none;z-index:1050}
.offcanvas-filter.open{display:block}
.offcanvas-filter .panel{position:absolute;left:0;top:0;bottom:0;width:min(88vw,360px);background:#eaf2fb;border-right:1px solid #dfe9f8;overflow:auto;padding:18px}
.offcanvas-filter .close{position:absolute;right:12px;top:12px;border:1px solid #e5e7eb;background:#fff;border-radius:999px;padding:6px 10px}

/* ===== Filters layout & visibility ===== */
.shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* Show the Filters button only below 1400px */
.btn-filters{display:none}
@media (max-width:1399.98px){ .btn-filters{display:inline-flex} }

/* Sidebar shows on ≥1400px, hides below */
.fp-aside{display:block}
@media (max-width:1399.98px){ .fp-aside{display:none} }

/* Two-column layout for content area */
#shopLayout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px}
@media (max-width:1399.98px){ #shopLayout{grid-template-columns:1fr} }

/* Sticky panel styling */
.fp-panel{background:#eaf2fb;border:1px solid #dfe9f8;border-radius:14px;padding:18px;
  position:sticky;top:90px;max-height:calc(100vh - 110px);overflow:auto}

/* (keep the rest of the fp-* rules you already added) */

/* Off-canvas overlay (mobile filters) */
.offcanvas-filter{position:fixed;inset:0;background:rgba(15,23,42,.32);display:none;z-index:1050}
.offcanvas-filter.open{display:block}
.offcanvas-filter .panel{position:absolute;left:0;top:0;bottom:0;width:min(88vw,360px);background:#eaf2fb;border-right:1px solid #dfe9f8;overflow:auto;padding:18px}
.offcanvas-filter .close{position:absolute;right:12px;top:12px;border:1px solid #e5e7eb;background:#fff;border-radius:999px;padding:6px 10px}

/* Actions on the right of the toolbar */
.shop-actions{display:flex;align-items:center;gap:12px}

/* Primary CTA button (desktop/tablet) */
.btn-listing{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:12px;
  font-weight:700;letter-spacing:.2px;
  text-decoration:none;
}
.btn-listing i{font-size:18px;line-height:1}

/* Mobile Floating Action Button */
.fab-listing{
  position:fixed;right:18px;bottom:90px; /* above footer */
  width:54px;height:54px;display:none;
  align-items:center;justify-content:center;
  border-radius:999px;text-decoration:none;
  box-shadow:0 10px 25px rgba(0,0,0,.18);
  z-index:1060;
}
.fab-listing i{font-size:22px}

/* Show FAB only on mobile; hide desktop CTA there */
@media (max-width:991.98px){
  .btn-listing{display:none !important}
  .fab-listing{display:flex}
}

/* Shoping page left panel*/


/* Create your listing css start old */
/* Stepper */
.cl-stepper{position:sticky;top:84px;background:#fff;z-index:2;padding:14px 16px;border-radius:14px;margin:18px 0}
.cl-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:0;padding:0;list-style:none}
.cl-step{display:flex;align-items:center;gap:10px;opacity:.6}
.cl-step.is-active,.cl-step.is-done{opacity:1}
.cl-step .cl-dot{width:26px;height:26px;border-radius:999px;border:3px solid #cbd5e1;background:#fff;display:inline-block;position:relative}
.cl-step.is-active .cl-dot{border-color:#60a5fa;box-shadow:0 0 0 6px rgba(96,165,250,.2) inset}
.cl-step.is-done .cl-dot{background:#60a5fa;border-color:#60a5fa}
.cl-label{font-weight:700;font-size:12px;color:#334155}
.cl-progress{height:4px;background:#e5e7eb;border-radius:999px;margin-top:12px;position:relative;overflow:hidden}
.cl-progress-bar{position:absolute;left:0;top:0;bottom:0;width:0;background:#60a5fa}

/* Panes */
.cl-pane{display:none}
.cl-pane.is-current{display:block}

/* Uploader */
.cl-uploader{border:2px dashed #bfd3f6;background:#eaf2fb;padding:24px;border-radius:16px;text-align:center;position:relative}
.cl-uploader input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.cl-drop-inner{pointer-events:none}
.cl-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:16px}
.cl-thumb{position:relative;border-radius:12px;overflow:hidden;background:#f8fafc}
.cl-thumb img{display:block;width:100%;height:120px;object-fit:cover}
.cl-thumb button{position:absolute;top:6px;right:6px;border:0;background:#fff;border-radius:999px;padding:6px;box-shadow:0 2px 8px rgba(0,0,0,.15)}

/* Review */
.cl-review .item{display:flex;gap:14px;padding:10px 0;border-bottom:1px dashed #e5e7eb}
.cl-review .key{width:140px;color:#64748b;font-weight:700}
.cl-review .val{flex:1}

/* Bottom nav */
.cl-nav{position:sticky;bottom:0;background:#fff;padding:12px 0;margin-top:16px;display:flex;align-items:center;gap:8px;z-index:2;border-top:1px solid #f1f5f9}
@media (max-width:575.98px){ .cl-label{display:none} }
.cl-check{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.cl-check input{accent-color:#60a5fa}
/* Create your listing css ends old */

/* Create your listing css new start*/
/* Right panel container */
.fb-sell-right{
    background:#f0f2f5;               /* fb-ish grey */
    border-radius:12px;
    min-height: calc(100vh - 220px);   /* fits under your top bar */
    display:flex; align-items:center; justify-content:center;
    padding:24px;
  }
  
  /* Empty state card */
  .fb-sell-empty{
    text-align:center;
    background:#f6f7f9;                /* slightly lighter than container */
    border:1px solid #e6e9ef;
    border-radius:14px;
    padding:48px 24px;
    width:min(760px, 92%);
    box-shadow:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  }
  
  /* Paper plane */
  .fb-sell-empty .plane{
    width:92px; height:92px; display:block; margin:0 auto 18px;
  }
  
  /* Headline */
  .fb-sell-empty .headline{
    font-weight:800; color:#606770; font-size:20px; line-height:1.35;
    margin:0 0 18px;
  }
  
  /* Create new listing button (fb style: subtle blue outline) */
  .fb-sell-empty .btn-create{
    display:inline-flex; align-items:center; gap:8px;
    font-weight:700; border-radius:999px;
    padding:10px 14px; text-decoration:none;
    border:1px solid #1877f2; color:#1877f2; background:#eef4ff;
  }
  .fb-sell-empty .btn-create:hover{ background:#e6f0ff; }
  .fb-sell-empty .btn-create i{ font-size:18px; line-height:0; }
  
  /* Tighten on small screens */
  @media (max-width:575.98px){
    .fb-sell-empty{ padding:36px 16px; }
    .fb-sell-empty .headline{ font-size:18px; }
  }

  /* Step2 */
  /* ===== Choose listing type ===== */
.fb-choose{
    background:#f0f2f5; border-radius:12px; padding:48px 16px;
    display:flex; flex-direction:column; align-items:center; min-height:calc(100vh - 220px);
  }
  .fb-choose-title{
    font-weight:800; font-size:22px; color:#111827; margin:0 0 20px;
  }
  .fb-choose-grid{
    display:flex; gap:18px; flex-wrap:wrap; justify-content:center;
  }
  .fb-choose-card{
    width:260px; background:#fff; border:1px solid #e5e7eb; border-radius:14px;
    padding:22px 18px; text-align:center; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:10px;
    box-shadow:0 1px 2px rgba(16,24,40,.06);
    transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  }
  .fb-choose-card:hover{ transform:translateY(-2px); border-color:#d1d5db; box-shadow:0 4px 10px rgba(16,24,40,.08); }
  .fb-choose-card:focus{ outline:3px solid rgba(24,119,242,.25); outline-offset:2px; }
  
  .fb-choose-icon{
    width:64px; height:64px; border-radius:999px; display:grid; place-items:center;
  }
  .fb-choose-icon svg{ width:34px; height:34px; }
  
  .fb-choose-icon.pink{ background:#f9c2d1; }
  .fb-choose-icon.teal{ background:#bdeeed; }
  .fb-choose-icon.orange{ background:#ffd3a5; }
  
  .fb-choose-head{ font-weight:800; color:#1f2937; }
  .fb-choose-sub{ color:#6b7280; font-size:13px; line-height:1.35; display:block; }
  
  @media (max-width:575.98px){
    .fb-choose{ padding:32px 12px; }
    .fb-choose-card{ width:100%; max-width:340px; }
  }

  /*Step3 */
  /* ====== STEP 3 layout ====== */
.fb-itemstep{
    display:grid; grid-template-columns:249px 1fr 360px; gap:16px;
    margin-top:12px;
  }
  @media (max-width:1199.98px){ .fb-itemstep{ grid-template-columns:1fr; } }
  
  .fbis-card{
    background:#fff; border:1px solid #e5e7eb; border-radius:14px;
    box-shadow:0 1px 2px rgba(16,24,40,.06); padding:16px;
  }
  
  /* Left column */
  .fbis-uploader{ text-align:center; padding:22px; }
  .fbis-add{
    border:1px solid #dbeafe; background:#eef4ff; color:#1877f2;
    padding:10px 14px; border-radius:999px; font-weight:700;
  }
  .fbis-add:hover{ background:#e6f0ff; }
  .fbis-hint{ color:#7b8090; margin-top:8px; }
  
  .fbis-thumbs{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-top:12px; }
  .fbis-thumbs img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; border:1px solid #e5e7eb; }
  
  .fbis-callout{ display:flex; align-items:center; gap:12px; }
  .fbis-callout .ico{ width:36px; height:36px; border-radius:8px; background:#eef2f7; }
  .fbis-callout .txt{ flex:1; color:#4b5563; font-weight:600; }
  .fbis-try{ border-radius:10px; border:1px solid #d1d5db; background:#f8fafc; padding:6px 10px; font-weight:700; }
  
  .fbis-label{ font-weight:800; }
  .fbis-sub{ color:#6b7280; margin-bottom:8px; }
  
  .fbis-control{ display:block; margin-top:10px; }
  .fbis-control > span{ display:block; font-size:12px; color:#6b7280; margin-bottom:4px; }
  .fbis-control input{
    width:100%; border:1px solid #d1d5db; border-radius:10px; padding:10px 12px; font-weight:600;
    background:#fff;
  }
  .fbis-pricewrap{ display:flex; align-items:center; gap:6px; }
  .fbis-pricewrap .rs{ font-weight:800; color:#374151; }
  
  .fbis-progress{ height:6px; background:#eef2f7; border-radius:999px; margin:12px 0; overflow:hidden; }
  .fbis-progress .bar{ height:100%; width:0; background:#60a5fa; transition:width .2s ease; }
  .aside-height-scroll {max-height: 490px;}

  .fbis-left .fbis-card {margin-bottom: 20px;}
  .fbis-sec-caption {font-weight: bold; font-size: 15px;}
  .fbis-small {font-size: 13px;}
  /* header row */
.fbis-headrow{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.fbis-kicker{font-size:12px;color:#6b7280}
.fbis-h1{font-weight:800;margin:0}

/* seller chip */
.fbis-sellerchip{display:flex;align-items:center;gap:10px}
.fbis-sellerchip .chip-avatar{width:36px;height:36px;border-radius:999px}
.chip-name{font-weight:800}
.chip-sub{color:#6b7280;font-size:12px}
.linklike{background:transparent;border:0;color:#1877f2;font-weight:700;cursor:pointer}

/* selects */
.fbis-select{position:relative}
.fbis-select select{width:100%;border:1px solid #d1d5db;border-radius:10px;padding:10px 36px 10px 12px;font-weight:600;background:#fff;appearance:none}
.fbis-select .chev{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#6b7280}

/* 2-col small grid */
.fbis-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* textarea */
.fbis-textarea{width:100%;border:1px solid #d1d5db;border-radius:10px;padding:10px 12px;font-weight:600;min-height:96px;resize:vertical;font-size: 12px;font-weight: normal;}

/* footnote */
.fbis-footnote{color:#6b7280;font-size:12px;margin:10px 8px}
.fbis-footnote a{color:#1877f2;font-weight:700}
  
  /* Center canvas */
  .fbis-canvas-head{ font-weight:800; color:#1f2937; margin-bottom:8px; }
  .fbis-canvas-body{ background:#f0f2f5; height:520px; border-radius:10px; display:grid; place-items:center;overflow: hidden;}
  .fbis-canvas-body img {width: 100%; height: auto; object-fit: contain; max-height: 520px;}
  .fbis-canvas-empty h3{ font-weight:800; color:#5b6777; text-align:center; }
  .fbis-canvas-empty p{ color:#6b7280; max-width:520px; text-align:center; margin:6px auto 0; }
  
  /* Right preview card */
  .fbis-listing .l-title{ font-weight:800; color:#111827; }
  .fbis-listing .l-price{ font-weight:800; color:#111827; margin-top:2px; }
  .fbis-listing .l-meta{ color:#6b7280; font-size:12px; margin-top:2px; }
  .fbis-listing .l-hr{ border:none; border-top:1px solid #eef2f7; margin:12px 0; }
  .fbis-listing .l-section{ font-weight:800; color:#1f2937; display:flex; }
  .fbis-listing .l-desc{ color:#6b7280; margin-top:6px; }
  .fbis-listing .l-sellerrow{ display:flex; align-items:center; gap:10px; margin-top:10px; }
  .fbis-listing .l-avatar{ width:36px; height:36px; border-radius:999px; }
  .fbis-listing-footer{ padding-top:10px; }

  /* A11y helper */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}

.seller-contact{
  background:#fff;border:1px solid #e5e7eb;border-radius:10px;
  padding:12px;margin-top:14px;
}
.seller-contact__head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.seller-contact__dot{width:8px;height:8px;border-radius:9999px;background:#1877f2;}
.seller-contact__title{font-weight:700;color:#111827;font-size:14px;}
.seller-contact__form textarea{
  width:100%;min-height:88px;resize:vertical;
  border:1px solid #d1d5db;border-radius:8px;
  padding:10px 12px;font-size:14px;outline:none;background:#fff;
}
.seller-contact__form textarea:focus{border-color:#1877f2;box-shadow:0 0 0 3px rgba(24,119,242,.15);}
.seller-contact__footer{display:flex;align-items:center;gap:12px;margin-top:8px;}
.seller-contact__count{font-size:12px;color:#6b7280;}
#btnSendMsg{
  margin-left:auto;padding:10px 16px;border:0;border-radius:8px;
  background:#1877f2;color:#fff;font-weight:700;cursor:pointer;
}
#btnSendMsg:disabled{opacity:.5;cursor:not-allowed;}

.mp-inbox .mp-card{border:1px solid rgba(0,0,0,.06);border-radius:14px;box-shadow:0 6px 18px rgba(16,24,40,.06)}
  
.mp-listing-thumb{width:72px;height:72px;border-radius:12px;object-fit:cover;border:1px solid rgba(0,0,0,.08)}
  
.mp-title{ font-weight: 700; }
.mp-price{ font-size: 20px; font-weight: 800; }
  
.mp-search{ padding-left: 36px; }
.mp-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.55}
  
.mp-list{max-height:520px;overflow:auto}
  
.mp-person{width:100%;display:flex;gap:12px;align-items:center;padding:12px 14px;border:0;background:0 0;text-align:left;border-bottom:1px solid rgba(0,0,0,.06);transition:background .15s}
.mp-person:hover{ background: rgba(0,0,0,.03); }
.mp-person.active{ background: rgba(13,110,253,.06); }
  
.mp-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover}
.mp-avatar-lg{width:44px;height:44px;border-radius:50%;object-fit:cover}
  
.mp-name{ font-weight: 700; }
.mp-time{ font-size: 12px; opacity: .7; }
  
.mp-snippet{ font-size: 12px; opacity: .75; max-width: 220px; }
  
.mp-chip{font-size:11px;padding:2px 8px;border-radius:999px;white-space:nowrap}
.mp-chip-msg{ background: rgba(13,110,253,.10); color: #0d6efd; }
.mp-chip-int{ background: rgba(25,135,84,.10); color: #198754; }
  
.mp-unread{min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:#0d6efd;color:#fff;font-size:12px;font-weight:700}
  
.mp-dot-online{width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.15)}
  
.mp-chat .mp-thread{height:520px;overflow:auto;padding:16px;background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,0))}
  
.mp-msg{ display: flex; flex-direction: column; margin-bottom: 10px; max-width: 78%; }
.mp-msg-me{ margin-left: auto; align-items: flex-end; }
.mp-msg-them{ margin-right: auto; align-items: flex-start; }
  
.mp-bubble{padding:10px 12px;border-radius:14px;border:1px solid rgba(0,0,0,.06);background:#fff}
.mp-msg-me .mp-bubble{background:#0d6efd;color:#fff;border-color:rgba(13,110,253,.35)}
  
.mp-msg-time{ font-size: 11px; opacity: .6; margin-top: 4px; }
  
@media (max-width: 991px){
    .mp-list{ max-height: 360px; }
    .mp-chat .mp-thread{ height: 420px; }
}
/* Create your listing css new end*/

@media (max-width: 768px) { /* Responsive adjustments */
    canvas {
        width: 90%; /* Make charts full width on smaller screens */
    }
}

@media (max-width:768px) {
    .card-body #share_profile {margin-bottom: 10px; position: relative; left: -50%; margin-left: 180px;}
}


@media screen and (max-width: 480px)
{
    .post-newmeta {padding-right: 0;width: 100%;}
    .post-new .c-form {margin-top: 15px;padding-left: 0;width: 100%;}
}
@media (max-width: 991.98px)
{
    /*.nav-header {position: unset !important;}*/
}
@media (min-width: 992px) {
    .main-content {
        padding-top: 60px;
    }
}