/* =====================================================
   TX Psychics - New Listing Cards (3 states)
   Available / Busy / Offline
   Clean dedicated file for the updated card design
   ===================================================== */

.card-listing {
    width: 100%;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

/* Cap the card at the designed ~320px size on larger viewports (when grid cols are wide).
   On mobile (xs) we let it be full-width (100%) for better use of space. */
@media (min-width: 576px) {
  .card-listing {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Header / Image area - responsive via aspect-ratio (replaces fixed height) */
.card-listing .card-header {
    position: relative;
    aspect-ratio: 320 / 350;
    background: #000;
    overflow: hidden;
}

.card-listing .avatar,
.card-listing .video-container {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Play button (only on Available state when video exists) */
.card-listing .play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid white;
    transition: transform 0.2s ease, background-color 0.2s ease;
    z-index: 3;
    box-sizing: border-box;
}

.card-listing .play-btn:hover {
    background: rgba(0,0,0,0.8);
    transform: translate(-50%, -50%) scale(1.08);
}

.card-listing .play-btn svg {
    width: 28px;
    height: 28px;
    fill: white;
    display: block;
    transform: translateX(2px); /* optical centering for the play triangle */
}

/* Wishlist / Like icon */
.card-listing .like-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.2);
    padding: 8px;
    border-radius: 50%;
    backdrop-filter: blur(4px);
    cursor: pointer;
    transition: 0.2s;
    border: 1px solid rgba(255,255,255,0.3);
    z-index: 3;
}

.card-listing .like-icon:hover {
    background: rgba(255, 255, 255, 0.4);
}

.card-listing .like-icon svg {
    width: 20px;
    height: 20px;
    fill: white;
}

/* Active wishlist state */
.card-listing .like-icon.is-active {
    background: rgba(231, 76, 60, 0.85);
    border-color: rgba(231, 76, 60, 0.9);
}

.card-listing .like-icon.is-active svg {
    fill: #fff;
}

/* Gradient overlay with name, rating, tools */
.card-listing .header-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: white;
    z-index: 2;
}

.card-listing .rating {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    background: #f39c12;
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.card-listing .card-name {
    font-size: 22px !important;
    font-weight: 700;
    margin: 0;
    line-height: 1.1;
    color: #fff !important;
}

.card-listing .card-name a {
    color: #fff !important;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.card-listing .card-name a:hover {
    text-decoration: underline;
    opacity: 0.85;
}

.card-listing .card-tools {
    font-size: 13px !important;
    opacity: 0.9;
    margin: 4px 0 0 0;
    color: #fff !important;
}

.card-listing .card-verified {
    font-size: 11px;
    font-weight: 700;
    color: #4ade80;
    letter-spacing: .04em;
    margin-bottom: 3px;
}

.card-listing .card-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 5px 0 4px;
}

.card-listing .card-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.card-listing .card-badge-1 {
    background: rgba(99, 102, 241, 0.9);
    color: #fff;
}

.card-listing .card-badge-2 {
    background: rgba(16, 185, 129, 0.9);
    color: #fff;
}

/* Meta row (readings + status) */
.card-listing .card-meta {
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #666;
    border-bottom: 1px solid #eee;
}

/* Status badges */
.card-listing .status-available {
    color: #27ae60;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}

.card-listing .status-available::before {
    content: '●';
    font-size: 10px;
}

.card-listing .status-busy {
    color: #e67e22;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}

.card-listing .status-busy::before {
    content: '●';
    font-size: 10px;
}

.card-listing .status-offline {
    color: #999;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}

.card-listing .status-offline::before {
    content: '●';
    font-size: 10px;
}

/* BEST FOR / Advisor Highlights block */
.card-listing .highlights-block {
    margin-bottom: 15px;
}

.card-listing .highlights-title {
    font-weight: 700;
    font-size: 12px;
    color: #333;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.card-listing .highlights-text-inline {
    font-size: 13px;
    color: #666;
    font-style: italic;
    line-height: 1.4;
    text-transform: none !important;
    font-weight: normal !important;
}

/* Bottom action area */
.card-listing .card-action {
    padding: 20px;
}

.card-listing .price-block {
    margin-bottom: 5px;
}

.card-listing .new-price {
    font-size: 24px;
    font-weight: 800;
    color: #27ae60;
}

.card-listing .old-price {
    font-size: 16px;
    color: #999;
    text-decoration: line-through;
    margin-left: 8px;
}

/* Main action buttons */
.card-listing .btn-talk {
    width: 100%;
    padding: 14px;
    background: #27ae60;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.card-listing .btn-talk:hover {
    background: #219150;
}

/* Busy variant (orange) */
.card-listing .btn-talk.btn-busy {
    background: #f39c12;
}

.card-listing .btn-talk.btn-busy:hover {
    background: #d35400;
}

/* Offline / default book variant (gray) */
.card-listing .btn-talk.btn-book {
    background: #7f8c8d;
}

.card-listing .btn-talk.btn-book:hover {
    background: #5d6d7e;
}

.card-listing .btn-subtext {
    font-size: 11px;
    font-weight: 400;
    opacity: 0.9;
}

/* Footer note */
.card-listing .confidential {
    text-align: center;
    font-size: 11px;
    color: #999;
}

/* Force white text for name/tools inside the dark overlay (overrides theme/parent h2/p styles) */
.card-listing .header-overlay .card-name,
.card-listing .header-overlay .card-name a,
.card-listing .header-overlay .card-tools {
    color: #fff !important;
}

/* =====================================================
   Shared video modal (used by listing cards + profile)
   ===================================================== */
.custom-modal {
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  align-items: center;
  justify-content: center;
}
.custom-modal[style*="display:flex"] { display: flex !important; }

.custom-modal__overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
}

.custom-modal__window {
  position: relative;
  z-index: 2;
  border-radius: 18px;
  box-shadow: 0 6px 24px #0002;
}

/* Video specific window (matches profile) */
#footer-video-modal .custom-modal__window {
  max-width: 680px;
  width: 95%;
  position: relative;
  background: #000;
  padding: 0;
}

#footer-video-modal .custom-modal__close {
  position: absolute;
  top: 10px;
  right: 20px;
  z-index: 9;
  font-size: 30px;
  background: transparent;
  color: #fff;
  border: none;
  cursor: pointer;
  line-height: 1;
}

