body {
    /* font-family: 'Helvetica Neue', sans-serif; */
    color:   rgb(51, 51, 51) !important;
}





.navbar-dark .navbar-nav .nav-link {
    color:   rgb(51, 51, 51) !important;

}

.text-brown {
    color:   rgb(51, 51, 51) !important;
}
.navbar-brand {
   /* font-size: 1.5rem;
    font-weight: bold;
    color: #b39eb5; /* Pastel purple 

    font-family: "Link Sans", "Arial Black", Arial, sans-serif;
    font-size: clamp(28px, 8vmin, 56px);
    font-weight: 820;
    letter-spacing: -0.02em;
    line-height: 1.05;
    text-align: center;
    color: rgb(233, 192, 233);*/
}

.nav-item {
    margin: 0 10px;
}

.nav-link {
    font-size: 1rem;
    font-weight: 500;
    color: #b39eb5; /* Pastel purple */
    transition: color 0.3s ease-in-out;
    /* padding-right: 0; */
    padding-right:15px !important;
    padding-left: 15px !important;
    /* margin-bottom: 10px; */

}


.navbar-toggler {
    border: none;
    color: 78fff0;
}

.navbar-toggler:focus {
    outline: none;
}

.bg-primary {
    background-color:#141A31 !important;
}

.text-primary {
    color: #a0d9e7; /* Pastel blue */
}

.btn-primary {
    background-color: #F1FAEE;
    border: 2px solid #141A31;  /* Adjusted the border to have a width for more pronounced effect */
    color: #141A31;
    --tw-shadow: -5px 5px 0px #141A31;
    --tw-shadow-colored: -5px 5px 0px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition: all 0.3s ease;  /* Added a transition for a smoother hover effect */
}

.btn-primary:hover {
    background-color: #141A31;
    border-color: #141A31;  /* Set the border color to darker blue for the pushed effect */
    color: #F1FAEE;
    box-shadow: none;  /* Remove the box-shadow on hover to give the impression of the button being pushed in */
}



.delete-button {
    background-color: #f44336; /* Red */
    color: white;
    border: none;
    padding: 5px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 2px 2px;
    cursor: pointer;
    border-radius: 16px;
    transition: background-color 0.3s;
}

.delete-button:hover {
    background-color: #d32f2f;
}

/* Profile Picture */
.profile-pic img {
   
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    display: block;

    margin: 20px auto;
        border-color:#ffdde1 !important; /* Pastel purple */
}

/* Username */
.username {
    text-align: center;
    font-size: 20px; /* Adjust based on your design */
    /*margin: 15px 0;*/
    color: #333;
}

/* Links container for spacing */
.links {
    margin: 20px 0;
}

/* Links as buttons */
.link-btn {
    display: block;
    margin: 10px;
    padding: 12px 20px;
    text-align: center;
    background-color: #f5f5f5; /* Very light grey */
    color: #333; /* Dark text for better contrast on light background */
    border-radius: 20px; /* Rounded edges */
    text-decoration: none;
    transition: background-color 0.3s, transform 0.2s; /* Added transform to the transition */
}

.link-btn:hover {
    background-color: #e5e5e5; /* Slightly darker grey for hover */
    transform: translateY(3px); /* Moves the button down by 3 pixels on hover */
}


.screen-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Plink at the bottom */
.plink {
    text-align: center;
    margin-top: auto; /* This will push the element to the bottom */
    font-size: 24px; /* Adjust based on your design */

    font-weight: bold;
    color: #666;
    margin-bottom: 15px; /* Space from the actual bottom */
}
/* New in Store */
.section-title {
    text-align: center;
    font-size: 20px;
    margin: 15px 0;
    color: #333;
}

/* Grid container for the products */
.latest-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  /* creates 2 columns of equal width */
    /* gap: 10px;  spacing between grid items */
}
.product-card {
    background-color: #f5f5f5;  /* light grey background for contrast */
    padding: 10px;
    border-radius: 10px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;  /* relative positioning for the card */
}

.product-image {
    width: 100%;  /* full width of the card */
    height: auto;  /* maintain the image's aspect ratio */
    border-radius: 10px;
    object-fit: cover;
}

.product-name {
    text-align: center;
    font-size: 12px;  /* reduced font size */
    margin: 5px 0;
    overflow: hidden;  /* hide overflow text */
    text-overflow: ellipsis;  /* add ellipsis for overflow text */
    display: -webkit-box;  
    -webkit-line-clamp: 2;  /* limit text to 2 lines */
    -webkit-box-orient: vertical;  /* necessary for line-clamp to work */
    line-height: 1.4;  /* line height for better clarity */
    max-height: 2.8em;  /* 2 lines at 1.4 line-height each */
    width: 100%;  /* full width of the card */
}


.new-in-store-card {
    background-color: #f5f5f5;  /* Slightly different shade for differentiation */
}

.store-icon {
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
}

.store-title {
    text-align: center;
    font-size: 14px;
    margin: 10px 0;
}

.store-tagline {
    text-align: center;
    font-size: 12px;
    color: #888;
}

.prev-product-name {    
    margin: 0px;
    padding: 0px;
    font-variant-numeric: lining-nums tabular-nums;
    color: rgb(51, 51, 51);
    font-family: graphik, helvetica, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.15px;}

.product-count {
    font-size: 14px;  /* Smaller than the main title */
    color: #aaa;     /* A subtle color */
    font-weight: normal;  /* To differentiate from the title */
}
/* Adjusted CTA Button Styling */
.cta-btn {
    display: inline-flex;  /* Use flex to align icon and text */
    align-items: center;  /* Vertically center align items */
    padding: 6px 12px;  /* Reduced padding for a smaller button */
    background-color: #ffdde1;  /* Your theme color pink */
    border: none;
    border-radius: 10px;
    font-size: 12px;  /* Reduced font size */
    color: rgb(51, 51, 51);  /* White text */
    cursor: pointer;
    transition: 0.3s;  /* Smooth transition for hover effects */
}

.cta-btn:hover {
    background-color: rgb(51, 51, 51) !important; /* Slightly darker pink for hover effect */
    text-decoration: none;  /* Remove any underlines on hover */
    color: #ffdde1; 
}

.cta-btn i {
    margin-right: 5px;  /* Space between icon and text */
    font-size: 12px;  /* Reduced icon size to match text */
}


/* Active state for primary button */
.btn-primary:active, 
.btn-primary:focus {
    background-color: #ffdde1; /* This is the pastel pink from your theme */
    border-color: #ffdde1;
    box-shadow: none; /* To remove any default browser outline or shadow */
    color: rgb(51, 51, 51); /* Setting text color to dark as background is light */
}

/* You can also provide a slightly different shade during hover for the active state if needed */
.btn-primary:active:hover, 
.btn-primary:focus:hover {
    background-color: #ffc1d2; /* Slightly darker pastel pink for differentiation */
    border-color: #ffc1d2;
    color: rgb(51, 51, 51);
}

.trend-meter-container {
    text-align: center;
}

.fire-icon {
    width: 50px;
    height: 100px;
    background: linear-gradient(to bottom, #fcb045 0%, #ff6b6b 100%);
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

.fire {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: linear-gradient(to top, #ff6b6b 0%, #fcb045 100%);
    transition: height 0.5s;
}

.selected {
    border: 2px solid blue;
}

.css-g03djc {
    background: #f7f9fc !important;
}


.explore-creators-section {
    margin-top: 30px;
    margin-bottom: 30px;
}

.creators-title {
    text-align: center;
    margin-bottom: 20px;
}

.creator-card {
    margin-bottom: 10px;
}



.creator-link:hover {
    background-color: #e6e9ed;
}


.subscribe-btn:disabled {
cursor: not-allowed;   /* The cursor typically shown when an item is not available */
background-color: #e0e0e0;  /* Grayed-out look */
color: #888;  /* Dim text */
border: 2px solid white;
}
/* Overlay Styles */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
}

.overlay-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.btn-pink {
    background-color: #FF69B4; /* Pink color */
    border-color: #FF69B4;
    color: black;
}

.footer-buttons {
display: flex;               /* Display children as flex items */
align-items: center;        /* Vertically align children in the center */
}

/* .subscribe-btn {
background-color: #f1f1f1;
border: none;
border-radius: 3px;
padding: 5px 10px;
color: #333;
font-size: 12px;
cursor: pointer;
transition: background-color 0.3s ease;
margin-right: 10px;   
border-style: solid;
} */
/* 
.subscribe-btn:hover {
background-color: pink;
color: #333;
font-size: 12px;

border-style: solid;
} */

.user-icon-link .icon-style-user {
color: #333;
font-size: 14px;
padding: 5px;
text-decoration: none;


}

.user-icon-link:hover .icon-style-user {
color: #8B3D61;

}
/* .subscribe-btn {
background-color: #f1f1f1;
border: none;
border-radius: 3px;
padding: 5px 10px;
color: #333;
font-size: 12px;
cursor: pointer;
transition: all 0.3s ease; 
margin-right: 10px;
border: 1px solid transparent; 
box-shadow: 0 3px 6px rgba(0,0,0,0.15); 
} */

/* Hover effect remains the same */
.subscribe-btn:hover {
background-color: pink;
}

/* On click (active) effect to simulate push */
.subscribe-btn:active {
box-shadow: none; /* Remove shadow to give pressed effect */
transform: translateY(2px); /* Shift downwards slightly */
}

/* Disabled state */
.subscribe-btn:disabled {
cursor: not-allowed;
background-color: #e0e0e0;
color: #888;
box-shadow: none; /* Remove shadow to give pressed effect */
transform: translateY(2px); /* Shift downwards slightly */
}


.filled-heart {
    color:pink;  /* or any other desired color */
}

.empty-heart {
    color: pink; /* or any other desired color to make the border stand out */
    /*border: 2px solid pink; /* Giving it a border */
    background-color: transparent; /* Ensuring the inside is transparent */
}

.alert-wrapper {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 10000; /* to ensure it's above other elements */
}

.square-button {
    width: 40px; /* Set the width to create a square button */
    height: 40px; /* Set the height to match the width */
    padding: 0; /* Remove padding to fully utilize the button space */
    margin-right: 10px; /* Add some spacing between the buttons */
}

/* Container for all creator cards */
.explore-creators-section {
    background-color: #F9F9F9;
    padding: 20px;
    border-radius: 8px;
}

/* Title styling */
.creators-title {
    font-size: 18px;
    color: #555;
    margin-bottom: 16px;
    text-align: center;
}

/* Flexbox container for creator cards */
.creator-cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Individual creator card */
.creator-card {
    background-color: #FFFFFF;
    padding: 12px;
    border-radius: 8px;
    margin: 8px;
    width: 140px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    text-align: center;
}

/* Profile picture */
.creator-profile-pic {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 8px;
}

/* Creator link */
.creator-link {
    color: #777;
    font-size: 12px;
    text-decoration: none;
        display: inline-block;
        background-color: #f7f9fc;
        padding: 10px 10px;
        border-radius: 5px;
        transition: background-color 0.3s ease;
    }



.creator-link:hover {
    background-color: #333; /* Darker background */
    color: #fff; /* White text */
    text-decoration: underline;
}



@media screen and (max-width: 640px) {
  
}

@media screen and (min-width: 641px) {
   
}






/* Neon effect for the big tagline */
.big-tagline {
    color: #0FF;
    text-shadow: 0 0 5px #0FF, 0 0 10px #0FF, 0 0 15px #0FF, 0 0 20px #0FF, 0 0 25px #0FF, 0 0 30px #0FF, 0 0 35px #0FF;
    font-size: 4em; /* adjust as necessary */
}

/* Neon effect for the content on the left */
.left-content {
    color: #0FF;
    text-shadow: 0 0 5px #0FF, 0 0 10px #0FF, 0 0 15px #0FF;
    font-size: 2em; /* adjust as necessary */
}
/* Neon effect for buttons */
.btn-neon {
    color: #0FF;
    text-shadow: 0 0 5px #0FF, 0 0 10px #0FF, 0 0 15px #0FF;
    border: 1px solid #0FF;
    transition: all 0.3s ease-in-out;
}

.btn-neon:hover {
    background-color: #0FF;
    color: #141A31;
}





.neon-border {
    border-radius: 15px;
    padding: 10px;
    border: 2px solid #ffffff;
    box-shadow:
    0 0 5px #ffffff,
    0 0 10px #ffffff,
    0 0 15px #ff00ff,
    0 0 20px #ff00ff,
    0 0 25px #ff00ff,
    0 0 30px #ff00ff,
    0 0 35px #ff00ff;
    transition: box-shadow 0.3s ease-in-out;
}

.neon-border:hover {
    box-shadow:
    0 0 10px #ffffff,
    0 0 20px #ffffff,
    0 0 30px #ff00ff,
    0 0 40px #ff00ff,
    0 0 50px #ff00ff,
    0 0 60px #ff00ff,
    0 0 70px #ff00ff;
}

.neon-text {
    font-size: 24px !important;

    color: #A5F2F3 !important;
    /*text-shadow:
        0 0 5px #A5F2F3,
        0 0 10px #A5F2F3,
        0 0 15px #FF00FF,
        0 0 20px #FF00FF,
        0 0 25px #FF00FF,
        0 0 30px #FF00FF,
        0 0 35px #FF00FF !important;*/
    letter-spacing: 2px !important;
}

h2.neon-text {
    font-size: 36px !important;
}


.nav-link.neon-text {
    color: #0FF;
    text-shadow: 0 0 5px #ADFF2F, 0 0 10px #ADFF2F, 0 0 15px #00FF00, 0 0 20px #FFFF00, 0 0 25px #FFFF00, 0 0 30px #FFD700, 0 0 35px #FFD700 !important;


}

@keyframes pulse {
    0% {
        box-shadow: 0 0 5px #0FF, 0 0 10px #0FF, -5px 5px 0px #0FF;
    }
    50% {
        box-shadow: 0 0 15px #0FF, 0 0 25px #0FF, -5px 5px 0px #0FF;
    }
    100% {
        box-shadow: 0 0 5px #0FF, 0 0 10px #0FF, -5px 5px 0px #0FF;
    }
}


.btn.neon-button :hover {
    background-color: #0FF;
    color: #1B1B1B;
    box-shadow: 0 0 20px #0FF, 0 0 30px #0FF;
}


.btn.neon-button {
    /*background-color: #FBCEB8; /* Dark background to enhance the cyan */
    background-color: #bcedfa; /* Dark background to enhance the cyan */
    /*background-color: #2b2974; /* Dark background to enhance the cyan */
    border: 2px solid #0FF; 
    color: #0FF;
    font-weight: bold; /* Giving it a bold font for a more retro feel */
    animation: pulse 1.5s infinite;
    transition: all 0.3s ease;
    text-transform: uppercase; /* Making text uppercase for more emphasis */
    letter-spacing: 1px; /* Slightly spaced letters for the retro vibe */
}




.magic-btn {
    background: linear-gradient(45deg, #6200EE, #03DAC6);
    border: none;
    color: #ffffff;
    padding: 10px 20px;
    font-weight: 600;
    border-radius: 50px; /* Makes it pill-shaped */
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(98, 0, 238, 0.5); /* Subtle purple shadow for depth */
    transition: transform 0.2s ease-in-out;
}

.magic-btn:hover {
    transform: scale(1.05); /* Slightly enlarges the button for emphasis */
    box-shadow: 0 0 25px rgba(98, 0, 238, 0.7); /* Darkens the shadow a bit */
}

.magic-btn:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 50px #ffffff, 0 0 100px #ffffff, 0 0 150px #6200EE, 0 0 200px #6200EE, 0 0 250px #6200EE;
    border-radius: 50px;
    opacity: 0.4;
}

.magic-btn i {
    margin-right: 10px;
}

.right-bottom-image-container {
    position: fixed;
    bottom: 690px;
    right: 27px;
}

.right-bottom-image-container img {
    max-width: 200px; /* Adjust as per your needs */
    border-radius: 8px;
}

/*analytics page style*/

.analytics-bar {
    background-color: #333;  /* Dark background */
    color: #fff;             /* White text */
    padding: 15px 0;         /* Some padding */
    display: flex;           /* Align items in a row */
    justify-content: space-around; /* Distribute space evenly */
}

/* nav middle screen treatment */
.icon-nav-link i {
    display: inline-block; 
    margin-right: 8px; /* Adjust this value as necessary */
}

@media (min-width: 991px) and (max-width: 1200px) {
    .icon-nav-link i {
        display: block;
        margin-right: 0;
        text-align: center;
    }
    .icon-nav-link span {
        display: block;
        text-align: center;
    }
}

.nav-profile-picture {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    border: 2px solid white;
    box-shadow: 0 0 5px #03DAC6, 0 0 10px white, 0 0 15px white, 0 0 20px white;
}


.profile-nav-container {
    display: flex;
    align-items: center;
}

.profile-link {
    display: inline-flex;
    align-items: center;
}

.invite-btn {
    background-color: transparent;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    margin-right: 10px; /* Spacing between the invite button and the profile picture */
}

.share-btn {
    background-color: transparent;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    margin-right: 10px; /* Spacing between the share button and the dropdown */
}

.vertical-divider {
    height: 100%;
    width: 1px;
    background-color: white; /* Change to desired color */
    margin-right: 10px; /* Spacing between the divider and the next nav item */
}


@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1300px !important;
    }
}

