/*
Theme Name: WpRentals Zimmerimmer
Theme URI: http://themeforest.net/user/wpestate
Description: Ultimate WordPress Theme created by WpEstate for accommodation booking. WpRentals is clean, flexible, fully responsive and retina Ready. Its smart settings allow you to build outstanding renting websites easily and fast.
Version: 3.13
Author: wpestate.org
Author URI: http://themeforest.net/user/annapx
Tags: white, one-column, two-columns,left-sidebar, right-sidebar, fluid-layout , custom-menu, theme-options, translation-ready
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: wprentals

-------------------------------------------------------------- */

div.category_radio {
    display: block;
    position: relative;
    padding: 0 10px 0 0 !important;
    /* align-items: center; */
    float: left;
    margin-bottom: 10px;
}
div.category_radio label {
    width: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
} 
div.category_radio .category_radio_name {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
}

div.category_radio input[type="radio"] {
    display: none;
}

div.category_radio #category_radio_name {
    cursor: pointer;
}

div.category_radio label:before {
    content: "\2716";
    position: absolute;
    left: 5px;
    top: 5px;
    font-size: 30px;
    color: white;
}

div.category_radio input[type="radio"]:checked + label:before {
    content: "\2714";
    color: green;
}

div.category_radio label img {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
}

div.category_radio label img {
    width: 150px;
    height: 150px;
    border-radius: 5px;
    margin-right: 10px;
    display: block;
    float: none; 
}

.room-row select,
.room-row input {
  padding: 8px 10px !important;
  margin-bottom: 0 !important;
  height: 38px;
  box-sizing: border-box;
}
.remove-btn {
  padding: 8px 12px;
  background-color: #ef4444;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  height: 38px;
}
.remove-btn:hover {
  background-color: #dc2626;
}

.save-btn,
.add-btn,
.copy-btn {
  padding: 8px 16px;
  color: white;
  border: none;
  cursor: pointer;
}

.add-btn {
  background-color: #4CAF50;
}
.save-btn {
  background-color: #b30000;
}

.copy-btn {
  background-color: #2196F3;
}
button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  margin-top: 10px;
}

button:hover {
  background-color: #0056b3;
}

/* Mark as Paid Button - Bank Transfer Payment System */
.mark-as-paid-btn {
  display: inline-block;
  padding: 15px 14px;
  margin: 0 10px 10px 0;
  background: #10b981;
  color: white !important;
  cursor: pointer;
  border: none;
  border-radius: 3px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.42857143;
  text-align: center;
  text-transform: none;
  transition: all 0.3s ease;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.mark-as-paid-btn:hover {
  background: #059669;
  color: white !important;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.mark-as-paid-btn:active {
  background: #047857;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.mark-as-paid-btn.loading {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.mark-as-paid-btn i {
  margin-right: 6px;
  font-size: 14px;
}

/* Undo Payment Button - Reset payment status */
.unmark-paid-btn {
  display: inline-block;
  padding: 15px 14px;
  margin: 0 10px 10px 0;
  background: #f59e0b;
  color: white !important;
  cursor: pointer;
  border: none;
  border-radius: 3px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.42857143;
  text-align: center;
  text-transform: none;
  transition: all 0.3s ease;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.unmark-paid-btn:hover {
  background: #d97706;
  color: white !important;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.unmark-paid-btn:active {
  background: #b45309;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.unmark-paid-btn.loading {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.unmark-paid-btn i {
  margin-right: 6px;
  font-size: 14px;
}

/* =============================================
   Horizontal User Menu Bar (below header)
   ============================================= */
.user-menu-bar {
  background: #d2d9e2;
  width: 100%;
  z-index: 101;
  clear: both;
}

.user-menu-bar-inside {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 0;
  flex-wrap: nowrap;
}

.user-menu-bar-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 0;
  color: #555;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
  position: relative;
}

.user-menu-bar-item:hover {
  color: #0073aa;
  text-decoration: none;
}

.user-menu-bar-item:hover i {
  color: #0073aa;
}

.user-menu-bar-item i {
  font-size: 14px;
  color: #8a8f9a;
  width: auto;
  margin: 0;
  transition: color 0.2s;
}

.user-menu-bar-item span {
  line-height: 1;
}

.user-menu-bar-badge {
  background: #e74c3c;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
}

.user-menu-bar-logout:hover,
.user-menu-bar-logout:hover i {
  color: #e74c3c;
}

/* Hide horizontal bar on mobile (mobile has its own slide-out menu) */
@media (max-width: 767px) {
  .user-menu-bar {
    display: none;
  }
}

/* =============================================
   Info Tooltip Icon (!) with hover popup
   ============================================= */
/* =============================================
   Dashboard form: duplicate label visibility
   Desktop: only left (chapter_label), Mobile: only right (field label)
   ============================================= */
.user_dashboard_panel .col-md-6 > p > label,
.user_dashboard_panel .col-md-3:not(.dashboard_chapter_label) > p > label {
  display: none;
}
.user_profile_div .user_dashboard_panel .col-md-6 > p > label {
  display: block;
}

@media only screen and (max-width: 1024px) {
  .col-md-3.dashboard_chapter_label {
    display: none !important;
  }
  .user_dashboard_panel .col-md-6 > p > label,
  .user_dashboard_panel .col-md-3:not(.dashboard_chapter_label) > p > label {
    display: block;
  }
}

.info-tooltip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f0ad4e;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: help;
  position: relative;
  margin-left: 5px;
  vertical-align: middle;
  line-height: 1;
}

.info-tooltip .info-tooltip-text {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: normal;
  width: 250px;
  white-space: normal;
  text-align: center;
  z-index: 1000;
  transition: opacity 0.2s;
  pointer-events: none;
}

.info-tooltip .info-tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

.info-tooltip:hover .info-tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* Hide duplicate Location field in half-map search (geolocation_search + radius is kept) */
#advanced_search_map_list .Lage {
    display: none;
}

/* =============================================
   Dashboard: Feature/Amenity icons next to checkboxes
   ============================================= */
.feature-item-dashboard p {
    display: flex;
    align-items: center;
    gap: 6px;
}
.feature-icon-dashboard {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}
.feature-icon-dashboard svg {
    width: 64px;
    height: 64px;
    fill: currentColor;
}