/* ESI Booking Plugin - frontend stili */

.esi-w-wrapper {
   font-family: inherit;
   max-width: 1200px;
   margin: 0 auto;
}

.esi-w-search-bar {
   display: flex;
   gap: 8px;
   background: #fff;
   padding: 16px;
   border-radius: 8px;
   box-shadow: 0 2px 12px rgba(0,0,0,0.08);
   margin-bottom: 24px;
}
.esi-w-search-input {
   flex: 1;
   padding: 12px 14px;
   border: 1px solid #ddd;
   border-radius: 6px;
   font-size: 15px;
}
.esi-w-search-btn {
   background: #b08d57;
   color: #fff;
   border: none;
   padding: 12px 28px;
   border-radius: 6px;
   font-weight: 600;
   cursor: pointer;
   transition: background 0.2s;
}
.esi-w-search-btn:hover { background: #8f7045; }

.esi-w-grid {
   display: grid;
   gap: 24px;
}
@media (max-width: 900px) {
   .esi-w-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
   .esi-w-grid { grid-template-columns: 1fr !important; }
}

.esi-w-loading, .esi-w-empty, .esi-w-error {
   grid-column: 1 / -1;
   text-align: center;
   padding: 40px;
   color: #888;
}
.esi-w-error { color: #b94a48; }

.esi-w-card {
   border-radius: 8px;
   overflow: hidden;
   background: #fff;
   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
   transition: transform 0.2s, box-shadow 0.2s;
}
.esi-w-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
.esi-w-card-image-link { display: block; }
.esi-w-card-image {
   height: 200px;
   background-size: cover;
   background-position: center;
   background-color: #eee;
   position: relative;
}
.esi-w-rating {
   position: absolute;
   top: 10px;
   right: 10px;
   background: rgba(0,0,0,0.6);
   color: #fff;
   padding: 3px 8px;
   border-radius: 4px;
   font-size: 13px;
}
.esi-w-card-body { padding: 16px; }
.esi-w-card-title { font-size: 18px; margin: 0 0 6px; }
.esi-w-card-title a { color: inherit; text-decoration: none; }
.esi-w-card-location { font-size: 13px; color: #666; margin: 0 0 8px; }
.esi-w-card-desc { font-size: 14px; color: #444; margin: 0 0 8px; line-height: 1.5; }
.esi-w-card-price { font-weight: 700; color: #1a1a1a; margin: 0 0 12px; }
.esi-w-btn {
   display: inline-block;
   background: #2c7a4b;
   color: #fff !important;
   padding: 9px 20px;
   border-radius: 5px;
   text-decoration: none !important;
   font-size: 14px;
   font-weight: 600;
   transition: background 0.2s;
}
.esi-w-btn:hover { background: #1e5c37; }

/* ============================================================
   Modal / lightbox za rezervacijo (iFrame z Vue booking appom)
   ============================================================ */
.esi-w-modal {
   display: none;
   position: fixed;
   top: 0; left: 0; right: 0; bottom: 0;
   z-index: 99999;
}
.esi-w-modal.esi-w-modal-open {
   display: block;
}
.esi-w-modal-overlay {
   position: absolute;
   top: 0; left: 0; right: 0; bottom: 0;
   background: rgba(0,0,0,0.6);
}
.esi-w-modal-box {
   position: relative;
   width: 92%;
   height: 90%;
   max-width: 1100px;
   margin: 3% auto;
   background: #fff;
   border-radius: 10px;
   overflow: hidden;
   box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.esi-w-modal-close {
   position: absolute;
   top: 10px;
   right: 14px;
   z-index: 2;
   background: rgba(0,0,0,0.55);
   color: #fff;
   border: none;
   width: 34px;
   height: 34px;
   border-radius: 50%;
   font-size: 22px;
   line-height: 1;
   cursor: pointer;
}
.esi-w-modal-close:hover { background: rgba(0,0,0,0.8); }
.esi-w-modal-iframe {
   width: 100%;
   height: 100%;
   border: none;
}
@media (max-width: 700px) {
   .esi-w-modal-box { width: 100%; height: 100%; margin: 0; border-radius: 0; }
}