.pill-btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 50px; /* This gives the pill shape */
    background: linear-gradient(45deg, #007BFF, #FF69B4, #9400D3); /* Blue to Pink to Violet gradient */
    color: white; /* Text color */
    text-decoration: none;
    transition: background 0.3s, transform 0.3s;
}

.pill-btn:hover {
    background: linear-gradient(45deg, #0056b3, #FF1493, #8A2BE2); /* Darker shade for hover effect */
    transform: scale(1.05); /* Slightly enlarge on hover */
    color:white;
}

.pill-btn i {
    margin-right: 5px;
}

 /* Neon Lookbook Inspired Styles */
 .trend-card {
    border: 3px solid #007BFF;
    background-color: #141414; /* Dark Background */
    color: #E5E5E5;
    padding: 20px;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
}
.trend-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 123, 255, 0.1); /* Blue Tint */
    z-index: -1;
}
.trend-card:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px #007BFF, 0 0 20px #007BFF; /* Blue Neon Glow */
}
.trend-card h4 {
    font-size: 24px;
    color: #FF69B4; /* Pink Highlight */
}
.platform-name {
    font-size: 14px;
}
.emoji-scale, .trend-media {
    display: flex;
    justify-content: space-between;
}
.media-button {
    border-color: #9400D3; /* Violet Border */
    color: #FF69B4; /* Pink Text */
}
.media-button:hover {
    background-color: #9400D3; /* Violet Background */
    color: #E5E5E5;
}


/*--*/

 /* Neon Lookbook Inspired Styles */
    .trend-card {
        border: 3px solid #007BFF;
        background-color: #141414; /* Dark Background */
        color: #E5E5E5;
        padding: 20px;
        border-radius: 15px;
        position: relative;
        overflow: hidden;
        transition: all 0.3s;
    }
    .trend-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 123, 255, 0.1); /* Blue Tint */
        z-index: -1;
    }
    .trend-card:hover {
        transform: scale(1.05);
        box-shadow: 0 0 10px #007BFF, 0 0 20px #007BFF; /* Blue Neon Glow */
    }
    .trend-card h4 {
        font-size: 24px;
        color: #FF69B4; /* Pink Highlight */
    }
    .platform-name {
        font-size: 14px;
    }
    .emoji-scale, .trend-media {
        display: flex;
        justify-content: space-between;
    }
    .media-button {
        border-color: #9400D3; /* Violet Border */
        color: #FF69B4; /* Pink Text */
    }
    .media-button:hover {
        background-color: #9400D3; /* Violet Background */
        color: #E5E5E5;
    }

    .product-image {
        width: 100px; /* or any other size */
        height: auto; /* maintain aspect ratio */
    }
    

    #overlay {
        position: fixed;
        display: none; /* Hidden by default */
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.5); /* Black background with opacity */
        z-index: 2; /* Specify a stack order in case you're using a modal */
        cursor: pointer; /* Add a pointer on hover */
    }
    
    .overlay-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    
    .modal-backdrop {
        width: 0 !important;
        height: 0 !important;
    }


    /* Futuristic Neon Modal Styles */
.futuristic-modal {
    border-radius: 10px; /* Rounded corners for the modal */
    padding: 20px;
    font-family: 'Orbitron', sans-serif; /* A futuristic font */
    overflow: hidden; /* Ensures nothing spills out of the border-radius */
    position: relative; /* Enables absolute positioning inside */
    /* background-color: #141A31 !important; */
    background-color: black !important;
    border-radius: 15px;
    box-shadow: 0 0 15px white;
    /* color: #8BFDFE; */
    color:white;

}

/* Neon glow effect for titles */
.glow-title {
    font-size: 2rem;
    /* text-shadow: 0 0 5px #8BFDFE, 0 0 10px #8BFDFE, 0 0 15px #8BFDFE, 0 0 20px #8BFDFE; Layered neon glow */
    margin-bottom: 20px;
}



/* Product image styling */
#aiPitchProductImage {
    max-width: 100%; /* Ensures the image is responsive */
    border: 2px solid #8BFDFE; /* Neon border for the image */
    box-shadow: 0 0 5px #8BFDFE, 0 0 10px #8BFDFE; /* Glowing shadow */
    margin-bottom: 20px;
}

/* Styling for the close button */
.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: #8BFDFE;
    font-size: 1.5rem;
    cursor: pointer;
}


/* Neon button styling */
.neon-button {
    background: none;
    color: #8BFDFE;
    border: 1px solid #8BFDFE;
    padding: 10px 20px;
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    /* text-shadow: 0 0 5px #8BFDFE, 0 0 10px #8BFDFE; */
}

.neon-button:hover {
    background-color: rgba(51, 255, 174, 0.1); /* Slight neon background on hover */
    box-shadow: 0 0 10px #8BFDFE, 0 0 20px #8BFDFE;
}

/* Modal content styling */
/* .modal-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
} */

/* Typing animation for editorial content */
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: #8BFDFE; }
}

.editorial-content {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    /* border-right: 3px solid #8BFDFE; */
    border-right: 3px solid white;
    animation: typing 4s steps(40, end), blink-caret .75s step-end infinite;
    font-size: 1.25rem;
    line-height: 1.6;
    /* margin-top: 20px; */

}

.typing-container {
    white-space: normal; /* Default behavior to allow line wrapping */
    overflow: hidden; /* Hide the overflow to maintain the typing effect */
    /* border-right: 2px solid; Simulate the typing cursor */
    padding-right: 1em; /* Give some space for the cursor */
    animation: typing 2s steps(40, end), blink-caret .75s step-end infinite alternate;
    /* font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important; */
    font-family: 'Playfair Display', serif !important;
}

.fade-in-section {
    animation: fadeIn ease 2s;
    -webkit-animation: fadeIn ease 2s;
    -moz-animation: fadeIn ease 2s;
    -o-animation: fadeIn ease 2s;
    -ms-animation: fadeIn ease 2s;
}
@keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}
.highlight {
    font-weight: bold;
    color: #FF5733; /* Example color - change as needed */
}


/* style for the modal */
/* Base Styles for Desktop */


.editorial-content {
    flex: 1 0 50%; /* flex-grow, flex-shrink, flex-basis */
    padding-right: 20px;
}

.product-info {
    flex: 1 0 50%;
    text-align: center;
    padding-left: 20px;
}

/* Styles for the first letter */
.editorial-text::first-letter {
    float: left;
    font-size: 4em; /* Use the largest size you've defined */
    line-height: 0.8; /* Use the line-height that corresponds to the font-size */
    margin-right: 5px;
    font-family: 'Georgia', serif;
}

/* Mobile Screen Styling */
@media screen and (max-width: 768px) {
    .modal-body {
        flex-direction: column;
    }

    .editorial-content, .product-info {
        width: 100%;
        padding: 0 10px;
        text-align: center; /* Center text for mobile */
    }
    
    /* Disable the multi-column layout for mobile */
    .editorial-content {
        column-count: 1;
    }
}

/* Continue with your existing styles... */

.editorial-text::first-letter {
    float: left;
    font-size: 3em;
    line-height: 1;
    font-family: 'YourCursiveFont', cursive; /* Replace with your cursive font */
    margin-right: 0.1em;
}



/* Styling for the typing cursor */
.typing-cursor {
    display: inline-block;
    width: 2px;
    background-color: black;
    margin-left: 2px;
    animation: blink 1s step-start infinite;
}

@keyframes blink {
    50% {
        background-color: transparent;
    }
}


/* Modal Content Styling */
.futuristic-modal {
    box-shadow: 0 0 15px #ffffff;
}

/* Modal Title Styling */
.glow-title {
    font-weight: 300;
    letter-spacing: 2px;
    /* color: #4a4a4a; */
    font-size: 1.5rem;
}

/* Close Button Styling */
.close-button {
    color: #aaa;
    font-size: 1.2rem;
}

.close-button:hover {
    color: #333;
}

/* Product Info Styling */
.product-info {
    text-align: center;
}

.img-fluid.product-glow {
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Editorial Content Styling */
.editorial-content {
    text-align: justify;
    column-gap: 30px;
    font-size: 0.9rem;
}

.editorial-content p {
    margin-top: 0;
}

/* Enhance the first letter style */
.editorial-text::first-letter {
    float: left;
    font-size: 4em;
    line-height: 0.8;
    margin-right: 5px;
    font-family: 'Georgia', serif; /* Example cursive font */
}

/* Modal Body Styling */
.modal-body {
    /* display: flex; Enable flexbox */
    flex-direction: row; /* Arrange children in a row */
}

/* Editorial Content Styling */
.editorial-content {
    flex: 1; /* Take up half the space */
    padding-right: 20px; /* Add some space between the text and the image */
    /* Other styling as required */
}

/* Product Info Styling */
.product-info {
    flex: 1; /* Take up the other half */
    text-align: center; /* Center the content */
    padding-left: 20px; /* Add some space between the image and the text */
    /* Other styling as required */
}

.img-fluid.product-glow {
    max-width: 100%; /* Ensure image is responsive */
    height: auto; /* Maintain aspect ratio */
    /* Additional styling for the image */
}

/* Continue with your existing styles... */





.editorial-content, .product-info {
    flex: 1; /* Each section takes up half the width on larger screens */
    padding: 0 20px; /* Padding for spacing */
}

/* Mobile Screen Styling */
@media screen and (max-width: 768px) { /* Adjust the max-width as per your design breakpoints */
    .modal-body {
        flex-direction: column; /* Stack children vertically on smaller screens */
    }

    .editorial-content, .product-info {
        flex: none; /* Reset flex settings for mobile */
        width: 100%; /* Full width on smaller screens */
        padding: 0 10px; /* Adjust padding for smaller screens */
    }
}

.editorial-content {
    border-right: 0px;
}

#aiPitchProductImage {
    max-width: 100%;
    border: 2px solid white;
    box-shadow: 0 0 5px white;
    margin-bottom: 20px;
}

.editorial-content {
    flex: 1; /* This will make the text container grow to absorb any extra space */
    padding: 0 20px; /* Adjust padding as needed, but don't overdo it */
    width: auto; /* This will make the width adjust to the content or available space */
    max-width: 100%; /* This ensures the container does not exceed the bounds of its parent */
}

.view-details-btn {
    position: relative;
    transition: all 0.3s ease;
}

.view-details-btn .arrow-icon {
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.view-details-btn:hover .arrow-icon {
    transform: translateX(5px);
}




 .ai-icon {
    margin-right: 5px; /* Spacing between icon and text */
    font-size: 1.2em; /* Slightly larger icon for balance */
}
.ai-sales-rep-btn{
    font-family: 'Orbitron', sans-serif;
    padding-left: 10px;
    /* Other styles */
    margin-right: 5px; /* Spacing between icon and text */
    font-size: 1.2em; 
    color: #656565;
    text-decoration: none; /* Removes underline */
    display: flex;
    align-items: center; /* Aligns icon and text vertically */
    justify-content: center; /* Centers content */
    font-size: 0.9em; /* Smaller font size for a minimal look */
    transition: color 0.2s ease; /* Smooth color transition for hover effect */
    margin: 2px auto 0;
    border-bottom: 1px solid #111;
    letter-spacing: .12px;
    font-weight: 400;
    border-bottom: 1px solid #656565;
    padding-bottom: 1px;
    -webkit-transition: color .1s ease-out;
    letter-spacing: .14px;
    font-weight: 400;

}
.ai-star-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 25px; /* Adjust size as needed */
    height: 2cqb; /* Adjust size as needed */
}

.tagify__outer {
    min-height: auto;
    max-height: none;
}

.tagify__wrapper {
    min-height: auto;
    max-height: none;
}

.tagify__input {
    height: auto;
}


.tagify {
    display: block; /* Ensures it's a block-level element */
    width: 100%; /* Full width of the container */
    border: 1px solid #ccc; /* Example border */
    padding: 5px; /* Padding inside the tagify container */
}

.tagify__input,
.tagify__dropdown {
    width: auto; /* Allows natural width within the container */
    min-height: 38px; /* Minimum height */
    box-sizing: border-box; /* Include padding and border */
}

/* Target the specific tagify wrapper for the input field */
#product-features.tagify {
    min-height: 38px; /* Or higher, as needed */
    max-height: none; /* Removes max height if set */
    overflow: visible; /* Allows the container to grow with content */
}

/* Specific override for the Tagify container */
.form-control {
    height: auto;
    min-height: calc(1.5em + 0.75rem + 2px); /* Initial minimum height */
}
/* Base styles for the combined content area */
.combined-content {
    display: flex;
    align-items: center;
}

/* Styles for the text container */
.typing-container {
    flex: 1; /* Allows the text container to grow */
    max-width: 50%; /* Limits the width to 50% of the container */
    padding-right: 20px; /* Adds spacing between text and image */
}

/* Styles for the product image container */
.product-info {
    flex: 1; /* Allows the image container to grow */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the content */
    /* max-width: 50%; Limits the width to 50% of the container */
}

/* Styles for the product image */
.product-info img {
    width: 100%; /* Full width of the container */
    height: auto; /* Maintains aspect ratio */
    object-fit: contain; /* Ensures the image fits within the container without stretching */
}

/* Button styling */
.btn-primary-dark {
    background-color: transparent;
    /* border: 2px solid #ffdde1; */
    color: #ffdde1;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Hover animation for the button */
.btn-primary-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    /* background-color: #ffdde1; */
    transition: all 0.3s ease;
    z-index: 0;
    
}

.btn-primary-dark:hover::before {
    left: 0;
}

.btn-primary-dark:hover {

    color: #ffdde1;
}

/* Accessibility focus styles */
.btn-primary-dark:focus::before {
    left: 0;
}

/* Icon animation within the button */
.shop-now-button i {
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.shop-now-button:hover i {
    transform: translateX(5px);
    color: #ffdde1;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .combined-content {
        flex-direction: column;
    }

    .typing-container,
    .product-info {
        max-width: 100%; /* Allows each child to take the full width of the container */
    }

    /* Resetting margin and padding for mobile */
    .typing-container {
        padding-right: 0;
    }
}

.element-with-cursor {
    caret-color: transparent; /* Hides the blinking cursor */
}

.element-with-cursor::after {
    content: none; /* Removes the pseudo-element */
    animation: none; /* Stops any animations */
}


#ai-training-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#ai-overlay-content {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
}

.spinner-border {
    width: 3rem;
    height: 3rem;
    border-color: #fa7e1e;
    border-top-color: #962fbf; /* Using Instagram's purple for the spinner color */
    border-width: 0.3rem;
}

#ai-overlay-text {
    margin-top: 10px;
    color: #4f5bd5; /* Instagram's blue for the text */
    font-weight: bold;
}

/* Media query for smaller screens */
@media (max-width: 768px) {
    #ai-overlay-content {
        width: 150px;
        height: 150px;
    }
}

.slider {
    /* Additional styling for sliders */
    transition: box-shadow 0.3s;
}

.slider:hover, .slider:focus {
    box-shadow: 0 0 10px #0FF;
}

.btn-ignite-store {
    /* Styling for the button */
    border: none;
    padding: 15px;
    width: 100%;
    transition: background-color 0.3s, transform 0.3s;
}

.btn-ignite-store:hover {
    background-color: #FFC0CB;
    transform: scale(1.05);
}


/* Add to your existing style section */

.shopper-cta-container {
    text-align: right; /* Aligns the button to the right */
}

.shopper-cta-button {
    display: inline-block;
    background-color: #FFC0CB; /* Your theme pink color */
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none; /* Removes underline from anchor tag */
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
    margin-top: 10px; /* Aligns with the rest of the footer content vertically */
}

