/* Theme Information */
Theme Name: RiseFundr
Theme URI: http://yourwebsite.com/rise-fundr
Author: Your Name
Author URI: http://yourwebsite.com
Description: A modern crowdfunding platform for all
Version: 1.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: risefundr

/* General Styles */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff; /* White background */
    margin: 0;
    padding: 0;
    color: #333;
}

/* Header & Footer Colors */
header, footer {
    background-color: #2F855A; /* Greenery */
}

header a, footer a {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 600;
}

/* Buttons */
button {
    font-weight: 600;
    border-radius: 25px;
}

button:hover {
    background-color: #F97316; /* Orange Hover */
}

/* Login & Register Styles */
input[type="text"], input[type="email"], input[type="password"] {
    padding: 12px 20px;
    border-radius: 25px;
    border: 1px solid #ddd;
    width: 100%;
    margin-bottom: 16px;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus {
    border-color: #2F855A;
    outline: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    header .container {
        flex-direction: column;
        align-items: center;
    }

    header nav ul {
        flex-direction: column;
        gap: 10px;
    }
}

/* Add this to your style.css */

/* Set the white background for the whole page */
body {
    background-color: white;
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3Cpath%20d%3D%22M0%2010C100%2020%20200%20100%20200%20100C200%20100%20100%20150%200%20150%22%20stroke%3D%22%234CAF50%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20opacity%3D%220.1%22%20/%3E%3Cpath%20d%3D%22M0%2020C100%2030%20200%20200%20200%20200C200%20200%20100%20250%200%20250%22%20stroke%3D%22%234CAF50%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20opacity%3D%220.1%22%20/%3E%3Cpath%20d%3D%22M0%2030C100%2040%20200%20300%20200%20300C200%20300%20100%20350%200%20350%22%20stroke%3D%22%234CAF50%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20opacity%3D%220.1%22%20/%3E%3C/svg%3E');
    background-size: 100% 100%;
    position: relative;
}

/* Exclude header and footer from the scribble background */
header, footer {
    background-color: #ffffff; /* White background for header and footer */
    position: relative;
    z-index: 1; /* Ensure header/footer stays on top of the background */
}

/* Apply some padding or margins to make sure content is well-spaced */
main {
    padding-top: 20px;
    padding-bottom: 20px;
    z-index: 0; /* Ensure content is below header/footer */
}

/* Circle Design */
.roadmap-step {
    text-align: center;
}

.circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2C8F4E, #FF7F00); 
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

.step-title {
    font-size: 12px;
    color: #333;
}

.roadmap-line {
    height: 2px;
    background-color: #FF7F00;
    width: 50px;
    margin-top: 25px;
    margin-bottom: 25px;
}

.roadmap-line:last-child {
    display: none;
}

/* Profile Picture Styling */
.profile-avatar {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 5px solid transparent;
    background-image: linear-gradient(135deg, #2C8F4E, #FF7F00); /* Gradient Border */
    margin: 0 auto;
}

/* Verified Checkmark (Green) */
.verified-checkmark {
    display: inline-block;
    margin-top: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #2C8F4E; /* Dark Green */
    color: white;
    font-size: 16px;
    line-height: 18px;
}

/* Non-Verified Checkmark (Gray) */
.verified-checkmark.not-verified {
    background-color: #B0B0B0; /* Gray */
}

/* User Profile Text */
.user-profile h3 {
    font-size: 24px;
    margin-top: 10px;
}

.user-profile p {
    font-size: 16px;
    margin-top: 5px;
    color: #555;
}

/* This will center the profile picture container */
.profile-picture-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 25vh; /* Ensures it takes the full height of the viewport */
}

.profile-picture-container {
    width: 150px; /* Set the size of the circular container */
    height: 150px; /* Same height as the width to create a circle */
    border-radius: 50%; /* Make the container circular */
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to bottom right, #006400, #ff7f00); /* Dark greenish to orange gradient */
    padding: 5px; /* Add some padding for the border effect */
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional shadow to make it stand out */
}

.profile-picture-container img {
    width: 100%; /* Make the image fill the container */
    height: 100%;
    object-fit: cover; /* Ensure the image covers the entire circular area */
    border-radius: 50%; /* Keep the image circular */
}

/* Style for the bio container */
.user-bio-wrapper {
    font-size: 16px; /* Adjust font size */
    text-align: center; /* Center the text */
    color: #333; /* Set text color */
    margin-top: 20px; /* Space between sections */
}

/* Optional: Add background and border */
.user-bio-wrapper p {
    background: #f4f4f4;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-width: 90%; /* Make sure the bio doesn’t stretch too wide */
    margin: 0 auto; /* Center the bio block */
    font-style: italic; /* Style bio text */
}
<style>
  .gradient-border {
      position: relative;
      border: none; /* Remove default border */
      border-radius: 8px; /* Rounded corners */
      background-color: #fff; /* Keep background white */
      padding: 10px;
      font-size: 16px;
      color: #333;
  }

  .gradient-border::before {
      content: "";
      position: absolute;
      top: -2px; left: -2px;
      right: -2px; bottom: -2px;
      z-index: -1;
      border-radius: 8px;
      background: linear-gradient(to right, #2f4f2f, #ffa500);
  }
</style>

<textarea id="short_bio" name="short_bio" class="form-control gradient-border" rows="4"></textarea>

.profile-img {
    width: 120px;
    height: 120px;
    border: 4px solid orange;
}

.card {
    border-radius: 10px;
}

.list-group-item {
    border: none;
    padding: 10px;
}

.modal-content img {
    max-width: 100%;
    border-radius: 10px;
}

<style>
    /* Apply Poppins font */
    body {
        font-family: 'Poppins', sans-serif;
    }
    
    .profile-card {
        font-family: 'Poppins', sans-serif;
    }
    
    .profile-name {
        font-weight: 600;
        font-size: 2rem;
    }
    
    .profile-subtitle, .bio-content p, .list-unstyled li {
        font-weight: 400;
        font-size: 1rem;
    }
</style>

.favorite-btn {
    background: linear-gradient(45deg, #006400, #ff8c00) !important; /* Dark Green to Orange Gradient */
    color: white !important; /* Ensure text is visible */
    padding: 10px 20px;
    border: none !important;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transition: background 0.3s ease;
}

.favorite-btn:hover {
    background: linear-gradient(45deg, #004d00, #ff7000) !important; /* Slightly darker on hover */
}

.profile-picture-circle {
    width: 40px; /* Set the size of the circle */
    height: 40px; /* Set the size of the circle */
    border-radius: 50%; /* Make it circular */
    overflow: hidden; /* Hide any overflow from the image */
    display: inline-block;
    margin-left: 15px; /* Adjust space between the profile and other buttons */
}

.profile-picture-circle img {
    width: 100%; /* Ensure the image fills the circle */
    height: 100%; /* Ensure the image fills the circle */
    object-fit: cover; /* Maintain aspect ratio while covering the area */
}

.profile-picture-circle {
    width: 50px; /* Adjust size as needed */
    height: 50px; /* Adjust size as needed */
    border-radius: 50%; /* Makes it a circle */
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #2F855A, #FF8C00); /* Dark greenish and orange-ish gradient */
    overflow: hidden;
    border: 5px solid #fff; /* Thicker white border for emphasis */
}

.profile-picture-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the circle without stretching */
    border-radius: 50%; /* Keeps the image circular */
}

.auth-buttons {
    display: flex;
    align-items: center;
    gap: 20px; /* Adjust as needed */
}

.profile-picture-circle-container {
    display: flex;
    justify-content: flex-end; /* Aligns to the far right */
    margin-left: auto; /* Pushes it to the far right */
    align-items: center;
}

.profile-picture-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #2F855A, #FF8C00); /* Add color gradient */
    overflow: hidden;
    border: 3px solid #fff;
}

.profile-picture-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.icon-btn {
    background: linear-gradient(135deg, #2F855A, #FF8C00);
    border-radius: 50%;
    padding: 8px; /* Reduced padding for smaller button */
    margin-left: 10px;
    color: #fff;
    font-size: 1.2rem; /* Smaller font size */
    text-align: center;
    transition: all 0.3s ease-in-out;
}

.icon-btn i {
    font-size: 1.4rem; /* Smaller icon size */
}

/* General Body Styling */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #fff;
}

/* Navbar Styling */
.navbar {
    background-color: #ffffff;
    padding: 10px 0;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

/* Logo Styling */
.navbar-brand {
    font-weight: bold;
    color: #165A4A;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Main Menu Links */
.navbar-nav .nav-link {
    font-weight: 600;
    color: #333;
    padding: 10px 15px;
    transition: color 0.3s ease-in-out;
}

.navbar-nav .nav-link:hover {
    color: #165A4A;
}

/* Search Bar */
.search-bar {
    background: linear-gradient(135deg, #2F855A, #FF8C00);
    border-radius: 25px;
    padding: 8px 20px;
    width: 300px;
    color: #fff;
    border: 2px solid #276749;
    outline: none;
    transition: all 0.3s ease-in-out;
}

.search-bar::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.search-bar:focus {
    border-color: #e67700;
}

/* Stylish Campaign Categories Menu */
nav.campaign-menu {
    background-color: #ffffff; /* White background */
    padding: 10px 0;
    border-top: 2px solid #165A4A; /* Dark Greenish Border at the top */
    border-bottom: 2px solid #165A4A; /* Dark Greenish Border at the bottom */
}

nav.campaign-menu ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
}

nav.campaign-menu ul li {
    margin: 5px 15px;
}

nav.campaign-menu ul li a {
    text-decoration: none;
    color: #165A4A; /* Dark Greenish Text */
    font-weight: bold;
    padding: 8px 15px;
    border-radius: 20px;
    border: 2px solid #165A4A; /* Dark Greenish Border */
    background-color: #ffffff; /* White Background */
    transition: all 0.3s ease-in-out;
}

nav.campaign-menu ul li a:hover {
    background-color: #165A4A; /* Dark Greenish on Hover */
    color: #ffffff; /* White Text on Hover */
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .search-bar {
        width: 250px;
    }
}

@media (max-width: 768px) {
    /* Ensure the header maintains the desktop layout */
    .navbar-brand {
        font-size: 1.5rem;
    }

    .navbar-nav {
        flex-direction: row;
        justify-content: center;
    }

    .search-bar {
        width: 200px;
    }

    .navbar-toggler {
        display: none; /* Hide toggler since the menu remains visible */
    }

    /* Campaign menu becomes scrollable */
    nav.campaign-menu ul {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        padding: 10px;
        justify-content: flex-start;
    }

    nav.campaign-menu ul li {
        flex: 0 0 auto;
    }

    nav.campaign-menu ul li a {
        font-size: 14px;
        padding: 6px 12px;
    }
}

.unread-count {
    background-color: red; /* Background color of the bubble */
    color: white;           /* Text color */
    padding: 3px 8px;       /* Padding inside the bubble */
    border-radius: 50%;     /* Circle shape */
    font-size: 14px;        /* Font size */
    position: absolute;     /* Absolute positioning */
    top: -5px;              /* Position it above the icon */
    right: -5px;            /* Position it to the right */
}

.icon-btn {
    position: relative; /* Make sure the bubble is correctly positioned */
}


/* If the sidebar is causing the content to be narrow, adjust it */
body.single-post .sidebar {
    display: none; /* Or adjust its width if you want to keep it visible */
}

/* Alternatively, you can adjust the content and sidebar to take more space */
body.single-post .col-md-8 {
    width: 70%; /* Increase this if you want the content area wider */
}

body.single-post .col-md-4 {
    width: 30%; /* Decrease sidebar width if needed */
}

/* Universal box-sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent horizontal scrollbars */
body, html {
  overflow-x: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Responsive container for header */
.header-container {
  max-width: 100%;
  width: 100%;
  overflow-x: hidden;
}

/* Prevent elements from overflowing */
.header-container * {
  max-width: 100%;
  flex-wrap: wrap;
}

.favorite-toggle:hover {
    transform: scale(1.1);
    transition: 0.2s ease;
  }
  
  /* 1. Make the outer wrapper go side-to-side */
.risefundr-wide-container {
    width: 95% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 40px 0;
}

/* 2. Force the 4-column grid */
.home-style-grid-match ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Style the cards and fix the image shape */
.home-style-grid-match li.product {
    width: 100% !important;
    margin: 0 !important;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.home-style-grid-match li.product img {
    aspect-ratio: 16 / 10 !important; /* Wide landscape */
    object-fit: cover !important;
}

/* 4. Kill the sorting dropdown and result text globally for this page */
.woocommerce-ordering, 
.woocommerce-result-count {
    display: none !important;
}


/* 1. The Search Wrapper (The Container) */
.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1); /* Semi-transparent glass look */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    padding: 5px 15px;
    overflow: hidden; /* This is vital: it clips the flare so it stays inside the bar */
    backdrop-filter: blur(10px); /* Gives it that high-end frosted glass feel */
}

/* 2. The Glass Flare (The "Moving Light") */
.search-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%; /* Start off-screen to the left */
    width: 40%;   /* Width of the light streak */
    height: 100%;
    
    /* The Gradient "Light" Effect */
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.05) 20%, 
        rgba(255, 255, 255, 0.5) 50%, 
        rgba(255, 255, 255, 0.05) 80%, 
        rgba(255, 255, 255, 0) 100%
    );
    
    transform: skewX(-30deg); /* Angles the light for a more natural look */
    pointer-events: none;     /* Makes sure you can still click the input */
    z-index: 1;
    
    /* Animation: Sweeps across every 6 seconds */
    animation: glass-flare 6s infinite ease-in-out;
}

/* 3. The Animation Keyframes */
@keyframes glass-flare {
    0% {
        left: -150%;
    }
    60% {
        left: 150%; /* Moves from left to right in the first 1.2 seconds */
    }
    100% {
        left: 150%; /* Stays hidden for the remaining 4.8 seconds for a "glint" effect */
    }
}

/* 4. Ensure your Input and Button sit above the flare */
.hero-search-bar {
    position: relative;
    z-index: 2;
    background: transparent !important;
    border: none !important;
    color: white !important;
    box-shadow: none !important;
}

.search-submit-btn {
    position: relative;
    z-index: 2;
}


/* --- RiseFundr Global Archive Layout Container Breakout --- */

/* Force all common WordPress theme container structures wide on category views */
.archive.tax-product_cat .container,
.archive.tax-product_cat .site-main,
.archive.tax-product_cat .content-wrap,
.archive.tax-product_cat #primary,
.archive.tax-product_cat #main {
    max-width: 1440px !important; 
    width: 95% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Ensure the theme wrapper row stops clamping element positioning */
.archive.tax-product_cat .row {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Force WooCommerce default item list to stretch 100% horizontally */
.archive.tax-product_cat ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    justify-content: start !important;
}

/* Clear native WooCommerce structural alignment blocks that override your classes */
.archive.tax-product_cat ul.products::before,
.archive.tax-product_cat ul.products::after {
    display: none !important;
}

/* Ensure the layout classes inside your content-product file scale wide */
.archive.tax-product_cat ul.products li.product {
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-bottom: 30px !important;
}