.qb-backdrop {
position: fixed;
inset: 0;
z-index: 9990;
pointer-events: none;
background: transparent;
}
.quick-browse-bar {
position: fixed;
bottom: 28px;
left: 50%;
transform: translateX(-50%) translateY(0);
z-index: 9999;
display: flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, rgba(8,8,8,0.97) 0%, rgba(20,20,20,0.97) 100%);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border: 1px solid rgba(227, 255, 0, 0.35);
border-radius: 80px;
padding: 8px 10px 8px 18px;
box-shadow:
0 0 0 1px rgba(227,255,0,0.08),
0 12px 50px rgba(0,0,0,0.65),
0 0 30px rgba(227,255,0,0.08) inset;
animation: qbSlideUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s both;
min-width: 300px;
}
.quick-browse-bar::before {
content: '';
position: absolute;
inset: -1px;
border-radius: 80px;
background: transparent;
border: 1px solid rgba(227,255,0,0.2);
animation: qbBorderPulse 2.5s ease-in-out infinite;
pointer-events: none;
}
@keyframes qbBorderPulse {
0%, 100% { opacity: 0.3; transform: scale(1); }
50%       { opacity: 1;   transform: scale(1.01); }
}
@keyframes qbSlideUp {
from { opacity: 0; transform: translateX(-50%) translateY(60px) scale(0.9); }
to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.qb-info {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.qb-title {
color: rgba(255,255,255,0.9);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.3px;
display: flex;
align-items: center;
gap: 5px;
white-space: nowrap;
}
.qb-title .qb-fire {
font-size: 0.85rem;
animation: qbFireShake 1.5s ease-in-out infinite;
}
@keyframes qbFireShake {
0%, 100% { transform: rotate(0deg) scale(1); }
25%  { transform: rotate(-8deg) scale(1.1); }
75%  { transform: rotate(8deg)  scale(1.1); }
}
.qb-subtitle {
color: rgba(255,255,255,0.4);
font-size: 0.65rem;
letter-spacing: 0.2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 130px;
}
.qb-category-badge {
display: flex;
align-items: center;
gap: 5px;
background: rgba(227, 255, 0, 0.1);
border: 1px solid rgba(227, 255, 0, 0.2);
border-radius: 20px;
padding: 4px 10px;
color: #E0FF33;
font-size: 0.68rem;
font-weight: 600;
white-space: nowrap;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
transition: all 0.3s ease;
}
.quick-browse-bar:hover .qb-category-badge {
background: rgba(227, 255, 0, 0.18);
}
.qb-streak {
display: flex;
align-items: center;
gap: 4px;
background: rgba(255,255,255,0.06);
border-radius: 20px;
padding: 4px 10px;
min-width: 48px;
justify-content: center;
transition: all 0.3s ease;
}
.qb-streak-count {
color: #E0FF33;
font-size: 0.8rem;
font-weight: 800;
line-height: 1;
}
.qb-streak-emoji {
font-size: 0.8rem;
animation: qbStreakPop 0.4s ease forwards;
}
@keyframes qbStreakPop {
0%   { transform: scale(0.5); }
70%  { transform: scale(1.3); }
100% { transform: scale(1); }
}
.btn-quick-next {
position: relative;
display: flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #E0FF33 0%, #b8e000 100%);
color: #000;
border: none;
border-radius: 60px;
padding: 12px 24px;
font-weight: 900;
font-size: 0.95rem;
cursor: pointer;
overflow: hidden;
transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
white-space: nowrap;
flex-shrink: 0;
letter-spacing: 0.3px;
}
.btn-quick-next::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 60%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
transform: skewX(-20deg);
transition: none;
}
.btn-quick-next:hover::before {
animation: qbShine 0.6s ease forwards;
}
@keyframes qbShine {
from { left: -100%; }
to   { left: 160%; }
}
.btn-quick-next:hover {
background: linear-gradient(135deg, #f2ff33 0%, #d4f000 100%);
transform: scale(1.07) translateY(-1px);
box-shadow: 0 8px 28px rgba(227, 255, 0, 0.55), 0 0 0 3px rgba(227,255,0,0.2);
}
.btn-quick-next:active {
transform: scale(0.95) translateY(0);
box-shadow: none;
}
.btn-quick-next .qb-next-icon {
font-size: 1.1rem;
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.btn-quick-next:hover .qb-next-icon {
transform: rotate(-20deg) scale(1.2);
}
.btn-quick-next.is-loading {
pointer-events: none;
opacity: 0.75;
}
.qb-swipe-hint {
position: fixed;
bottom: 100px;
left: 50%;
transform: translateX(-50%);
z-index: 9998;
color: rgba(255,255,255,0.5);
font-size: 0.68rem;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 6px;
animation: qbSlideUp 0.5s 2s both, qbHintFadeOut 0.6s 5s forwards;
pointer-events: none;
}
.qb-swipe-hint-arrow {
display: inline-block;
animation: qbArrowBounce 1s ease-in-out infinite;
}
@keyframes qbArrowBounce {
0%, 100% { transform: translateX(0); }
50%       { transform: translateX(-6px); }
}
@keyframes qbHintFadeOut {
to { opacity: 0; transform: translateX(-50%) translateY(10px); }
}
.qb-particle {
position: fixed;
pointer-events: none;
z-index: 99999;
font-size: 1.2rem;
animation: qbParticleFloat 0.9s ease-out forwards;
}
@keyframes qbParticleFloat {
0%   { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
100% { opacity: 0; transform: translateY(-80px) scale(0.3) rotate(180deg); }
}
.page-transition-overlay {
position: fixed;
inset: 0;
z-index: 99999;
pointer-events: none;
opacity: 0;
background: transparent;
}
.page-transition-overlay.active {
pointer-events: all;
}
@keyframes qbTransitionBurst {
0%   { opacity: 0; }
100% { opacity: 0; }
}
.qb-swipe-track {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background: rgba(255,255,255,0.05);
z-index: 9998;
display: none;
}
.qb-swipe-fill {
height: 100%;
background: linear-gradient(90deg, #E0FF33, #b8e000);
width: 0%;
transition: width 0.1s ease;
}
@media (max-width: 480px) {
.quick-browse-bar {
bottom: 16px;
min-width: calc(100vw - 24px);
padding: 8px 8px 8px 14px;
border-radius: 20px;
gap: 8px;
}
.qb-subtitle { display: none; }
.qb-category-badge { max-width: 70px; font-size: 0.62rem; }
.btn-quick-next { padding: 11px 18px; font-size: 0.88rem; }
.qb-swipe-track { display: block; }
}
.snapcode-container {
margin: 1rem auto;
max-width: 220px;
text-align: center;
padding: 15px;
border-radius: 12px;
transition: all 0.3s ease;
}
.snapcode-container:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.snapcode {
width: 180px;
height: 180px;
border-radius: 10px;
padding: 5px;
transition: transform 0.3s ease;
}
.snapcode:hover {
transform: scale(1.05);
}
.snapcode-username {
font-weight: bold;
margin-top: 0.5rem;
font-size: 1.1rem;
}
.snapcode-hint {
font-size: 0.8rem;
color: #6c757d;
}
.snapcode-placeholder {
width: 180px;
height: 180px;
opacity: 0.5;
}
.premium-banner {
background: linear-gradient(135deg, #ffcc00, #ff9900);
padding: 15px;
border-radius: 10px;
margin-bottom: 25px;
position: relative;
overflow: hidden;
box-shadow: 0 10px 20px rgba(255, 204, 0, 0.2);
animation: glow 3s infinite alternate;
}
.premium-banner::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transform: rotate(30deg);
animation: shimmer 4s infinite linear;
}
.premium-banner-content {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
.premium-banner-text {
flex: 1;
}
.premium-banner h3 {
color: #000;
margin-bottom: 5px;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}
.premium-banner p {
color: #333;
margin-bottom: 0;
}
.premium-badge-large {
display: flex;
align-items: center;
background: rgba(0, 0, 0, 0.8);
color: #ffcc00;
padding: 8px 15px;
border-radius: 30px;
font-weight: bold;
font-size: 18px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
border: 2px solid #ffcc00;
margin-left: 15px;
}
.premium-badge-large i {
margin-right: 8px;
font-size: 22px;
}
.premium-header {
background: linear-gradient(135deg, #ffcc00, #ff9900) !important;
position: relative;
overflow: hidden;
box-shadow: 0 5px 20px rgba(255, 204, 0, 0.3);
animation: glow 3s infinite alternate;
}
.premium-header::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transform: rotate(30deg);
animation: shimmer 4s infinite linear;
pointer-events: none;
}
.premium-header h1 {
color: #000;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}
.premium-header .username-display {
color: #000;
font-weight: bold;
}
.premium-crown-badge {
display: inline-flex;
align-items: center;
background: rgba(0, 0, 0, 0.8);
color: #ffcc00;
padding: 8px 15px;
border-radius: 30px;
font-weight: bold;
font-size: 16px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
border: 2px solid #ffcc00;
margin-top: 10px;
margin-bottom: 15px;
}
.premium-crown-badge i {
margin-right: 8px;
font-size: 18px;
animation: spin-slow 8s linear infinite;
}
@keyframes shimmer {
0% {
transform: translateX(-150%) rotate(30deg);
}
100% {
transform: translateX(150%) rotate(30deg);
}
}
@keyframes glow {
0% {
box-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
}
100% {
box-shadow: 0 0 20px rgba(255, 204, 0, 0.8);
}
}
.vip-premium-badge {
position: absolute;
top: 10px;
right: 10px;
background: linear-gradient(135deg, #ffcc00, #ff9900);
color: #000;
padding: 8px 15px;
border-radius: 30px;
font-weight: bold;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
border: 2px solid rgba(255, 255, 255, 0.5);
z-index: 10;
transform: rotate(0deg);
animation: pulse-vip 2s infinite alternate;
display: flex;
align-items: center;
}
.vip-premium-badge i {
margin-right: 8px;
animation: spin-slow 8s linear infinite;
}
@keyframes pulse-vip {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
@keyframes spin-slow {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.account-bio {
white-space: pre-line;
line-height: 1.6;
}
.account-bio .internal-link {
color: #0d6efd;
text-decoration: none;
font-weight: 500;
border-bottom: 1px dotted #0d6efd;
transition: all 0.3s ease;
}
.account-bio .internal-link:hover {
color: #0a58ca;
border-bottom-color: #0a58ca;
text-decoration: none;
}
.account-bio .category-link {
color: #0d6efd;
}
.account-bio .country-link {
color: #198754;
}
.account-bio .category-link:hover {
color: #0a58ca;
}
.account-bio .country-link:hover {
color: #146c43;
}
.account-img-container {
position: relative;
overflow: hidden;
}
.account-img {
width: 100%;
transition: transform 0.5s ease;
}
.account-img-container:hover .account-img {
transform: scale(1.05);
}
@media (max-width: 576px) {
.account-img-container {
max-height: 70vh;
}
.account-img-container .account-img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: top;
aspect-ratio: auto;
}
}
.account-card {
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.account-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
.account-info {
opacity: 0;
animation: fadeIn 0.5s ease forwards;
}
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.category-badge, .badge {
transition: transform 0.2s ease;
}
.category-badge:hover, .badge:hover {
transform: scale(1.1);
}
.btn {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
background: rgba(255, 255, 255, 0.3);
opacity: 0;
border-radius: 100%;
transform: scale(1, 1) translate(-50%, -50%);
transform-origin: 50% 50%;
}
.btn:hover {
transform: translateY(-3px);
}
.btn:active::after {
animation: ripple 0.6s ease-out;
}
.btn-snapchat {
background-color: #E0FF33;
color: #000;
border: none;
transition: all 0.3s ease;
}
.btn-snapchat:hover {
background-color: #f7f500;
box-shadow: 0 5px 15px rgba(255, 252, 0, 0.4);
}
.star-rating input {
display: none;
}
.star-rating label {
cursor: pointer;
font-size: 26px;
padding: 0 2px;
float: right;
color: #ccc;
transition: color 0.3s ease, transform 0.2s ease;
}
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
color: #E0FF33;
}
.star-rating label:hover {
transform: scale(1.2) rotate(5deg);
}
.rating-text {
font-size: 1rem;
font-weight: bold;
}
.similar-account-img {
transition: transform 0.3s ease;
border-radius: 50%;
}
.list-group-item:hover .similar-account-img {
transform: scale(1.1);
}
.review-item {
transition: transform 0.3s ease, box-shadow 0.3s ease;
padding: 15px;
border-radius: 10px;
margin-bottom: 15px;
border: 1px solid rgba(0,0,0,0.1);
}
.review-item:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(10px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 1;
}
20% {
transform: scale(25, 25);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(40, 40);
}
}
.page-header {
animation: fadeIn 0.8s ease;
}
.list-group-item {
transition: all 0.3s ease;
}
.list-group-item:hover {
background-color: rgba(0, 0, 0, 0.02);
transform: translateX(-5px);
}
.copy-username-btn {
transition: all 0.3s ease;
}
.copy-username-btn:hover {
background-color: #28a745;
color: white;
border-color: #28a745;
}
.animate-on-scroll {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in-element {
opacity: 1;
transform: translateY(0);
}
.animate-pulse {
animation: pulse 0.5s cubic-bezier(0.4, 0, 0.6, 1);
}
.animate-pop {
animation: pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.ripple {
position: absolute;
background-color: rgba(255, 255, 255, 0.7);
border-radius: 50%;
transform: scale(0);
animation: ripple 0.6s linear;
pointer-events: none;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(0.95);
}
}
@keyframes pop {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
@keyframes ripple {
to {
transform: scale(4);
opacity: 0;
}
}
.faq-section {
margin-top: 2rem;
}
.accordion-item {
border: 1px solid rgba(0,0,0,.125);
margin-bottom: 1rem;
border-radius: 8px !important;
overflow: hidden;
}
.accordion-button {
font-size: 1.1rem;
font-weight: 600;
padding: 1.25rem;
}
.accordion-button:not(.collapsed) {
background-color: #f7f7f7;
color: #333;
box-shadow: none;
}
.accordion-button:focus {
box-shadow: none;
border-color: rgba(0,0,0,.125);
}
.accordion-button::after {
transition: all 0.3s ease;
}
.accordion-body {
padding: 1.5rem;
background-color: #f9f9f9;
}
.accordion-body p, .accordion-body ol, .accordion-body ul {
margin-bottom: 1rem;
}
.accordion-body ol li, .accordion-body ul li {
margin-bottom: 0.5rem;
}
.category-action-btn {
position: relative;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 200px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
}
.category-action-btn i {
flex-shrink: 0;
font-size: 0.9em;
}
.category-btn-text {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
max-width: 120px;
}
@media (min-width: 768px) and (max-width: 991.98px) {
.category-action-btn {
font-size: 0.95rem;
padding: 0.5rem 1rem;
max-width: 170px;
}
.category-btn-text {
max-width: 110px;
}
}
@media (min-width: 992px) {
.category-action-btn {
font-size: 0.85rem;
padding: 0.5rem 0.9rem;
max-width: 150px;
}
.category-action-btn i {
font-size: 0.85em;
}
.category-btn-text {
max-width: 85px;
}
.account-actions {
flex-wrap: wrap;
gap: 0.5rem;
}
}
@media (min-width: 1200px) {
.category-action-btn {
font-size: 0.8rem;
padding: 0.45rem 0.85rem;
max-width: 140px;
}
.category-action-btn i {
font-size: 0.8em;
}
.category-btn-text {
max-width: 75px;
}
}
@media (min-width: 1400px) {
.category-action-btn {
font-size: 0.75rem;
padding: 0.4rem 0.8rem;
max-width: 130px;
}
.category-btn-text {
max-width: 70px;
}
}
@media (max-width: 767.98px) {
.account-actions {
flex-direction: column;
gap: 0.5rem;
}
.account-actions .btn {
width: 100%;
margin-bottom: 0.5rem;
}
.category-action-btn {
max-width: 100%;
}
.category-btn-text {
max-width: none;
}
.how-to-list {
padding-left: 1.5rem;
}
.accordion-button {
font-size: 1rem;
padding: 1rem;
}
}
.country-accounts-card {
border: 2px solid #E0FF33;
box-shadow: 0 4px 15px rgba(227, 255, 0, 0.1);
}
.country-accounts-card .card-header {
background: linear-gradient(135deg, #E0FF33 0%, #f8f9fa 100%);
border-bottom: 2px solid #E0FF33;
}
.country-accounts-card .card-header h3 {
color: #000;
font-weight: 700;
}
.country-flag-header {
object-fit: cover;
border-radius: 4px;
border: 2px solid #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
}
.country-accounts-card .card-header:hover .country-flag-header {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.country-account-item {
transition: all 0.3s ease;
position: relative;
background-color: #fff;
}
.country-account-item:hover {
background-color: #f8f9fa;
transform: translateX(-5px);
}
.country-account-item:last-child {
border-bottom: none !important;
}
.country-account-image {
position: relative;
flex-shrink: 0;
}
.country-account-image img {
object-fit: cover;
border: 2px solid #e9ecef;
transition: all 0.3s ease;
}
.country-account-item:hover .country-account-image img {
border-color: #E0FF33;
transform: scale(1.05);
}
.mini-vip-badge {
position: absolute;
top: -5px;
right: -5px;
background: linear-gradient(135deg, #ffcc00, #ff9900);
color: #000;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
border: 2px solid #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
animation: pulse-mini 2s infinite;
}
@keyframes pulse-mini {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.country-account-info h5 {
font-size: 1rem;
font-weight: 600;
color: #000;
margin-bottom: 0.25rem;
}
.country-account-info p {
font-size: 0.875rem;
margin-bottom: 0.5rem;
}
.country-account-info .badge {
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
font-weight: 500;
}
.country-account-action {
flex-shrink: 0;
margin-right: 1rem;
transition: all 0.3s ease;
}
.country-account-item:hover .country-account-action {
transform: translateX(-5px);
}
.featured-item {
background: linear-gradient(90deg, rgba(227, 255, 0, 0.05) 0%, rgba(255, 255, 255, 1) 100%);
}
.featured-item:hover {
background: linear-gradient(90deg, rgba(227, 255, 0, 0.1) 0%, rgba(248, 249, 250, 1) 100%);
}
@media (max-width: 767.98px) {
.country-account-image img {
width: 60px;
height: 60px;
}
.country-account-info h5 {
font-size: 0.9rem;
}
.country-account-info p {
font-size: 0.8rem;
}
.country-account-info .badge {
font-size: 0.7rem;
padding: 0.2rem 0.4rem;
}
.country-account-item {
padding: 0.75rem !important;
}
}
.reviews-card {
border-radius: 20px;
border: 2px solid rgba(212, 255, 0, 0.2);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.reviews-header {
background: linear-gradient(135deg, #D4FF00 0%, #E0FF33 100%);
border-bottom: 3px solid rgba(0, 0, 0, 0.1);
padding: 1.5rem;
}
.reviews-header-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.reviews-title-section {
display: flex;
align-items: center;
gap: 0.75rem;
}
.reviews-icon {
font-size: 1.5rem;
color: #000;
}
.reviews-header h3 {
font-size: 1.5rem;
font-weight: 800;
color: #000;
}
.rating-summary-box {
display: flex;
align-items: center;
gap: 0.75rem;
background: rgba(255, 255, 255, 0.9);
padding: 0.75rem 1.25rem;
border-radius: 50px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.rating-info {
display: flex;
align-items: center;
gap: 0.5rem;
}
.rating-value {
font-size: 1.5rem;
font-weight: 800;
color: #000;
}
.rating-count {
font-size: 0.9rem;
color: #666;
font-weight: 600;
}
.reviews-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.review-item {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border: 2px solid rgba(0, 0, 0, 0.05);
border-radius: 15px;
padding: 1.25rem;
transition: all 0.3s ease;
}
.review-item:hover {
border-color: rgba(212, 255, 0, 0.3);
box-shadow: 0 4px 15px rgba(212, 255, 0, 0.1);
transform: translateX(-5px);
}
.review-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
flex-wrap: wrap;
gap: 1rem;
}
.reviewer-info {
display: flex;
align-items: center;
gap: 0.75rem;
flex: 1;
}
.reviewer-avatar {
width: 45px;
height: 45px;
background: linear-gradient(135deg, #D4FF00 0%, #B8E000 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
color: #000;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(212, 255, 0, 0.3);
}
.reviewer-details {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.reviewer-name {
font-size: 1rem;
font-weight: 700;
color: #000;
}
.review-date {
font-size: 0.85rem;
color: #666;
display: flex;
align-items: center;
gap: 0.35rem;
}
.review-date i {
font-size: 0.75rem;
}
.review-rating {
display: flex;
align-items: center;
gap: 0.5rem;
}
.review-rating-value {
font-size: 1.1rem;
font-weight: 700;
color: #D4FF00;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.review-content p {
margin: 0;
color: #333;
line-height: 1.6;
font-size: 0.95rem;
}
.no-reviews-section {
text-align: center;
padding: 3rem 1.5rem;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
border-radius: 15px;
margin-bottom: 1.5rem;
}
.no-reviews-icon {
font-size: 3.5rem;
color: #D4FF00;
margin-bottom: 1rem;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.no-reviews-text {
font-size: 1.25rem;
font-weight: 700;
color: #333;
margin-bottom: 0.5rem;
}
.no-reviews-subtext {
font-size: 0.95rem;
color: #666;
margin: 0;
}
.add-review-section {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border: 2px solid rgba(212, 255, 0, 0.2);
border-radius: 15px;
padding: 1.5rem;
margin-top: 1.5rem;
}
.add-review-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 2px solid rgba(212, 255, 0, 0.2);
}
.add-review-header i {
font-size: 1.3rem;
color: #D4FF00;
}
.add-review-header h4 {
font-size: 1.25rem;
font-weight: 700;
color: #000;
margin: 0;
}
.review-notice {
background: linear-gradient(135deg, #fff5e6 0%, #ffe6cc 100%);
border: 2px solid rgba(255, 152, 0, 0.2);
border-radius: 12px;
padding: 0.75rem 1rem;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.9rem;
color: #666;
}
.review-notice i {
color: #ff9800;
font-size: 1.1rem;
flex-shrink: 0;
}
.form-group-review {
margin-bottom: 1.5rem;
}
.review-label {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 700;
color: #000;
margin-bottom: 0.75rem;
font-size: 1rem;
}
.review-label i {
color: #D4FF00;
font-size: 1.1rem;
}
.star-rating {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
gap: 0.5rem;
}
.star-rating input[type="radio"] {
display: none;
}
.star-rating label {
cursor: pointer;
font-size: 2rem;
color: #ddd;
transition: all 0.2s ease;
margin: 0;
}
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input[type="radio"]:checked ~ label {
color: #D4FF00;
transform: scale(1.1);
}
.star-rating label:active {
transform: scale(0.95);
}
.review-textarea {
border: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 12px;
padding: 1rem;
font-size: 0.95rem;
transition: all 0.3s ease;
resize: vertical;
min-height: 100px;
}
.review-textarea:focus {
border-color: #D4FF00;
box-shadow: 0 0 0 3px rgba(212, 255, 0, 0.1);
outline: none;
}
.review-form-actions {
display: flex;
justify-content: flex-end;
margin-top: 1.5rem;
}
.btn-submit-review {
background: linear-gradient(135deg, #D4FF00 0%, #B8E000 100%);
color: #000;
border: none;
border-radius: 50px;
padding: 0.75rem 2rem;
font-size: 1rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(212, 255, 0, 0.3);
}
.btn-submit-review:hover {
background: linear-gradient(135deg, #B8E000 0%, #A0CC00 100%);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(212, 255, 0, 0.4);
}
.btn-submit-review:active {
transform: translateY(0);
}
.login-prompt-section {
text-align: center;
padding: 2.5rem 1.5rem;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
border: 2px dashed rgba(212, 255, 0, 0.3);
border-radius: 15px;
margin-top: 1.5rem;
}
.login-prompt-icon {
font-size: 3rem;
color: #D4FF00;
margin-bottom: 1rem;
}
.login-prompt-text {
font-size: 1.1rem;
font-weight: 600;
color: #333;
margin-bottom: 1.5rem;
}
.btn-login-review {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(135deg, #D4FF00 0%, #B8E000 100%);
color: #000;
padding: 0.75rem 2rem;
border-radius: 50px;
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(212, 255, 0, 0.3);
}
.btn-login-review:hover {
background: linear-gradient(135deg, #B8E000 0%, #A0CC00 100%);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(212, 255, 0, 0.4);
color: #000;
}
@media (max-width: 767.98px) {
.reviews-header {
padding: 1.25rem;
}
.reviews-header-content {
flex-direction: column;
align-items: flex-start;
}
.reviews-title-section {
width: 100%;
}
.reviews-icon {
font-size: 1.3rem;
}
.reviews-header h3 {
font-size: 1.25rem;
}
.rating-summary-box {
width: 100%;
justify-content: space-between;
padding: 0.65rem 1rem;
}
.rating-value {
font-size: 1.3rem;
}
.rating-count {
font-size: 0.85rem;
}
.review-item {
padding: 1rem;
}
.review-header {
flex-direction: column;
gap: 0.75rem;
}
.reviewer-avatar {
width: 40px;
height: 40px;
font-size: 1.1rem;
}
.reviewer-name {
font-size: 0.95rem;
}
.review-date {
font-size: 0.8rem;
}
.review-rating {
width: 100%;
justify-content: space-between;
}
.review-content p {
font-size: 0.9rem;
}
.no-reviews-section {
padding: 2rem 1rem;
}
.no-reviews-icon {
font-size: 2.5rem;
}
.no-reviews-text {
font-size: 1.1rem;
}
.no-reviews-subtext {
font-size: 0.9rem;
}
.add-review-section {
padding: 1.25rem;
}
.add-review-header h4 {
font-size: 1.1rem;
}
.review-notice {
padding: 0.65rem 0.85rem;
font-size: 0.85rem;
}
.star-rating label {
font-size: 1.75rem;
}
.review-textarea {
font-size: 0.9rem;
padding: 0.85rem;
}
.btn-submit-review {
width: 100%;
justify-content: center;
padding: 0.85rem 1.5rem;
font-size: 0.95rem;
}
.login-prompt-section {
padding: 2rem 1rem;
}
.login-prompt-icon {
font-size: 2.5rem;
}
.login-prompt-text {
font-size: 1rem;
}
.btn-login-review {
width: 100%;
justify-content: center;
padding: 0.85rem 1.5rem;
}
}
@media (max-width: 575.98px) {
.reviews-header {
padding: 1rem;
}
.reviews-icon {
font-size: 1.2rem;
}
.reviews-header h3 {
font-size: 1.1rem;
}
.rating-summary-box {
padding: 0.5rem 0.85rem;
}
.rating-value {
font-size: 1.2rem;
}
.rating-count {
font-size: 0.8rem;
}
.review-item {
padding: 0.85rem;
}
.reviewer-avatar {
width: 35px;
height: 35px;
font-size: 1rem;
}
.reviewer-name {
font-size: 0.9rem;
}
.review-date {
font-size: 0.75rem;
}
.review-rating-value {
font-size: 1rem;
}
.review-content p {
font-size: 0.85rem;
}
.star-rating label {
font-size: 1.5rem;
gap: 0.35rem;
}
.add-review-header i {
font-size: 1.1rem;
}
.add-review-header h4 {
font-size: 1rem;
}
}