.shopper-cta-button i {
    margin-right: 5px; /* Adds spacing between icon and text */
}

.shopper-cta-button:hover {
    background-color: #BD1E59; /* A darker pink for hover effect */
    color: #fff;
    text-decoration: none; /* Ensures no underline appears on hover */
}

/* You may need to adjust the media query for responsive design */
@media screen and (max-width: 768px) {
    .shopper-cta-container {
        text-align: center; /* Centers the button on smaller screens */
        padding-top: 20px; /* Adds space above the button */
    }
}

/* Add this to your existing stylesheet */

.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #16213e; /* Use your theme pink color */
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    line-height: 50px; /* Adjust this value to vertically center the icon inside the button */
    text-decoration: none;
    font-size: 1.2rem;
    transition: opacity 0.3s ease-in-out;
    z-index: 1000; /* Ensure it's above other content */
    opacity: 0.7; /* Slightly transparent */
}

.back-to-top:hover {
    opacity: 1; /* Fully opaque on hover */
}

@media screen and (max-width: 768px) {
    .back-to-top {
        bottom: 10px;
        right: 10px;
    }
}







.navbar-toggler {
    border: none;
    outline: none;
}

.navbar-toggler-icon {
    /* Adjust the size of the icon as needed */
    width: 30px;
    height: 30px;
}
@keyframes arrowBounce {
    0% { transform: translateX(0); }
    50% { transform: translateX(5px); }
    100% { transform: translateX(0); }
}

.sleek-button-trial .arrow {
    display: inline-block;
    transition: all 0.3s ease;
}

.sleek-button-trial:hover .arrow {
    animation: arrowBounce 0.5s ease-in-out;
}

.navbar-toggler-icon {
    /* background-image: url('path-to-hamburger-icon-image'); */
    /* Or if using FontAwesome */
    content: '\f0c9';
    font-family: 'FontAwesome';
    color: #FFC0CB; /* Ensure this is visible against your navbar's background */
}


/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content-editorial{
    background-color: black;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
.plinkitmodal{
        display: block !important;
}

.privacy-policy-section {
    font-family: Georgia, 'Times New Roman', serif;
    color: #333;
}

.table-of-contents {
    position: sticky;
    top: 20px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.table-of-contents h4 {
    margin-bottom: 15px;
}

.table-of-contents ul {
    list-style: none;
    padding: 0;
}

.table-of-contents ul li a {
    color: #007bff;
    text-decoration: none;
}

.table-of-contents ul li a:hover {
    text-decoration: underline;
}

h1 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 1rem;
}

h3 {
    font-size: 1.75rem;
    color: #333;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

p.lead {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


.tab-selector .btn {
    border-radius: 0.25rem;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    margin: 0.25rem;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.tab-selector .btn:hover {
    background-color: #007bff;
    color: white;
}

.tab-selector .btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.tab-selector .btn-outline-primary {
    color: #007bff;
    border-color: #007bff;
}

.tab-selector .btn-outline-secondary {
    color: #6c757d;
    border-color: #6c757d;
}



 .role-selection {
        text-align: center;
        margin-bottom: 20px;
    }

    .role-title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .tab-selector {
        display: inline-block;
        border-bottom: 2px solid #ccc;
    }

    .role-btn {
        background: none;
        border: none;
        padding: 10px 20px;
        margin: 0;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        border-bottom: 3px solid transparent;
        transition: border-color 0.3s ease;
        color:white;
    }

    .role-btn.active {
        color: #ff00ff; /* Neon color */
        border-bottom: 3px solid #ff00ff;
    }

    .role-btn:hover,
    .role-btn:focus {
        border-bottom: 3px solid #ff00ff; /* Neon color */
    }


    .role-selection {
        text-align: center;
        margin-bottom: 20px;
    }

    .role-title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .tab-selector {
        display: inline-block;
        border-bottom: 2px solid #ccc;
    }

    .role-btn {
        background: none;
        border: none;
        padding: 10px 20px;
        margin: 0;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        border-bottom: 3px solid transparent;
        transition: border-color 0.3s ease;
    }

    .role-btn.active {
        color: #ff00ff; /* Neon color */
        border-bottom: 3px solid #ff00ff;
    }

    .role-btn:hover,
    .role-btn:focus {
        border-bottom: 3px solid #ff00ff; /* Neon color */
    }

    .verified-badge {
        color: #1DA1F2; /* Twitter-like blue color */
        margin-left: 5px;
        font-size: 20px;
    }

    .verified-badge-2 {
        display: inline-block;
        background-color: #1DA1F2;  /* Dark background for a modern look */
        color: #FFF;  /* White text */
        padding: 3px 10px;
        border-radius: 4px;
        margin-left: 10px;
        font-size: small;
        font-weight: bold;  /* Bold font weight */
    }
    
    
    
    /* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .toggle-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #2196F3;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .toggle-slider.round {
    border-radius: 34px;
  }
  
  .toggle-slider.round:before {
    border-radius: 50%;
  }
  





.footer-buttons {
    display: flex;
    gap: 10px; /* Space between subscribe button and profile icon */
}

@media (max-width: 576px) {

    .footer-content a, .footer-content .footer-buttons {
        flex-basis: auto; /* Adjusts width automatically */
    }
}

.subscribe-text {
    display: inline; /* Show text by default */
}

@media (max-width: 576px) {
    /* Hide the subscribe text on mobile screens */
    .subscribe-text {
        display: none;
    }
}



/* The .footer-buttons class is not shown in the uploaded image, but assuming it contains the icons */
.footer-buttons {
    display: flex;
    gap: 0.5rem; /* Adjust gap as needed */
}




.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .custom-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .custom-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .custom-slider {
    background-color: #2196F3;
  }
  
  input:checked + .custom-slider:before {
    -webkit-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  .custom-slider.round {
    border-radius: 34px;
  }
  
  .custom-slider.round:before {
    border-radius: 50%;
  }

  .square-circle{

    border-radius: 20%;
    width: 200px;
    height: 200px;
    object-fit: cover;
    display: block;
    margin: 0 auto 15px;
  }


  /* Profile Section Styling */
.service-section {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.img-fluid.square-circle {


    margin-bottom: 10px;
}

.social-media-links a {
    display: inline-block;
    margin-right: 10px;
    color: #007bff; /* Primary link color */
    text-decoration: none;
}

.social-media-links i {
    margin-right: 5px;
}

.edit-icon {
    cursor: pointer;
    color: #007bff; /* Edit icon color */
}

.edit-icon i {
    margin-left: 5px;
}

/* For small devices, consider stacking the columns vertically */
@media (max-width: 768px) {
    .col-md-3, .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


.reputation-section {
    margin-top: 20px;
}

.reputation-bar {
    height: 20px;
    width: 100%;
    background-color: #ddd;
    border-radius: 10px;
    overflow: hidden;
}

.reputation-bar-inner {
    height: 100%;
    border-radius: 10px;
    transition: width 0.5s ease-in-out;
}


.placeholder-text {
    color: #888; /* Lighter color */
    font-style: italic; /* Italicize text */
}

.placeholder-note {
    font-size: 0.8em;
    color: #666;
}


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

.tag {
    background-color: rgb(247, 247, 247);
    /* background-color:rgb(224, 224, 224); */
    border-radius: 10px;
    padding: 5px 10px;
    /* cursor: pointer; */
}

.video-upload-instructions {
    font-size: 1rem;
    color: #6c757d;
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f8f9fa;
    border-left: 3px solid #007bff;
    border-radius: 5px;
}


.service-offerings-instructions {
    font-size: 1rem;
    color: #6c757d;
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f8f9fa;
    border-left: 3px solid #28a745;
    border-radius: 5px;
}
.service-offering-box {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.service-offering-box h6 {
    color: #333;
    font-weight: bold;
    margin-bottom: 15px;
}

.service-offering-box .price-box {
    margin-bottom: 10px;
}

.service-offering-box .btn {
    width: 100%;
    margin-top: 10px;
}

.service-offerings-instructions {
    margin-bottom: 20px;
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
    border-left: 4px solid #007bff;
    font-size: 1rem;
}




.modal-text {
    margin-bottom: 15px;
    line-height: 1.6;
    color: #333;
}

.modal-advice {
    background-color: #f7f9fc;
    border-left: 4px solid #007bff;
    padding: 10px;
    font-style: italic;
}

.modal-advice strong {
    font-weight: bold;
}


.brand-deals-section {
    margin: 20px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    
}

.brand-deals-section h2 {
    color: #333;
    margin-bottom: 20px;
}

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

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

.operate-link {
    color: #007bff;
    text-decoration: none;
}

.operate-link:hover {
    text-decoration: underline;
}


.deal-details {
    text-align: left;
    padding-left: 15px;
}

.deal-type {
    display: block;
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 8px;
}

.deal-price-highlight {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: #ff385c;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    max-width: fit-content;
}

.deal-price {
    font-size: 18px;
    font-weight: bold;
}

.product-image-grid{
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
}

.minimalistic-btn {
    color: #333; /* Text color */
    text-decoration: none; /* Removes default underlining */
    font-weight: bold; /* Makes the text bold */
    position: relative; /* Needed for positioning the arrow */
    transition: color 0.3s ease; /* Smooth color transition */
}

.minimalistic-btn .arrow {
    display: inline-block;
    transition: transform 0.3s ease; /* Smooth transform transition */
}

.minimalistic-btn:hover {
    color: #4CAF50; /* Change color on hover */
    text-decoration: underline; /* Add underline on hover */
}

.minimalistic-btn:hover .arrow {
    transform: translateX(5px); /* Move arrow to the right on hover */
}

.launch-brand-deal-container {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    margin: 40px auto;
}

.launch-brand-deal-form label {
    font-weight: bold;
    color: #333;
}

.launch-brand-deal-form .form-control {
    border-radius: 4px;
}

.launch-brand-deal-form button {
    background-color: #FF5A5F;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.launch-brand-deal-form button:hover {
    background-color: #FF787D;
}

#typed-text-container {
    font-size: 20px;
    color: white; /* Adjust color as needed */
}

.cursor {
    opacity: 1;
    animation: blink-animation 0.7s infinite;
}

@keyframes blink-animation {
    50% { opacity: 0; }
}

.pricing-options .card {
    border: 1px solid #ddd;
    transition: all 0.3s ease;
}

.pricing-options .card.selected {
    border-color: #FF5A5F;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.deal-platforms .badge {
    margin-right: 5px; /* Spacing between tags */
    font-size: 0.9em; /* Smaller font size for tags */
  }
  .deal-detail-container .row {
    margin-bottom: 10px; /* Spacing between rows */
  }
  .deal-detail-container .badge {
    margin-right: 5px; /* Spacing between platform tags */
  }

  .deal-detail-container .badge {
    margin-right: 5px; /* Spacing between platform tags */
}


.card-header {
    background-color: #f8f9fa; /* Adjust the color to match your design */
    border-bottom: 1px solid #eaeaea; /* This is a light grey border, for example */
    font-weight: bold;
  }
  
  .card-body {
    font-size: 1rem; /* Adjust the size as needed */
  }
  
  /* Responsive text sizing */
  @media (max-width: 768px) {
    .card-body {
      font-size: 0.9rem;
    }
  }
  
  /* Specific styles for the pricing section */
  .pricing-detail h5 {
    color: #333; /* Dark text for the price */
    font-size: 1.5rem; /* Larger text for the price */
  }
  

  .countdown-timer {
    background-color: #fff;
    /* box-shadow: 0 2px 4px rgb(0 0 0 / 10%); */
    border-radius: 8px;
    font-size: 1rem;
    /* margin-top: 20px; */
    /* padding: 15px; */
    border: none;
  }

  .countdown-timer .countdown-icon {
    color: #FF5A5F; /* Airbnb red color */
  }

  #countdown-timer {
    font-weight: bold;
    font-size: 1rem;
    color: #484848; /* Dark grey text color */
  }

  .timeline-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: #f7f7f7;
    border-radius: 8px;
    margin-top: 1rem;
  }

  .timeline-icon {
    color: #FF5A5F; /* Airbnb red color */
    font-size: 2rem;
  }

  .timeline-dates {
    flex-grow: 1;
    padding: 0 1rem;
    color: #484848; /* Dark grey text color */
  }

  .countdown {
    display: flex;
    align-items: center;
  }

  .countdown-icon {
    color: #FF5A5F; /* red color */
    font-size: 2rem;
    margin-right: 0.5rem;
  }

  .countdown-text {
    font-size: 1.5rem;
    font-weight: bold;
    color: #484848; /* Dark grey text color */
  }

  .pricing-card {
    border: 1px solid #eaeaea;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }

  .pricing-card .card-header {
    background-color: #f8f9fa;
    font-weight: 500;
    letter-spacing: 0.5px;
  }

  .pricing-type .badge {
    font-size: 0.9em;
    padding: 0.5em 0.75em;
    margin-bottom: 1em;
    letter-spacing: 0.5px;
  }


  .price-explanation {
    font-size: 0.9em;
    color: #666;
    margin-top: 0.5em;
    font-style: italic;
  }

  .cpm-rate {
    display: block; /* or inline-block, depending on desired layout */
    font-size: 0.9em; /* smaller font size for the CPM rate */
    color: #555; /* a slightly muted color for subtlety */
    margin-top: 5px; /* space between the price range and CPM rate */
  }
  
  .price-display {
    background-color: #f4f4f4;
    border-left: 4px solid #4CAF50; /* A green stripe for finance */
    padding: 0px 15px;
    margin-bottom: 1rem;
}

.price-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding: 5px 0;
    border-bottom: 1px solid #ddd;
}

.price-title {
    color: #333;
    /* font-size: 1rem; */
    font-weight: 400;
}

/* The .price-amount class is styled to present pricing information in a sophisticated, trust-inspiring manner. 
   Georgia is a typeface that brings a classic touch to the display of numbers, often associated with high-end 
   print materials like newspapers and magazines. The bold and italic styles ensure that the numbers stand out 
   and draw attention, while the serif font provides an air of professionalism and formality. */

   .price-amount {
    color: #000;
    font-size: 1.25rem;
    font-weight: bold;

    font-family: 'Georgia', serif;
}



.price-section:last-child {
    border-bottom: none; /* No border for the last item */
}

.deal-steps {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .deal-steps li {
    margin-bottom: 10px;
  }
  
  .deal-steps li::before {
    content: 'Step';
    font-weight: bold;
    margin-right: 5px;
  }
  
  .alert-note {
    margin-top: 20px;
    font-size: 0.9rem;
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    border-radius: 5px;
    padding: 10px;
    color: #856404;
  }

  .deal-card {
    border-radius: 8px;
    border: 1px solid #ebebeb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .deal-status-tag {
    display: inline-block;
    background-color: #4CAF50; /* Green for active deals */
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
  }

  .deal-status-tag.active {
    background-color: #4CAF50; /* Green for active deals */
  }

  .deal-status-tag.expired {
    background-color: #FF5A5F; /* Red for expired deals */
  }

  .deal-name {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
  }


  .platform-icon {
    margin-right: 10px;
    font-size: 1.2rem; /* Adjust the size as needed */
  }

  .platform-name {
    margin-right: 10px;
    font-size: 1rem;
    /* background-color: #ddd; Fallback background for platforms without icons */
    padding: 3px 6px;
    border-radius: 4px;
  }

  .deal-style-btn {
    background-color: #FF5A5F; /* Airbnb's signature color */
    color: white; /* Text color */
    padding: 12px 25px; /* Adequate padding for button size */
    border: none; /* No border */
    border-radius: 20px; /* Rounded corners for a modern look */
    font-size: 16px; /* Appropriately sized text */
    font-weight: bold; /* Bold text */
    cursor: pointer; /* Changes cursor to pointer on hover */
    transition: background-color 0.3s ease, padding-right 0.3s ease; /* Smooth transition for background color and padding */
    position: relative; /* Needed for absolute positioning of the arrow */
    overflow: hidden; /* Ensures the arrow doesn't overflow the button's boundaries */
}

.deal-style-btn:hover, .deal-style-btn:focus {
    background-color: #FF3B4D; /* Slightly darker shade on hover and focus */
    padding-right: 35px; /* Increase padding to make room for the arrow */
    outline: none; /* Removes outline on focus for a cleaner look */
}

.deal-style-btn::after {
    content: '→'; /* Arrow character */
    position: absolute;
    right: 20px; /* Position the arrow inside the button */
    top: 50%;
    transform: translateY(-50%) scale(0); /* Center vertically and start with the arrow scaled down */
    transition: transform 0.3s ease; /* Smooth transition for the arrow */
}

.deal-style-btn:hover::after {
    transform: translateY(-50%) scale(1); /* Scale the arrow up on hover */
}


.overlay-content {
    position: relative;
    background: white;
    padding: 20px;
    border-radius: 5px;
  }
  
  .overlay-content video {
    max-width: 80vw;
    max-height: 80vh;
  }
  
  .overlay-content button {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
  }
  

  .video-thumbnails img.video-thumbnail {
    width: 100px; /* Thumbnail size */
    height: 56px; /* Maintain a 16:9 aspect ratio */
    margin-right: 5px; /* Space between thumbnails */
    cursor: pointer;
  }
  .dealnamelist{
    font-weight: 600;

  }
  .dealdescriptionlist{

    color:#717171;
  }



.message-sidebar {
    /* width: 35%; */
    /* border-right: 1px solid #ddd; */
    overflow-y: auto;
}
.message-content {
    flex-grow: 1;
    /* padding: 15px; */
    padding: 5px;
    overflow-y: auto;
}
.message-header {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #ddd;
}
.message-input {
    position: fixed;
    bottom: 0;
    left: 35%; /* Same as sidebar width */
    right: 0;
    padding: 15px;
    background: white;
    border-top: 1px solid #ddd;
}
.message-input input {
    margin-right: 15px;
}



.message-thread {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
    cursor: pointer;
}
.message-thread.selected {
    background-color: #f3f3f3; /* LinkedIn uses a light grey background */
    border-left: 4px solid #0073b1; /* LinkedIn brand color for the bar */
}
.message-thread img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}
.message-thread .message-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.message-thread .message-info .message-preview {
    flex-grow: 1;
    margin-right: 10px;
}
.message-thread .message-info small {
    color: #999;
}
.message-content {
    flex-grow: 1;
    overflow-y: auto;
}
.message-content .message {
    padding: 15px;
    border-bottom: 1px solid #ccc;
}
.message-content .message-input {
    border-top: 1px solid #ccc;
    padding: 10px;
    background-color: #fff;
}

.message-sidebar {
    background-color: #f8f9fa; /* Lighter than white */
}
.conversation-item {
    cursor: pointer;
    border-left: 5px solid transparent; /* Default no color */
}
.conversation-item.active {
    background-color: #e9ecef; /* Slightly darker background */
    border-left-color: #007bff; /* Active item color */
}
.message-content {
    border-left: 1px solid #ddd; /* Separator line */
    padding-left: 20px; /* Spacing from the separator */
}
.text-truncate {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.message-content {
    padding: 20px;
}
#conversation-header {
    display: flex;
    align-items: center;
}
#conversation-header img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
}
#conversation-date {
    font-size: 0.85em;
    color: #888;
}
.conversation-thread {
    overflow-y: auto;
    max-height: 400px; /* Adjust based on your layout */
}
.conversation-message {
    display: flex;
    /* margin-bottom: 15px; */
}
.conversation-message img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}
.message-input {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 10px 20px;
}
.message-date-separator {
    align-items: center;
    clear: both;
    display: flex;
    letter-spacing: 1px;
    margin: 0.8rem 0;
    text-transform: uppercase;
}

.message-date-separator {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 8px 0;
}

.message-date-separator .line {
    flex-grow: 1;
    height: 1px;
    background-color: rgb(140 140 140/.2);
}

.message-date-separator .line:first-child {
    margin-right: 10px;
}

.message-date-separator .line:last-child {
    margin-left: 10px;
}

.message-date-separator .date {
    padding: 0 10px;
    white-space: nowrap; /* Prevent the date from wrapping */
    background: #FFF; /* Match the background of the container */
    position: relative;
    top: -1px; /* Align the text with the line */
}

/* CSS for the Loading Spinner */
#loading-spinner {
    display: none; /* Initially hidden */
    position: absolute; 
    top: 50%; /* Adjust as needed */
    left: 50%; /* Adjust as needed */

}
/* CSS for the spinner animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* CSS for the message sent notification */
.message-sent-notification {
    display: none;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #4CAF50; /* Green background color */
    color: white;
    text-align: center;
    padding: 10px;
    z-index: 1000; /* Ensure it's above other elements */
    animation: slide-down 1s ease-in-out; /* Add an animation for sliding down */
}

