/* Styles the new design kept inline (styled-jsx / inline style props),
   plus the few bits the PHP page needs that React handled itself. */

:root { --font-poppins: 'Poppins'; }

/* Keep the next/image look: no stray inline space under images */
.home-page img { color: transparent; }

/* ---- Services grid ---- */
.rv-service-col[hidden] { display: none !important; }

/* ---- Home search dropdown (under the "Search Your Service" box) ---- */
.rv-home-results {
  position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-radius: 8px;
  margin-top: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); z-index: 1000; max-height: 400px; overflow-y: auto;
}
.rv-home-results[hidden] { display: none; }
.rv-home-empty { padding: 20px; text-align: center; color: #666; }
.rv-home-item { padding: 12px 16px; cursor: pointer; border-bottom: 1px solid #f0f0f0; transition: background 0.2s; display: block; text-decoration: none; color: inherit; }
.rv-home-item:last-child { border-bottom: none; }
.rv-home-item:hover { background: #f8f9fa; }
.rv-home-item .rv-row { display: flex; align-items: center; gap: 12px; }
.rv-home-item .rv-logo { width: 40px; height: 40px; border-radius: 8px; background: #f8f9fa; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #e0e0e0; flex-shrink: 0; }
.rv-home-item .rv-logo img { width: 40px; height: 40px; object-fit: contain; }
.rv-home-item .rv-main { flex: 1; min-width: 0; }
.rv-home-item .rv-name { font-weight: 600; color: #00287c; margin-bottom: 4px; font-size: 14px; }
.rv-home-item .rv-sub { font-size: 12px; color: #666; }
.rv-home-item .rv-desc { font-size: 11px; color: #999; }
.rv-home-item .rv-type { margin-left: 8px; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 500; }
.rv-home-item .rv-arrow { color: #00287c; font-size: 18px; flex-shrink: 0; }
.rv-type-company { background: #e8f5e9; }
.rv-type-package { background: #e3f2fd; }
.rv-type-service { background: #fff3e0; }

/* ---- Header search modal ---- */
.rv-search-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 40, 124, 0.8); z-index: 9999;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 120px;
}
.rv-search-overlay[hidden] { display: none; }
.rv-search-modal {
  background: #fff; border-radius: 16px; width: 90%; max-width: 700px; max-height: 80vh; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 40, 124, 0.3); border: 1px solid rgba(0, 40, 124, 0.1);
}
.rv-search-head {
  padding: 24px; border-bottom: 1px solid #e8f2ff; background: linear-gradient(135deg, #f8fbff 0%, #e8f2ff 100%);
  display: flex; align-items: center; gap: 16px;
}
.rv-search-head-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.rv-search-head input { flex: 1; border: none; outline: none; font-size: 18px; padding: 12px 0; background: transparent; color: #00287c; font-weight: 500; }
.rv-search-close { background: rgba(0, 40, 124, 0.1); border: none; font-size: 20px; cursor: pointer; color: #00287c; padding: 8px 12px; border-radius: 8px; transition: all 0.2s ease; font-weight: bold; }
.rv-search-close:hover { background: rgba(0, 40, 124, 0.2); }
.rv-search-body { max-height: calc(80vh - 100px); overflow-y: auto; padding: 16px 0; }
.rv-search-state { padding: 60px 24px; text-align: center; color: #666; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.rv-search-state.rv-intro { gap: 20px; }
.rv-search-state .rv-big-icon { font-size: 48px; opacity: 0.5; }
.rv-search-state.rv-intro .rv-big-icon { font-size: 64px; opacity: 0.3; }
.rv-search-state .rv-title { font-size: 18px; color: #00287c; font-weight: 600; }
.rv-search-state.rv-intro .rv-title { font-size: 20px; margin-bottom: 8px; }
.rv-search-state .rv-hint { font-size: 14px; color: #999; }
.rv-search-state.rv-intro .rv-hint { font-size: 16px; color: #666; margin-bottom: 16px; }
.rv-search-tags { font-size: 14px; color: #999; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.rv-search-tags span { background: #f0f6ff; padding: 6px 12px; border-radius: 16px; font-size: 13px; }
.rv-search-count { padding: 8px 24px 16px; font-size: 14px; color: #666; border-bottom: 1px solid #f0f6ff; }
.rv-search-item { padding: 20px 24px; cursor: pointer; border-bottom: 1px solid #f8fbff; transition: all 0.2s ease; display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit; }
.rv-search-item:hover { background: linear-gradient(135deg, #f8fbff 0%, #e8f2ff 50%); transform: translateX(4px); }
.rv-search-item .rv-logo { width: 50px; height: 50px; border-radius: 12px; background: linear-gradient(135deg, #f0f6ff 0%, #e8f2ff 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; border: 2px solid rgba(0, 40, 124, 0.1); flex-shrink: 0; }
.rv-search-item .rv-logo img { width: 50px; height: 50px; object-fit: contain; }
.rv-search-item .rv-main { flex: 1; min-width: 0; }
.rv-search-item .rv-name { font-weight: 600; color: #00287c; margin-bottom: 6px; font-size: 16px; line-height: 1.4; }
.rv-search-item .rv-sub { font-size: 14px; color: #666; line-height: 1.4; }
.rv-search-item .rv-sub .rv-company { font-weight: 500; }
.rv-search-item .rv-sub .rv-desc { font-size: 13px; color: #888; }
.rv-search-item .rv-type { margin-left: 6px; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.rv-search-item .rv-type-company { background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); color: #388e3c; }
.rv-search-item .rv-type-package { background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); color: #1976d2; }
.rv-search-item .rv-type-service { background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%); color: #f57c00; }
.rv-search-item .rv-arrow { color: #00287c; font-size: 18px; opacity: 0.6; flex-shrink: 0; }

/* ---- Language dropdown (shown on hover / tap) ---- */
.language_dropdown[hidden] { display: none; }

/* ---- Google reviews ---- */
.rv-spinner { display: inline-block; width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #00287C; border-radius: 50%; animation: spin 1s linear infinite; }
#reviewsSwiper[hidden], #reviewsError[hidden], #reviewsLoading[hidden] { display: none; }
.google-review-card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.google-review-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); transform: translateY(-4px); }
.google-review-card .testicon { display: flex; justify-content: space-between; align-items: flex-start; }
.google-review-card .testi21 img { border-radius: 50%; object-fit: cover; width: 60px; height: 60px; }
.google-review-card .rv-location { font-size: 13px; color: #5f6368; }
.google-reviews-swiper .swiper-pagination-bullet { background: #00287C; opacity: 0.3; }
.google-reviews-swiper .swiper-pagination-bullet-active { opacity: 1; width: 30px; border-radius: 6px; }
.review-stars { display: flex; gap: 4px; margin-bottom: 12px; user-select: none; font-size: 18px; }
.review-stars .on { color: #FFB800; }
.review-stars .off { color: #E0E0E0; }
@media (max-width: 768px) { .google-review-card { padding: 20px; } }

/* ---- Video popup ---- */
.rv-video-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.9); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; animation: fadeIn 0.3s ease; }
.rv-video-overlay[hidden] { display: none; }
.rv-video-box { position: relative; width: 100%; max-width: 1200px; aspect-ratio: 16 / 9; background-color: #000; }
.rv-video-close { position: absolute; top: -40px; right: 0; background: transparent; border: none; color: #fff; font-size: 36px; cursor: pointer; z-index: 10000; padding: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease; }
.rv-video-close:hover { transform: scale(1.2); }
.rv-video-link { position: absolute; bottom: -36px; left: 0; color: #ccc; font-size: 14px; text-decoration: underline; }
.play-button-wrapper:hover { animation: none !important; }

/* ---- Toasts (look of react-toastify's "colored" theme) ---- */
.rv-toasts { position: fixed; top: 1em; right: 1em; z-index: 10000; width: 320px; max-width: calc(100vw - 2em); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.rv-toasts.rv-toasts-left { right: auto; left: 1em; }
.rv-toast { pointer-events: auto; position: relative; overflow: hidden; border-radius: 6px; padding: 8px 10px; min-height: 64px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); color: #fff; font-size: 14px; font-family: inherit; animation: rvToastIn 0.3s ease; cursor: pointer; }
.rv-toast.rv-out { animation: rvToastOut 0.3s ease forwards; }
.rv-toast-success { background: #07bc0c; }
.rv-toast-error { background: #e74c3c; }
.rv-toast-warning { background: #f1c40f; color: #000; }
.rv-toast-info { background: #3498db; }
.rv-toast .rv-toast-body { flex: 1; padding: 6px; }
.rv-toast .rv-toast-close { background: transparent; border: none; color: inherit; opacity: 0.7; font-size: 16px; cursor: pointer; align-self: flex-start; padding: 0 4px; }
.rv-toast .rv-toast-bar { position: absolute; bottom: 0; left: 0; height: 5px; width: 100%; background: rgba(255, 255, 255, 0.7); transform-origin: left; animation: rvToastBar linear forwards; }
.rv-toast-warning .rv-toast-bar { background: rgba(0, 0, 0, 0.3); }
@keyframes rvToastIn { from { opacity: 0; transform: translateX(110%); } to { opacity: 1; transform: translateX(0); } }
@keyframes rvToastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(110%); } }
@keyframes rvToastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.rv-toasts-left .rv-toast { animation-name: rvToastInLeft; }
.rv-toasts-left .rv-toast.rv-out { animation-name: rvToastOutLeft; }
@keyframes rvToastInLeft { from { opacity: 0; transform: translateX(-110%); } to { opacity: 1; transform: translateX(0); } }
@keyframes rvToastOutLeft { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-110%); } }

/* ---- Keyframes the page used from styled-jsx ---- */
@keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bounce { 0%, 100% { transform: translate(-50%, -50%) translateY(0); } 50% { transform: translate(-50%, -50%) translateY(-15px); } }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }