/**
 * Archive Apartment Styles - Using CSS Variables from front.css
 */

.apb-archive-wrapper {
   max-width: 100%;
   margin: 0 auto;
}

/* Hero Section */
.apb-hero-section {
   position: relative;
   width: 100%;
   height: 450px;
   overflow: hidden;
   margin-bottom: var(--apb-spacing-xl);
}

.apb-hero-bg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-position: center;
   z-index: 1;
}

.apb-hero-content {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   z-index: 2;
   padding-bottom: 40px;
   display: flex;
   justify-content: center;
}

/* Search Bar in Hero */
.apb-search-bar {
   background: var(--apb-white);
   padding: var(--apb-spacing-lg);
   border-radius: var(--apb-border-radius-lg);
   box-shadow: var(--apb-box-shadow-xl);
   max-width: var(--apb-max-width-container);
   width: 90%;
}

.apb-search-inputs {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 30px;
   flex-wrap: wrap;
}

.apb-input-group {
   display: flex;
   flex-direction: column;
}

.apb-input-group label {
   margin-bottom: var(--apb-spacing-xxs);
   font-family: var(--apb-font-family-secondary);
   font-weight: var(--apb-font-weight-bold);
   font-size: var(--apb-font-size-small);
   line-height: 100%;
   text-align: center;
   letter-spacing: 0;
   color: var(--apb-gray-700);
}

.apb-input-group input, 
.apb-input-group select {
   border: var(--apb-border-width-thin) var(--apb-border-style-solid) var(--apb-input-border-color);
   border-radius: var(--apb-border-radius-sm);
   padding: var(--apb-spacing-sm);
   font-family: var(--apb-font-family-secondary);
   font-weight: var(--apb-font-weight-bold);
   font-size: var(--apb-font-size-small);
   text-align: center;
   vertical-align: middle;
}

.apb-input-group input[type="date"] {
   position: relative;
   background: transparent;
   cursor: pointer;
   opacity: 0.01; /* Prawie niewidoczny, ale nadal interaktywny */
   -webkit-appearance: none; /* Standardowe stylowanie dla zgodności */
}

/* Date fields styling */
.apb-date-inputs {
   display: flex;
   gap: 30px;
}

.apb-date-group {
   position: relative;
}

.apb-date-wrapper {
   position: relative;
   width: 100%;
   min-width: 160px;
   height: var(--apb-input-height);
   border: var(--apb-border-width-thin) var(--apb-border-style-solid) var(--apb-input-border-color);
   border-radius: var(--apb-border-radius-lg);
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all var(--apb-transition-speed) var(--apb-transition-easing);
}

/* Dodaj efekt hover do wrappera, aby było widać, że jest klikalny */
.apb-date-wrapper:hover {
   background-color: var(--apb-gray-100);
   border-color: var(--apb-primary);
}

.apb-date-display {
   font-family: var(--apb-font-family-secondary);
   font-weight: var(--apb-font-weight-bold);
   font-size: var(--apb-font-size-small);
   text-align: center;
   padding-right: 40px; /* Space for the calendar icon */
   display: block;
   width: 100%;
   cursor: pointer !important; /* Wymuszamy cursor pointer */
   position: relative;
   z-index: 3; /* Aby zawsze był nad inputem, ale pod ikoną */
}

.apb-input-calendar-icon {
   position: absolute;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
   width: 29px;
   height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer !important; /* Wymuszamy cursor pointer */
   z-index: 10; /* Zwiększamy z-index, aby ikona była zawsze nad innymi elementami */
}

/* Guest controls styling */
.apb-guest-inputs {
   display: flex;
   gap: 30px;
}

.apb-guest-input {
   position: relative;
}

.apb-guest-controls {
   display: flex;
   align-items: center;
   justify-content: center;
   border: var(--apb-border-width-thin) var(--apb-border-style-solid) var(--apb-input-border-color);
   border-radius: var(--apb-border-radius-lg);
   overflow: hidden;
   height: var(--apb-input-height);
}

.apb-guest-value {
   padding: var(--apb-spacing-sm) var(--apb-spacing-md);
   min-width: 30px;
   text-align: center;
   font-family: var(--apb-font-family-secondary);
   font-weight: var(--apb-font-weight-bold);
   font-size: var(--apb-font-size-small);
   line-height: 100%;
   letter-spacing: 0;
}

.apb-guest-button {
   width: 36px;
   height: var(--apb-input-height);
   background: var(--apb-gray-100);
   border: none;
   cursor: pointer;
   font-family: var(--apb-font-family-secondary);
   font-weight: var(--apb-font-weight-bold);
   display: flex;
   align-items: center;
   justify-content: center;
}

/* Search button styling */
.apb-search-buttons {
   display: flex;
   flex-direction: column;
   gap: var(--apb-spacing-sm);
   align-items: center;
   justify-content: flex-end;
}