@keyframes slide-down {
    0% {
        transform: translateX(-50%) translateY(-100%);
    }
    100% {
        transform: translateX(-50%) translateY(0);
    }
}

.info-section {
    padding: 10px;
    background-color: #d1ecf1; /* Light blue background for informational section */
    border: 1px solid #bee5eb;
    border-radius: 4px;
    color: #0c5460; /* Dark blue text for contrast */
    margin-bottom: 20px; /* Space before the profile section */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.info-section p {
    margin: 0;
    display: flex;
    align-items: center;
}

.info-section i {
    margin-right: 10px; /* Space between icon and text */
}

.collab-status {
    display: flex;
    align-items: center;
}

.status-indicator {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
}


.carousel-top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

.carousel-indicators.numbered-indicators {
    display: flex;
    list-style: none;
    justify-content: center;
}

.carousel-indicators.numbered-indicators li {
    cursor: pointer;
    margin: 0 5px;
    text-align: center;
    border: none;
    width: 10px;
    height: 10px;
    line-height: 25px;
    background: #ddd;
    color: #333;
    border-radius: 50%;
    transition: all 0.25s ease;
}

.carousel-indicators.numbered-indicators li.active,
.carousel-indicators.numbered-indicators li:hover {
    background: #333;
    color: #fff;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-size: 100%;
    outline: none;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
}

.carousel-control-prev,
.carousel-control-next {
    align-items: center;
    width: auto;
    padding: 0 15px;
}

/* Service Offerings Section  */

  
  .service-section h4 {
    color: #007bff; 
    font-weight: 700;
    /* text-align: center; */
  }
  
  .service-offering {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: box-shadow 0.2s ease-in-out;
  }
  
  .service-offering:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  }
  
  .service-description h5 {
    color: #484848; /* Dark text for titles */
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }
  
  .service-description p {
    font-size: 0.9rem;
    color: #767676; /* Light text for descriptions */
    margin-bottom: 0;
  }
  
  .service-price .price {
    font-size: 1.5rem;
    color: #484848; /* Dark text for price */
    font-weight: 700;
  }
  
  .btn-order {
    background-color: #FF5A5F; 
    color: #FFFFFF;
    border: none;
    border-radius: 4px;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
  }
  
  .btn-order:hover {
    background-color: #F53D52; /* A slightly darker shade for hover */
  }
  
 
  
  @media (max-width: 768px) {
    /* Responsive styles if needed */
    .service-section h4 {
      margin-bottom: 1rem;
    }
  
    .service-offering {
      padding: 1rem;
      margin-bottom: 1rem;
    }
  }
  





  .custom-settlement p {
    max-width: 600px; /* Or a percentage like 80% for responsiveness */
    margin: 0 auto; /* Centers the paragraph if it's not full width */
    text-align: justify;
    line-height: 1.6;
    font-size: 1rem; /* Adjust as needed */
    padding: 1rem; /* Add padding for visual space */
    background-color: #f8f8f8; /* A light background can make it stand out */
    border-left: 4px solid #FF5A5F; /* A colored bar can indicate importance */
  }
  

  .card {
    /* box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); */
    transition: 0.3s;
    border-radius: 10px; /* Adds rounded corners to the card */
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.card-img {
    border-top-left-radius: 10px; /* Rounded corners for the top left of the image */
    border-bottom-left-radius: 10px; /* Rounded corners for the bottom left of the image */
    height: 100%;
}

.card-body {
    padding: 16px;
}

.card-title {
    font-size: 20px;
    margin-bottom: 5px;
}

.card-text {
    margin-bottom: 5px;
    font-size: 16px;
    color: #333; /* Dark grey text */
}

.text-bold {
    font-weight: bold;
}

.card-text a {
    text-decoration: none;
    color: #007bff; /* Bootstrap primary color for links */
}

.card-text a:hover {
    text-decoration: underline;
}

/* Style for the status open/closed */
.status-open {
    color: #28a745; /* Green for open status */
}

.status-closed {
    color: #dc3545; /* Red for closed status */
}

/* Date formatting */
.application-timeline {
    color: #6c757d; /* Grey text */
}

.user-cards-container {
    overflow-x: auto;
    white-space: nowrap;
}

.user-card {
    width: 200px; /* Adjust as needed */
    display: inline-block;
}

.user-cards-navigation {
    text-align: right;
    margin-top: 10px;
}

.nav-btn {
    background-color: #2196F3;
    border-color: #2196F3;
    color: white;
}

.card-title {
    display: flex;
    align-items: center;
}

.verified-badge {
    color: #2196F3; /* Or your preferred color */
    margin-left: 5px; /* Adjust as necessary */
    font-size: 1.2em; /* Adjust as necessary */
}



  
  /* Style the heading */
  .custom-settlement h5 {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
  }
  
  /* Style the custom settlement text */
  .custom-settlement p {
    font-size: 1rem;
    line-height: 1.5;
    color: #666;
  }
  

.service-price {
    display: inline-block; /* Ensures the price doesn't break to a new line */
    font-weight: bold; /* Make the price text bold */
  font-size: 18px; /* Adjust the font size as needed */

}

.georgia-font {
    font-family: Georgia, serif;
  }


  .subscribed-btn-style {
    background-color: #4CAF50; /* Green background for subscribed state */
    color: white;
    // Add other styles as needed
}


@media (max-width: 768px) { /* Adjust the max-width as needed */
    .subscribe-btn.full-text {
        display: none; /* Hide the full-text button on small screens */
    }
    .subscribe-btn.icon-only {
        display: inline-block; /* Show the icon-only button on small screens */
    }
    .footer-content{
        align-items: normal !important;
        justify-content: space-between;
        flex-direction: row;
}
.footer-content .plink-link,
.footer-content .footer-buttons {
    /* flex: 1; */
    text-align: left; /* Aligns plink.bio to the left */
    justify-content: flex-end; /* Aligns icons to the right */
}
}   


.service-section-noborder {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 0px 0px 0 rgba(0,0,0,0.2);
}

@media screen and (max-width: 768px) {
    .right-bottom-image-container {
        display: none;
    }
}


.collab-status .fa-smile-beam, .collab-status .fa-meh {
    transition: transform 0.3s ease-in-out;
}

.collab-status:hover .fa-smile-beam, .collab-status:hover .fa-meh {
    transform: scale(1.1); /* Slightly enlarges the icon on hover */
}

.unread-badge {
    display: none; /* Hidden by default */
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 5px 10px;
    font-size: 0.8em;
}


#no-conversations-empty-state {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#no-conversations-empty-state img {
    max-width: 200px; /* Adjust the size of the image as needed */
    margin-bottom: 20px;
}




.manage-store-section {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease-in-out;
}

.manage-store-section:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.section-title {
    font-size: 1.25rem;
    color: #333;
    margin-bottom: 15px;
    font-weight: 600;
}

.section-title a {
    text-decoration: none;
    color: inherit;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-title a:hover, .section-title a:focus {
    text-decoration: none;
}

.toggle-icon {
    transition: transform 0.3s ease-in-out;
}

.collapse.show + .section-title .toggle-icon {
    transform: rotate(180deg);
}
.edit-title {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.5;
    color: #6c757d;
}

.store-editing-instructions {

    margin-bottom: 20px;
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
    border-left: 4px solid #007bff;
    font-size: 1rem;
    font-weight: 400;
    color: #6c757d!important;
}

  /* Ensure this style is placed after the Bootstrap CSS link */
  .dropdown-menu {
    z-index: 1050; /* Bootstrap's modal uses 1040, so 1050 ensures the dropdown is on top */
}


.conversation-details {
    color: #6c757d!important;
    overflow: hidden;
}

.conversation-message {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-group-item {
    position: relative;
    padding: 10px;
    border: 1px solid #ddd;
}

.conversation-details h5 {
    margin-bottom: 0;
}

.conversation-message {
    font-size: 0.9em;
    color: #666;
}

.unread-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 5px 10px;
    font-size: 0.8em;
    display: none; /* Hide by default, show it via JS when there are unread messages */
}



.conversation-item.active {
    background-color: #e9ecef;
    border-left: 4px solid #007bff;
}

.product-card {
    /* Example styling; adjust as needed */
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 0.25rem;
}

.product-card .card-title {
    font-size: 1rem;
    color: white;
}

.product-card .badge {
    font-size: 0.8rem;
}

.product-card .card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-link {
    text-decoration: none; /* Optional: Removes the underline from links */
    color: inherit; /* Optional: Inherits the text color */
}


.product-card-insights {
    height: 300px; /* Fixed height */
    display: flex;
    flex-direction: column;
}

.product-card-insights .card-img-top {
    height: 150px; /* Fixed height for image */
    object-fit: cover; /* Ensures the image covers the area */
    width: 100%;
}

.product-card-insights .card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background-color: #141A31 !important;
    /* border-radius: 15px; */
    /* box-shadow: 0 0 15px #8BFDFE, 0 0 25px #8BFDFE, 0 0 35px #8BFDFE; */
    color: #8BFDFE;

}

.product-card-insights .card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1; /* Allows the title to fill the space */
}

.card-link {
    text-decoration: none; /* Optional: Removes the underline from links */
    color: inherit; /* Optional: Inherits the text color */
}
.neon-container:hover {
    box-shadow: 0 0 15px #8BFDFE, 0 0 25px #8BFDFE, 0 0 35px #8BFDFE;
}


.selected-role {
    border-bottom: 3px solid #8BFDFE; /* Or any other style you prefer for highlighting */
}

.role-btn {
    padding: 10px 20px;
    border: 2px solid transparent;
    background-color: #333; /* Dark background for contrast */
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.role-btn:hover {
    background-color: #444; /* Slightly lighter on hover */
}

.selected-role {
    border-color: #ff00ff; /* Neon border for selected role */
    background-color: #222; /* Slightly darker for selected state */
    color: #ff00ff; /* Neon text color */
    border-color: #007bff; /* New blue border for selected role */
    color: #007bff; /* New blue text color */
}

.role-selection .tab-selector {
    display: flex;
    justify-content: center; /* Align buttons in the center */
    gap: 20px; /* Space between buttons */
}

.role-btn {
    flex: 1; /* Allows buttons to grow and fit the container */
    /* ... other styles ... */
}


  /* Minimalistic Subscribe Button */
  .subscribe-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: transparent;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    margin-top: 20px;
    text-align: center;
    width: 150px;
    align-items: center;

}

/* Bell Animation on Hover */
.subscribe-button i {
    position: relative;
    display: inline-block;
    margin-right: 5px;
}

.subscribe-button:hover {
    background-color: #333;
    color: #fff;
    transform: scale(1.05);
}

.subscribe-button:hover i::before {
    content: "\f0f3"; /* Unicode for a bell icon with a ringing animation */
    animation: bell-ring 0.3s ease-in-out infinite !important;
}

@keyframes bell-ring {
    0% {
        transform: translateX(0) rotate(0);
    }
    25% {
        transform: translateX(-2px) rotate(-20deg);
    }
    50% {
        transform: translateX(2px) rotate(20deg);
    }
    75% {
        transform: translateX(-2px) rotate(-20deg);
    }
    100% {
        transform: translateX(0) rotate(0);
    }
}


/* Style for the Plink It! button */
.magic-btn {
    background-color: #007bff; /* or your preferred color */
    color: white;
    border: none;
    padding: 10px 20px;
    margin-right: 20px; /* Space between the button and the link */
    /* Other styling as needed */
}

/* Space between the button and the text link */
.cta-space {
    display: inline-block;
    width: 20px; /* Adjust the space as needed */
}


.manual-add-link {
    color: #007bff; /* Match with the button or use a different subtle color */
    transition: all 0.3s ease;
    position: relative;
    padding-bottom: 2px; /* For the underline */
    display: inline-flex; /* Aligns the icon with the text */
    align-items: center; /* Centers the icon vertically with the text */
}

.manual-add-link i {
    margin-right: 5px; /* Space between the icon and text */
}

.manual-add-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #007bff; /* Match with the text color */
    transform: scaleX(0);
    transition: transform 0.3s ease;
    text-decoration: none;
}

.manual-add-link:hover::after {
    transform: scaleX(1); /* Underline grows on hover */
    text-decoration: none;
}
/* Top Bar Styles */
.top-bar {
    position: relative; /* Added for absolute positioning of the close button */
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    font-family: 'Arial', sans-serif;
}