/* =====================================================
   RESPONSIVE / ADAPTIVE for .card-listing
   Works with Bootstrap grid (col-sm-6, col-lg-4, col-xl-3 etc.)
   - width:100% lets the grid column control the size
   - aspect-ratio keeps photo proportions on any width
   - smaller fonts/paddings/buttons on narrow viewports (mobile 2-col)
   ===================================================== */

@media (max-width: 767.98px) {
  /* On mobile/tablet portrait: typically 2 cards per row (col-sm-6) or stacked.
     Cards become narrower, so reduce everything proportionally. */

  .card-listing {
    margin-bottom: 12px;
  }

  .card-listing .card-name,
  .card-listing .card-name a {
    font-size: 17px !important;
    line-height: 1.15;
  }

  .card-listing .card-tools {
    font-size: 11px !important;
  }

  .card-listing .rating {
    font-size: 12px;
    padding: 3px 8px;
    margin-bottom: 6px;
  }

  .card-listing .header-overlay {
    padding: 12px;
  }

  .card-listing .card-meta {
    padding: 10px 12px;
    font-size: 11px;
  }

  .card-listing .card-action {
    padding: 12px;
  }

  .card-listing .highlights-title {
    font-size: 11px;
  }

  .card-listing .highlights-text-inline {
    font-size: 12px;
  }

  .card-listing .new-price {
    font-size: 18px;
  }

  .card-listing .old-price {
    font-size: 13px;
    margin-left: 6px;
  }

  .card-listing .btn-talk {
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 6px;
  }

  .card-listing .btn-subtext {
    font-size: 10px;
  }

  .card-listing .confidential {
    font-size: 10px;
  }

  /* Smaller centered play button on narrow cards */
  .card-listing .play-btn {
    width: 48px;
    height: 48px;
    border-width: 2px;
  }

  .card-listing .play-btn svg {
    width: 22px;
    height: 22px;
    transform: translateX(1.5px);
  }

  /* Like/heart icon smaller */
  .card-listing .like-icon {
    top: 8px;
    right: 8px;
    padding: 6px;
  }

  .card-listing .like-icon svg {
    width: 16px;
    height: 16px;
  }
}

/* Extra tight for very small phones (single column or tiny 2-col) */
@media (max-width: 400px) {
  .card-listing .card-name,
  .card-listing .card-name a {
    font-size: 15px !important;
  }

  .card-listing .card-tools {
    font-size: 10px !important;
  }

  .card-listing .header-overlay {
    padding: 10px;
  }

  .card-listing .play-btn {
    width: 42px;
    height: 42px;
  }

  .card-listing .play-btn svg {
    width: 19px;
    height: 19px;
    transform: translateX(1px);
  }

  .card-listing .new-price {
    font-size: 16px;
  }

  .card-listing .btn-talk {
    font-size: 13px;
    padding: 9px 10px;
  }
}

/* The max-width cap (see @media min-width:576px above) keeps cards close to the original
   320px design size when the Bootstrap column is wider than that (e.g. on large screens with
   fewer columns per row). On phones the card goes full-width for best space usage. */

.card-listing .like-icon,
.like-icon--small {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font: inherit;
  color: inherit;
  line-height: 0;
}

.card-listing .like-icon.is-busy,
.like-icon--small.is-busy {
  pointer-events: none;
  opacity: 0.7;
}

.like-icon--small {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  padding: 7px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.like-icon--small svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: #888;
}

.like-icon--small.is-active {
  background: #e74c3c;
  border-color: #e74c3c;
}

.like-icon--small.is-active svg {
  fill: #fff;
}

.favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.favorites-grid__item {
  min-width: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.favorites-grid__item .card-listing {
  margin-bottom: 0;
  height: 100%;
}

.favorites-grid__item.is-disappearing {
  opacity: 0;
  transform: scale(0.96);
}

.txp-empty,
.favorites-empty {
  text-align: center;
  padding: 56px 24px;
  border: 1px dashed #F7BEB7;
  border-radius: 16px;
  background: #FFF8F6;
}
.txp-empty__icon,
.favorites-empty__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #FFF0EC;
  color: #EC604F;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.txp-empty__icon i,
.favorites-empty__icon {
  color: #EC604F;
  line-height: 1;
}
.txp-empty__title,
.txp-empty h4,
.favorites-empty h4 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: #1A1A2E;
}
.txp-empty__text,
.txp-empty p,
.favorites-empty p {
  margin: 0 0 20px;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}
.txp-empty__btn,
.favorites-empty .cmn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 12px;
  background: #EC604F;
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  border: none;
  box-shadow: none;
  min-width: 160px;
}
.txp-empty__btn:hover,
.favorites-empty .cmn-btn:hover {
  background: #D95544;
  color: #fff !important;
}

@media (max-width: 575px) {
  .favorites-grid {
    grid-template-columns: 1fr;
  }
}