/* ============================================================
   Astrologer Listing Page — Shared by Chat & Talk pages
   Depends on: design-tokens.css (loaded first via master layout)
   Replaces: chat-page.css, talk-page.css
   ============================================================ */

/* ---------- Page title (h1) ---------- */
.expert-search-form h1,
.font-22.font-weight-bold {
    background: var(--ss-astro-gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.75rem;
    font-weight: 700;
}

/* ---------- Search/filter bar container ---------- */
.expert-search-section { background: transparent !important; }
.expert-search-form .round { background: transparent !important; }
.bg-white.px-0 { background: transparent !important; }

.expert-search-section.sticky-top,
.expert-search-section [class*="sticky"] {
    background: rgba(0,0,0,0.95) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--ss-edge-subtle);
}

.search-btn { color: var(--ss-gold-700) !important; }

/* ---------- Astrologer cards ---------- */
.psychic-card {
    background: var(--ss-surface-raised) !important;
    border: 1px solid var(--ss-card-border) !important;
    border-radius: var(--ss-radius-lg) !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
    overflow: hidden;
    position: relative;
    animation: ss-fade-in 0.5s ease-out forwards;
}

/* Override legacy app.min.css: force grid (ID selector wins over class) */
#expert-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
}
#expert-list .psychic-card:last-child:nth-child(odd) {
    grid-column: 1;
}

/* Override legacy app.min.css fixed height/padding that clips card content */
#expert-list .psychic-card {
    height: auto !important;
    min-height: 0 !important;
    width: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Override legacy app.css .psychic-card .btn oversizing */
#expert-list .psychic-card .btn {
    min-width: 0 !important;
    height: auto !important;
    font-size: inherit !important;
}

/* Override app.min.css absolute positioning that pulls buttons out of flex flow */
#expert-list .psychic-card .responsiveChatBtn,
#expert-list .psychic-card .responsiveCallBtn,
#expert-list .psychic-card .responsiveVideoBtn {
    position: static !important;
    right: auto !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
}

/* Shimmer on hover */
.psychic-card::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,215,0,0.05), transparent);
    transition: left 0.5s ease;
}
.psychic-card:hover::after { left: 150%; }

.psychic-card:hover {
    border-color: var(--ss-gold-700) !important;
    box-shadow: var(--ss-glow-gold) !important;
    transform: translateY(-2px);
}

/* Online astrologer card — subtle green tint (talk page) */
.psychic-card.card-online {
    border-color: rgba(16,185,129,0.20) !important;
    box-shadow: 0 0 12px rgba(16,185,129,0.15) !important;
}

/* ---------- Card text ---------- */
.psychic-card .colorblack,
.psychic-card [style*="color: #495057"],
.psychic-card [style*="color:#495057"] {
    color: var(--ss-content) !important;
}
.psychic-card .font-13,
.psychic-card .exp-language {
    color: var(--ss-content-tertiary) !important;
}
.psychic-card .exprt-price {
    color: var(--ss-gold-700) !important;
    font-weight: 700 !important;
}
.psychic-card svg { fill: var(--ss-gold-700) !important; }

/* ---------- Avatar ---------- */
.psychic-card .psyich-img img {
    border: 2px solid rgba(212,175,55,0.20) !important;
    border-radius: 50% !important;
    background: var(--ss-surface-hover);
}

/* Online avatar — green ring */
.psychic-card.card-online .psyich-img img,
.specific-Clr-Online ~ .psyich-img img,
.psychic-card:has(.specific-Clr-Online) .psyich-img img {
    border-color: var(--ss-online-color) !important;
    box-shadow: 0 0 0 2px var(--ss-online-color), var(--ss-online-glow) !important;
}

/* ---------- CTA buttons ---------- */
/* Primary CTA (chat / audio call) */
.btn-call.btn-audio-call,
.responsiveChatBtn .btn-call:not([style*="font-size"]),
.btn-audio-call {
    background: var(--ss-astro-gradient) !important;
    color: var(--ss-content-inverse) !important;
    border: none !important;
    border-radius: var(--ss-radius-md) !important;
    font-weight: 600 !important;
    transition: var(--ss-transition) !important;
}
.btn-call.btn-audio-call:hover,
.responsiveChatBtn .btn-call:not([style*="font-size"]):hover,
.btn-audio-call:hover {
    background: var(--ss-astro-gradient-hover) !important;
    box-shadow: var(--ss-glow-gold-lg) !important;
    transform: translateY(-1px) scale(1.02);
    color: var(--ss-content-inverse) !important;
}
.btn-audio-call:active { transform: scale(0.98) !important; }