.top-bar a.full-bar-link {
    display: block; /* Make the link fill the container */
    text-decoration: none; /* Remove underline from links */
    color: #fff; /* Set the text color */
    padding-right: 40px; /* Give space for the close button */
}

/* ... other styles ... */

.top-bar .close-button {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5em;
    cursor: pointer;
    outline: none; /* Remove focus outline */
}

.top-bar .close-button:hover {
    color: #ccc;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .top-bar .message {
        padding: 0 10px;
    }

    .top-bar .cta-button {
        padding: 5px 10px;
        font-size: 0.8em; /* Smaller text on smaller screens */
    }
}

/* ... other styles ... */

.store-full{
    width: 100%;
    text-align: center;
    padding: 0px 5px 0;
}



    /* Ensure full width for top bar and navigation */
.top-bar, .navbar-custom, .store-full {
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
}

/* If using container-fluid, override its padding */
.container-fluid {
    padding-right: 0;
    padding-left: 0;
}


.navbar-store{
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 600 !important;
    font-size: 1em !important;
    line-height: 1.1 !important;
    letter-spacing: .3em !important;
    text-transform: uppercase !important;
}


/* Custom styles for the navigation bar */
.navbar-custom {
    background-color: #FCF8F2; /* or any color that matches your design */
    padding: 1rem 2vw; /* Adjust padding as needed */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top:0px;
}

.navbar-custom .navbar-brand {
    font-weight: bold;
    font-size: 1.5em; /* Adjust size as needed */
    color: #333; /* Adjust color as needed */
}

.navbar-custom .nav-link {
    color: #555; /* Adjust color as needed */
    padding: 0; /* Remove padding to make the icons tighter */
}

/* Adjust the wishlist icon's position */
.navbar-custom .wishlist-link {
    display: flex;
    align-items: center;
}

/* Hide text on mobile for the wishlist link */
@media (max-width: 576px) {
    .navbar-custom .wishlist-link {
        font-size: 0; /* Hide text */
    }
    .navbar-custom .wishlist-link .fa {
        font-size: 1.2em; /* Adjust icon size as needed */
    }
}

/* Stack the social icons and wishlist vertically on smaller screens */
@media (max-width: 576px) {
    .navbar-custom .navbar-collapse {
        flex-basis: 100%;
        flex-grow: 1;
        align-items: flex-start;
    }
    .navbar-custom .navbar-nav {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
    .navbar-custom .nav-item {
        width: 100%; /* Full width */
        margin: 5px 0; /* Adjust margin as needed */
    }
    .navbar-custom .nav-link {
        justify-content: flex-start; /* Align icons to the left */
    }
}


/* Add custom styles here if needed, on top of existing styles */
.navbar-brand{    font-weight: 600 !important;
    font-size: 1em !important;
    line-height: 1.1 !important;
    letter-spacing: .3em !important;
    text-transform: uppercase !important;}
/* Ensures the navbar-toggler is visible */
.navbar-toggler {
    border: none;
    outline: none;
}

/* Change the color of the toggler icon if needed */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}

/* Custom styling for the collapsed menu items */
/* @media (max-width: 768px) {
    .navbar-collapse {
        background-color: #FCF8F2; 
    }
    .nav-item {
        border-bottom: 1px solid #ddd; 
    }
} */


.fab.fa-instagram:hover {color: white !important;
    background:linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);}

    .message{    font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
        font-weight: 300;
        font-family: 'proxima-nova',arial,sans-serif;
        font-size: 13px;
        font-weight: 500;
        font-style: normal;
        letter-spacing: 1px;
        text-transform: none;
        color: #fff;
        line-height: inherit;}


        /* Ensure the elements don't overflow the screen width */
.top-bar, .navbar-custom, .container-fluid {
    max-width: 100%;
    /* overflow-x: hidden; */
}

/* Adjust styles for smaller screens */
@media (max-width: 768px) {
    .navbar-custom .navbar-brand {
        font-size: 1rem; /* Smaller font size for mobile */
    }

    .navbar-nav .nav-item .nav-link {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .navbar-toggler {
        /* Adjustments for the hamburger menu */
    }

    /* Hide wishlist text on smaller screens */
    .wishlist-link {
        font-size: 0.8rem; /* Adjust as needed */
        display: flex;
        align-items: center;
    }

    .wishlist-link .fa-heart {
        margin-right: 5px;
    }
}

/* Ensure the full width of the container */
.container-fluid {
    padding-right: 0;
    padding-left: 0;
}


/* Container for the location input, giving it a Google Maps-like feel */
.location-container {
    position: relative;
    width: 100%;
    /* max-width: 400px; Adjust as per your layout */
}

/* Style for the autocomplete input field */
#autocomplete {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #dfe1e5; /* Light grey border */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    font-size: 16px; /* Comfortable font size */
    line-height: 1.5;
}

/* Style adjustments when the input is focused */
#autocomplete:focus {
    outline: none;
    border-color: #4d90fe; /* Blue border on focus */
    box-shadow: 0 0 8px rgba(66, 133, 244, 0.3); /* Slightly deeper shadow with a blue tint */
}

.profile-location {
    font-size: 0.9em; /* Adjust the size as needed */
    color: #555; /* Adjust the color as needed */
    margin-bottom: 10px; /* Space before the description or next element */
}


.business-location-section {
    background-color: #f9f9f9; /* Light grey background for subtlety */
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Softer shadow */
    /* padding: 15px; */
    margin-top: 20px;
    text-align: center;
    width: 100%;
    max-width: 360px; /* Smaller width for a more subtle design */
    margin: 20px auto;
    /* font-family: 'Roboto', 'Arial', sans-serif; */
}

.business-location-title {
    color: #707070; /* Lighter text color */
    font-size: 16px; /* Smaller font size */
    font-weight: 500;
    margin-bottom: 10px; /* Less space after the title */
}

.business-phone-number {
    font-size: 14px; /* Smaller font size */
    color: #707070; /* Lighter text color */
    margin-bottom: 8px; /* Less space after the phone number */
}

.business-address {
    font-size: 14px;
    color: #707070; /* Lighter text color */
    margin-bottom: 12px; /* Adjusted spacing */
}

.get-directions-btn {
    background-color: #ffffff; /* White background for the button */
    color: #707070; /* Lighter text color */
    border: 1px solid #dcdcdc; /* Lighter border color */
    border-radius: 4px;
    padding: 8px 16px; /* Smaller padding for a subtler button */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px; /* Smaller font size */
    font-weight: 400;
    transition: all 0.3s ease;
    margin-top: 5px; /* Positioning adjustment */
    width:100%;
}

.get-directions-btn i {
    margin-right: 8px;
}

.get-directions-btn:hover {
    background-color: #f0f0f0; /* Very subtle color change on hover */
    border-color: #cfcfcf; /* Lighter border on hover */
}

/* Responsive design */
@media (max-width: 768px) {
    .business-location-section {
        /* padding: 15px; */
        max-width: 100%; /* Full width on smaller screens */
    }

    .business-location-title, .business-phone-number, .business-address, .get-directions-btn {
        font-size: 13px; /* Even smaller font size for mobile */
    }
}

.business-location-title::before {
    content: '📍\00a0'; /* Unicode for the emoji followed by a space (non-breaking space) */
    display: inline;
    margin-right: 5px;
}

.business-phone-number::before {
    content: '📞\00a0';
    display: inline;
    margin-right: 5px;
}






.map-snapshot {
    position: relative;
    width: 100%;
    padding-bottom: 50%; /* This percentage dictates the height relative to the width. Adjust as needed. */
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
}

.static-map-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    object-fit: cover; /* This will cover the area of the container without stretching the image. */
}

@media (max-width: 768px) {
    .map-snapshot {
        padding-bottom: 75%; /* Increase the bottom padding to maintain aspect ratio on smaller screens */
    }
}

@media (max-width: 480px) {
    .map-snapshot {
        padding-bottom: 100%; /* Further increase for very small screens */
    }
}
.get-directions-btn {
    background: none;
    border: none;
    color: #007bff;
    padding: 10px 0;
    font-size: 16px;
    text-decoration: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Space between icon and text */
    overflow: hidden; /* Hide the pseudo-element initially */
    transition: color 0.3s ease;
}

.get-directions-btn i {
    transition: transform 0.3s ease;
}

.get-directions-btn::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -2px; /* Align to the bottom of the text */
    left: 0;
    background-color: #007bff;
    transform: scaleX(0); /* Start as a flat line */
    transform-origin: bottom right;
    transition: transform 0.3s ease;
}

.get-directions-btn:hover::before {
    transform: scaleX(1); /* Expand to full width */
    transform-origin: bottom left;
}

.get-directions-btn:hover i {
    transform: translateX(4px); /* Move icon to the right */
}

.get-directions-btn:hover {
    color: #0056b3;
}

.get-directions-btn::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -2px; /* Align to the bottom of the text */
    left: 0;
    width: 100%;
    background-color: #007bff;
    transform: scaleX(0); /* Start as a flat line */
    transform-origin: bottom right;
    transition: transform 0.3s ease, opacity 0.3s ease; /* Added opacity to the transition */
    opacity: 0; /* Start as transparent */
}

.get-directions-btn:hover::before {
    transform: scaleX(1); /* Expand to full width */
    transform-origin: bottom left;
    opacity: 1; /* Fade in */
}




.brand-deals-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px; /* Adjust the gap size as needed */
}

.brand-deal {
    background-color: #f9f9f9;
    padding: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.3s ease, transform 0.3s ease;
    width: 100%;
}

.brand-deal:hover {
    background-color: #e9e9e9; /* Slightly darker on hover */
    transform: translateY(-2px); /* Lift the element */
}

.deal-pricing-type {
    background-color: #007bff; /* Blue background for the tag/pill */
    color: #fff;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.9em;
}

.apply-now-link {
    color: #333;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px; /* Space between text and arrow */
    transition: color 0.3s ease;
}

.apply-now-link:hover {
    color: #007bff; /* Highlight color on hover */
}

.apply-now-link i.fa-arrow-right {
    transition: transform 0.3s ease;
}

.apply-now-link:hover i.fa-arrow-right {
    transform: translateX(5px); /* Move the arrow on hover */
}


.brand-deals-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0;
}

.brand-deal {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 8px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.brand-deal:hover {
    background-color: #f7f7f7;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.deal-pricing-type {
    background-color: #EFEFEF;
    color: #333;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.85em;
    margin-right: 8px;
}

.apply-now-link {
    color: #FF385C;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
    font-weight: 600;
    margin-left: 20px;
    white-space: nowrap;
}

.apply-now-link:hover {
    color: #FF6B7C; /* Lighter shade for hover */
}

.brand-deals-container {
    gap: 5px; /* Slightly more space between deals */
}

.brand-deal {
    border: 1px solid #EAEAEA; /* Softer border color */
    padding: 10px 15px; /* Slightly more padding for a spacious feel */
    border-radius: 25px; /* More rounded corners for a softer look */
}

.brand-deal:hover {
    background-color: #FAFAFA; /* Very light grey for a subtle hover effect */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* Softer shadow */
}

.deal-pricing-type {
    font-weight: 400; /* Lighter font-weight */
    letter-spacing: 0.025em; /* Slightly increased letter-spacing */
}

.apply-now-link {
    font-weight: 400; /* Lighter font-weight */
    letter-spacing: 0.025em; /* Slightly increased letter-spacing */
}

.brand-deal:hover {
    transform: translateY(-2px) scale(1.02); /* Slight scale for emphasis */
}
.brand-deal {
    min-width: 120px; /* Minimum clickable area */
    min-height: 44px; /* Minimum clickable area */
}


@media (max-width: 600px) {
    .brand-deals-container {
        gap: 8px;
    }

    .brand-deal {
        padding: 8px 10px; /* Smaller padding on smaller screens */
    }
}


@media (max-width: 600px) {
    .brand-deals-summary {
        padding: 8px;
        border-radius: 15px;
    }

    .brand-deals-summary i.fa-handshake {
        font-size: 1em; /* Smaller icon on smaller screens */
    }
}

.brand-deals-summary {
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.brand-deals-summary:hover {
    background-color: #f0f0f0; /* Slightly darker on hover for visual feedback */
}

.brand-deal {
    background-color: #F4F1F8; /* Light purple background */
    border: 1px dashed #A279AF; /* Dashed border in a darker purple */
    border-radius: 10px; /* Rounded corners */
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.brand-deal-icon {
    color: #A279AF; /* Icon color */
    margin-right: 20px; /* Space after the icon */
}

.deal-content {
    flex-grow: 1; /* Ensure this takes up the available space */
    text-align: left;
}

.deal-title {
    font-weight: bold; /* Bold for the title */
    color: #6F367E; /* Dark purple color for the title */
    display: block; /* Display as block to put on a new line */
    font-size: 0.9em;
}

.deal-description {
    color: #6F367E; /* Dark purple color for description */
    display: block; /* Display as block to put on a new line */
    font-size:0.9em;
}

.apply-now-link {
    color: #6F367E; /* Dark purple color for the apply link */
    text-decoration: none; /* No underline */
    font-weight: bold;
    transition: color 0.3s;
}

.apply-now-link:hover {
    color: #A279AF; /* Lighter purple on hover */
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .brand-deal {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .apply-now-link {
        align-self: flex-end; /* Align the link to the right on small screens */
        margin-top: 5px; /* Space from the description */
        
    }
}

/* Existing styles for .brand-deals-container and .brand-deal */

/* Smaller screen optimizations */
@media (max-width: 1400px) {
    .brand-deals-container .brand-deal .deal-content .deal-title,
    .brand-deals-container .brand-deal .deal-content .deal-description {
        font-size: 0.65em; /* Adjust font size as needed */
    }

    .brand-deals-container .brand-deal .apply-now-link {
        margin-left:8px;
        font-size: 0.65em; /* Adjust font size as needed */
    }

    .brand-deals-container .brand-deal {
        padding: 8px; /* Adjust padding as needed */
    }

    .brand-deals-container .brand-deal .brand-deal-icon {
        /* Adjust icon size if needed */
        font-size: 0.65em;
    }
}
/* Adjusting the brand deal card size and font */
.brand-deals-container .brand-deal {
    padding: 10px; /* Reduced padding */
    font-size: 0.8rem; /* Smaller font size */
}

.brand-deals-container .deal-content {
    padding: 5px 0; /* Reduced padding around the deal content */
}

/* Smaller titles for deal types */
.brand-deals-container .deal-title {
    font-size: 1rem; /* Smaller font size for deal title */
    margin-bottom: 5px; /* Less space below the title */
}

/* Adjust the font size for deal pricing information */
.brand-deals-container .deal-pricing {
    font-size: 0.8rem; /* Smaller font size for pricing */
}

/* Smaller button for applying */
.brand-deals-container .apply-now-link {
    padding: 5px 10px; /* Smaller padding inside the apply button */
    font-size: 0.8rem; /* Smaller font size for button text */
}

/* You might also want to adjust the line height for tighter text */
.brand-deals-container p, .brand-deals-container span, .brand-deals-container a {
    line-height: 1.2; /* Tighter line height */
}

/* Optionally, reduce the size of the icon if it's too large */
.brand-deals-container .brand-deal-icon {
    font-size: 1rem; /* Smaller icon size */
}


.beta-tag {
    background-color: #f0ad4e; /* Orange color for beta tag */
    color: white;
    font-size: 75%;
    padding: 2px 4px;
    border-radius: 2px;
    margin-left: 4px;
    vertical-align: middle;
}


.btn-magic-outreach {
    background: linear-gradient(45deg, #6dd5ed, #ff758c);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-magic-outreach:hover {
    box-shadow: 0 0 10px 0 rgba(255, 117, 140, 0.8), 0 0 40px 0 rgba(109, 213, 237, 0.8);
    transform: scale(1.05);
}

.btn-magic-outreach::before {
    content: '';
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.6s ease;
    border-radius: 30px;
    z-index: -1;
}

.btn-magic-outreach:hover::before {
    left: 100%;
}

.deal-status {
    font-size: 16px;
color: #333;
}

.status-text {
font-weight: bold;
color: #4CAF50; /* You can change the color to reflect the status */
}

.status-open .status-text {
    color: #4CAF50; /* Green for open */
}

.status-closed .status-text {
    color: #F44336; /* Red for closed */
}

.status-in-progress .status-text {
    color: #FFC107; /* Amber for in progress */
}
@media screen and (max-width: 768px) {
    .table-responsive {
        width: 100%;
        overflow-x: auto;
    }

    .table th, .table td {
        padding: 8px; /* Smaller padding */
    }

    .table td {
        font-size: 14px; /* Smaller font size */
    }

    .edit-genres, .save-genres {
        padding: 5px 10px; /* Adjust button padding */
        font-size: 12px; /* Smaller button font size */
    }

    /* Add more styles as needed */
}

.creator-image-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.blurred-image {
    filter: blur(8px);
    transition: filter 0.3s ease-in-out;
    width: 100px;
    height: 100px;
    margin: 5px;
    position: relative;
}

.custom-tooltip {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
}

.custom-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.blurred-image:hover .custom-tooltip {
    visibility: visible;
}

.progress-bar {
    width: 0%;
    background-color: #4caf50;
    text-align: center;
    line-height: 30px; /* Adjust as needed */
    color: white;
    transition: width 0.5s;
    display: none;
}

.progress-count {
    margin: 0;
    padding: 0;
}

.placeholder-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 20px;
    font-weight: bold;
}

/* new phone preview */

.phone-mockup {
    width: 375px; /* Standard iPhone width */
    height: 812px; /* Standard iPhone X, XS height */
    background-color: #F2F2F7; /* White background for the phone */
    border-radius: 38px; /* Rounded corners for modern iPhones */
    position: relative;
    margin: auto; /* Center the mockup on the page */
    box-shadow: 0 4px 20px rgba(0,0,0,0.1); /* Subtle shadow for depth */
    overflow: hidden; /* Ensures nothing spills outside the phone's border */
    border: 16px solid #000; /* Black border to represent the phone edges */
}

.phone-top {
    background-color: #000; /* Black notch color */
    height: 32px; /* Notch height */
    width: 141px; /* Full width */
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 5px;
}

.notch {
    width: 125px; /* Notch width */
    height: 30px; /* Notch actual height */
    background-color: #000; /* Notch color */
    border-radius: 0 0 20px 20px; /* Rounded bottom edges of the notch */
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.phone-screen {
    overflow-y: auto;
    background: #f7f9fc; /* Gmail-like background */
    position: relative;
    top: 20px;
    padding: 20px;
    flex-grow: 1;
}

.phone-button {
    width: 60px; /* Home button width */
    height: 60px; /* Home button height */
    background-color: #333; /* Home button color */
    border-radius: 50%;
    position: absolute;
    bottom: 24px; /* Adjusted for visual center */
    left: 50%;
    transform: translateX(-50%);
}

.home-indicator {
    height: 5px; /* Home indicator height */
    background-color: #333; /* Home indicator color */
    width: 134px; /* Home indicator width */
    border-radius: 100px; /* Fully rounded */
    position: absolute;
    bottom: 10px; /* Positioned at the bottom */
    left: 50%;
    transform: translateX(-50%);
}


.email-preview,
.email-header,
.email-footer {
    background: #f7f7f7;
    padding: 10px;
    border-bottom: 1px solid #e0e0e0;
    color: #202020;
    font-size: 12px;
}

.email-footer {
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-around;
}

.email-body {
    padding: 10px;
    background: white;
}

.social-icons i {
    margin: 0 5px;
}

.unsubscribe {
    color: #666;
    margin-top: 10px;
    font-size: 12px;
    text-align: center;
    display: block;
}

.btn-success {
    background-color: #4CAF50;
    color: white;
    padding: 10px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
}

/* Scrollbar styling */
.phone-screen::-webkit-scrollbar {
    width: 5px;
}

.phone-screen::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.phone-screen::-webkit-scrollbar-track {
    background: #efefef;
}

.phone-mockup {
    width: 375px; /* Standard iPhone width */
    height: 812px; /* Standard iPhone X, XS height */
    border-radius: 38px; /* Rounded corners for modern iPhones */
    position: relative;
    /* padding-top: 20px;  */
    box-shadow: 0 4px 20px rgba(0,0,0,0.1); /* Subtle shadow for depth */
    margin: auto; /* Center the mockup on the page */
    overflow: hidden; /* Ensures nothing spills outside the phone's border */
}

.phone-top {
    width: 142px; /* Width of the notch area */
    height: 30px; /* Height of the notch area */
    background-color: #000; /* Notch color */
    border-radius: 0 0 20px 20px; /* Rounded bottom edges of the notch */
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.phone-screen {
    width: 100%; /* Full width of the phone mockup */
    height: calc(100% - 54px); /* Height minus the notch and home indicator */
    background-color: #F2F2F7; /* Light grey background, common for iOS */
    position: relative;
    overflow-y: auto; /* Allows content to scroll */
}

.phone-button {
    width: 62px; /* Width of the home button */
    height: 62px; /* Height of the home button */
    background-color: #333; /* Dark color for the button */
    border-radius: 50%; /* Fully rounded corners for the button */
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Shadow for the button for depth */
}

.home-indicator {
    width: 134px; /* Width of the home indicator */
    height: 5px; /* Height of the home indicator */
    background-color: #000; /* Color of the indicator */
    border-radius: 100px; /* Fully rounded edges of the indicator */
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

/* Email app navbar */
.email-client-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0px;
    background: #F1F3F4;
    /* border-bottom: 1px solid #E0E0E0; */
    font-size: 15px;
    position: sticky;
    top: 0;
}
.email-icon{padding-right: 10px;}
/* Font Awesome Icons for navigation */
.nav-icon {
    font-size: 20px; /* Icon size */
    color: #333; /* Icon color */
    margin: 0 8px; /* Space around icons */
}


.phone-top .notch {
    /* existing notch styles */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
}

.status-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    color: #fff;
}

.status-bar-left span {
    font-size: 14px;
}

.status-bar-right i {
    margin: 0 2px;
    font-size: 14px;
}

/* Font Awesome icons for signal, wifi, and battery */
.fas.fa-signal:before {
    content: "\f012"; /* Change with appropriate content code if needed */
}

.fas.fa-wifi:before {
    content: "\f1eb"; /* Change with appropriate content code if needed */
}

.fas.fa-battery-full:before {
    content: "\f240"; /* Change with appropriate content code if needed */
}

.phone-mockup {
    position: relative;

}

.phone-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 4px 20px;
    z-index: 2; /* Ensures the status bar is above the notch */
}

.status-bar-left, .status-bar-right {
    display: flex;
    align-items: center;
}

.status-bar-left span {
    font-size: 14px;
    color: black;
}

.status-bar-right i {
    color: black;
    margin: 0 3px;
    font-size: 14px;
}

.notch {
    width: 145px;
    height: 30px;
    background-color: #000;
    border-radius: 0 0 20px 20px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1; /* Ensures the notch is below the status bar */
}

.deal_interest {
    font-family: 'Arial', sans-serif;
    text-align: center;
    font-size: 14px;
    text-decoration: underline;
    font-weight: bold;
    
}

.email-subject {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0px;
    /* font-weight: bold; */
    /* border-bottom: 1px solid #E0E0E0; */
}

.inbox-label {
    margin-left: auto; /* This pushes the inbox label to the right */
    padding: 0 8px; /* Adjust spacing around the inbox label */
    background: #E0E0E0; /* Background color for the inbox label */
    border-radius: 4px; /* Rounded corners for the label */
    font-weight: normal; /* Normal font weight for the label */
    font-size: 0.8rem;
}

.email-star {
    margin-left: 12px; /* Spacing between the inbox label and the star */
    color: #808080; /* Grey color for the hollow star */
}


.email-sender {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* padding: 10px; */
    /* border-bottom: 1px solid #E0E0E0; */
}

.sender-image {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}
.sender-receiver{
    font-size: 0.6rem;
}

.sender-details {
    flex-grow: 1;
    font-size: 0.8rem;
}

.email-time {
    margin-left: 10px;
    color: #808080;
    font-size: 0.6rem;
}

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

.email-footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;
    background: #F1F3F4; /* Light gray background */

    bottom: 0;
    border-top: 1px solid #E0E0E0; /* Light border for separation */
}

.footer-btn {
    background: none;
    border: none;
    padding: 10px;
    font-size: 24px; /* Larger icons for better touch targets */
    color: #007AFF; /* iOS blue color for icons */
}



/* Style the scrollbar to be less prominent */
.phone-screen::-webkit-scrollbar {
    width: 3px; /* Narrower scrollbar */
}

.phone-screen::-webkit-scrollbar-thumb {
    background: #ccc; /* Lighter color for the thumb */
}


#videoDescription {
    background-color: rgb(251, 248, 246); /* Sleek background color */
    padding: 20px;
    margin: 20px 0;
    border-radius: 8px;
    border: 1px solid #d3d3d3;
    position: relative;
    font-family: Arial, sans-serif;
    color: #333;
}

#videoDescription::before {
    content: open-quote;
    font-size: 40px;
    position: absolute;
    left: 10px;
    top: -10px;
    color: #ccc;
}

#videoDescription::after {
    content: close-quote;
    font-size: 40px;
    position: absolute;
    right: 10px;
    bottom: -10px;
    color: #ccc;
}
.profile-image {
    position: absolute;
    top: -30px; /* Adjust as needed */
    left: 50%;
    transform: translateX(-50%);
    width: 60px; /* Adjust size as needed */
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    background-color: white;
    border: 2px solid white; /* Optional border for the image */
}

.profile-image img {
    width: 100%;
    height: auto;
}

.product-card {
    border: 1px solid #ddd;
    padding: 10px;
    margin: 5px;
    text-align: center;
}

.product-card img {
    /* max-width: 100px; */
    height: auto;
    margin-bottom: 10px;
}


.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1050; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.images-container img {
    margin: 10px;
    border: 1px solid #ddd; /* Gray border */
    border-radius: 4px; /* Rounded border */
    padding: 5px; /* Some padding */
    width: 150px; /* Set a small width */
    cursor: pointer; /* Pointer/hand icon */
    transition: transform 0.2s; /* Animation */
}

.images-container img:hover {
    transform: scale(1.1); /* (110% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}


.selected-image {
    border: 2px solid blue; /* Or any style you prefer */
}


.profile-picture {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto 15px;
}

/* Style the likes count and like icon */
.likes-count {
    font-size: 24px;
    color: #ff5733; /* Fun and visually appealing color */
    margin-right: 5px;
}

.like-icon {
    font-size: 24px;
    color: #ff5733;
}

/* Style the PlinkIt button */
.plink-button {
    background-color: #ff5733; /* Fun and visually appealing button color */
    color: #fff;
    border: none;
    margin-bottom: 20px;
}

/* Style the product links */
.product-links {
    margin-top: 20px;
}

.product-link {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.product-thumbnail {
    width: 80px;
    height: 80px;
    margin-right: 10px;
}

.product-title {
    font-size: 16px;
    margin: 0;
}

.view-details-btn {
    font-size: 14px;
    padding: 5px 10px;
}

/* Style the title and description at the bottom */
h1 {
    font-size: 24px;
    color: #333; /* Muted color for SEO purposes */
}

.description {
    font-size: 16px;
    color: #666; /* Muted color for SEO purposes */
}

#comments {
    margin-top: 20px;
}

.comment {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #f9f9f9;
}

.comment-header {
    font-weight: bold;
    margin-bottom: 5px;
}

.likes-count {
    color: #ff5733; /* Fun and visually appealing color for likes count */
    margin-right: 5px;
}

.like-icon {
    font-size: 16px;
    color: #ff5733;
}

.comment-text {
    font-size: 14px;
}


.storefront-container {
    background-color: #f7f9fc;
    padding: 50px 0;
}



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

.profile-picture {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto 15px;
}

.profile-name {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.profile-desc {
    font-size: 0.9em;
    color: #888;
    margin-bottom: 20px;
}

.social-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.social-btn {
    background-color: rgb(51, 51, 51);
    color: #fff;
    border-radius: 5px;
    padding: 7px 15px;
    font-size: 0.8em;
    transition: background-color 0.3s, color 0.3s; /* Added color to the transition */
}

.social-btn:hover {
    background-color: #555;
    color: #fff; /* Ensuring text remains white on hover */
    text-decoration: none;
}

.social-btn i.fab {
    color: white;
}

.store-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.store-pill {
    padding: 10px;
    text-align: center;
    background-color: rgb(247, 247, 247);
    color: rgb(51, 51, 51);
    border-radius: 15px;
    transition: background-color 0.3s;
    cursor: pointer;
}

.store-pill:hover {
    background-color: #ffdde1; /* This is the pastel pink from your theme */
}

.product-card {
    background-color: #fff;
    border-radius: 10px;
    /*box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);*/
    transition: transform 0.3s ease;
    overflow: hidden;
}

.product-card:hover {
    transform: translateY(-10px);
}

.product-image {
    width: 100%;
    display: block;
}

.product-title {
    font-size: 0.9em;
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.product-price {
    color: #007bff;
    font-weight: bold;
    padding: 10px;
}

.view-details-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px;
    background-color: transparent;
    border: none;
    color: #333;
    font-size: 0.9em;
}

.view-details-btn:hover {
    text-decoration: underline;
    background-color: rgba(0, 0, 0, 0.03);
}
.social-media-embed {
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.social-media-embed::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 2px dashed #ccc;
    box-sizing: border-box;
}

.content-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    height: 200px; /* you can adjust the height as needed */
    transition: background-color 0.3s ease;
}

.content-placeholder i {
    font-size: 2em;
    margin-bottom: 10px;
    color: #aaa;
}

.content-placeholder p {
    font-size: 0.9em;
    color: #888;
}
  
    .video-title {
        text-align: center;
        margin-bottom: 20px;
    }
    .slick-dots li button {
    background-color: #888; /* or any color you prefer */
}

.slick-dots li.slick-active button {
    background-color: #333; /* or any color you prefer */
}
/* Updated Sidebar Styling */
.sidebar-content {
    width: 100%;
    max-width: 800px; /* Set the same max-width as the video player */
    margin: 0 auto; /* To center the content */
    padding: 0 30px;
}

/* Update for Video Player (to ensure consistent styling) */
.featured-video-card {
    width: 100%;
    max-width: 800px;
    margin: 0 auto; /* To center the video */
    /*padding: 20px;*/

    
}

/* YouTube styling */
.fab.fa-youtube {
    color: #FF0000; /* YouTube Red */
}

.fab.fa-youtube:hover {
    color: #D80000; /* A darker red for hover effect */
}

/* Instagram styling */
.fab.fa-instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
    border-radius: 3px; /* Give it a rounded edge to fit the gradient background */
}

.fab.fa-instagram:hover {
    background: linear-gradient(45deg, #d08430 0%, #c36139 25%, #bf2550 50%, #aa2163 75%, #9c1785 100%);
}

/* TikTok styling */
.fab.fa-tiktok {
    color: #000000; /* Black for TikTok, as its logo typically is black or white based on the background */
}

.fab.fa-tiktok:hover {
    color: #333333; /* A lighter black for hover effect */
}

    
/* Container for the YouTube iframe */
.featured-video-card .youtube-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional shadow for aesthetics */
}

/* The YouTube iframe */
.featured-video-card .youtube-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.product-card img {

    height: auto;
}
    
.product-card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.product-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.product-title {
    padding: 15px;
    text-align: center;

    font-weight: bold;
    color: #333;
    flex-grow: 1;
}


/* Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
  }
  
  /* Dropdown button on hover & focus */
  .dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
  }
  
  /* Dropdown Content */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {background-color: #f1f1f1}
  




/* Ensure the navbar is relatively positioned */
.navbar {
    position: relative; /* This is necessary for absolute positioning of children */
    z-index: 1030; /* Make sure this is higher than other page elements if necessary */
}

/* Style the custom dropdown */
.navbar .custom-dropdown {
    position: static; /* Default positioning */
}

/* Style the custom dropdown menu */
.navbar .custom-dropdown .custom-dropdown-menu {
    display: none; /* Hidden by default */
    position: absolute; /* Absolute positioning relative to the nearest positioned ancestor (navbar) */
    left: 0;
    right: 0;
    background-color: #FCF8F2; /* Your desired background color */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); /* Shadow for a "floating" effect */
    z-index: 1050; /* Ensure this is above other content but below modal overlays, etc. */
    border-radius: 0; /* Optional: if you want no rounded corners */
    border: none; /* Remove borders */
    overflow: visible; /* Ensure the content doesn't get cut off */
}

/* Style the custom dropdown items */
.navbar .custom-dropdown .custom-dropdown-menu .custom-dropdown-item {
    display: block; /* Display as block for full-width */
    width: 100%; /* Full width of the dropdown */
    padding: 10px 15px; /* Padding for spacing */
    color: #333; /* Text color */
    text-decoration: none; /* Remove underline from links */
}

/* Show the custom dropdown on hover */
.navbar .custom-dropdown:hover .custom-dropdown-menu {
    display: block; /* Display the dropdown on hover */
    text-align:left;
}

/* Default state for dropdown items */
.navbar .custom-dropdown .custom-dropdown-menu .custom-dropdown-item {
    background-color: transparent; /* No background color by default */
    color: #333; /* Default text color */
    /* Other styles... */
}

/* Hover state for dropdown items */
.navbar .custom-dropdown .custom-dropdown-menu .custom-dropdown-item:hover,
.navbar .custom-dropdown .custom-dropdown-menu .custom-dropdown-item:focus {
    background-color: #C9C6C1; /* Light grey background on hover */
    font-weight:600; /* Change text color for contrast, if needed */
}

/* Active state for dropdown items */
.navbar .custom-dropdown .custom-dropdown-menu .custom-dropdown-item.active {
    background-color: #C9C6C1; /* Light grey background for active item */
    color: #555; /* Text color for active item */
}

#videoPlayer {
    /* box-shadow: 0 4px 8px rgba(0,0,0,0.1); */
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

#videoPlayer:hover {
    transform: scale(1.02);
}

