/**
* Theme Name: Archihub Child
* Description: This is a child theme of Archihub, a custom variation of Workreap theme.
* Author: Orlando Toro
* Template: workreap
* Version: 0.0.1
*/

/* Deactivated floating menu code */
#floating-menu {
    display: block !important;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    background: yellow; /* Temporary for debugging */
    padding: 10px;
    border-radius: 8px;
}

/* Hide any Hub-related elements */
#floating-menu,
.floating-menu,
.floating-menu-toggle,
.floating-menu-content,
.directorist-dashboard-nav-link:contains("Hub"),
.dashboard-nav-link:contains("Hub"),
[data-menu="hub"] {
    display: none !important;
}

/* Hide just the "plus" button in header but keep other menu items */
.wr-navbarbtn .wr-btn-solid-lg.wr-register,
.wr-navbarbtn .wr-btn-solid-lg i.wr-icon-plus {
    display: none !important;
}

/* Only hide the navbarbtn when not logged in */
body:not(.logged-in) .wr-user-menu-wrapper .wr-navbarbtn {
    display: none !important;
}

/* Make sure avatar menu remains visible when logged in */
body.logged-in .wr-headerwrap__right .wr-userlogin.sub-menu-holder {
    display: block !important;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

/* Include custom colors */
@import url('./css/custom-colors.css');

/* General Menu Styling */
.wr-hub a {
  color: var(--text-light); /* Matches other menu links */
  background-color: var(--accent-color); /* Matches accent color */
  text-decoration: none;
  padding: 10px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.wr-hub a:hover {
  background-color: var(--secthemecoloropacity);
  color: var(--link-hover); /* Ensure hover effect matches theme */
}

.dashboard-page .wr-dashboard-sidebar a {
  color: var(--text-light) !important;
  background-color: var(--themecolor) !important;
  text-decoration: none;
  padding: 10px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.dashboard-page .wr-dashboard-sidebar a:hover {
  background-color: var(--accent-coloropacity) !important;
  color: var(--text-light) !important;
}

.registration-page {
    background-color: #373435;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.registration-form-container {
    width: 100%;
    max-width: 500px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
}

/* Remove the image */
.registration-page .image-container {
    display: none;
}

/* Main slider in directorist adjustments */
.directorist-single-listing-slider-wrap {
  width: 100%; /* Full width */
  max-width: none; /* Remove any width restrictions */
  margin: 0 auto; /* Center the slider */
  padding: 0; /* Remove padding */
  overflow: hidden; /* Prevent overflow issues */
}

.directorist-single-listing-slider {
  width: 100%; /* Full width */
  height: auto; /* Responsive height */
}

.directorist-single-listing-slider .swiper-slide img {
  width: 100%; /* Full width for images */
  height: auto; /* Maintain aspect ratio */
  object-fit: cover; /* Ensure images cover the container */
  border-radius: 0; /* Optional: Remove rounded corners */
}

/* Thumbnail slider adjustments */
.directorist-single-listing-slider-thumb {
  width: 100%; /* Full width */
  max-width: none; /* Remove restrictions */
  margin: 10px auto 0; /* Add spacing above thumbnails */
  display: flex; /* Ensure thumbnails are in a row */
  justify-content: center; /* Center thumbnails */
  gap: 10px; /* Add spacing between thumbnails */
}

.directorist-single-listing-slider-thumb .swiper-slide {
  width: 100px; /* Fixed width for thumbnails */
  height: 80px; /* Fixed height for thumbnails */
  overflow: hidden; /* Prevent overflow */
  border-radius: 6px; /* Optional: Rounded corners */
}

.directorist-single-listing-slider-thumb .swiper-slide img {
  width: 100%; /* Full width for thumbnails */
  height: 100%; /* Full height for thumbnails */
  object-fit: cover; /* Ensure thumbnails cover the container */
}

/* Navigation button adjustments */
.directorist-single-listing-slider .directorist-swiper__nav i {
  width: 40px; /* Circular buttons */
  height: 40px;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  border-radius: 50%; /* Make buttons circular */
  color: #fff; /* White arrow color */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10; /* Ensure buttons are above the slider */
  position: absolute;
  top: 50%; /* Center vertically */
  transform: translateY(-50%);
}

.directorist-single-listing-slider .directorist-swiper__nav--prev {
  left: 10px; /* Position left arrow */
}

.directorist-single-listing-slider .directorist-swiper__nav--next {
  right: 10px; /* Position right arrow */
}

/* Hide navigation buttons if only one slide exists */
.directorist-single-listing-slider.slider-has-one-item .directorist-swiper__nav {
  display: none;
}

/* Directorist integration styles */
.wt-directorist-section .wt-directorist-iframe {
  width: 100%;
  min-height: 800px;
  border: none;
  background: #f7f7f7;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.wt-directorist-section .wt-directorist-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.wt-directorist-section .wt-directorist-loader i {
  font-size: 30px;
  color: #1d5f6f;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Fix for map fullscreen mode */
.directorist-map-canvas.directorist-full-map {
  position: fixed;
  top: 32px;
  left: 0;
  width: 100vw !important;
  height: calc(100vh - 32px) !important;
  z-index: 999999;
}

/* Responsive Design Improvements for Directorist Integration */
@media (max-width: 767px) {
  .wt-directorist-section .wt-directorist-iframe {
    min-height: 600px; /* Smaller height on mobile */
  }
  
  .wt-directorist-wrapper {
    padding: 0;
  }
  
  .wt-dashboardboxtitle h2 {
    font-size: 18px;
  }
}

/* Style improvements for Directorist integration */
.wt-directorist-section .directorist-btn {
  background-color: var(--themecolor, #5dc560);
  color: #fff;
  border: none;
}

.wt-directorist-section .directorist-btn:hover {
  background-color: #4aa54b;
}

/* Match form styles */
.wt-directorist-section .directorist-form-group input, 
.wt-directorist-section .directorist-form-group select,
.wt-directorist-section .directorist-form-group textarea {
  border-color: #eeeeee;
  background-color: #ffffff;
}

/* Improved listings display */
.wt-directorist-section .directorist-listing-single {
  transition: all 0.3s ease;
}

.wt-directorist-section .directorist-listing-single:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* Ensure Directorist content fits Workreap dashboard styling */
.wt-dashboardbox .directorist, 
.wt-dashboardbox .atbd-dashboard, 
.wt-dashboardbox .atbd_wrapper {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.wt-dashboardbox .atbd-dashboard .atbd_dashboard_content_inner {
    padding: 0 !important;
}

/* Custom registration fields styling */
#archihub-register-options-owner,
#archihub-register-options-provider {
    margin-top: 15px;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 8px;
    border-left: 4px solid var(--themecolor, #5dc560);
}

#archihub-register-options-owner .form-group,
#archihub-register-options-provider .form-group {
    margin-bottom: 0;
}

#archihub-register-options-owner label,
#archihub-register-options-provider label {
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
    display: block;
}

.wr-select select {
    width: 100%;
    height: 46px;
    padding: 0 15px;
    border-radius: 4px;
    border: 1px solid #eeeeee;
    color: #666;
    font-size: 14px;
}

/* Make sure the radio options align well */
.wr-reg-option .wr-radio {
    margin-bottom: 5px;
}

/* Add icon to indicate required selection */
#archihub-register-options-owner .form-group label::after,
#archihub-register-options-provider .form-group label::after {
    content: " *";
    color: red;
}