/* Video call button (secondary outlined) */
.btn-video-call {
    background: transparent !important;
    color: var(--ss-gold-700) !important;
    border: 1px solid var(--ss-gold-700) !important;
    border-radius: var(--ss-radius-md) !important;
    font-weight: 600 !important;
    transition: var(--ss-transition) !important;
}
.btn-video-call:hover {
    background: rgba(212,175,55,0.10) !important;
    color: var(--ss-gold-500) !important;
    border-color: var(--ss-gold-500) !important;
    box-shadow: 0 0 20px rgba(212,175,55,0.35) !important;
    transform: translateY(-1px);
}

/* Offline / busy / disabled button */
.responsiveChatBtn .btn-call[style*="font-size"],
.psychic-card .btn-call:not(.btn-audio-call):not(.btn-video-call) {
    background: var(--ss-surface-hover) !important;
    color: rgba(255,255,255,0.30) !important;
    border: 1px solid var(--ss-edge-subtle) !important;
    border-radius: var(--ss-radius-md) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* ---------- Star ratings (review counts) ---------- */
.psy-review-section [style*="color: gray"],
.psy-review-section [style*="color:gray"] {
    color: var(--ss-hint) !important;
    font-size: 0.75rem !important;
}

/* ============================================================
   SIDEBAR + 2-COLUMN GRID LAYOUT
   ============================================================ */

.ss-page-layout {
    background: var(--ss-surface);
    min-height: 80vh;
}

.ss-layout-inner {
    display: flex;
    gap: 0;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    align-items: flex-start;
}

/* ---------- Sidebar ---------- */
.ss-sidebar {
    width: 260px;
    flex-shrink: 0;
    position: sticky;
    top: 90px;
    height: fit-content;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    scrollbar-width: thin;
}

.ss-sidebar-inner {
    background: var(--ss-surface-raised);
    border: 1px solid rgba(212,175,55,0.15);
    border-radius: var(--ss-radius-lg);
    padding: 20px;
    margin-top: 24px;
}

.ss-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ss-card-border);
}

.ss-sidebar-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ss-content);
    font-family: var(--ss-font);
}

.ss-sidebar-actions {
    display: flex;
    gap: 8px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(212,175,55,0.10);
}

.ss-apply-btn {
    flex: 1;
    background: var(--ss-gold-700);
    border: 1px solid var(--ss-gold-700);
    color: var(--ss-surface);
    border-radius: var(--ss-radius-sm);
    padding: 8px 10px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--ss-transition-fast);
    font-family: var(--ss-font);
}
.ss-apply-btn:hover:not(:disabled) { background: #c9a432; border-color: #c9a432; }
.ss-apply-btn:disabled {
    background: rgba(212,175,55,0.15);
    border-color: rgba(212,175,55,0.15);
    color: rgba(255,255,255,0.3);
    cursor: default;
}

.ss-clear-btn {
    flex: 1;
    background: transparent;
    border: 1px solid rgba(212,175,55,0.40);
    color: var(--ss-gold-700);
    border-radius: var(--ss-radius-sm);
    padding: 8px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--ss-transition-fast);
    font-family: var(--ss-font);
}
.ss-clear-btn:hover:not(:disabled) { background: rgba(212,175,55,0.10); }
.ss-clear-btn:disabled {
    border-color: rgba(212,175,55,0.15);
    color: rgba(255,255,255,0.3);
    cursor: default;
}

.ss-sidebar-section { margin-bottom: 20px; }

.ss-filter-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
    font-family: var(--ss-font);
}

.ss-search-box { position: relative; }

.ss-search-input {
    width: 100%;
    background: var(--ss-surface-overlay) !important;
    border: 1px solid var(--ss-edge) !important;
    color: var(--ss-content) !important;
    border-radius: var(--ss-radius) !important;
    padding: 8px 36px 8px 12px;
    font-size: 0.875rem;
    outline: none;
    font-family: var(--ss-font);
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}
.ss-search-input::placeholder { color: var(--ss-hint); }
.ss-search-input:focus {
    border-color: var(--ss-gold-700) !important;
    box-shadow: var(--ss-focus-ring);
}