#videoPlayer iframe {
    border: none;
}

.custom-play-button {
    /* Custom styles here */
}

#comments {
    font-family: 'Arial', sans-serif;
    color: #333;
}

.comment {
    background-color: #f9f9f9;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.comment:hover {
    background-color: #eaeaea;
}

.comment-header strong {
    font-weight: 600;
}

.like-icon {

    cursor: pointer;
}

.like-icon.active {
    color: #0044cc;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.storefront-container{
    padding-left: 10px;
    padding-right: 10px;}

/* subpage - tv player for videos */
    /* #tv-frame {
        width: 80%; 
        margin: 40px auto;
        background-color: rgba(0, 0, 0, 0.85); 
        border-radius: 10px; 
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); 
        padding: 10px;
        position: relative;
        box-sizing: border-box;
        margin-top: 0px;
    }
    
    #tv-frame:before {
        content: '';
        display: block;
        position: absolute;
        bottom: -30px;
        left: 50%;
        transform: translateX(-50%);
        width: 25%; 
        height: 25px; 
        background-color: #333; 
        border-radius: 5px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); 
    }
    
    #videoPlayer {
        overflow: hidden;
        border-radius: 8px;
    }
    
    #videoPlayer iframe {
        display: block;
        width: 100%;
        height: auto; 
        max-height: 70vh;
    } */
    #tv-frame {
        background: #333; /* Dark brown for the retro look */
        padding: 20px;
        border-radius: 20px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
        position: relative;
    }
    
    #tv-frame:before, #tv-frame:after {
        content: '';
        position: absolute;
        background: #222; /* Darker shade for knobs */
        height: 20px;
        width: 20px;
        bottom: 10px;
        border-radius: 50%;
    }
    
    #tv-frame:before {
        left: 30px;
    }
    
    #tv-frame:after {
        right: 30px;
    }
    
    #tv-stand { /* New CSS for TV stand */
        content: '';
        display: block;
        position: absolute;
        bottom: -30px; /* Adjust the position as needed */
        left: 50%;
        transform: translateX(-50%);
        width: 60%; /* Adjust the width as needed */
        height: 20px; /* Adjust the height as needed */
        background-color: #222; /* Color of the stand */
        border-radius: 10px; /* Rounded top edges */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Shadow for depth */
    }
    
    #videoPlayer {
        border-radius: 12px;
        overflow: hidden;
    }
    
/*  */

.highlighted {
    border: 3px solid #4CAF50; /* Green border */
    box-shadow: 0 0 10px #4CAF50; /* Green shadow for more emphasis */
}

.modal-content button {
    margin-top: 10px; /* Adds space above each button */
    padding: 10px 20px; /* Larger buttons for easier clicking */
    font-size: 1.2em; /* Larger font size for better visibility */
}

#productLinkAnchor {
    text-decoration: underline;
    color: blue;
    cursor: pointer;
    display: inline-block; /* or block, depending on layout */
    margin-top: 10px; /* adjust as needed */
}

.description-content {
    font-size: 0.9rem; /* Smaller font size for a muted effect */
    color: #6c757d; /* Bootstrap's text-muted color */
}

.description-content p {
    text-align: justify; /* Justify text for better structure */
    text-justify: inter-word; /* Improve spacing between words */
}

.icon-link {
    display: inline-block;
    margin-right: 10px; /* Space out icons */
    color: #6c757d; /* Match the color of the text for consistency */
    text-decoration: none; /* Remove underline from icons */
}

.icon-link:hover {
    color: #495057; /* Slightly darker color on hover for interaction feedback */
}

.icon-link i {
    font-size: 1.2rem; /* Larger size for icons */
}


.genai-magic-btn {
    position: relative;
    background: linear-gradient(45deg, #6e8efb, #a777e3);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    outline: none;
    overflow: hidden;
    transition: transform 0.2s ease;
}

.genai-magic-btn:hover {
    transform: translateY(-3px);
}

.genai-magic-btn:active {
    transform: translateY(-1px);
}

.genai-magic-btn-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(45deg, #ff8a00, #e52e71); */
    z-index: -1;
    transition: opacity 0.3s ease;
    opacity: 0;
    border-radius: 25px;
}

.genai-magic-btn:hover .genai-magic-btn-gradient {
    opacity: 1;
}

.genai-magic-btn-text {
    position: relative;
    z-index: 10;
}

.modal-content {
    padding: 20px;
    background: #fff;
    border-radius: 5px;
}

.modal-content h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    color: #333;
}

.modal-input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.manual-image-section, .add-product-section {
    margin-top: 20px;
    background-color: #f8f8f8;
    padding: 15px;
    border-radius: 5px;
}

.manual-image-section label, .add-product-section button {
    display: block;
    margin-bottom: 10px;
}

.instruction-image p {
    font-style: italic;
    margin-bottom: 5px;
}

.add-product-section button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.add-product-section button:hover {
    background-color: #45a049;
}

.store-showcase {
    padding-bottom: 50px; /* Adjust the value as necessary */

}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  .loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
  }
  /* Subdued input field */
.magical-input input {
    border: 2px solid #e0e0e0; /* subtle border color */
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 16px;
    background: #ffffff; /* plain white background */
    color: #333; /* dark text color for contrast */
    transition: border-color 0.3s ease-in-out;
}

.magical-input input:focus {
    border-color: #ff00cc; /* a pop of color on focus */
    outline: none; /* remove default focus outline */
}

/* Magical button with gradient animation */
.btn-magical {
    border: 2px solid transparent;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 18px;
    background: linear-gradient(45deg, #ff00cc, #00ffcc, #cc00ff, #00ccff);
    background-size: 400% 400%;
    color: white; /* white text color for better visibility */
    animation: magical 8s linear infinite; /* apply the magical gradient animation */
    transition: background 0.5s ease-in-out;
    outline: none; /* remove default focus outline */
    cursor: pointer; /* indicate the element is clickable */
}

.btn-magical:hover {
    background-size: 200% 200%; /* an effect on hover */
}

/* Animation for the button's gradient background */
@keyframes magical {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@media (max-width: 767.98px) { /* Adjust for your specific breakpoint */
    #comments.collapse:not(.show) .comment:not(:first-child) {
        display: none;
    }
}

.text-only-btn {
    background: none; /* Remove default button background */
    color: #007bff; /* Bootstrap primary color for link-like appearance */
    border: none; /* Remove default button border */
    padding: 0; /* Remove padding to make it look like plain text */
    font-size: 0.9rem; /* Smaller font size for subtlety */
    text-decoration: underline; /* Underline to indicate it's actionable */
    box-shadow: none; /* Remove any box-shadow */
}

.text-only-btn:hover, .text-only-btn:focus {
    color: #0056b3; /* Darker color on hover/focus for feedback */
    text-decoration: none; /* Optional: remove underline on hover/focus */
    background: none; /* Ensure no background change on hover/focus */
    box-shadow: none; /* Ensure no box-shadow on hover/focus */
}

/* Ensure the button is only visible on mobile screens and not when comments are already shown */
@media (max-width: 767.98px) {
    .comments-collapse.show + .text-only-btn {
        display: none;
    }
}
/* Additional styling for button to make it full width on mobile screens */
.text-only-btn.w-100 {
    width: 100%; /* Make the button full width */
    margin-top: 1rem; /* Add some space above the button */
    text-align: center; /* Center the text in the button */
}

.text-only-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 1rem;
    color: #007bff;
    text-decoration: underline;
    text-align: center;
    display: block; /* Make the button a block element to center it */
    margin: 10px auto; /* Auto margins for horizontal centering */
}

/* Ensure the button is only visible on mobile screens */
@media (max-width: 767.98px) {
    .text-only-btn {
        display: block;
    }
}


.simple-button {
    background-color: transparent;
    border: 2px solid #333; /* Adjust the color to fit your design */
    color: #333; /* Adjust the text color to fit your design */
    padding: 8px 16px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    text-decoration: none; /* Remove underline from links */
}

.simple-button .fa-arrow-left, .simple-button .fa-arrow-right {
    transition: transform 0.3s ease;
}

.simple-button:hover .fa-arrow-left {
    transform: translateX(-5px);
}

.simple-button:hover .fa-arrow-right {
    transform: translateX(5px);
}

.simple-button:hover {
    border-color: #555; /* Darken the border on hover */
    color: #555; /* Darken the text color on hover */
}
.unclaimed-icon {
    position: relative;
    font-family: Arial, sans-serif; /* You can change the font family to match your design */
}





.unclaimed-btn:hover {
    opacity: 0.9; /* Slight opacity change on hover for a gentle effect */
}

.unclaimed-btn i {
    transition: transform 0.3s ease;
}

.unclaimed-btn:focus i,
.unclaimed-btn:hover i {
    transform: scale(1.05); /* Slight scale up for a subtle hover effect */
}

/* Slide-in Info Panel Styles */
.info-panel {
    position: fixed;
    top: 0;
    right: -300px; /* Initially hidden off-screen */
    width: 300px;
    height: 100%;
    background-color: #fff;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
    transition: right 0.4s ease;
    z-index: 1000; /* Ensure it's above other content */
}

.info-panel-content {
    padding: 25px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.info-panel-title {
    font-weight: bold;
    margin-bottom: 15px;
}

.close-panel-btn {
    background: none;
    border: none;
    font-size: 30px;
    cursor: pointer;
    outline: none;
}

/* Additional media queries can be used to adjust the size of the panel for responsiveness if needed */
.unclaimed-icon {
    position: relative;
    font-family: Arial, sans-serif;
    display: inline-block;
}

.unclaimed-btn {
    border: none;
    background-color: #FFC107;
    color: #333;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 0.7em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    outline: none;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.unclaimed-btn i {
    font-size: 0.8em;
    transition: transform 0.3s ease;
}

.unclaimed-btn:focus i,
.unclaimed-btn:hover i {
    transform: scale(1.1);
}

.unclaimed-btn:hover {
    background-color: #e6b800;
}

.fan-built-label {
    display: block;
    font-size: 0.65em;
    margin-top: 2px;
    color: #333;
    text-align: center;
}



/* control panel */



.dashboard-heading {
    font-size: 1.5rem; /* Adjust font size for the heading */
    text-align: center; /* Center heading text */
}

.dashboard-description {
    font-size: 0.9rem; /* Adjust font size for the description */
    text-align: center; /* Center description text */
    margin-bottom: 1rem; /* Adjust bottom margin */
}

.editor-sections {
    display: flex;
    justify-content: space-around; /* Space out the child elements */
    flex-wrap: wrap; /* Allow items to wrap as needed */
    margin-bottom: 2rem;
}

.editor-section {
    flex: 0 1 calc(33.333% - 1rem); /* Take up one-third of the space minus margin */
    margin: 0 !important;
    padding: 0.5rem; /* Reduce padding */
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column; /* Stack content vertically */
    
    text-align: center; /* Center text */
}

.card-title {
    font-size: 1rem; /* Smaller title font size */
    margin-bottom: 0.5rem; /* Adjust bottom margin */
}

.input-group, .btn {
    font-size: 0.8rem; /* Smaller font size for inputs and buttons */
}

.form-select, .btn {
    padding: 0.375rem 0.75rem; /* Adjust padding */
}

.btn {
    white-space: nowrap; /* Prevent wrapping */
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .editor-sections {
        flex-direction: column;
    }

    .editor-section {
        width: 100%; /* Full width on small screens */
        margin: 0.5rem 0; /* Vertical margin only */
    }

    .input-group, .btn {
        width: 100%; /* Full width for inputs and buttons on small screens */
    }
}

/* Reset the width of form elements inside .editor-section to prevent overflow */
.editor-section .form-group {
    width: 100%; /* Ensure the form-group takes the full width of its parent */
}

/* Adjust the select element to fit within its parent */
.editor-section .form-select {
    width: auto; /* Allow the select element to only take the space it needs */
    max-width: 100%; /* Ensure it doesn't exceed the parent width */
}

/* Ensure the button doesn't force the layout to expand */
.editor-section .btn {
    max-width: 100%; /* Ensure it doesn't exceed the parent width */
    overflow: hidden; /* Hide any overflow */
    text-overflow: ellipsis; /* Add ellipsis to overflowing text */
}

/* Make sure the input group handles overflow */
.editor-section .input-group {
    flex-wrap: nowrap; /* Prevent wrapping */
    overflow: hidden; /* Hide any overflow */
}

/* Adjust font size for options if they are too large */
.editor-section .form-select option {
    font-size: 0.8rem; /* Reduce font size for options */
    white-space: normal; /* Allow text to wrap within options */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Add ellipsis to overflowing text */
}


.dashboard-heading {
    font-size: 1.75rem; /* Larger font size for prominence */
    text-align: center; /* Center the heading */
    font-weight: 300; /* Lighter font-weight for a sleek look */
    color: #333; /* Dark grey for better readability */
    margin-bottom: 0.5rem; /* Less space below the heading */
}

.dashboard-description {
    font-size: 1rem; /* Standard font size for readability */
    text-align: center; /* Center the description text */
    color: #666; /* Lighter grey for a subtle appearance */
    margin-bottom: 2rem; /* More space below the description to separate from content */
    max-width: 600px; /* Max width to prevent overly long lines on larger screens */
    margin-left: auto; /* Center the description block horizontally */
    margin-right: auto;
    line-height: 1.6; /* Increased line height for better readability */
}



/* Style adjustments for the control panel container */
.editor-dashboard {
    background-color: #fff; /* White background for the panel */
    /* padding: 2rem; More padding for a spacious feel */
    border-radius: 8px; /* Slightly rounded corners for a softer look */
    /* box-shadow: 0 4px 8px rgba(0,0,0,0.1); Subtle shadow for depth */
    margin-top: 2rem; /* Spacing from the top of the viewport */
    margin-bottom: 2rem; /* Spacing from content below */
}


/* modal for add new product */
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 10% auto; /* 10% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 50%; 
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none

}
.selected-image {
    box-shadow: 0 0 15px rgba(50, 205, 50, 0.7); /* Soft green glow */
    border: 2px solid rgba(50, 205, 50, 0.5); /* Semi-transparent green border */
    transform: scale(1.03); /* Slightly larger */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
}



/* Base styles for the modal */
.modal-content {
    position: relative;
    background-color: #fff;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* You might want to adjust this for different screen sizes */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    animation-name: animatetop;
    animation-duration: 0.4s;
}

/* Responsive styling */
@media (max-width: 768px) {
    .modal-content {
        width: 95%; /* Modal width on smaller screens */
        padding: 10px; /* Padding inside the modal */
    }

    .form-control, .btn, .input-group {
        width: 100%; /* Full width for form controls and buttons */
    }

    .input-group-append .btn {
        width: auto; /* Allow the button inside input-group to maintain its size */
    }
}


/* control panel section */


