* {
    box-sizing: border-box;
    font-family: 'DM Sans', sans-serif;
}

body{
    background: #f5f5f5 !important;
}

/* Chrome, Edge, Safari */
.content-scroll::-webkit-scrollbar{
    width:8px;
}

.content-scroll::-webkit-scrollbar-track{
    background:transparent;
}

.content-scroll::-webkit-scrollbar-thumb{
    background:#dbdbdb;
    border-radius:20px;
    border:2px solid transparent;
    background-clip:content-box;
}

.content-scroll::-webkit-scrollbar-thumb:hover{
    background:#bcbcbc;
    border:2px solid transparent;
    background-clip:content-box;
}

.sidebar-menu{
    flex: 1;
    padding: 0 12px;
    overflow-y: auto;
    scroll-behavior: smooth;

    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #cfcfcf transparent;
}

.sidebar-menu::-webkit-scrollbar{
    width: 0;
}

.sidebar-wrapper:hover .sidebar-menu::-webkit-scrollbar{
    width: 6px;
}

.sidebar-wrapper:hover .sidebar-menu::-webkit-scrollbar-thumb{
    background: #d4d4d4;
    border-radius: 20px;
}

/* ==========================================
   Sidebar Component Styles
   ========================================== */
.main-layout{
    min-height:calc(100vh - 16px);
    display:flex;
    align-items:center;
}

.main-layout .row{
    width:100%;
}

.layout-column{
    height:calc(100vh - 16px);
}

/* Main Container */
.sidebar-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #ffffff;
    border: 1px solid #ececec;
    border-radius: 16px;
    overflow: hidden;
}

/* Logo Section */
.sidebar-logo img {
    max-width: 90px;
    height: auto;
}

/* Navigation Menu Container */
.sidebar-menu{
    flex:1;
    overflow-y:auto;
    padding:0 12px;
    min-height:0;
}

/* Navigation Items */
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;

  font-size: 14px;
  font-weight: 500;
  color: #444444;
  text-decoration: none;

  background-color: transparent;
  border: 1px solid #ececec;
  border-radius: 10px;
  transition: all 0.25s ease;
}

.sidebar-icon{
    width:16px;
    height:16px;
    object-fit:contain;
    flex-shrink:0;
    transition:.25s ease;
}

/* Hover & Active States */
.sidebar-item:hover {
  color: #007bff;
  background-color: #f5f7fa;
}

.sidebar-item:hover .sidebar-icon,
.sidebar-item.active .sidebar-icon{
    filter: brightness(0) saturate(100%)
            invert(39%) sepia(95%) saturate(2584%)
            hue-rotate(202deg) brightness(101%) contrast(102%);
}

.sidebar-item.active {
  color: #007bff;
  background-color: #f5f7fa;
  border-color: #dce8ff;
}

/* Advertisement Card Section */
.sidebar-ad {
  padding: 14px;
  margin-top: auto; /* Pushes ad card to the bottom if menu is short */
}

.sidebar-ad-card {
  padding: 24px;
  text-align: center;
  border: 1px solid #003057;
  border-radius: 8px;
  background-color: #ffffff;
}

.sidebar-ad-card h6 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #003057;
  letter-spacing: -5.5%;
}

.sidebar-ad-card p {
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 16px;
  color: #161616;
}


/*MIAN CONTENT SECTION**/