.ss-search-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--ss-gold-700);
    cursor: pointer;
    padding: 0;
}

.ss-filter-select {
    width: 100%;
    background: var(--ss-surface-overlay) !important;
    border: 1px solid var(--ss-edge) !important;
    color: var(--ss-content) !important;
    border-radius: var(--ss-radius) !important;
    padding: 8px 32px 8px 12px;
    font-size: 0.875rem;
    cursor: pointer;
    font-family: var(--ss-font);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23D4AF37' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
}
.ss-filter-select:focus { outline: none; border-color: var(--ss-gold-700) !important; box-shadow: var(--ss-focus-ring); }
.ss-filter-select option { background: var(--ss-surface-raised); color: var(--ss-content); }

.ss-radio-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ss-radio-item {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--ss-radius);
    transition: background 0.2s ease;
}
.ss-radio-item:hover { background: rgba(212,175,55,0.08); }

.ss-radio-item input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.30);
    border-radius: 50%;
    flex-shrink: 0;
    transition: var(--ss-transition-fast);
    cursor: pointer;
    position: relative;
}
.ss-radio-item input[type="radio"]:checked {
    border-color: var(--ss-gold-700);
    background: var(--ss-gold-700);
    box-shadow: 0 0 8px rgba(212,175,55,0.40);
}
.ss-radio-item input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background: var(--ss-content-inverse);
    border-radius: 50%;
}

.ss-radio-item span {
    font-size: 0.875rem;
    color: var(--ss-content-secondary);
    font-family: var(--ss-font);
}
.ss-radio-item:has(input:checked) span {
    color: var(--ss-gold-700);
    font-weight: 600;
}

.ss-mobile-filter-header { display: none; }

.ss-mobile-filter-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(212,175,55,0.10);
    border: 1px solid var(--ss-edge);
    color: var(--ss-gold-700);
    border-radius: var(--ss-radius);
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--ss-font);
    width: 100%;
    justify-content: center;
    margin-bottom: 8px;
}

/* ---------- Main content ---------- */
.ss-main-content {
    flex: 1;
    min-width: 0;
    padding: 24px 0 24px 28px;
}

.ss-page-title {
    background: var(--ss-astro-gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 20px;
    font-family: var(--ss-font);
}

/* 1-column card grid */
.ss-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: stretch;
}

/* ---------- Desktop: always show sidebar ---------- */
@media (min-width: 992px) {
    .ss-sidebar .ss-sidebar-inner { display: block !important; }
    .ss-mobile-filter-header { display: none !important; }
}

/* ---------- Responsive — Tablet & below ---------- */
@media (max-width: 991px) {
    .ss-layout-inner {
        flex-direction: column;
        padding: 0 16px;
    }
    .ss-sidebar {
        width: 100%;
        position: static;
        max-height: none;
        overflow-y: visible;
    }
    .ss-sidebar-inner { margin-top: 12px; padding: 16px; }
    .ss-sidebar.ss-collapsed .ss-sidebar-inner { display: none; }
    .ss-mobile-filter-header { display: block; }
    .ss-main-content { padding: 16px 0; }
    .ss-card-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    #expert-list {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .ss-page-title { font-size: 1.4rem; margin-bottom: 14px; }
}

/* ---------- Responsive — Mobile ---------- */
@media (max-width: 576px) {
    .ss-card-grid { grid-template-columns: 1fr; gap: 8px; }
    #expert-list { grid-template-columns: 1fr !important; gap: 8px !important; }
    .ss-layout-inner { padding: 0 10px; }
    .ss-page-title { font-size: 1.25rem; margin-bottom: 12px; }
    .ss-sidebar-inner { padding: 14px; }
    .ss-sidebar-title { font-size: 0.9rem; }
    .ss-filter-label { font-size: 0.7rem; }
    .ss-mobile-filter-toggle { font-size: 0.8rem; padding: 8px 12px; }

    /* Search inputs tighter */
    .ss-search-input { padding: 7px 32px 7px 10px; font-size: 0.8rem; }
    .ss-filter-select { padding: 7px 28px 7px 10px; font-size: 0.8rem; }
    .ss-radio-item { padding: 5px 8px; }
    .ss-radio-item span { font-size: 0.8rem; }
    .ss-apply-btn, .ss-clear-btn { padding: 7px 8px; font-size: 0.75rem; }
}