/* Base Styles for Dashboard */
.editor-dashboard {
    background-color: #f8f9fa; /* Soft background color */
    padding: 1rem;
    border-radius: 10px; /* Rounded corners for outer container */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.dashboard-heading {
    color: #333; /* Dark text for better readability */
    margin-bottom: 1rem;
    text-align: center; /* Center align the title */
}

.dashboard-description {
    color: #666; /* Lighter text for description */
    text-align: center; /* Center align the description */
    margin-bottom: 2rem;
}

/* Card Styles */
.editor-section.card {
    background-color: #ffffff; /* White background for cards */
    border: none; /* Remove borders */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */
    border-radius: 8px; /* Rounded corners for cards */
    transition: transform 0.3s ease; /* Smooth transition for hover effect */
}

.editor-section.card:hover {
    transform: translateY(-5px); /* Slight lift effect on hover */
}

/* Form and Buttons */
.form-select,
.btn {
    border-radius: 5px; /* Slightly rounded edges for form elements */
}

.btn-confirm,
.btn-comments,
.btn-add {
    width: 100%; /* Full-width buttons */
    text-transform: uppercase; /* Uppercase button text */
    letter-spacing: 1px; /* Spacing between letters for a more editorial look */
    margin-top: 1rem; /* Spacing above buttons */
}

.btn-add {
    background-color: #4CAF50; /* Green color for 'add' actions */
    color: white; /* White text */
}

.btn-comments {
    background-color: #f0ad4e; /* Orange color for 'update' actions */
    color: white; /* White text */
}

.btn-confirm {
    background-color: #5bc0de; /* Blue color for 'confirm' actions */
    color: white; /* White text */
}



/* Responsive Grid */
@media (max-width: 768px) {
    .editor-sections {
        display: grid;
        grid-template-columns: 1fr; /* Single column layout on small screens */
        gap: 20px; /* Space between cards */
    }
}
.profile-name {
    font-size: 20px;
    color: #333;
}


/* fan build button */
.verified-badge, .fan-info-icon {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}

.fan-info-btn {
    background-color: #FFC107;
    color: #333;
    border: none;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
}

.fan-info-btn:hover {
    background-color: #FFC107;
}


.info-panel {
    position: fixed;
    right: 0;
    top: 0;
    width: 300px;
    height: 100%;
    background-color: #f8f9fa;
    box-shadow: -2px 0 5px rgba(0,0,0,.3);
    transform: translateX(100%);
    transition: transform .3s ease-in-out;
}

.info-panel-content {
    padding: 20px;
}

.info-panel-title {
    font-size: 18px;
    color: #333;
}

.close-panel-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    border: none;
    background: none;
    font-size: 24px;
    cursor: pointer;
}

/* Toggle info panel display */
.info-panel.open {
    transform: translateX(0);
}

.info-panel-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    backdrop-filter: blur(5px); /* Blurred background for modern browsers */
    z-index: 999; /* Ensure overlay is above other content */
}

.info-panel {
    position: fixed;
    right: 0;
    top: 0;
    width: 350px;
    height: 100%;
    background-color: #ffffff;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
    transform: translateX(100%);
    transition: transform 0.4s ease-in-out;
    z-index: 1040; /* Above the overlay */
    overflow-y: auto; /* Enable scroll for long content */
    border-radius: 10px 0 0 10px; /* Smooth corners on the left side */
}

.info-panel-content {
    padding: 20px;
    color: #333;
}

.info-panel-title {
    margin-bottom: 15px;
    color: #007bff;
}

.close-panel-btn {
    font-size: 24px;
    color: #333;
    background: none;
    border: none;
    cursor: pointer;
}

/* Enhanced button styles for better interaction */
.fan-info-btn {
    
    transition: background-color 0.3s ease;
    /* Other styles remain the same */
}

/* Display overlay when active */
.info-panel.open + .info-panel-overlay {
    display: block;
}

/* Updated z-index values */
.info-panel-overlay {
    /* ...other styles... */
    z-index: 1040; /* Higher than the navbar */
}

.info-panel {
    /* ...other styles... */
    z-index: 1035; /* Higher than the navbar, but lower than the overlay */
}

.navbar {
    /* ...other styles... */
    z-index: 1030; /* Ensure this is lower than the overlay and panel */
}


.modal {
    z-index: 1050; /* Example value, adjust as necessary */
}
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
}


 /* Additional styles for the YouTube Video Shop Builder section */
 /* .youtube-video-shop-builder {
    background: linear-gradient(90deg, rgba(94, 52, 235, 1) 0%, rgba(244, 114, 182, 1) 100%);
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.youtube-video-shop-builder img {
    max-width: 100%;
    border-radius: 10px;
} */


.btn-elegant-magic {
    background-color: #FF0000;
    color: #FFFFFF;
    padding: 8px 18px;
    border-radius: 20px;
    font-weight: 600;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-elegant-magic:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.text-red-500 {
    color: #EF4444; /* Adjust the color to match your design */
    background-color: #FFE5E5; /* Light background to highlight the text */
    padding: 2px 6px; /* Padding around the text */
    border-radius: 4px; /* Rounded corners for a tag-like appearance */
    font-weight: bold; /* Make the text bold */
    margin-right: 4px; /* Space after the tag */
    font-size: 0.875rem; /* Slightly smaller font size for the tag */
}

.font-bold {
    font-weight: bold; /* Ensures any text with this class is bolded */
}

/* Optional: Add a hover effect to indicate interactivity if it's clickable */
.text-red-500:hover {
    background-color: #FFD1D1; /* Slightly darker or lighter on hover */
    cursor: pointer; /* Change cursor to indicate it's clickable */
}
/* General styles for all buttons to include platform icons */
.btn-platform {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 20px;
    font-weight: 600;
    color: #FFFFFF;
    text-decoration: none;
    margin-right: 8px; /* Spacing between buttons */
    margin-bottom: 8px; /* Spacing for mobile or when wrapped */
}

/* Specific styles for YouTube */
.btn-youtube {
    background-color: #FF0000;
}
.btn-youtube i {
    margin-right: 8px;
    color: #FFFFFF; /* Ensures the icon is white for visibility */
}

/* Specific styles for Instagram */
.btn-instagram {
    background-color: #C13584;
    opacity: 0.5; /* Indicates disabled state */
    cursor: not-allowed;
}
.btn-instagram i {
    margin-right: 8px;
}

/* Specific styles for TikTok */
.btn-tiktok {
    background-color: #69C9D0;
    color: #000000; /* TikTok's branding includes a black logo on their light blue */
    opacity: 0.5; /* Indicates disabled state */
    cursor: not-allowed;
}
.btn-tiktok i {
    margin-right: 8px;
    color: #000000; /* Ensures icon visibility */
}

/* Additional CSS for disabled buttons */
.btn-platform:disabled {
    pointer-events: none;
}
.fab.fa-youtube {
   
}
/* Add this CSS to your <style> tag or CSS file */


.shop-converter-ai-container {
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    color: #fff;
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  
  .shop-converter-ai-container:before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-color: #fff;
    transform: rotate(30deg);
    pointer-events: none;
    opacity: 0.1;
  }
  
  .shop-converter-ai-header {
    font-size: 24px;
    color: #fff;
    font-weight: bold;
    margin-bottom: 15px;
  }
  
  .platform-button {
    display: inline-block;
    padding: 10px 25px;
    margin: 10px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
  }
  
  .platform-button:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    z-index: -1;
  }
  
  .platform-button.youtube {
    background-color: #FF0000;
    color: white;
  }
  
  .platform-button.instagram {
    background-color: #C13584;
    color: white;
    /* opacity: 0.7; */
  }
  
  .platform-button.tiktok {
    background-color: #69C9D0;
    color: white;
    /* opacity: 0.7; */
  }
  
  .platform-button.disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
  
  /* Beta Label Styling */
.beta-label {
    display: inline-block;
    background-color: #333;
    color: #fff;
    padding: 0.2em 0.6em;
    border-radius: 2px;
    font-size: 0.75em;
    font-weight: bold;
    text-transform: uppercase;
    margin-left: 0.5em;
    vertical-align: super;
}

/* YouTube Button Styling */
.btn-youtube {
    background-color: #FF0000;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 20px;
    font-weight: 600;
    transition: background-color 0.2s, box-shadow 0.2s;
    text-decoration: none;
}

.btn-youtube:hover {
    background-color: darken(#FF0000, 10%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.shimmer-placeholder {
    display: flex;
    flex-direction: column;
  }
  
  .shimmer-card {
    height: 200px;
    margin: 10px 0;
    background: #f6f7f8;
    position: relative;
    overflow: hidden;
  }
  
  .shimmer-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: shimmer 1.5s infinite;
  }
  
  @keyframes shimmer {
    100% {
      transform: translateX(100%);
    }
  }
  
  .progress-container {
    width: 100%;
    background-color: #eee;
    margin-top: 20px;
}

.progress-bar {
    height: 20px;
    background-color: #4CAF50;
    width: 0%;
    transition: width 0.5s;
}

.progress-text {
    margin-top: 10px;
    color: #555;
}


.coupons-container {
    background-color: #f8f9fa;
    border-radius: 8px;
}

.coupon-row {
    background-color: #ffffff;
    border: 1px solid #e1e1e1;
    transition: box-shadow 0.2s;
}

.coupon-row:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.coupon-code {
    background-color: #e9f5ff;
    padding: 5px 8px;
    border-radius: 4px;
    color: #007bff;
}

.coupon-description {
    color: #666;
}

.btn-outline-success {
    border-color: #28a745;
    color: #28a745;
}

.btn-outline-success:hover {
    background-color: #28a745;
    color: #fff;
}

.coupon-actions > button {
    margin-left: 5px;
}

@media (max-width: 768px) {
    .coupon-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .coupon-info {
        margin-bottom: 10px;
    }
    .coupon-actions {
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
    }
}

.copied-confirmation {
    display: inline-block;
    font-size: 0.8rem;
    color: green;
    margin-left: 8px;
    visibility: hidden; /* Initially hidden */
  }


  .embedded-modal-content {
    display: none; /* Hidden by default */
    position: absolute; /* Position relative to the parent */
    z-index: 10; /* Higher than the card, but not necessarily full page overlay */
    background-color: #fff; /* Assuming a white modal background */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* A subtle shadow for depth */
    border-radius: 4px; /* Rounded corners */
    padding: 20px; /* Spacing inside the modal */
    top: 20px; /* Positioning from the top of the card */
    left: 50%; /* Center horizontally relative to the parent card */
    transform: translateX(-50%); /* Center align the modal */
    width: auto; /* Auto-width based on content, or set a max-width as needed */
    max-width: 100%; /* Ensure it doesn't overflow the card */
    box-sizing: border-box; /* Include padding and borders in the width */
}

/* Style for the close button */
.embedded-modal-content .close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.5em;
    cursor: pointer;
    border: none;
    background: transparent;
    color: #333; /* Color for the close 'X' icon */
}

/* Style for the form within the modal */
#newProductForm {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#newProductForm label,
#newProductForm input,
#newProductForm input[type="submit"] {
    width: 100%; /* Full width of the modal */
    margin: 5px 0; /* Spacing for elements */
}

#newProductForm input[type="submit"] {
    margin-top: 15px;
    cursor: pointer;
}

/* Override style for input to remove !important inline styles */
#newProductForm input[type="text"] {
    width: calc(100% - 40px); /* Account for padding */
    margin: 5px 0; /* Consistent spacing */
}

.add-product-btn-wrapper[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: black;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 1000;
    font-size: 12px;
}

.add-product-btn-wrapper[data-tooltip]::after,
.add-product-btn-wrapper[data-tooltip]::before {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s;
}

.add-product-btn-wrapper[data-tooltip]:hover::after,
.add-product-btn-wrapper[data-tooltip]:hover::before {
    visibility: visible;
    opacity: 1;
}


#addProductBtn {
    background-image: linear-gradient(to right, #6e8efb, #a777e3); /* Gradient background */
    border: none;
    color: white;
    font-size: 20px;
    padding: 10px 24px;
    border-radius: 30px; /* Rounded corners */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); /* Shadow for depth */
    transition: transform 0.2s, box-shadow 0.2s; /* Smooth transitions */
}

#addProductBtn.enabled {
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); /* More prominent shadow when enabled */
}

#addProductBtn:not(.enabled):hover {
    transform: none; /* No effect when not enabled */
}

#addProductBtn.enabled:hover {
    transform: translateY(-2px); /* Slight raise effect */
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3); /* Larger shadow on hover */
}


.images-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.image-container {
    width: calc(33.333% - 10px); /* Three items per row with 10px gap */
    display: inline-block; /* Or flex if the parent is a flex container */
}

.quality-tag {
    /* Default styling for all quality tags */
    padding: 2px 4px;
    border-radius: 4px;
    color: #fff;
    font-weight: bold;
    margin-top: 4px; /* Space between the image and the tag */
    display: inline-block; /* Or 'block' if you want it on a new line */
}

.high-quality {
    background-color: green;
}

.medium-quality {
    background-color: yellow;
    color: black; /* Text color for yellow might need to be black for better visibility */
}

.low-quality {
    background-color: red;
}


.product-link-card .remove-link-btn {

    position: absolute;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent background */
   
    border: none;
    color: white;
    padding: 8px;
    border-radius: 0 4px 0 4px; /* Rounded corners on the top-right edge */
    cursor: pointer;
}

.product-image-container {
    position: relative;
    /* ... other styles for image container */
}

.product-image-container:hover .remove-link-btn {
    display: block; /* Show button on hover */
}

.product-card:hover .remove-link-btn {
    display: block; /* This ensures the button is also shown when hovering anywhere on the card */
}

/* Optional: transition for the button for smooth appearance */
.remove-link-btn {
    transition: all 0.3s ease;
}

/* More styles to match your card layout */
.product-card {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Rest of your card styles */
}


/* affiliate info on product card */


.affiliate-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 999px; /* fully round */
    padding: 5px 10px;
    font-size: 0.8rem; /* smaller text */
    color: #000; /* text color */
    margin-bottom: 0.5rem; /* spacing */
}

.affiliate-badge .fas {
    margin-right: 5px;
}

.affiliate-badge img {
    width: 20px;
    margin-right: 5px;
}

.affiliate-info {
    padding: 10px;
    background-color: #f9f9f9;
    border-top: 1px solid #ccc;
    font-size: 12px;
    width:100%;
}

.product-card {
    position: relative;
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 20px;
    background-color: white;
}

.product-image {
    width: 100%;
    height: auto;
}


.product-card {
    position: relative;
    /* ... your existing styles ... */
}

.affiliate-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f9f9f9; /* subtle background */
    border: 1px solid #ccc; /* light border */
    border-radius: 999px; /* fully round */
    padding: 5px 10px;
    font-size: 0.7rem; /* slightly smaller text */
    color: #000; /* text color */
    margin-bottom: 0.5rem; /* spacing below the badge */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* subtle shadow for depth */
    position: absolute; /* take out of the normal document flow */
    top: 10px; /* position from the top of the parent */
    left: 10px; /* position from the left of the parent */
}

/* Optional: Slight gradient for the background */
.affiliate-badge {
    background: linear-gradient(145deg, #f9f9f9, #eaeaea);
}


.latest-video-shop {
    background-color: #f9f9f9;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease-in-out;
}

.latest-video-shop:hover {
    transform: scale(1.03);
}

.video-shop-title {
    color: #333;
    font-size: 24px;
    cursor: pointer;
    text-decoration: underline;
    margin-bottom: 15px;
}

.video-shop-title:hover {
    color: #555;
}

.latest-video-shop p {
    font-size: 16px;
    color: #666;
}

.latest-video-shop iframe {
    width: 100%;
    border: none;
    border-radius: 5px;
}

.tiktok-embed, .instagram-media {
    margin: auto;
}


.section-title {
    font-size: 28px;
    color: #333;
    margin-bottom: 10px;
}

.view-all-button button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.view-all-button button:hover {
    background-color: #0056b3;
}



.list-group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.list-group-item a {
    flex-grow: 1;  /* Allows the title to take up remaining space */
}

.list-group-item .badge {
    margin-left: auto;  /* Pushes the badge to the right */
    margin-right: 16px; /* Spacing before the button */
}

.list-group-item .btn {
    flex-shrink: 0; /* Prevents the button from shrinking */
}

.badge-danger {
    background-color: #dc3545; /* Bootstrap default red */
}

.badge-primary {
    background-color: #007bff; /* Bootstrap default blue */
}



.ai-content {
    background-color: #f0f9ff;
    border-left: 5px solid #007bff;
    padding: 10px;
    margin-top: 10px;
}

.no-ai-content {
    background-color: #fff3cd;
    border-left: 5px solid #ffecb5;
    padding: 10px;
    margin-top: 10px;
}
.markdown-preview {
    border: 1px solid #ccc;
    padding: 10px;
    margin-top: 10px;
    background-color: #f8f8f8;
}

.variant-button{font-size:0.8rem !important;}