.main-content{
    background:#fafafa;
    border:1px solid #ececec;
    border-radius:18px;
    height:100%;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.content-header{
    display:flex;
    align-items:center;
    gap:18px;
    flex-shrink:0;
    padding:24px;
    justify-content:flex-end;
}

.btn.menu-btn{
    width:44px;
    height:44px;
    border-radius:12px;
    border:1px solid #ECECEC;
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-shrink:0;
}

.btn.menu-btn i{
    font-size:24px;
}

.search-wrapper{
    flex:1;
    position:relative;
}

.search-wrapper{
    width:100%;
    max-width:720px;
    position:relative;
}

.search-wrapper input{
    height:46px;
    border-radius:10px;
    padding-left:20px;
    padding-right:55px;
    border:2px solid #ABB7C2;
}

.search-btn{
    position:absolute;
    right:6px;
    top:50%;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    border:none;
    border-radius:50%;
    background:#00AEEF;
    color:#fff;
}

.profile-btn{
    width:46px;
    height:46px;
    border:none;
    background:transparent;
    padding:0;
    border-radius:50%;
    overflow:hidden;
    flex-shrink:0;
    cursor:pointer;
    border:2px solid #ABB7C2;
}

.content-scroll{
    flex:1;
    overflow-y:auto;
    min-height:0;
}

.section-title{
    color: #003057;
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.hero-section{
    padding:0 24px 24px;
    flex-shrink:0;
}

.card.hero-card{
    min-height: 280px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.00) 28.27%), linear-gradient(90deg, #00324E 0%, #000B11 100%);
    border-radius: 24px;
}

.hero-card .card-body{
    min-height:250px;
    display:flex;
    align-items:center;
}

.hero-title{
    color: #ffffff;
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.hero-text{
    color: #ffffff;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 0.5rem;
    max-width: 720px;
}

.hero-image{
    max-height:160px;
}


/* Filter Section */

.filter-section{
    padding:0px 48px;
    flex-shrink:0;
}

/* Group */

.filter-group{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
}

/* Label */

.filter-label{
    font-size:14px;
    font-weight:500;
    color:#555;
    margin-right:4px;
}

/* Buttons */

.btn.filter-btn{
    border:1px solid #d9d9d9;
    border-radius:10px;
    background:#fff;
    color:#444;
    font-size:13px;
    font-weight:500;
    padding:8px 16px;
    transition:.25s;
}

.btn.filter-btn:hover{
    border-color:#0ea5e9;
    color:#0B6BFF;
}

.btn.filter-btn.active{
    background:#f5f5f5;
    border-color:#0B6BFF;
    color:#0B6BFF;
}



.template-section{
    padding: 24px;
}

.card.template-card{
    border:1px solid rgba(16,16,16, 0.2);
    border-radius:28px;
    padding: 16px;
    overflow:hidden;
    transition:.3s;
    cursor:pointer;
    background:#fff;
}

.card.template-card:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.card-img-top.template-image{
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
    border-radius: 12px;
}

.template-card .card-body{
}

.template-title{
    font-size:18px;
    font-weight:600;
    color:#222;
    line-height:1.4;
    margin-bottom:12px;
}

.template-meta{
    display:flex;
    align-items:center;
    gap:15px;
    font-size:14px;
    color:#777;
}

.template-meta i{
    margin-right:6px;
}

@media (max-width:767px){

    .content-header{
        padding:16px;
        gap:12px;
    }

    .hero-section{
        padding:0 16px 16px;
    }

    .filter-section{
        padding:0 16px 16px;
    }

    .template-section{
        padding:0 16px 16px;
    }

}


/**template detail**/

.modal-content.content-section{
    padding: 32px;
    border-radius: 16px;
}

@media (max-width:767px){
    .modal-content.content-section{
        padding: 16px;
    }
}

.preview-image-card{
    background:#fff;
    border:1px solid #ececec;
    border-radius:18px;
    overflow:hidden;
}

.download-panel{
    background:#fff;
    border:1px solid #ececec;
    border-radius:18px;
    padding:24px;
}

.thumbnail-gallery{
    scrollbar-width:thin;
}

.thumbnail-image{
    width:150px;
    height:auto;
    border-radius:12px;
    border:2px solid transparent;
    cursor:pointer;
    transition:.25s;
    flex-shrink:0;
}

.thumbnail-image:hover{
    border-color:#0d6efd;
}

.thumbnail-image.active{
    border-color:#0d6efd;
}
#mainPreviewImage{
    transition:.3s ease;
}

.modal-title{
    font-size:28px;
    font-weight:600;
    color:#161616;
    line-height:1.4;
}

.btn.template-download-btn{
    border-radius: 8px;
    padding: 14px 24px;
    font-weight: 600;
    background: #0B6BFF;
    font-size: 18px;
}

.download-icon{
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.btn.preview-btn, .btn.preview-btn:hover{
    border-radius: 8px;
    border: 1px solid rgba(16,16,16, 0.5);
    padding: 14px 24px;
    font-weight: 600;
    background: #ffffff;
    font-size: 18px;
    color: #1a1a1a;
}

.template-feature-list li{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #444;
}

.feature-icon{
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}


/* ==============================
   Template Navigation Tabs
================================= */

.template-tabs{
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    gap: 25px;
    align-items: center;
    background: #fff;
    padding: 18px 0;
    border-bottom: 1px solid #ececec;
}

/* Tab Button */

.template-tab{
    position: relative;
    border: none;
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    color: #777;
    white-space: nowrap;
    transition: .25s ease;
}

.template-tab:hover{
    color: #0d6efd;
}

.template-tab.active{
    color: #0d6efd;
}

.template-tab.active::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -18px;
    width: 100%;
    height: 3px;
    border-radius: 50px;
    background: #0d6efd;
}

/* ==============================
   Sections
================================= */

.template-detail-section{
    scroll-margin-top: 90px;
    padding-top: 25px;
    margin-bottom: 70px;
}
.template-tabs{
    overflow-x: auto;
    scrollbar-width: none;
}

.template-tabs::-webkit-scrollbar{
    display: none;
}

/* ==========================================
   Modal Scrollbar
   ========================================== */

#templateModalBody{
    scrollbar-width: thin;               /* Firefox */
    scrollbar-color: #bfc6d1 transparent;
}

/* Chrome, Edge, Safari */
#templateModalBody::-webkit-scrollbar{
    width: 8px;
}

#templateModalBody::-webkit-scrollbar-track{
    background: transparent;
    border-radius: 10px;
}

#templateModalBody::-webkit-scrollbar-thumb{
    background: #c6ccd6;
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background .25s ease;
}

#templateModalBody::-webkit-scrollbar-thumb:hover{
    background: #9aa4b2;
    background-clip: content-box;
}

#templateModalBody::-webkit-scrollbar-corner{
    background: transparent;
}

.modal-content.download-modal{
    padding: 24px;
    border-radius: 16px;
}

.download-title{
    color: #161616;
    font-size: 2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2.5rem; /* 140% */
    letter-spacing: -0.05rem;
    cursor: default;
}


/* pagination */
.pagination {
    gap: 8px;
}

.page-link {
    min-width: 40px;
    height: 40px;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 10px;
    background: #F1F3F6;
    color: #64748B;
    font-weight: 500;
    font-size: 15px;
    transition: 0.2s;
}

.page-link:hover {
    background: #E5E8ED;
    color: #1E293B;
}

.page-item:first-child .page-link,
.page-item:last-child .page-link {
    border-radius: 10px !important;
}

.page-item.active .page-link {
    background: #2563EB;
    color: #fff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.page-item.disabled .page-link {
    background: transparent;
    color: #CBD5E1;
    pointer-events: none;
}

.page-item.ellipsis .page-link {
    background: transparent;
    pointer-events: none;
    color: #94A3B8;
}