* {
font-family: 'Poppins', sans-serif;
}
body {
background: #ffffff !important;
color: #334155;
font-family: 'Poppins', sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Poppins', sans-serif;
font-weight: 700;
}
p,
span,
li,
a,
div,
input,
button,
label {
font-family: 'Poppins', sans-serif;
}
.rating-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
padding: 0.75rem 1.5rem;
border-radius: 50px;
color: white;
font-weight: 600;
}
.rating-number {
font-size: 2rem;
font-weight: 800;
}
.main-page-wrapper {
background: #f1f5f9;
min-height: 100vh;
width: 100%;
padding: 0;
}
.review-layout-column {
max-width: 1350px;
margin: 0 auto;
background: #ffffff;
box-shadow: 0 0 80px rgba(0, 0, 0, 0.1) !important;
border-radius: 0 !important;
position: relative;
z-index: 10;
padding: 40px 40px 0 40px;
overflow: visible !important;
min-height: 100vh;
}
@media (max-width: 768px) {
.main-page-wrapper {
padding: 0;
}
.review-layout-column {
border-radius: 0 !important;
padding: 20px 15px 0 15px;
box-shadow: none !important;
}
}
.price-tag {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
padding: 1.5rem;
border-radius: 1rem;
text-align: center;
}
.sticky-sidebar {
position: sticky;
top: 100px;
}
.transition-all {
transition: all 0.3s ease;
}
.pros-cons-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
.pro-item,
.con-item {
display: flex;
align-items: start;
gap: 1rem;
padding: 1rem;
background: #ffffff;
border-radius: 0.75rem;
transition: all 0.3s;
}
.pro-item:hover,
.con-item:hover {
transform: translateX(5px);
box-shadow: none;
}
.pro-item {
border-left: 4px solid #10b981;
}
.con-item {
border-left: 4px solid #ef4444;
}
.verdict-box {
background: #ffffff;
padding: 3rem;
border-radius: 1.5rem;
position: relative;
overflow: hidden;
border: 2px solid #2563eb;
}
.verdict-box h2,
.verdict-box h3,
.verdict-box p {
color: #1e293b !important;
}
.cta-button {
background: #2563eb;
border: none;
padding: 1rem 3rem;
border-radius: 50px;
color: white;
font-weight: 700;
font-size: 1.1rem;
transition: all 0.3s;
box-shadow: none;
}
.cta-button:hover {
background: #1d4ed8;
transform: translateY(-3px);
box-shadow: none;
color: white;
}
.btn,
.cta-primary,
.cta-btn-main,
.pkg-cta,
.pulse-cta,
.btn-visit-official,
.cta-button {
box-shadow: none !important;
}
.feature-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(135deg, #4facfe15 0%, #00f2fe15 100%);
border: 1px solid #4facfe;
padding: 0.5rem 1rem;
border-radius: 50px;
color: #0369a1;
font-size: 0.9rem;
font-weight: 600;
}
.ingredients-header {
text-align: left;
margin-bottom: 2rem;
}
.review-content ul:not(.pros-cons-list):not(.verdict-trust-list) {
list-style: none !important;
padding: 0 !important;
margin: 2rem 0 !important;
background: #f8fafc;
border-radius: 1.25rem;
padding: 1.5rem 1.75rem !important;
border: 1px solid #e2e8f0;
}
.review-content ul:not(.pros-cons-list):not(.verdict-trust-list) li {
position: relative !important;
padding-left: 2rem !important;
margin-bottom: 1rem !important;
line-height: 1.6 !important;
color: #334155 !important;
font-weight: 500;
font-size: 1.05rem !important;
}
.review-content ul:not(.pros-cons-list):not(.verdict-trust-list) li::before {
content: "\f058" !important;
font-family: "Font Awesome 6 Free" !important;
font-weight: 900 !important;
position: absolute !important;
left: 0 !important;
top: 2px !important;
color: #10b981 !important;
font-size: 1.1rem !important;
background: none !important;
border-radius: 0 !important;
width: auto !important;
height: auto !important;
}
.review-content li {
margin-bottom: 0.75rem;
line-height: 1.6;
}
.content-text {
font-size: 1.05rem;
line-height: 1.8;
color: #1e293b;
text-align: left !important;
}
.review-content p,
.content-body p,
.content-text p,
.hero-hype-intro p,
.what-is-section p,
section p {
font-size: 1.05rem;
line-height: 1.8;
color: #334155;
margin-bottom: 1.5rem;
font-family: 'Poppins', sans-serif;
text-align: left;
}
.content-section p:first-of-type {
font-size: 1.12rem;
color: #1e293b;
line-height: 1.85;
}
.content-section {
scroll-margin-top: 100px;
padding: 20px 0 !important;
background: transparent;
border-radius: 0;
border: none;
box-shadow: none !important;
margin-bottom: 0 !important;
}
@media (max-width: 768px) {
.content-section {
padding: 15px 0 !important;
}
}
.content-section + .content-section {
border-top: none;
}
.content-section h2,
.section-title-standard {
font-family: 'Outfit', sans-serif;
font-weight: 800;
font-size: 2.25rem;
color: #0f172a;
margin-bottom: 1.25rem !important;
margin-top: 0 !important;
letter-spacing: -0.02em;
line-height: 1.2;
}
.content-body p:last-child {
margin-bottom: 0 !important;
}
.content-section h2,
.content-text h2,
.content-body h2 {
font-size: clamp(1.5rem, 3vw, 2.1rem) !important;
font-weight: 800 !important;
color: #0f172a !important;
margin-bottom: 1.5rem !important;
letter-spacing: -0.5px !important;
line-height: 1.25 !important;
text-align: left !important;
font-family: 'Poppins', sans-serif !important;
}
.content-section h3,
.content-text h3,
.content-body h3 {
font-size: 1.4rem !important;
font-weight: 800 !important;
color: #1e293b !important;
margin-top: 2rem !important;
margin-bottom: 1rem !important;
text-align: left !important;
line-height: 1.3 !important;
display: flex;
align-items: center;
gap: 10px;
}
.content-section h2.what-is-title,
.content-section h2.fw-bold {
font-size: clamp(1.5rem, 3vw, 2.1rem);
}
.content-body li,
.content-text li {
font-size: 1.05rem !important;
font-family: 'Poppins', sans-serif !important;
color: #1e293b !important;
line-height: 1.8 !important;
margin-bottom: 0.65rem;
}
.content-body strong,
.content-text strong,
.content-body b,
.content-text b,
.ingredients-custom-format strong {
color: #0f172a !important;
font-weight: 700 !important;
}
.review-content h3,
.content-body h3,
.content-text h3 {
font-size: 1.25rem;
font-weight: 700;
color: #1e293b;
margin-top: 1.75rem;
margin-bottom: 0.85rem;
font-family: 'Poppins', sans-serif !important;
letter-spacing: -0.2px;
}
.review-content h4,
.content-body h4,
.content-text h4 {
font-size: 1.12rem;
font-weight: 700;
color: #334155;
margin-top: 1.5rem;
margin-bottom: 0.65rem;
font-family: 'Poppins', sans-serif !important;
}
.content-text p {
margin-bottom: 1.25rem;
}
.content-text table {
width: 100% !important;
margin: 1.5rem 0;
border-collapse: separate;
border-spacing: 0;
border-radius: 12px;
overflow: hidden;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.content-text th {
background: #f8fafc;
color: #0f172a;
font-weight: 700;
padding: 12px 16px;
text-align: left;
border-bottom: 2px solid #e2e8f0;
}
.content-text td {
padding: 12px 16px;
border-bottom: 1px solid #f1f5f9;
font-size: 0.95rem;
color: #334155;
vertical-align: middle;
}
.content-text tr:last-child td {
border-bottom: none;
}
.content-text tr:hover td {
background-color: #f8fafc;
}
@media (max-width: 768px) {
.content-text table {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.content-text table th,
.content-text table td {
white-space: nowrap;
}
}
.pricing-analysis-box table {
margin: 0 auto;
width: 100%;
max-width: 800px;
background: #fff;
border: 2px solid #e2e8f0;
border-radius: 12px;
overflow: hidden;
}
.pricing-analysis-box th {
background: #2563eb;
color: #fff;
text-align: center;
text-transform: uppercase;
font-size: 0.8rem;
padding: 12px;
letter-spacing: 0.5px;
border: none;
}
.pricing-analysis-box td {
text-align: center;
font-weight: 600;
color: #1e293b;
border-bottom: 1px solid #f1f5f9;
padding: 12px;
}
.pricing-analysis-box tr:last-child td {
background: #f0fdf4;
color: #16a34a;
font-weight: 800;
border-bottom: none;
}
.what-is-img-container {
background: #ffffff;
border-radius: 1.5rem;
padding: 24px;
position: relative;
box-shadow: none;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
min-height: 240px;
border: 1px solid #f1f5f9;
}
.what-is-img-container::before {
content: '';
position: absolute;
width: 200px;
height: 200px;
background: rgba(37, 99, 235, 0.03);
border-radius: 50%;
z-index: 0;
}
.what-is-img-container img {
position: relative;
z-index: 1;
max-height: 220px;
width: 100%;
object-fit: contain;
}
.formula-badge {
background: linear-gradient(135deg, #dcfce7, #bbf7d0);
color: #15803d;
padding: 6px 18px;
border-radius: 50px;
font-size: 0.82rem;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 20px;
border: 1px solid #bbf7d0;
letter-spacing: 0.3px;
}
.content-body.content-text {
text-align: left;
}
.what-is-title {
font-size: clamp(1.5rem, 3vw, 2.1rem);
font-weight: 800;
color: #0f172a;
margin-bottom: 16px;
letter-spacing: -0.5px;
line-height: 1.25;
text-align: left;
}
.feature-check-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-top: 24px;
padding-top: 20px;
border: none;
}
.feature-check-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.9rem;
font-weight: 600;
color: #334155;
background: #f0fdf4;
padding: 10px 14px;
border-radius: 10px;
border: 1px solid #dcfce7;
transition: all 0.2s;
}
.feature-check-item:hover {
background: #dcfce7;
transform: translateY(-1px);
}
.feature-check-item i {
color: #10b981;
font-size: 1.05rem;
flex-shrink: 0;
}
@media (max-width: 991px) {
.feature-check-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.feature-check-list {
grid-template-columns: 1fr 1fr;
}
}
.pricing-badge {
background: linear-gradient(135deg, #ede9fe, #ddd6fe);
color: #6d28d9;
padding: 6px 18px;
border-radius: 50px;
font-size: 0.82rem;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 20px;
border: 1px solid #ddd6fe;
letter-spacing: 0.3px;
}
.mechanism-badge {
background: linear-gradient(135deg, #dbeafe, #bfdbfe);
color: #1d4ed8;
padding: 6px 18px;
border-radius: 50px;
font-size: 0.82rem;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 20px;
border: 1px solid #bfdbfe;
letter-spacing: 0.3px;
}
.mechanism-pill-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 24px;
padding-top: 20px;
border: none;
}
.mechanism-pill {
background: linear-gradient(135deg, #eff6ff, #dbeafe);
border: 1px solid #bfdbfe;
padding: 8px 18px;
border-radius: 10px;
font-size: 0.9rem;
font-weight: 700;
color: #1d4ed8;
box-shadow: none;
transition: all 0.2s;
}
.mechanism-pill:hover {
background: #dbeafe;
transform: translateY(-1px);
}
.mechanism-step {
background: #ffffff;
border: 1px solid #e2e8f0;
border-left: 4px solid #3b82f6;
border-radius: 12px;
padding: 1.25rem 1.5rem;
margin-bottom: 1.25rem;
transition: box-shadow 0.2s ease;
}
.mechanism-step:hover {
box-shadow: 0 4px 16px rgba(59,130,246,0.10);
}
.mechanism-step h4 {
color: #1d4ed8;
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.mechanism-step p {
color: #374151;
font-size: 0.95rem;
line-height: 1.7;
margin-bottom: 0;
}
.benefit-bridge {
background: linear-gradient(135deg, #f0fdf4, #dcfce7);
border-left: 3px solid #22c55e;
border-radius: 0 8px 8px 0;
padding: 0.65rem 1rem;
margin-top: 0.75rem;
font-size: 0.92rem;
color: #166534;
}
.benefit-bridge strong {
color: #15803d;
}
.mechanism-evidence {
background: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: 8px;
padding: 0.65rem 1rem;
margin: 1rem 0;
font-size: 0.88rem;
color: #1e40af;
}
.mechanism-evidence a {
color: #1d4ed8;
font-weight: 600;
text-decoration: underline;
}
.mechanism-title {
font-size: 1.1rem;
font-weight: 700;
color: #1e40af;
margin: 1.25rem 0 0.75rem;
border-bottom: 2px solid #bfdbfe;
padding-bottom: 0.4rem;
}
.mechanism-cta {
background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
border: 1px solid #7dd3fc;
border-radius: 10px;
padding: 0.85rem 1.25rem;
margin-top: 1.25rem;
font-size: 0.95rem;
color: #0c4a6e;
text-align: center;
}
.mechanism-cta a {
color: #0369a1;
font-weight: 700;
text-decoration: none;
}
.mechanism-cta a:hover {
text-decoration: underline;
color: #0284c7;
}
.ingredient-list-wrapper {
margin-top: 1.5rem;
}
.ingredient-list-item {
display: flex;
gap: 1.25rem;
margin-bottom: 1.5rem;
align-items: flex-start;
padding: 1rem 1.25rem;
background: #ffffff;
border-radius: 12px;
border-left: 4px solid #22c55e;
transition: all 0.2s ease;
}
.pricing-section {
padding: 15px 0;
background: #ffffff;
position: relative;
}
.ingredient-list-item:hover {
background: #f0fdf4;
box-shadow: none;
transform: translateX(4px);
}
.ingredient-check {
flex-shrink: 0;
width: 34px;
height: 34px;
background: linear-gradient(135deg, #22c55e, #16a34a);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
margin-top: 2px;
box-shadow: none;
flex-shrink: 0;
}
.ingredient-item-content {
flex: 1;
font-size: 1.05rem;
color: #1e293b;
line-height: 1.85;
}
.ingredient-item-title {
font-weight: 800;
color: #0f172a;
display: block;
margin-bottom: 5px;
font-size: 1.05rem;
}
.ingredient-item-desc {
display: block;
font-size: 1rem;
color: #475569;
line-height: 1.85;
margin: 0;
font-family: 'Poppins', sans-serif !important;
}
.ingredients-intro-text {
font-size: 1.05rem;
color: #1e293b;
line-height: 1.9;
margin-bottom: 1.5rem;
padding: 1.25rem 1.5rem;
background: #ffffff;
border-radius: 12px;
border-left: 4px solid #6366f1;
}
.ingredient-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-left: 4px solid #22c55e;
border-radius: 12px;
padding: 1.25rem 1.5rem;
margin-bottom: 1.25rem;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ingredient-card:hover {
box-shadow: 0 4px 18px rgba(34,197,94,0.10);
transform: translateY(-1px);
}
.ingredient-card h3 {
font-size: 1.1rem !important;
font-weight: 800 !important;
color: #166534 !important;
margin-bottom: 0.5rem !important;
margin-top: 0 !important;
border-bottom: none !important;
display: flex;
align-items: center;
gap: 8px;
}
.ingredient-card h3::before {
content: "\f06c";
font-family: "Font Awesome 6 Free";
font-weight: 900;
color: #22c55e;
font-size: 0.85rem;
background: #dcfce7;
width: 26px;
height: 26px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ingredient-card p {
font-size: 0.95rem !important;
line-height: 1.75 !important;
color: #374151 !important;
margin-bottom: 0.5rem !important;
padding-left: 0 !important;
}
.ingredient-card .safety-note,
.safety-note {
background: #fefce8;
border-left: 3px solid #eab308;
border-radius: 0 6px 6px 0;
padding: 0.35rem 0.75rem;
font-size: 0.83rem !important;
color: #713f12 !important;
display: block;
margin-top: 0.4rem;
}
.synergy-conclusion {
background: linear-gradient(135deg, #f0fdf4, #dcfce7);
border: 1px solid #86efac;
border-radius: 12px;
padding: 1rem 1.25rem;
margin-top: 1.75rem;
font-size: 0.97rem;
color: #14532d;
font-style: italic;
line-height: 1.75;
}
.ingredients-custom-format h3 {
font-weight: 800;
color: #0f172a;
margin-top: 2.5rem;
margin-bottom: 1rem;
font-size: 1.35rem;
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 8px;
border-bottom: 1px solid #e2e8f0;
font-family: 'Poppins', sans-serif !important;
}
.ingredients-custom-format h3::before {
content: "\f06c";
font-family: "Font Awesome 6 Free";
font-weight: 900;
color: #16a34a;
font-size: 1rem;
background: #dcfce7;
width: 32px;
height: 32px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ingredients-custom-format p {
font-size: 1.05rem !important;
line-height: 1.8;
color: #475569;
margin-bottom: 1.5rem;
padding-left: 5px;
}
.ingredients-custom-format strong {
display: inline-block;
margin-top: 8px;
color: #0f172a !important;
font-weight: 800 !important;
border-bottom: 2px solid #dcfce7;
margin-right: 5px;
}
.ingredients-custom-format strong::before {
content: "\f105";
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 8px;
color: #10b981;
}
.ingredients-note {
margin-top: 2rem;
border: none;
padding-top: 1rem;
color: #94a3b8;
font-size: 0.88rem;
font-style: italic;
}
.competitors-comparison-wrapper {
padding: 1rem 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.competitors-comparison-wrapper table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
background: #fff;
border-radius: 1rem;
border: 1px solid #e2e8f0;
overflow: hidden;
}
.competitors-comparison-wrapper th,
.competitors-comparison-wrapper td {
padding: 0.85rem 1.25rem;
text-align: left;
border-bottom: 1px solid #f8fafc;
font-family: 'Poppins', sans-serif;
vertical-align: middle;
}
.competitors-comparison-wrapper th {
background: #f8fafc;
color: #475569;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.75rem;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
border-bottom: 2px solid #e2e8f0;
}
.competitors-comparison-wrapper td:first-child {
font-weight: 700;
color: #1e293b;
font-size: 0.85rem;
width: 15%;
text-align: left;
}
.competitors-comparison-wrapper th:nth-child(2),
.competitors-comparison-wrapper td:nth-child(2) {
background: #f0fdf4;
border-left: 1px solid #dcfce7;
border-right: 1px solid #dcfce7;
color: #166534;
font-weight: 700;
font-size: 0.85rem;
width: 40%;
}
.competitors-comparison-wrapper th:nth-child(2) {
background: #f0fdf4 !important;
color: #15803d !important;
font-size: 0.9rem !important;
font-weight: 800 !important;
text-transform: none;
letter-spacing: 0;
position: relative;
padding-top: 2rem !important;
}
.competitors-comparison-wrapper th:nth-child(2)::after {
content: '\2605  OUR #1 PICK';
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
background: #16a34a;
color: white;
font-size: 0.55rem;
padding: 2px 8px;
border-radius: 4px;
font-weight: 800;
letter-spacing: 0.5px;
white-space: nowrap;
}
.competitors-comparison-wrapper th:nth-child(n+3) {
color: #334155 !important;
background: #f8fafc !important;
font-weight: 800;
font-size: 0.85rem;
border-bottom: 2px solid #e2e8f0;
}
.competitors-comparison-wrapper td:nth-child(n+3) {
color: #64748b;
font-size: 0.85rem;
width: 22.5%;
}
.competitors-comparison-wrapper th:nth-child(n+4),
.competitors-comparison-wrapper td:nth-child(n+4) {
border-left: 1px solid #f1f5f9;
}
.competitors-comparison-wrapper i.fa-check,
.competitors-comparison-wrapper i.fa-check-circle {
color: #10b981;
background: #dcfce7;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 0.8rem;
margin-right: 12px;
}
.competitors-comparison-wrapper i.fa-times,
.competitors-comparison-wrapper i.fa-times-circle {
color: #f43f5e;
background: #fff1f2;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 0.8rem;
margin-right: 12px;
}
.comp-cta-btn {
display: inline-block;
background: #16a34a;
color: #fff !important;
text-decoration: none !important;
padding: 8px 16px;
border-radius: 50px;
font-size: 0.7rem;
font-weight: 800;
transition: all 0.2s;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.comp-cta-btn:hover {
background: #15803d;
transform: translateY(-2px);
}
.competitors-comparison-wrapper tr:hover td {
background: #fbfcfe;
}
.competitors-comparison-wrapper p {
margin-bottom: 1.5rem;
font-size: 1.05rem;
line-height: 1.8;
color: #334155;
}
@media (max-width: 991px) {
.comp-table-scroll-area {
overflow-x: auto;
position: relative;
margin: 0 -15px;
padding: 1.5rem 15px 0.5rem;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.comp-table-scroll-area table {
min-width: 850px;
width: 100%;
border-collapse: separate;
font-size: 0.82rem !important;
}
.comp-table-scroll-area th:first-child,
.comp-table-scroll-area td:first-child {
position: sticky;
left: 0;
z-index: 10;
background-color: #ffffff !important;
border-right: 2px solid #e2e8f0;
box-shadow: 4px 0 8px rgba(0,0,0,0.05);
width: 130px !important;
}
.comp-table-scroll-area th:first-child {
background-color: #f8fafc !important;
}
.comp-table-scroll-area td:nth-child(2) {
background-color: #f0fdf4 !important;
}
.comp-table-scroll-area th,
.comp-table-scroll-area td {
padding: 10px 12px !important;
}
.comp-table-scroll-area::before {
content: '\f337  SWIPE TO COMPARE';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
top: -5px;
right: 15px;
background: #2563eb;
color: white;
font-size: 0.65rem;
padding: 3px 12px;
border-radius: 50px;
z-index: 15;
letter-spacing: 0.5px;
pointer-events: none;
box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
}
}
.ingredients-custom-format p a:not(.citation-number-link) {
color: #2563eb !important;
text-decoration: underline dotted #3b82f6 !important;
font-weight: 600;
transition: all 0.2s ease;
display: inline;
font-size: inherit !important;
}
.ingredients-custom-format p a:not(.citation-number-link):hover {
color: #1d4ed8 !important;
text-decoration: underline solid #1d4ed8 !important;
}
.citation-number-link {
color: #2563eb !important;
font-weight: 700;
text-decoration: none !important;
margin-left: 2px;
padding: 0 2px;
display: inline-block;
transition: color 0.15s ease-in-out;
}
.citation-number-link:hover {
color: #dc2626 !important;
}
.scientific-references-box {
background: #f8fafc;
border-radius: 12px;
border: 1px solid #e2e8f0;
padding: 1.25rem 1.5rem;
margin-top: 2rem;
}
.scientific-references-box .references-header {
font-size: 0.9rem;
font-weight: 800;
color: #334155;
margin-bottom: 0.75rem;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid #e2e8f0;
padding-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.scientific-references-box .references-list {
list-style: none;
padding: 0;
margin: 0;
}
.scientific-references-box .references-list li {
font-size: 0.88rem;
color: #475569;
margin-bottom: 8px;
line-height: 1.6;
display: flex;
align-items: flex-start;
gap: 8px;
word-break: break-word;
}
.scientific-references-box .references-list li:last-child {
margin-bottom: 0;
}
.scientific-references-box .ref-number {
font-weight: 700;
color: #2563eb;
min-width: 20px;
display: inline-block;
}
.scientific-references-box .ref-link {
color: #1e293b !important;
text-decoration: none !important;
font-weight: 600;
transition: color 0.15s ease;
}
.scientific-references-box .ref-link:hover {
color: #2563eb !important;
text-decoration: underline !important;
}
.scientific-references-box .ref-domain {
font-size: 0.78rem;
color: #94a3b8;
font-weight: 400;
}
.benefits-badge {
background: linear-gradient(135deg, #fef9c3, #fef08a);
color: #854d0e;
padding: 6px 18px;
border-radius: 50px;
font-size: 0.82rem;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 16px;
border: 1px solid #fde68a;
letter-spacing: 0.3px;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
margin-top: 1.5rem;
}
@media (max-width: 767px) {
.benefits-grid {
grid-template-columns: 1fr;
}
}
.benefit-card {
display: flex;
align-items: flex-start;
gap: 16px;
background: #ffffff;
border: 1px solid #f1f5f9;
border-radius: 1rem;
padding: 20px;
transition: all 0.3s ease;
}
.benefit-card:hover {
transform: translateY(-4px);
box-shadow: none;
border-color: #bfdbfe;
}
.benefit-icon {
flex-shrink: 0;
width: 46px;
height: 46px;
background: linear-gradient(135deg, #dcfce7, #bbf7d0);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
color: #15803d;
}
.benefit-card-content {
flex: 1;
}
.benefit-card-title {
font-size: 1rem;
font-weight: 800;
color: #0f172a;
display: block;
margin-bottom: 4px;
}
.benefit-card-desc {
font-size: 1.05rem;
color: #475569;
line-height: 1.85;
margin: 0;
}
.benefits-intro-text {
font-size: 1.05rem;
color: #334155;
line-height: 1.85;
margin-bottom: 1.5rem;
}
.benefits-list {
list-style: none;
padding: 0;
margin: 1.25rem 0;
}
.benefits-list li {
background: #ffffff;
border: 1px solid #e2e8f0;
border-left: 4px solid #f59e0b;
border-radius: 12px;
padding: 1.1rem 1.4rem;
margin-bottom: 1rem;
line-height: 1.75;
font-size: 0.97rem;
color: #374151;
transition: box-shadow 0.2s ease;
}
.benefits-list li:hover {
box-shadow: 0 4px 14px rgba(245,158,11,0.10);
}
.benefits-list li strong {
color: #92400e;
font-weight: 800;
display: inline;
border-bottom: none;
margin-right: 0;
}
.benefit-timeline {
display: inline-block;
margin-top: 0.4rem;
background: #fef3c7;
border: 1px solid #fde68a;
border-radius: 50px;
padding: 2px 10px;
font-size: 0.78rem;
color: #92400e;
font-weight: 600;
}
.direct-answer {
background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
border-left: 4px solid #0ea5e9;
border-radius: 0 10px 10px 0;
padding: 0.85rem 1.25rem;
margin: 0.75rem 0 1.25rem;
font-size: 1rem;
color: #0c4a6e;
font-weight: 500;
line-height: 1.7;
}
.top-product-box {
border: 2px solid #2563eb;
border-radius: 12px;
overflow: hidden;
background: #ffffff;
transition: transform 0.2s;
}
.top-product-box:hover {
transform: translateY(-2px);
box-shadow: none;
}
.box-badge {
background: #2563eb;
color: white;
padding: 6px 16px;
text-transform: uppercase;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.5px;
position: absolute;
top: 0;
left: 0;
border-radius: 0 0 12px 0;
z-index: 10;
}
.score-circle {
width: 65px;
height: 65px;
background: #f0f9ff;
border: 4px solid #0ea5e9;
color: #0369a1;
font-weight: 800;
font-size: 1.4rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
box-shadow: none;
}
.cta-btn-main {
background: #2563eb;
color: white;
font-weight: 700;
text-transform: uppercase;
padding: 16px 24px;
border-radius: 8px;
width: 100%;
display: block;
text-align: center;
transition: all 0.2s;
font-size: 1.1rem;
border: none;
text-decoration: none;
box-shadow: none;
}
.cta-btn-main:hover {
background: #1d4ed8;
transform: translateY(-2px);
color: white;
box-shadow: none;
}
.pros-list-clean {
margin: 0;
padding-left: 0;
}
.pros-list-clean li {
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
font-size: 0.95rem;
color: #334155;
font-weight: 500;
}
.pros-list-clean i {
color: #16a34a;
font-size: 1.1rem;
}
.mobile-sticky-cta {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #ffffff;
padding: 12px;
box-shadow: none;
z-index: 9999;
display: none;
border: none;
animation: slideUp 0.3s ease-out;
}
.pro-box,
.con-box {
border-radius: 1.5rem;
padding: 2.5rem;
height: 100%;
position: relative;
}
.pro-box {
background: #ffffff;
border: 2px solid #bbf7d0;
}
.con-box {
background: #ffffff;
border: 2px solid #fecaca;
}
.pro-title,
.con-title {
font-weight: 800;
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 1.25rem;
}
.pro-title {
color: #15803d;
}
.con-title {
color: #b91c1c;
}
.pro-list li,
.con-list li {
position: relative;
padding-left: 32px;
margin-bottom: 15px;
font-weight: 500;
line-height: 1.5;
list-style: none;
}
.pro-list li:before,
.con-list li:before {
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
left: 0;
top: 2px;
font-size: 1.1rem;
}
.pro-list li:before {
content: "\f058";
color: #10b981;
}
.con-list li:before {
content: "\f057";
color: #ef4444;
}
.faq-accordion .accordion-item {
border: 1px solid #f1f5f9 !important;
border-radius: 1rem !important;
margin-bottom: 1rem !important;
overflow: hidden;
background: #ffffff;
}
.faq-accordion .accordion-button {
padding: 1.25rem 1.5rem !important;
font-weight: 700 !important;
font-size: 1.1rem !important;
color: #0f172a !important;
background: #ffffff !important;
box-shadow: none !important;
display: flex;
align-items: center;
gap: 12px;
}
.faq-accordion .accordion-button:not(.collapsed) {
background: #f8fafc !important;
border-bottom: 1px solid #f1f5f9;
color: #10b981 !important;
}
.faq-q-mark {
color: #10b981;
font-weight: 900;
font-size: 1.2rem;
flex-shrink: 0;
}
.faq-a-inner {
display: flex;
gap: 15px;
padding: 1.5rem;
}
.faq-a-mark {
color: #6366f1;
font-weight: 900;
font-size: 1.2rem;
flex-shrink: 0;
margin-top: 2px;
}
.faq-a-text {
font-size: 1.05rem;
line-height: 1.8;
color: #475569;
}
.faq-accordion .accordion-body {
padding: 0 !important;
}
.faq-answer-inner {
display: flex;
gap: 15px;
padding: 1.5rem;
background: #ffffff;
}
.author-bio {
font-size: 1rem;
color: #475569;
line-height: 1.6;
}
.guarantee-section {
background: #f8fafc;
color: #1e293b;
border-radius: 1rem;
padding: 1.5rem 2rem;
position: relative;
overflow: hidden;
margin-bottom: 2rem;
border: 1px solid #e2e8f0;
box-shadow: none !important;
}
.guarantee-badge {
background: #e2e8f0;
color: #475569;
padding: 0.3rem 0.8rem;
border-radius: 2rem;
font-size: 0.75rem;
font-weight: 600;
display: inline-block;
margin-bottom: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.guarantee-content h2 {
font-size: 1.25rem;
font-weight: 800;
margin-bottom: 1rem;
color: #ffffff !important;
background: #0f172a;
display: inline-block;
padding: 0.5rem 1.25rem;
border-radius: 0.5rem;
line-height: 1.2;
letter-spacing: 0.5px;
}
.guarantee-content,
.guarantee-content *,
.guarantee-content p {
color: #334155 !important;
font-size: 1rem;
line-height: 1.6;
}
.guarantee-content p {
margin-bottom: 1rem;
}
.guarantee-seal-col {
display: flex;
align-items: center;
justify-content: center;
}
.guarantee-seal {
width: 100%;
max-width: 220px;
height: auto !important;
opacity: 1;
filter: drop-shadow(0 10px 20px rgba(0,0,0,0.05)) !important;
}
.guarantee-btn {
background: #0f172a;
color: #ffffff !important;
padding: 0.6rem 1.25rem;
border-radius: 0.5rem;
font-weight: 700;
font-size: 0.85rem;
text-decoration: none !important;
display: inline-block;
transition: all 0.3s ease;
margin-top: 1rem;
border: none;
}
.guarantee-btn:hover {
background: #1e293b;
transform: translateY(-2px);
}
.guarantee-features {
display: flex;
flex-wrap: wrap;
gap: 1rem 1.5rem;
margin-top: 1.25rem;
padding-top: 1rem;
border-top: 1px dashed #e2e8f0;
}
.g-feature {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.8rem;
color: #64748b;
font-weight: 500;
}
.g-feature i {
color: #10b981;
font-size: 1.1rem;
}
@media (max-width: 768px) {
.guarantee-section {
padding: 2rem 1.25rem;
text-align: center;
}
.guarantee-seal {
margin-bottom: 2rem;
max-width: 160px;
}
.guarantee-features {
grid-template-columns: 1fr;
text-align: left;
}
.guarantee-title {
font-size: 1.75rem;
}
}
.trending-pill-wrapper {
display: flex;
align-items: center;
}
@media (max-width: 991.98px) {
.trending-pill-wrapper {
justify-content: center;
}
}
#progress-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: rgba(255, 255, 255, 0.1);
z-index: 10000;
}
#progress-bar {
height: 100%;
background: linear-gradient(to right, #6366f1, #ec4899);
width: 0%;
transition: width 0.1s ease;
}
#what-is .content-text {
text-align: left !important;
}
#what-is .what-is-title {
text-align: left !important;
}
#what-is .formula-badge {
display: inline-block;
margin-bottom: 20px;
}
.what-is-list {
list-style: none !important;
padding: 0 !important;
margin: 25px 0 !important;
}
.what-is-list li {
margin-bottom: 12px !important;
display: flex !important;
align-items: flex-start !important;
gap: 12px !important;
color: #334155 !important;
font-size: 1.05rem !important;
line-height: 1.6 !important;
}
.what-is-list li:before {
content: "•";
color: #0f172a;
font-weight: 900;
font-size: 1.4rem;
line-height: 1;
margin-top: -2px;
}
.what-is-list strong,
.what-is-list b {
color: #0f172a;
font-weight: 700;
}
.expert-note-box {
background: #f8fafc;
border-radius: 1.25rem;
padding: clamp(1.5rem, 4vw, 2.5rem);
margin-top: 35px !important;
position: relative;
border: 1px solid #f1f5f9;
overflow: hidden;
}
.expert-note-box p {
margin-bottom: 15px !important;
font-style: italic;
color: #475569;
font-size: 1.1rem;
line-height: 1.8;
}
.expert-note-box .expert-info {
font-weight: 700;
color: #0f172a;
display: flex;
align-items: center;
gap: 10px;
}
.expert-note-box .expert-info::before {
content: "—";
color: #94a3b8;
}
.mobile-sticky-buy {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
padding: 12px 20px;
box-shadow: none;
display: none;
z-index: 9999;
border: none;
align-items: center;
justify-content: space-between;
gap: 15px;
}
@media (max-width: 991.98px) {
.mobile-sticky-buy {
display: flex;
}
}
.hero-new {
background: #ffffff;
padding: 10px 0 40px;
border: none;
box-shadow: none !important;
}
.hero-img-outer {
background: #ffffff;
padding: clamp(15px, 3vw, 30px);
border-radius: 0 !important;
box-shadow: none !important;
border: none;
overflow: visible !important;
}
.hero-img-inner {
padding: 20px;
margin-top: -25px;
display: flex;
align-items: center;
justify-content: center;
min-height: clamp(160px, 22vh, 300px);
border-radius: 0 !important;
overflow: visible !important;
}
.hero-product-img {
border: 1px solid rgba(226, 232, 240, 0.8);
padding: 10px;
background: #ffffff;
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.05));
border-radius: 1rem;
transform: translateZ(0);
transition: all 0.5s ease;
display: block;
margin: 0 auto;
}
.hero-product-img:hover {
transform: scale(1.02);
filter: drop-shadow(0 0 25px rgba(0, 0, 0, 0.1)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.15));
}
.hero-title-h1 {
font-size: clamp(1.75rem, 4.5vw, 2.8rem);
font-weight: 900;
line-height: 1.1;
color: #0f172a;
margin-bottom: 1.25rem;
}
.hero-bullets {
list-style: none;
padding: 0;
margin-bottom: 2.5rem;
}
.hero-bullets li {
margin-bottom: 1rem;
display: flex;
align-items: flex-start;
gap: 12px;
color: #475569;
font-size: 1.1rem;
font-weight: 500;
}
.hero-bullets li i {
color: #10b981;
font-size: 1.25rem;
margin-top: 4px;
}
.cta-primary {
background: #2563eb;
color: white;
border: none;
box-shadow: none;
}
.cta-secondary {
background: #ffffff;
color: #0f172a;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
.cta-secondary:hover {
background: #f8fafc;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
transform: translateY(-2px);
}
.standards-section {
background: #ffffff;
padding: 15px 0;
border: none;
}
.standards-badge {
background: #e0f2fe;
color: #0369a1;
font-size: 0.85rem;
font-weight: 700;
padding: 8px 18px;
border-radius: 50px;
text-transform: uppercase;
letter-spacing: 1px;
display: inline-block;
margin-bottom: 25px;
}
.standards-title {
font-size: clamp(1.5rem, 4vw, 2.5rem);
font-weight: 800;
color: #0f172a;
margin-bottom: 15px;
line-height: 1.25;
letter-spacing: -0.5px;
text-align: center;
}
.standards-subtitle {
color: #64748b;
font-size: clamp(1rem, 2vw, 1.15rem);
max-width: 1100px;
margin: 0 auto 36px;
line-height: 1.7;
text-align: center !important;
}
.standard-card {
background: #ffffff;
padding: 28px 24px;
border-radius: 2rem;
text-align: center;
height: 100%;
border: 1px solid #f1f5f9;
transition: all 0.4s ease;
}
.standard-card p {
text-align: center !important;
}
.standard-card:hover {
transform: translateY(-10px);
box-shadow: none;
border-color: #2563eb15;
}
.standard-card:hover .standard-icon-wrapper {
transform: scale(1.1);
}
.standard-icon-wrapper {
width: 220px;
height: 220px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
transition: transform 0.3s ease;
}
.standard-icon-wrapper img {
width: 100%;
height: 100%;
max-width: 220px;
max-height: 220px;
object-fit: contain;
}
.customer-reviews-section {
background: #ffffff;
padding: 15px 0;
position: relative;
border: none;
}
.customer-review-header {
text-align: center;
margin-bottom: 25px;
}
.customer-review-header .standards-title,
.customer-review-header .standards-subtitle {
text-align: center !important;
}
.trust-pill {
display: inline-flex;
align-items: center;
gap: 12px;
background: #ffffff;
padding: 12px 28px;
border-radius: 50px;
box-shadow: none;
color: #2563eb;
font-size: 1rem;
}
.customer-card {
background: #ffffff;
text-align: center;
height: 100%;
padding: 60px 45px;
border-radius: 2.5rem;
border: 1px solid #f1f5f9;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
}
.customer-card p,
.customer-card .customer-text {
text-align: center !important;
}
.customer-card:hover {
transform: translateY(-18px);
box-shadow: none;
border-color: #e0e8ff;
}
.customer-img-wrapper {
width: 160px;
height: 160px;
margin: 0 auto 35px;
padding: 8px;
border: 5px solid #f59e0b;
border-radius: 2.5rem;
overflow: hidden;
background: #ffffff;
transform: rotate(-5deg);
transition: transform 0.3s ease;
box-shadow: none;
}
.customer-card:hover .customer-img-wrapper {
transform: rotate(0deg) scale(1.08);
}
.customer-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 2rem;
}
.verified-label {
font-weight: 800;
font-size: 1.05rem;
color: #1e293b;
margin-bottom: 28px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.verified-check {
background: #10b981;
color: white;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
font-size: 0.9rem;
}
.quote-icon {
position: absolute;
top: 35px;
right: 45px;
font-size: 3.5rem;
color: #f1f5f9;
}
.pros-cons-section {
background: transparent;
border-radius: 0;
padding: 0;
border: none;
}
.pros-cons-col-box {
background: #ffffff;
border-radius: 1.5rem;
overflow: hidden;
}
.pros-col-box {
border-top: none;
}
.cons-col-box {
border-top: none;
}
.pros-col-box::before {
content: none;
}
.cons-col-box::before {
content: none;
}
.pros-cons-col-title {
font-size: 1.25rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2rem;
display: flex;
align-items: center;
gap: 12px;
}
.pros-col-title {
color: #059669;
}
.cons-col-title {
color: #b91c1c;
}
.pros-col-title i {
font-size: 1.5rem;
color: #10b981;
}
.cons-col-title i {
font-size: 1.5rem;
color: #ef4444;
}
.pros-cons-list {
list-style: none;
padding: 0;
margin: 0;
}
.pros-cons-list li {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 0 0 1rem 0;
margin-bottom: 1rem;
border-bottom: 1px dashed #e2e8f0;
font-size: 0.95rem;
color: #475569;
line-height: 1.6;
font-weight: 500;
}
.pros-cons-list li:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.pros-cons-list li .pc-icon {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
margin-top: 2px;
}
.pros-cons-list li span:not(.pc-icon) {
flex: 1;
}
.pro-icon {
background: #d1fae5;
color: #059669;
}
.con-icon {
background: #fee2e2;
color: #dc2626;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-top: 2rem;
align-items: stretch;
max-width: 1050px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 767px) {
.pricing-grid {
grid-template-columns: 1fr;
max-width: 320px;
}
}
.pricing-card {
background: #fff;
border-radius: 16px;
border: 2px solid #dde3ef;
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.25s ease, box-shadow 0.25s ease;
position: relative;
}
.pricing-card:hover {
transform: translateY(-6px);
box-shadow: none !important;
}
.pricing-card.popular {
border: 2px solid #1e3a8a;
box-shadow: none !important;
}
.pricing-card.popular .pricing-body {
background: linear-gradient(180deg, #eef4fd 0%, #f8fbff 60%, #ffffff 100%);
}
.pricing-header-badge {
background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
color: #ffffff;
text-align: center;
padding: 10px 14px;
font-weight: 800;
text-transform: uppercase;
font-size: 0.78rem;
letter-spacing: 2px;
}
.pricing-body {
padding: 1.5rem 1.35rem 1.25rem;
text-align: center;
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
overflow: hidden;
background: #ffffff;
}
.pkg-save-flag {
position: absolute;
top: 14px;
right: -30px;
background: #ef4444;
color: #fff;
padding: 5px 38px;
font-weight: 800;
font-size: 0.65rem;
transform: rotate(45deg);
z-index: 5;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.pkg-head-title {
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #475569;
margin-bottom: 4px;
text-align: center;
width: 100%;
}
.pricing-card.popular .pkg-head-title {
color: #1e3a8a;
font-size: 0.85rem;
}
.pkg-bottles {
font-size: 1.5rem;
font-weight: 900;
color: #0f172a;
line-height: 1.1;
margin-bottom: 2px;
text-align: center;
width: 100%;
}
.pricing-card.popular .pkg-bottles {
font-size: 1.75rem;
}
.pkg-supply {
font-size: 0.75rem;
font-weight: 600;
color: #64748b;
margin-bottom: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.5px;
display: block;
text-align: center;
}
.pkg-image {
width: 150px;
height: 150px;
object-fit: contain;
display: block;
margin: 0 auto 1rem;
transition: transform 0.3s ease;
filter: none;
box-shadow: none;
}
.pricing-card.popular .pkg-image {
width: 200px;
height: 200px;
}
.pricing-card:hover .pkg-image {
transform: scale(1.06) translateY(-4px);
}
.pkg-price-divider {
width: 100%;
border: none;
border-top: 1.5px solid #e8edf5;
margin: 0.6rem 0;
}
.pkg-price-unit {
display: flex;
align-items: flex-start;
justify-content: center;
line-height: 1;
margin-bottom: 0.25rem;
width: 100%;
gap: 2px;
}
.pkg-price-unit .symbol {
font-size: 1.4rem;
font-weight: 800;
color: #1e293b;
margin-top: 6px;
line-height: 1;
}
.pkg-price-unit .price-txt {
font-size: 2.4rem;
font-weight: 900;
color: #1e293b;
line-height: 1;
}
.pkg-price-unit .per-bottle {
font-size: 0.7rem;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
line-height: 1.3;
align-self: flex-end;
padding-bottom: 5px;
margin-left: 4px;
text-align: left;
}
.pkg-feature-pill {
background: #f1f5f9;
border: none;
border-radius: 6px;
padding: 6px 12px;
font-size: 0.78rem;
font-weight: 600;
color: #334155;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
margin-bottom: 6px;
text-align: center;
}
.pkg-feature-pill i {
color: #10b981;
font-size: 0.8rem;
flex-shrink: 0;
}
.pkg-bonus-pill {
background: #f5f3ff;
color: #6d28d9;
}
.pkg-bonus-pill i {
color: #8b5cf6;
}
.pkg-savings-pill {
background: #f0fdf4;
color: #15803d;
border: 1px solid #bbf7d0;
}
.pkg-savings-pill i {
color: #16a34a;
}
.pkg-saved-label {
display: inline-block;
background: #16a34a;
color: #fff;
font-size: 0.6rem;
font-weight: 800;
padding: 1px 5px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-left: 3px;
vertical-align: middle;
}
.pkg-cta {
margin-top: auto;
width: 100%;
background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
color: #1c1c1c;
font-weight: 900;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
padding: 0.85rem 1rem;
border-radius: 10px;
border: none;
text-decoration: none !important;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
transition: all 0.2s ease;
margin-bottom: 0;
box-shadow: none;
}
.pkg-cta:hover {
background: linear-gradient(180deg, #fcd34d 0%, #fbbf24 100%);
color: #1c1c1c;
transform: translateY(-2px);
box-shadow: none;
}
.pkg-total-box {
font-size: 0.8rem;
font-weight: 600;
color: #64748b;
text-align: center;
width: 100%;
margin-top: 0.6rem;
margin-bottom: 2px;
}
.pkg-total-box .old-price {
text-decoration: line-through;
opacity: 0.45;
font-size: 0.78rem;
margin-right: 3px;
}
.pkg-total-box strong {
color: #0f172a;
font-weight: 800;
font-size: 0.88rem;
}
.pkg-shipping-txt {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
color: #0284c7;
letter-spacing: 0.5px;
margin-top: 0.3rem;
display: block;
text-align: center;
}
.secure-checkout-badge {
font-size: 0.65rem;
font-weight: 700;
color: #059669;
letter-spacing: 0.8px;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
margin-top: 0.5rem;
width: 100%;
}
.credit-card-icons {
display: flex;
justify-content: center;
margin-top: 4px;
}
.credit-card-icons img {
max-width: 120px;
opacity: 0.8;
}
.shipping-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-top: 1.5rem;
}
.shipping-dest-card {
background: #f0f9ff;
border-radius: 1rem;
padding: 1.25rem;
border-left: 5px solid #0ea5e9;
}
.dest-name {
font-weight: 800;
font-size: 1rem;
color: #0c4a6e;
margin-bottom: 5px;
display: block;
}
.dest-meta {
font-size: 0.9rem;
color: #0369a1;
font-weight: 600;
}
.official-site-alert {
background: #fffbeb;
border: 2px dashed #f59e0b;
border-radius: 1.25rem;
padding: 2rem;
text-align: center;
margin: 2.5rem 0;
}
.btn-visit-official {
display: inline-flex;
align-items: center;
gap: 10px;
background: #1e293b;
color: #fff;
padding: 12px 30px;
border-radius: 50px;
font-weight: 800;
text-decoration: none;
margin-top: 1.5rem;
transition: all 0.3s;
}
.btn-visit-official:hover {
background: #0f172a;
color: #fff;
transform: translateY(-3px);
}
.not-available-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-top: 1.5rem;
}
.bad-platform-item {
background: #fff5f5;
border-radius: 12px;
padding: 12px 20px;
border: 1px solid #fee2e2;
display: flex;
align-items: center;
gap: 12px;
font-weight: 700;
color: #991b1b;
}
.trust-reason-list {
background: #ffffff;
border-radius: 1.25rem;
padding: 2rem;
margin-top: 2.5rem;
border: 1px solid #e2e8f0;
}
.trust-reason-item {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 12px;
font-weight: 600;
color: #334155;
}
.trust-reason-item i {
color: #10b981;
}
.faq-badge {
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
color: #475569;
padding: 6px 18px;
border-radius: 50px;
font-size: 0.82rem;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
border: 1px solid #e2e8f0;
letter-spacing: 0.3px;
}
.faq-accordion .accordion-item {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
margin-bottom: 1.25rem;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-accordion .accordion-item:hover {
border-color: #3b82f6;
transform: translateY(-2px);
}
.faq-accordion .accordion-button {
padding: 1.5rem;
font-weight: 800;
font-size: 1.25rem;
color: #1e293b;
background: transparent;
box-shadow: none;
gap: 15px;
transition: all 0.3s ease;
}
.faq-accordion .accordion-button:not(.collapsed) {
color: #2563eb;
background: #f8fafc;
border-left: 5px solid #2563eb;
}
.faq-icon-q {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 10px;
background: #f1f5f9;
color: #64748b;
font-weight: 900;
font-size: 1.1rem;
flex-shrink: 0;
transition: all 0.3s ease;
}
.faq-accordion .accordion-button:not(.collapsed) .faq-icon-q {
background: #2563eb;
color: #ffffff;
transform: rotate(360deg);
}
.faq-accordion .accordion-button::after {
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
margin-left: auto;
content: "";
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-size: 1.25rem;
transition: transform .2s ease-in-out;
}
.faq-accordion .accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232563eb'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
transform: rotate(-180deg);
}
.faq-accordion .accordion-body {
padding: 0 1.5rem 1.5rem 1.5rem;
color: #475569;
font-size: 1.05rem;
line-height: 1.7;
background: #f0f9ff;
}
@media (max-width: 991.98px) {
.hero-new {
padding: 5px 0 20px !important;
}
.hero-img-inner {
min-height: 260px !important;
}
.hero-img-inner img {
max-height: 240px !important;
}
.hero-title-h1 {
font-size: 1.85rem !important;
text-align: left;
}
.btn-group-mobile {
flex-direction: column !important;
}
.btn-group-mobile .btn {
width: 100% !important;
justify-content: center;
}
.standards-title {
font-size: 1.65rem !important;
}
.standard-icon-wrapper {
width: 180px !important;
height: 180px !important;
}
.customer-card {
padding: 28px 18px !important;
}
.customer-img-wrapper {
width: 90px !important;
height: 90px !important;
}
.review-content .container {
padding-left: 1rem;
padding-right: 1rem;
}
}
@media (max-width: 767.98px) {
.hero-new {
padding: 10px 0 15px !important;
}
.hero-img-outer {
padding: 8px !important;
margin-bottom: 1rem;
}
.hero-img-inner {
min-height: 240px !important;
margin-top: -10px !important;
padding: 6px !important;
}
.hero-img-inner img,
.hero-product-img {
max-height: 380px !important;
width: 100% !important;
object-fit: contain;
}
.hero-title-h1 {
font-size: 1.55rem !important;
line-height: 1.25 !important;
text-align: center !important;
}
.hero-hype-intro p {
font-size: 0.95rem !important;
line-height: 1.65 !important;
text-align: center !important;
}
.hero-hype-intro {
text-align: center !important;
}
.trust-rating-area {
flex-direction: column !important;
align-items: center !important;
gap: 0.75rem !important;
}
.trust-rating-area .border-start {
border-left: none !important;
padding-left: 0 !important;
width: 100%;
text-align: center;
}
.standards-section {
padding: 8px 0 !important;
}
.standards-badge {
font-size: 0.72rem !important;
}
.standards-title {
font-size: 1.4rem !important;
}
.standards-subtitle {
font-size: 0.93rem !important;
margin-bottom: 20px !important;
}
.standard-card {
padding: 18px 14px !important;
}
.standard-icon-wrapper {
width: 200px !important;
height: 200px !important;
margin-bottom: 12px !important;
}
.standard-icon-wrapper img {
max-width: 200px !important;
max-height: 200px !important;
}
.content-section {
padding: 8px 0 !important;
}
.what-is-title {
font-size: 1.3rem !important;
}
.content-text,
.review-content p,
.content-body p,
.content-text span,
.content-text div {
font-size: 0.98rem !important;
line-height: 1.75 !important;
text-align: left !important;
}
.feature-check-list {
grid-template-columns: 1fr 1fr !important;
gap: 7px !important;
}
.feature-check-item {
font-size: 0.78rem !important;
padding: 7px 9px !important;
}
.mechanism-pill {
font-size: 0.78rem !important;
padding: 5px 10px !important;
}
.pros-cons-col-box {
padding: 1.25rem 1rem !important;
border-radius: 1rem !important;
}
.pros-cons-list li {
font-size: 0.85rem !important;
gap: 8px !important;
padding: 0 0 0.75rem 0 !important;
margin-bottom: 0.75rem !important;
}
.customer-reviews-section {
padding: 8px 0 !important;
}
.customer-card {
padding: 24px 16px !important;
border-radius: 1.25rem !important;
}
.customer-img-wrapper {
width: 80px !important;
height: 80px !important;
margin-bottom: 1rem !important;
}
.trust-pill {
font-size: 0.8rem !important;
padding: 6px 14px !important;
gap: 8px !important;
}
.pricing-grid {
grid-template-columns: 1fr !important;
max-width: 320px !important;
gap: 1rem !important;
}
.pricing-card.popular {
order: -1;
}
.pricing-body {
padding: 1.1rem 1rem 0.9rem !important;
}
.pkg-bottles {
font-size: 1.25rem !important;
}
.pkg-price-unit .price-txt {
font-size: 1.85rem !important;
}
.pkg-image {
width: 120px !important;
height: 120px !important;
}
.pricing-card.popular .pkg-image {
width: 160px !important;
height: 160px !important;
}
.pkg-cta {
font-size: 0.9rem !important;
padding: 0.75rem 0.85rem !important;
}
.pkg-feature-pill {
font-size: 0.73rem !important;
padding: 5px 9px !important;
}
.faq-accordion .accordion-button {
font-size: 0.92rem !important;
padding: 0.9rem 1rem !important;
gap: 10px !important;
}
.faq-accordion .accordion-body {
font-size: 0.93rem !important;
padding: 0 1rem 1.1rem 1rem !important;
}
.faq-icon-q {
width: 24px !important;
height: 24px !important;
font-size: 0.8rem !important;
}
.shipping-info-grid {
grid-template-columns: 1fr !important;
gap: 0.75rem !important;
}
.official-site-alert {
padding: 1rem !important;
}
.not-available-grid {
grid-template-columns: 1fr 1fr !important;
gap: 0.65rem !important;
}
.bad-platform-item {
padding: 9px 14px !important;
font-size: 0.88rem !important;
}
.trust-reason-list {
padding: 1rem !important;
}
.mobile-sticky-buy {
padding: 9px 14px !important;
gap: 8px !important;
}
body {
padding-bottom: 68px;
}
@media (min-width: 768px) and (max-width: 991.98px) {
body {
padding-bottom: 72px;
}
}
}
@media (max-width: 575.98px) {
.hero-title-h1 {
font-size: 1.35rem !important;
}
.feature-check-list {
grid-template-columns: 1fr !important;
}
.pricing-grid {
max-width: 100% !important;
}
.standards-title {
font-size: 1.25rem !important;
}
.what-is-title {
font-size: 1.2rem !important;
}
.pros-cons-col-title {
font-size: 0.98rem !important;
}
.verdict-box {
padding: 1.25rem 1rem !important;
}
.verdict-box h2,
.verdict-box h3 {
font-size: 1.2rem !important;
}
.cta-button {
width: 100% !important;
font-size: 0.95rem !important;
padding: 0.8rem 1rem !important;
}
section h2 {
font-size: 1.3rem !important;
}
* {
word-break: break-word;
}
.what-is-img-container {
min-height: 180px !important;
}
.what-is-img-container img {
max-height: 170px !important;
}
}
.pricing-rating-strip {
background: #ffffff;
border-radius: 20px;
border: 1px solid #eef2f7;
padding: 1.5rem 2rem;
margin-top: 1.5rem;
max-width: 1050px;
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
}
.prs-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 4rem;
}
.prs-block {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
flex: 1;
}
.prs-stars {
color: #f59e0b;
font-size: 1.3rem;
margin-bottom: 0.6rem;
display: flex;
gap: 4px;
filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.2));
}
.prs-rating-val {
font-size: 1rem;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.8px;
}
.prs-rating-val strong {
color: #1e293b;
font-size: 1.4rem;
font-weight: 900;
}
.prs-divider {
width: 1.5px;
height: 65px;
background: radial-gradient(circle, #e2e8f0 0%, rgba(226, 232, 240, 0) 100%);
}
.prs-count {
font-size: 2rem;
font-weight: 900;
color: #1e293b;
line-height: 1.1;
background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.prs-label {
font-size: 0.85rem;
font-weight: 800;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 1.2px;
margin-top: 0.4rem;
}
.prs-guarantee {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
}
.prs-guarantee i {
background: #ecfdf5;
color: #10b981;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 1.4rem;
box-shadow: none !important;
}
.prs-guarantee span {
font-size: 0.85rem;
font-weight: 800;
color: #059669;
text-transform: uppercase;
letter-spacing: 0.5px;
}
@media (max-width: 991px) {
.pricing-rating-strip {
padding: 2rem 1.5rem;
margin-left: 1rem;
margin-right: 1rem;
max-width: calc(100% - 2rem);
}
.prs-inner {
flex-direction: column;
gap: 2rem;
}
.prs-divider {
width: 80%;
height: 1.5px;
background: linear-gradient(to right, transparent, #f1f5f9, transparent);
}
.prs-stars {
font-size: 2rem;
}
.prs-count {
font-size: 2.2rem;
}
.prs-guarantee i {
width: 56px;
height: 56px;
font-size: 1.6rem;
}
}
details.toc-container {
margin: 1.5rem 0;
background-color: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 8px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
summary.toc-title {
font-family: 'Outfit', sans-serif;
font-size: 1.05rem;
font-weight: 600;
color: #1e293b;
padding: 1rem 1.25rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
user-select: none;
margin: 0;
list-style: none;
}
summary.toc-title::-webkit-details-marker {
display: none;
}
details[open].toc-container summary.toc-title {
border-bottom: 1px solid #f1f5f9;
background: #f8fafc;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
summary.toc-title .title-left {
display: flex;
align-items: center;
gap: 8px;
}
summary.toc-title .toggle-icon {
color: #64748b;
font-size: 0.9rem;
transition: transform 0.3s ease;
}
details[open].toc-container summary.toc-title .toggle-icon {
transform: rotate(180deg);
}
.toc-body {
padding: 1rem 1.25rem;
background-color: #ffffff;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.toc-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.toc-list li {
padding: 0 !important;
margin: 0 !important;
}
.toc-list li::before {
display: none !important;
}
.toc-list li a {
color: #475569;
text-decoration: none;
font-size: 0.95rem;
font-weight: 500;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 4px 0;
}
.toc-list li a:hover {
color: #2563eb;
transform: translateX(4px);
}
.toc-list li a i {
font-size: 0.8rem;
color: #cbd5e1;
}
.toc-list li a:hover i {
color: #3b82f6;
}
@media (max-width: 768px) {
details.toc-container {
margin: 1rem 0;
}
summary.toc-title {
padding: 0.75rem 1rem;
font-size: 0.95rem;
}
.toc-body {
padding: 0.75rem 1rem;
}
.toc-list li a {
font-size: 0.9rem;
padding: 2px 0;
}
}
.medical-warning {
background: #fffbeb !important;
border-left: 4px solid #d97706 !important;
padding: 1.25rem !important;
border-radius: 8px !important;
margin: 1.5rem 0 !important;
font-size: 0.95rem !important;
color: #78350f !important;
line-height: 1.6 !important;
}
.medical-warning strong {
color: #92400e !important;
}
.dosage-warning {
background: #fef2f2 !important;
border-left: 4px solid #ef4444 !important;
padding: 1.25rem !important;
border-radius: 8px !important;
margin: 1.5rem 0 !important;
font-size: 0.95rem !important;
color: #991b1b !important;
line-height: 1.6 !important;
}
.dosage-warning strong {
color: #7f1d1d !important;
}
.ideal-candidates, .avoid-candidates, .side-effects-list {
padding-left: 0 !important;
list-style: none !important;
margin: 1.25rem 0 !important;
}
.ideal-candidates li, .avoid-candidates li, .side-effects-list li {
position: relative !important;
padding-left: 2rem !important;
margin-bottom: 0.75rem !important;
line-height: 1.6 !important;
}
.ideal-candidates li::before {
content: "\f058" !important;
font-family: "Font Awesome 6 Free" !important;
font-weight: 900 !important;
position: absolute !important;
left: 0 !important;
top: 2px !important;
color: #10b981 !important;
font-size: 1.1rem !important;
}
.avoid-candidates li::before {
content: "\f057" !important;
font-family: "Font Awesome 6 Free" !important;
font-weight: 900 !important;
position: absolute !important;
left: 0 !important;
top: 2px !important;
color: #ef4444 !important;
font-size: 1.1rem !important;
}
.side-effects-list li::before {
content: "\f06a" !important;
font-family: "Font Awesome 6 Free" !important;
font-weight: 900 !important;
position: absolute !important;
left: 0 !important;
top: 2px !important;
color: #f59e0b !important;
font-size: 1.1rem !important;
}
.dosage-steps {
padding-left: 0 !important;
list-style: none !important;
margin: 1.25rem 0 !important;
counter-reset: dosage-counter !important;
}
.dosage-steps li {
position: relative !important;
padding-left: 2.75rem !important;
margin-bottom: 1.25rem !important;
line-height: 1.6 !important;
counter-increment: dosage-counter !important;
}
.dosage-steps li::before {
content: counter(dosage-counter) !important;
position: absolute !important;
left: 0 !important;
top: 2px !important;
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
color: #fff !important;
width: 1.75rem !important;
height: 1.75rem !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0.85rem !important;
font-weight: 700 !important;
}
.refund-steps {
padding-left: 0 !important;
list-style: none !important;
margin: 1.25rem 0 !important;
counter-reset: refund-counter !important;
}
.refund-steps li {
position: relative !important;
padding-left: 2.75rem !important;
margin-bottom: 1.25rem !important;
line-height: 1.6 !important;
counter-increment: refund-counter !important;
}
.refund-steps li::before {
content: counter(refund-counter) !important;
position: absolute !important;
left: 0 !important;
top: 2px !important;
background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
color: #fff !important;
width: 1.75rem !important;
height: 1.75rem !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0.85rem !important;
font-weight: 700 !important;
}
.dosage-tip {
background: #fefce8 !important;
border-left: 4px solid #f59e0b !important;
padding: 1.25rem !important;
border-radius: 8px !important;
margin: 1.5rem 0 !important;
font-size: 0.95rem !important;
color: #78350f !important;
line-height: 1.6 !important;
}
.dosage-tip strong {
color: #92400e !important;
}
.verdict-outer {
background: transparent;
border-radius: 0;
padding: 0;
position: relative;
overflow: visible;
border: none;
box-shadow: none;
margin-top: 1.5rem;
}
.verdict-text {
color: #334155;
font-size: 1.1rem;
line-height: 1.8;
margin-bottom: 3rem;
padding: 0 1rem;
}
@media (max-width: 768px) {
.verdict-text {
padding: 0 0.25rem;
}
}
.dark-mode .verdict-text {
color: #cbd5e1;
}
.verdict-bottom-card {
background: rgba(235, 248, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 1rem;
padding: 2rem 2.5rem;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 3rem;
border: 1px solid rgba(59, 130, 246, 0.15);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
margin: 2.5rem auto;
max-width: 1000px;
}
.verdict-score-col {
flex-shrink: 0;
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(5px);
border: 1px solid rgba(59, 130, 246, 0.1);
border-radius: 0.85rem;
padding: 1.5rem 1.5rem;
min-width: 180px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.verdict-score-val {
font-size: 3.2rem;
font-weight: 950;
color: #1e3a8a;
line-height: 1;
margin-bottom: 0.15rem;
}
.verdict-stars {
color: #fbbf24;
font-size: 1.15rem;
margin-bottom: 0.75rem;
display: flex;
justify-content: center;
gap: 4px;
}
.verdict-score-label {
text-transform: uppercase;
font-weight: 900;
color: #475569;
font-size: 0.75rem;
letter-spacing: 2px;
}
.verdict-cta-col {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 0.5rem;
}
.verdict-cta-h4 {
color: #1e293b;
font-weight: 700;
font-size: 1.15rem;
margin-bottom: 0.25rem;
display: block;
}
.verdict-cta-btn {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white !important;
font-size: 1.25rem;
font-weight: 900;
padding: 1.1rem 2.5rem;
border-radius: 0.75rem;
text-decoration: none !important;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
width: auto;
white-space: nowrap;
transition: all 0.3s ease;
border: none;
box-shadow: 0 10px 20px rgba(16, 185, 129, 0.2);
}
.verdict-cta-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(16, 185, 129, 0.4);
filter: brightness(1.1);
}
.verdict-trust-list {
display: flex;
flex-wrap: wrap;
gap: 15px;
align-items: center;
justify-content: flex-start;
width: 100%;
padding: 0;
margin-top: 0.5rem;
}
.verdict-trust-list li {
list-style: none;
font-size: 0.8rem;
font-weight: 800;
color: #475569;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.verdict-trust-list li i {
color: #10b981;
font-size: 0.9rem;
}
@media (max-width: 991px) {
.verdict-bottom-card {
flex-direction: row;
padding: 1rem 0.5rem;
gap: 0.5rem;
text-align: left;
}
.verdict-score-col {
width: 35%;
min-width: 0;
max-width: none;
margin-bottom: 0;
padding: 0.75rem 0.25rem;
}
.verdict-score-val {
font-size: 1.8rem;
}
.verdict-stars {
font-size: 0.7rem;
margin-bottom: 0.35rem;
}
.verdict-score-label {
font-size: 0.55rem;
letter-spacing: 0px;
}
.verdict-cta-col {
align-items: flex-start;
text-align: left;
width: 65%;
}
.verdict-cta-h4 {
font-size: 0.85rem;
margin-bottom: 0.5rem;
line-height: 1.2;
}
.verdict-cta-btn {
width: 100%;
max-width: 100%;
white-space: normal;
font-size: 0.75rem;
padding: 0.6rem 0.5rem;
line-height: 1.3;
}
.verdict-trust-list {
justify-content: flex-start;
flex-direction: row;
flex-wrap: wrap;
gap: 4px;
margin-top: 0.35rem;
}
.verdict-trust-list li {
font-size: 0.6rem;
}
.verdict-trust-list li i {
font-size: 0.65rem;
}
}
.author-verified-card {
background: #ffffff;
border-radius: 1.25rem;
padding: 1.5rem 2rem;
border: 1px solid #f1f5f9;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
position: relative;
overflow: hidden;
display: flex;
gap: 1.5rem;
align-items: center;
}
.author-verified-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
background: #10b981;
}
.author-img-col {
position: relative;
flex-shrink: 0;
}
.author-img-col img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 50%;
border: 3px solid #f8fafc;
}
.author-placeholder-img {
width: 80px;
height: 80px;
border-radius: 50%;
background: #f1f5f9;
border: 3px solid #f8fafc;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
color: #94a3b8;
}
.author-verified-badge {
position: absolute;
bottom: 0;
right: 0;
background: #10b981;
color: white;
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid #fff;
font-size: 0.75rem;
}
.author-info-col h5 {
font-weight: 800;
color: #0f172a;
margin-bottom: 0.2rem;
font-size: 1.25rem;
display: flex;
align-items: center;
gap: 8px;
}
.author-role-badge {
background: #f0fdf4;
color: #166534;
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.5px;
padding: 4px 10px;
border-radius: 6px;
display: inline-block;
margin-bottom: 0.5rem;
}
.author-bio {
color: #475569;
font-size: 0.95rem;
line-height: 1.5;
margin: 0;
}
@media (max-width: 768px) {
.author-verified-card {
flex-direction: column;
text-align: center;
padding: 2rem 1rem;
gap: 1.5rem;
}
.author-info-col h5 {
justify-content: center;
}
.author-bio {
text-align: center;
padding: 0 0.5rem;
}
.author-verified-badge {
right: auto;
left: 60%;
}
}
.share-glass-card {
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 2rem;
padding: 2.5rem 2rem;
text-align: center;
position: relative;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.share-glass-card::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(59, 130, 246, 0.05) 0%, transparent 70%);
z-index: 0;
}
.share-label {
font-size: 0.7rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 2px;
color: #64748b;
margin-bottom: 1rem;
position: relative;
z-index: 1;
}
.share-prompt {
font-size: 1.25rem;
color: #0f172a;
font-weight: 800;
margin-bottom: 2rem;
position: relative;
z-index: 1;
}
.share-glass-buttons {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
position: relative;
z-index: 1;
}
.glass-btn {
width: 46px;
height: 46px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff !important;
font-size: 1.1rem;
text-decoration: none !important;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.glass-btn:hover {
transform: translateY(-8px) scale(1.1);
box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.2);
}
.g-btn-fb { background: rgba(24, 119, 242, 0.85); box-shadow: 0 4px 15px rgba(24, 119, 242, 0.3); }
.g-btn-tw { background: rgba(15, 23, 42, 0.9); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); }
.g-btn-wa { background: rgba(37, 211, 102, 0.85); box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3); }
.g-btn-pin { background: rgba(230, 0, 35, 0.85); box-shadow: 0 4px 15px rgba(230, 0, 35, 0.3); }
.g-btn-tg { background: rgba(0, 136, 204, 0.85); box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3); }
.g-btn-li { background: rgba(10, 102, 194, 0.85); box-shadow: 0 4px 15px rgba(10, 102, 194, 0.3); }
.g-btn-copy { background: rgba(100, 116, 139, 0.85); box-shadow: 0 4px 15px rgba(100, 116, 139, 0.3); }
.g-btn-fb:hover { box-shadow: 0 0 20px rgba(24, 119, 242, 0.6); }
.g-btn-wa:hover { box-shadow: 0 0 20px rgba(37, 211, 102, 0.6); }
.g-btn-pin:hover { box-shadow: 0 0 20px rgba(230, 0, 35, 0.6); }
.g-btn-tg:hover { box-shadow: 0 0 20px rgba(0, 136, 204, 0.6); }
.sticky-mobile-cta {
display: none;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 6px 10px;
z-index: 1050;
}
.sticky-mobile-cta .btn-sticky {
width: 100%;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #fff;
font-weight: 700;
font-size: 0.9rem;
padding: 9px 14px;
border-radius: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sticky-mobile-cta .btn-sticky:active {
transform: scale(0.98);
}
@media (max-width: 768px) {
.sticky-mobile-cta {
display: block;
}
body {
padding-bottom: 58px !important;
}
}
.exit-popup-overlay {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(15, 23, 42, 0.85);
backdrop-filter: blur(5px);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.exit-popup-overlay.active {
opacity: 1;
pointer-events: auto;
}
.exit-popup-content {
background: #fff;
padding: 2.5rem;
border-radius: 1.5rem;
text-align: center;
max-width: 450px;
width: 90%;
position: relative;
transform: translateY(30px) scale(0.95);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
border: 3px solid #f1f5f9;
}
.exit-popup-overlay.active .exit-popup-content {
transform: translateY(0) scale(1);
}
.exit-popup-close {
position: absolute;
top: 15px; right: 20px;
font-size: 2rem;
color: #94a3b8;
cursor: pointer;
transition: color 0.2s;
line-height: 1;
}
.exit-popup-close:hover {
color: #0f172a;
}
.exit-popup-img {
margin-bottom: 1.25rem;
animation: bounce 2s infinite;
}
.exit-popup-img img {
max-width: 140px;
max-height: 140px;
object-fit: contain;
border-radius: 12px;
filter: drop-shadow(0 15px 25px rgba(0,0,0,0.15));
}
.exit-popup-img i {
font-size: 3.5rem;
color: #f59e0b;
}
.exit-popup-content h3 {
font-weight: 900;
font-size: 1.8rem;
color: #1e293b;
margin-bottom: 1rem;
line-height: 1.2;
}
.exit-popup-content p {
color: #475569;
font-size: 1.05rem;
margin-bottom: 2rem;
line-height: 1.6;
}
.exit-btn {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #fff;
font-weight: 800;
font-size: 1.15rem;
padding: 1rem 2rem;
border-radius: 50px;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 10px 20px rgba(16, 185, 129, 0.3);
transition: all 0.3s ease;
}
.exit-btn:hover {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(16, 185, 129, 0.4);
color: #fff;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-15px); }
60% { transform: translateY(-7px); }
}
.verdict-scorecard {
background: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 1.5rem 2rem !important;
margin: 2rem 0 !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
}
.verdict-scorecard h2,
.verdict-scorecard h3,
.verdict-scorecard h4 {
margin-top: 0 !important;
margin-bottom: 1.25rem !important;
color: #1e293b !important;
font-weight: 700 !important;
font-size: 1.25rem !important;
}
.verdict-scorecard ul {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.verdict-scorecard p:not(:has(.scorecard-stars)),
.verdict-scorecard li:not(:has(.scorecard-stars)) {
display: flex !important;
align-items: flex-start !important;
margin-bottom: 0.75rem !important;
position: relative !important;
padding-left: 2rem !important;
line-height: 1.6 !important;
color: #334155 !important;
font-weight: 500;
font-size: 1.05rem !important;
}
.verdict-scorecard p:not(:has(.scorecard-stars))::before {
content: "\f058" !important;
font-family: "Font Awesome 6 Free" !important;
font-weight: 900 !important;
position: absolute !important;
left: 0 !important;
top: 2px !important;
color: #10b981 !important;
font-size: 1.1rem !important;
background: none !important;
border-radius: 0 !important;
width: auto !important;
height: auto !important;
}
.verdict-scorecard li:has(.scorecard-stars),
.verdict-scorecard p:has(.scorecard-stars) {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 0.5rem !important;
flex-wrap: nowrap !important;
margin-bottom: 0.75rem !important;
padding-left: 0 !important;
line-height: 1.6 !important;
color: #334155 !important;
font-weight: 500;
font-size: 1.05rem !important;
}
.verdict-scorecard li:has(.scorecard-stars)::before,
.verdict-scorecard p:has(.scorecard-stars)::before {
content: none !important;
}
.verdict-scorecard li strong,
.verdict-scorecard p strong {
flex-shrink: 0 !important;
display: inline-block !important;
margin-right: 0.5rem !important;
}
.verdict-scorecard li .scorecard-stars,
.verdict-scorecard p .scorecard-stars {
display: inline-flex !important;
align-items: center !important;
gap: 2px !important;
flex-shrink: 0 !important;
margin-left: 0 !important;
margin-right: 0.5rem !important;
}
.verdict-scorecard li .scorecard-stars .fa-star,
.verdict-scorecard li .scorecard-stars .fa-star-half-alt,
.verdict-scorecard p .scorecard-stars .fa-star,
.verdict-scorecard p .scorecard-stars .fa-star-half-alt {
font-size: 0.95rem !important;
}
.verdict-scorecard li .scorecard-rating,
.verdict-scorecard p .scorecard-rating {
font-weight: 600 !important;
color: #475569 !important;
flex-shrink: 0 !important;
white-space: nowrap !important;
}
[data-theme="dark"] .verdict-scorecard {
background: var(--dm-card) !important;
border-color: var(--dm-border) !important;
}
[data-theme="dark"] .verdict-scorecard h2,
[data-theme="dark"] .verdict-scorecard h3,
[data-theme="dark"] .verdict-scorecard h4 {
color: #f8fafc !important;
}
[data-theme="dark"] .verdict-scorecard li,
[data-theme="dark"] .verdict-scorecard p {
color: #cbd5e1 !important;
}
[data-theme="dark"] .verdict-scorecard li .scorecard-rating,
[data-theme="dark"] .verdict-scorecard p .scorecard-rating {
color: #cbd5e1 !important;
}
@media (max-width: 576px) {
.verdict-scorecard li:has(.scorecard-stars),
.verdict-scorecard p:has(.scorecard-stars) {
flex-wrap: wrap !important;
gap: 0.25rem !important;
}
.verdict-scorecard li .scorecard-stars,
.verdict-scorecard p .scorecard-stars {
margin-left: 0 !important;
margin-right: 0 !important;
}
.verdict-scorecard li .scorecard-rating,
.verdict-scorecard p .scorecard-rating {
margin-left: 0 !important;
}
}