@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
:root {
	--Mint_Whisper: #e8ffe4;
	--Frosted_Lime: #caffc4;
	--Fresh_Spring: #9aff90;
	--Bright_Meadow : #59ff50;
	--Neon_Leaf: #25ff22;
	--Pure_Green: #00e603;
	--Vivid_Emerald : #00b807;
	--Deep_Emerald: #008b05;
	--Forest_Canopy: #076d0c;
	--Dark_Forest: #0b5c10;
	--Midnight_Pine: #003406;
}
:root{
	--Dewdrop: #E4F5E3;
	--Fresh_Herb: #6BBF69;
	--Mossy_Stone: #368835;
	--Deep_Forest_Night : #0E250E;
}
.button_and_review_container h6{
    font-size: 20px;
    font-weight: bold;
}
.button_and_review_container{
    position: relative;
    margin-top: 50px;
}
.honest_review{
    position: relative;
    width: 100%;
    padding-top: 5px;
    display: flex;
    flex-direction: row;
}
.honest_review_ctn{
    width: 25px;
    position: relative;
}
.honest_review_pfp_first,
.honest_review_pfp_second,
.honest_review_pfp_third,
.honest_review_pfp_forth{
    position: absolute;
    width: 40px;
    border-radius: 50%;
}
.rating{
    display: flex;
    justify-content: start;
    margin-top: 50px;
}
.rating h6{
    margin-left: 5px;
}
/* 1. The popover container */
.popover.my-popover {
  --bs-popover-bg: #1e293b;           /* dark-blue background */
  --bs-popover-border-color: #334155; /* slightly lighter border */
  --bs-popover-inner-padding: 1rem;   /* more padding */
  --bs-popover-border-radius: 1.25rem;/* rounder corners */
  background-color: var(--bs-popover-bg);
  border: 1px solid var(--bs-popover-border-color);
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
  font-family: 'Segoe UI', sans-serif;
  color: #f1f5f9;                     /* light text */
}

/* 2. Header */
/* Custom popover styling */
.popover.custom-popover {
	--bs-popover-bg: #f5fff4;
	/* Green background */
	--bs-popover-border-color: #28a745;
	/* Green border */
}

.popover.custom-popover .popover-header {
	background-color: #008b05;
	/* Darker green header */
	color: #fff;
}

.popover.custom-popover .popover-body {
	color: #218838;
}
/* 4. Arrow */
.popover.my-popover .popover-arrow::before {
  border-top-color: var(--bs-popover-border-color) !important;
}
.popover.my-popover .popover-arrow::after {
  border-top-color: var(--bs-popover-bg) !important;
}

/* 5. Optional: Add a little pulsing animation on show */
@keyframes pop-in {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.popover.my-popover.show {
  animation: pop-in 0.15s ease-out forwards;
}