/* =========================================
   FIVERR-STYLE PREMIUM GLOBAL CSS
   ========================================= */

:root {
    --fiverr-green: #1DBF73;
    --fiverr-green-hover: #19a463;
    --fiverr-black: #404145;
    --fiverr-grey: #62646a;
    --fiverr-light-grey: #dadbdd;
    --fiverr-off-white: #f7f7f7;
    --font-heading: 'Outfit', 'Inter', sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --card-shadow: 0 0.5px 4px rgba(0,0,0,0.12);
    --card-shadow-hover: 0 8px 24px rgba(0,0,0,0.12);
    --border-radius: 8px;
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Global Typography */
body {
    font-family: var(--font-body) !important;
    color: var(--fiverr-black);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .section-title, .widget-title {
    font-family: var(--font-heading) !important;
    font-weight: 700;
}

/* =========================================
   BUTTONS & INPUTS
   ========================================= */

.btn-primary, .cmn-btn, .btn-submit {
    background-color: var(--fiverr-green) !important;
    border-color: var(--fiverr-green) !important;
    color: #fff !important;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 6px;
    transition: var(--transition);
}

.btn-primary:hover, .cmn-btn:hover, .btn-submit:hover {
    background-color: var(--fiverr-green-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(29, 191, 115, 0.3);
}

.form-control, .form-select {
    border: 1px solid var(--fiverr-light-grey) !important;
    border-radius: 6px !important;
    padding: 10px 16px !important;
    font-size: 15px !important;
    transition: var(--transition) !important;
}

.form-control:focus, .form-select:focus {
    border-color: var(--fiverr-green) !important;
    box-shadow: 0 0 0 3px rgba(29, 191, 115, 0.1) !important;
}

/* =========================================
   CARDS (Projects, Freelancers)
   ========================================= */

/* Generic Card Fix */
.single-project-item, 
.single-freelancer-item, 
.single-service-item,
.card {
    border: 1px solid var(--fiverr-light-grey);
    border-radius: 8px;
    transition: var(--transition);
    background: #fff;
    overflow: hidden;
}

.single-project-item:hover, 
.single-freelancer-item:hover, 
.single-service-item:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-4px);
    border-color: var(--fiverr-green);
}

/* Thumbnails */
.single-project-item .thumb, 
.single-freelancer-item .thumb {
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.single-project-item .thumb img, 
.single-freelancer-item .thumb img {
    transition: transform 0.4s ease;
}

.single-project-item:hover .thumb img, 
.single-freelancer-item:hover .thumb img {
    transform: scale(1.05);
}

/* =========================================
   BADGES & TAGS
   ========================================= */

.badge, .tag {
    font-family: var(--font-body);
    font-weight: 600;
    border-radius: 4px;
}

.badge-success {
    background-color: rgba(29, 191, 115, 0.1) !important;
    color: var(--fiverr-green) !important;
}

/* =========================================
   SECTIONS (Spacing)
   ========================================= */

.section-padding, .pat-100, .pab-100 {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

/* =========================================
   SPECIFIC FIXES
   ========================================= */

/* Filter Sidebar */
.shop-sidebar-content {
    background: #fff;
    border: 1px solid var(--fiverr-light-grey);
    border-radius: 8px;
    padding: 24px;
}

.widget-title {
    font-size: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--fiverr-light-grey);
    padding-bottom: 10px;
}

/* Pagination */
.pagination .page-item .page-link {
    color: var(--fiverr-black);
    border-radius: 4px;
    margin: 0 4px;
    border: 1px solid var(--fiverr-light-grey);
}

.pagination .page-item.active .page-link {
    background-color: var(--fiverr-green);
    border-color: var(--fiverr-green);
    color: #fff;
}