.archive .apb-search-submit {
   background: var(--apb-white);
   border: var(--apb-border-width-medium) var(--apb-border-style-solid) var(--apb-accent);
   border-radius: var(--apb-border-radius-xl);
   color: var(--apb-accent);
   font-family: var(--apb-font-family-secondary);
   font-weight: var(--apb-font-weight-bold);
   font-size: var(--apb-font-size-xs);
   line-height: 100%;
   letter-spacing: 0;
   font-variant: small-caps;
   cursor: pointer;
   transition: all var(--apb-transition-speed-slow) var(--apb-transition-easing);
   padding: var(--apb-spacing-lg) var(--apb-spacing-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%; /* Dodane: pełna szerokość przycisku */
}

.archive .apb-search-submit:hover {
   background: var(--apb-primary-hover);
}

.archive .apb-reset-button {
   background: var(--apb-accent);
   border: var(--apb-border-width-medium) var(--apb-border-style-solid) var(--apb-accent);
   border-radius: var(--apb-border-radius-xl);
   color: var(--apb-white);
   font-family: var(--apb-font-family-secondary);
   font-weight: var(--apb-font-weight-bold);
   font-size: var(--apb-font-size-xs);
   padding: var(--apb-spacing-sm) var(--apb-spacing-lg);
   cursor: pointer;
   text-decoration: none;
   display: inline-block;
   text-align: center;
   margin-top: 0; /* Usunięty margines górny na desktopie */
   width: 100%; /* Dodane: pełna szerokość przycisku */
   transition: all var(--apb-transition-speed-slow) var(--apb-transition-easing);
}

.apb-reset-button:hover {
   background: var(--apb-accent-hover);
}

/* Content area */
.apb-content-area {
   max-width: var(--apb-max-width-container);
   margin: 0 auto;
   padding: var(--apb-spacing-lg);
}

/* Property Type Filter */
.apb-property-type-filter {
   margin-bottom: 30px;
   background: var(--apb-gray-100);
   border-radius: var(--apb-border-radius-md);
   padding: var(--apb-spacing-md) var(--apb-spacing-lg);
}

.apb-filter-section h3 {
   font-size: 16px;
   margin-bottom: 15px;
   color: var(--apb-gray-700);
   font-weight: 600;
}

.apb-filter-options {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

.apb-filter-option {
   padding: 8px 16px;
   background: var(--apb-white);
   border: 1px solid var(--apb-gray-300);
   border-radius: 20px;
   color: var(--apb-gray-700);
   text-decoration: none;
   transition: all 0.2s ease;
   font-size: 14px;
   font-weight: 500;
}

.apb-filter-option:hover {
   background: var(--apb-gray-200);
   color: var(--apb-gray-700);
}

.apb-filter-option.active {
   background: var(--apb-primary);
   color: var(--apb-white);
   border-color: var(--apb-primary);
}

.apb-search-message {
   background: var(--apb-gray-100);
   border-radius: var(--apb-border-radius-md);
   padding: var(--apb-spacing-md) var(--apb-spacing-lg);
   margin-bottom: var(--apb-spacing-lg);
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
}

.apb-search-message p {
   margin: 0;
   flex: 1;
}

.apb-no-results-warning {
   background: var(--apb-warning);
   border-left: 4px solid var(--apb-warning-border);
   box-shadow: var(--apb-box-shadow-sm);
   padding: var(--apb-spacing-md) var(--apb-spacing-lg);
   margin-bottom: var(--apb-spacing-lg);
   border-radius: var(--apb-border-radius-sm);
}

.apb-no-results-warning p {
   margin: var(--apb-spacing-xxs) 0;
   color: var(--apb-warning-text);
}

.apb-clear-search, .apb-reset-button {
   display: inline-block;
   background: var(--apb-gray-100);
   padding: var(--apb-spacing-xxs) var(--apb-spacing-md);
   border-radius: var(--apb-border-radius-sm);
   text-decoration: none;
   font-size: var(--apb-font-size-small);
   color: var(--apb-gray-600);
   transition: all var(--apb-transition-speed) var(--apb-transition-easing);
   text-align: center;
}

.apb-clear-search:hover {
   background: var(--apb-gray-200);
   color: var(--apb-gray-700);
   text-decoration: none;
}

/* Apartament item - nowy styl */
.apb-apartments-list {
   margin-top: var(--apb-spacing-xl);
}

.apb-apartment-item {
   background: var(--apb-white);
   border-radius: var(--apb-border-radius-md);
   overflow: hidden;
   box-shadow: var(--apb-box-shadow-md);
   margin-bottom: var(--apb-spacing-xl);
   transition: transform var(--apb-transition-speed) var(--apb-transition-easing);
}

.apb-apartment-item:hover {
   transform: translateY(-5px);
}

.apb-apartment-item .container {
   display: flex;
   flex-wrap: wrap;
   max-width: 100%;
}

.apb-apartment-item .column {
   flex: 1;
   min-width: 300px;
}

.apb-apartment-item .column:first-child {
   flex: 1;
}

.apb-apartment-item .column:last-child {
   flex: 2;
   padding: var(--apb-spacing-lg);
}




/* Slider */
.slider {
   position: relative;
   height: 100%;
   min-height: 250px;
}

.slider-wrapper {
   height: 100%;
}

.slide {
   height: 100%;
}

.slide-image {
   height: 100%;
   min-height: 250px;
   background-size: cover;
   background-position: center;
}

.slider-nav-prev, .slider-nav-next {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 40px;
   height: 40px;
   background: rgba(255, 255, 255, 0.7);
   border-radius: var(--apb-border-radius-circle);
   cursor: pointer;
   z-index: 10;
   display: flex;
   align-items: center;
   justify-content: center;
}

.slider-nav-prev:before, .slider-nav-next:before {
   content: '';
   width: 10px;
   height: 10px;
   border-top: 2px solid var(--apb-gray-700);
   border-right: 2px solid var(--apb-gray-700);
   display: block;
}

.slider-nav-prev {
   left: var(--apb-spacing-sm);
}

.slider-nav-prev:before {
   transform: rotate(-135deg);
}

.slider-nav-next {
   right: var(--apb-spacing-sm);
}

.slider-nav-next:before {
   transform: rotate(45deg);
}

.slider-pagination {
   position: absolute;
   bottom: var(--apb-spacing-sm);
   left: 0;
   right: 0;
   display: flex;
   justify-content: center;
   gap: var(--apb-spacing-xs);
}

.slider-pagination .dot {
   width: 10px;
   height: 10px;
   background: rgba(255, 255, 255, 0.7);
   border-radius: var(--apb-border-radius-circle);
   cursor: pointer;
}

.slider-pagination .dot.active {
   background: var(--apb-white);
}

/* Content */
.apb-apartment-item h2 {
   margin: 0 0 var(--apb-spacing-md) 0;
   font-size: var(--apb-font-size-xlarge);
}

.divider {
   width: 50px;
   height: 3px;
   background: var(--apb-primary);
   margin-bottom: var(--apb-spacing-md);
}

.feature-list, .icon-list {
   list-style: none;
   padding: 0;
   margin: 0 0 var(--apb-spacing-md) 0;
   display: flex;
   flex-wrap: wrap;
   gap: var(--apb-spacing-md);
}

.feature-item {
   display: flex;
   align-items: center;
   gap: var(--apb-spacing-xs);
}

.feature-item .icon {
   display: flex;
   align-items: center;
   justify-content: center;
}

.feature-item .icon img, .icon-item .icon img {
   width: 20px;
   height: 20px;
   object-fit: contain;
}

.feature-item .icon i, .icon-item .icon i {
   width: 20px;
   height: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.icon-list {
   justify-content: flex-start;
}

.icon-item {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   background: var(--apb-gray-100);
   border-radius: var(--apb-border-radius-circle);
}

.description {
   margin: var(--apb-spacing-md) 0;
   color: var(--apb-gray-600);
}

.cta-button-wrapper {
   margin-top: var(--apb-spacing-md);
   text-align: right;
}

/* Zastępujemy .button naszym standardowym systemem przycisków */
.apb-apartment-item .button {
   /* Używamy klasy apb-btn-accent dla przycisku "Zobacz więcej" */
   background-color: var(--apb-accent);
   color: var(--apb-white);
   border: var(--apb-border-width-medium) solid var(--apb-accent);
   border-radius: var(--apb-border-radius-xl);
   padding: var(--apb-spacing-sm) var(--apb-spacing-lg);
   font-family: var(--apb-font-family-secondary);
   font-weight: var(--apb-font-weight-bold);
   font-size: var(--apb-font-size-normal);
   text-decoration: none;
   display: inline-block;
   cursor: pointer;
   text-align: center;
   transition: all var(--apb-transition-speed) var(--apb-transition-easing);
}

.apb-apartment-item .button:hover {
   background-color: transparent;
   color: var(--apb-accent);
   transform: translateY(-2px);
   box-shadow: var(--apb-box-shadow-md);
   text-decoration: none;
}

/* Pagination and messages */
.apb-pagination {
   margin-top: var(--apb-spacing-xl);
   text-align: center;
}

.apb-no-results {
   text-align: center;
   padding: var(--apb-spacing-xxl) 0;
}

.apb-search-loading {
   display: inline-block;
   animation: spin 1s linear infinite;
}

/* Calendar Icon SVG */
.calendar-icon {
   width: 18px;
   height: 18px;
   fill: #fff;
}

/* Responsive adjustments */
@media (max-width: 991px) {

   .apb-date-inputs {
       width: 100%;
       justify-content: center;
   }
   
   .apb-guest-inputs {
       width: 100%;
       justify-content: center;
   }
   
   .apb-search-buttons {
       width: 100%;
   }

   .apb-search-buttons {
      flex-direction: row;
   }

}

@media (max-width: 768px) {

   .apb-search-bar {
       padding: 15px;
   }

   .apb-hero-content {
       padding-bottom: 20px;
   }
   
   .apb-apartment-item .container {
       flex-direction: column;
   }
   
   .apb-apartment-item .column {
       width: 100%;
   }
   
   .archive .apb-search-submit {
       width: 100%;
   }



}

@media (max-width: 425px) {
   .apb-hero-section {
      height: 550px;
   }
   .apb-search-buttons {
      flex-direction: column;
   }


   .apb-date-inputs {
      flex-direction: column;
      gap: 20px;
   }
}