:root {
--primary-black: #0a0a0a;
--secondary-black: #1a1a1a;
--accent-gold: #d4af37;
--light-gold: #f4e4a6;
--text-light: #f5f5f5;
--text-gray: #b0b0b0;
--border-radius: 8px;
--transition: all 0.3s ease;
} .reviews-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-bottom: 30px;
}
.review-card {
background-color: var(--primary-black);
border-radius: var(--border-radius);
padding: 25px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
transition: var(--transition);
border: 1px solid rgba(212, 175, 55, 0.1);
}
.review-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
border-color: rgba(212, 175, 55, 0.3);
}
.review-service {
display: inline-block;
background-color: rgba(212, 175, 55, 0.1);
color: var(--accent-gold);
padding: 5px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.review-hearts {
color: #e74c3c;
margin-bottom: 15px;
font-size: 1.2rem;
line-height: 1;
}
.review-text {
font-style: italic;
margin-bottom: 20px;
color: var(--text-light);
line-height: 1.7;
}
.review-author {
font-weight: 600;
color: var(--accent-gold);
text-align: right;
font-size: 0.9rem;
} .nps-no-reviews {
text-align: center;
color: var(--text-gray);
padding: 40px 0;
font-size: 1.1rem;
} .nps-show-all-wrapper,
.nps-add-review-wrapper {
text-align: center;
margin-top: 50px;
}
.btn {
display: inline-block;
padding: 12px 30px;
background-color: var(--accent-gold);
color: var(--primary-black);
border: none;
border-radius: var(--border-radius);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: var(--transition);
font-size: 14px;
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}
.btn:hover {
background-color: var(--light-gold);
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
} .nps-reviews-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
z-index: 10000;
overflow-y: auto;
}
.nps-reviews-modal.is-open {
display: block;
}
.nps-reviews-modal[aria-hidden="false"] {
display: block;
}
.nps-modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.nps-modal-container {
position: relative;
background-color: var(--primary-black);
margin: 50px auto;
max-width: 1200px;
width: 90%;
border-radius: var(--border-radius);
padding: 40px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.nps-modal-close {
position: absolute;
top: 20px;
right: 20px;
background: none;
border: none;
font-size: 2rem;
color: var(--accent-gold);
cursor: pointer;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
line-height: 1;
}
.nps-modal-close:hover {
color: var(--light-gold);
transform: scale(1.1);
}
.nps-modal-title {
font-family: 'Playfair Display', serif;
color: var(--accent-gold);
text-align: center;
margin-bottom: 40px;
font-size: 2rem;
}  .wpcf7 .wpcf7-form-control-wrap[data-name="rating"] .wpcf7-form-control { 
position: absolute !important; top: -3em !important; overflow: hidden !important; 
} .wpcf7 .nps-hearts-wrapper {
display: flex;
gap: 10px;
margin: 15px 0;
align-items: center;
}
.wpcf7 .nps-heart {
appearance: none;
border: 0;
background: none;
cursor: pointer;
padding: 0;
font-size: 2rem;
color: #555;
transition: var(--transition);
line-height: 1;
}
.wpcf7 .nps-heart:hover,
.wpcf7 .nps-heart.active {
color: #e74c3c;
transform: scale(1.15);
}
.wpcf7 .nps-heart:focus {
outline: 2px solid var(--accent-gold);
outline-offset: 4px;
} .nps-review-form-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
z-index: 10000;
overflow-y: auto;
}
.nps-review-form-modal.is-open {
display: block;
}
.nps-review-form-modal[aria-hidden="false"] {
display: block;
}
.nps-form-modal-container {
position: relative;
background: linear-gradient(135deg, var(--primary-black), var(--secondary-black));
margin: 50px auto;
max-width: 600px;
width: 90%;
border-radius: var(--border-radius);
padding: 40px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
border: 2px solid var(--accent-gold);
}
.nps-form-modal-close {
position: absolute;
top: 20px;
right: 20px;
background: none;
border: none;
font-size: 2rem;
color: var(--accent-gold);
cursor: pointer;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
line-height: 1;
}
.nps-form-modal-close:hover {
color: var(--light-gold);
transform: scale(1.1);
}
.nps-form-modal-title {
font-family: 'Playfair Display', serif;
color: var(--accent-gold);
text-align: center;
margin-bottom: 30px;
font-size: 1.8rem;
} .wpcf7-form label {
color: var(--accent-gold);
font-weight: 500;
margin-bottom: 8px;
display: block;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea,
.wpcf7-form select {
width: 100%;
padding: 12px 15px;
background-color: var(--secondary-black);
border: 1px solid rgba(212, 175, 55, 0.3);
border-radius: var(--border-radius);
color: var(--text-light);
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
margin-bottom: 20px;
}
.wpcf7-form textarea {
min-height: 150px;
resize: vertical;
}
.wpcf7-form input[type="submit"] {
width: 100%;
padding: 14px 30px;
background-color: var(--accent-gold);
color: var(--primary-black);
border: none;
border-radius: var(--border-radius);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: var(--transition);
font-size: 14px;
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}
.wpcf7-form input[type="submit"]:hover {
background-color: var(--light-gold);
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
} .wpcf7-not-valid-tip {
color: #e74c3c;
font-size: 0.9rem;
margin-top: 5px;
}
.wpcf7-response-output {
margin: 20px 0 0 0;
padding: 15px;
border-radius: var(--border-radius);
text-align: center;
}
.wpcf7-mail-sent-ok {
background-color: rgba(76, 175, 80, 0.2);
border: 1px solid #4caf50;
color: #4caf50;
}
.wpcf7-validation-errors,
.wpcf7-acceptance-missing {
background-color: rgba(231, 76, 60, 0.2);
border: 1px solid #e74c3c;
color: #e74c3c;
} @media (max-width: 992px) {
.reviews-grid {
grid-template-columns: repeat(2, 1fr);
}
.nps-modal-container {
padding: 30px;
}
}
@media (max-width: 768px) {
.reviews-grid {
grid-template-columns: 1fr;
}
.review-card {
padding: 20px;
}
.nps-modal-container {
margin: 20px auto;
padding: 25px;
width: 95%;
}
.nps-form-modal-container {
margin: 20px;
padding: 30px 20px;
}
.nps-modal-title {
font-size: 1.6rem;
}
.nps-form-modal-title {
font-size: 1.5rem;
}
}
@media (max-width: 576px) {
.reviews-grid {
gap: 20px;
}
.review-service {
font-size: 0.75rem;
}
.review-hearts {
font-size: 1.1rem;
}
.review-text {
font-size: 0.95rem;
}
.review-author {
font-size: 0.85rem;
}
.btn {
padding: 10px 20px;
font-size: 13px;
}
.nps-modal-container,
.nps-form-modal-container {
margin: 10px;
padding: 20px 15px;
}
.wpcf7 .nps-heart {
font-size: 1.8rem;
}
} .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
} button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 2px solid var(--accent-gold);
outline-offset: 2px;
} @media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
span.wpcf7-checkbox > span.wpcf7-list-item > label{
color: black;
}