/* BeePay - modernizacion de Listas de Deseos: Popular, Elecciones (picks) y
   Mis Listas de Deseos. Las 3 rutas comparten .wishlists-wrap para la grilla
   de tarjetas, cada una con su propio wrapper (.popular-list / .picks-list /
   .wishlists-content). Solo visual, no se toca logica de Angular/jQuery. */

.no-results {
    text-align: center;
    color: var(--bp-steel-grey, #7a7a7a);
    font-weight: 600;
}

/* Tarjetas de "Popular": imagen + precio + avatar del host + info abajo.
   OJO: el avatar (.profile-img) es HERMANO de .wishlist-bg-img, no hijo, y se
   posiciona a proposito superpuesto sobre el borde inferior de la foto
   (top:100% + translateY(-50%), ver common.css). Por eso el redondeado/overflow
   va en .wishlist-bg-img (solo la foto), NUNCA en .panel-image completo -
   si no, se corta la mitad del avatar. */
.popular-list .panel-image a.wishlist-bg-img {
    display: block;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(45, 41, 37, .08);
    transition: box-shadow .18s ease, transform .18s ease;
}

.popular-list li:hover .panel-image a.wishlist-bg-img {
    box-shadow: 0 16px 36px rgba(45, 41, 37, .14);
    transform: translateY(-2px);
}

.popular-list .price-amount {
    border-radius: 999px;
    background: #fff;
    color: var(--bp-midnight-black, #2d2925);
    font-weight: 700;
    padding: 6px 14px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}

.popular-list .profile-img img {
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
}

.popular-list .panel-body {
    padding-top: 12px;
}

.popular-list .listing-name a {
    font-weight: 700;
    color: var(--bp-midnight-black, #2d2925);
}

.popular-list .listing-location a {
    color: var(--bp-steel-grey, #7a7a7a);
}

/* Tarjetas de "Elecciones" (picks) y "Mis Listas de Deseos": coleccion con
   imagen de fondo + overlay de texto (.count-section). */
.picks-list .wishlist-bg-img,
.wishlists-content .wishlist-bg-img {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(45, 41, 37, .08);
    transition: box-shadow .18s ease, transform .18s ease;
}

.picks-list li:hover .wishlist-bg-img,
.wishlists-content li:hover .wishlist-bg-img {
    box-shadow: 0 16px 36px rgba(45, 41, 37, .16);
    transform: translateY(-2px);
}

.picks-list .count-section h4,
.wishlists-content .count-section h4 {
    font-weight: 700;
}

/* Encabezado de "Mis Listas de Deseos" */
.wishlists-content .whishlist-category .profile-img img {
    border-radius: 50%;
}

.wishlists-content .wishlist-header-text h1 {
    font-weight: 700;
    color: var(--bp-midnight-black, #2d2925);
}

.wishlists-content .whishlist_button .btn {
    border-radius: 999px !important;
    background: var(--bp-amber-gold);
    color: #fff;
    font-weight: 600;
    padding: 10px 24px;
    border: none;
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.wishlists-content .whishlist_button .btn:hover {
    background: var(--bp-rust-orange, #d98c00);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .15);
}

/* Modal "Crear Nueva Lista De Deseos" (solo en Mis Listas de Deseos) */
#create-wishlist-modal .modal-content {
    border-radius: 20px;
    overflow: hidden;
    border: none;
}

#create-wishlist-modal .modal-title {
    font-weight: 700;
}

#create-wishlist-modal #wishlistName {
    border-radius: 999px;
    padding: 8px 16px;
}

#create-wishlist-modal .btn.save {
    border-radius: 999px !important;
    background: var(--bp-amber-gold);
    border: none;
    font-weight: 600;
    padding: 10px 22px;
    transition: background-color .15s ease;
}

#create-wishlist-modal .btn.save:hover {
    background: var(--bp-rust-orange, #d98c00);
}

#create-wishlist-modal .btn.cancel {
    border-radius: 999px !important;
    font-weight: 600;
    padding: 10px 22px;
}

/* Modal "Guardar en Lista de Deseos" (icono de corazon, solo en Popular) */
#wishlist-modal .modal-content {
    border-radius: 20px;
    overflow: hidden;
    border: none;
}

#wishlist-modal .wl-modal-wishlists li {
    border-radius: 12px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color .15s ease;
}

#wishlist-modal .wl-modal-wishlists li:hover {
    background-color: #fff8e6;
}

#wishlist-modal .wl-modal-wishlists li.active {
    background-color: #fff3d9;
}

#wishlist-modal .wl-modal-input {
    border-radius: 999px;
    padding: 10px 18px;
}

#wishlist-modal #wish_list_btn {
    border-radius: 999px !important;
    background: var(--bp-amber-gold);
    border: none;
    font-weight: 600;
}

#wishlist-modal #wish_list_btn:hover {
    background: var(--bp-rust-orange, #d98c00);
}

#wishlist-modal .create-wl a {
    color: var(--bp-amber-gold);
    font-weight: 600;
}