/**
 * Tour Catalog Page - Content.php Styles
 *
 * Styles for the main tour catalog page (excursions listing).
 * Extracted from inline styles for better caching and performance.
 *
 * @package Traveler Child Theme
 * @since 1.0.0
 */

/* ============================================================
   CSS CUSTOM PROPERTIES (TOKENS)
   ============================================================ */
:root {
    --pca-primary: #3b82f6;
    --pca-primary-hover: #2563eb;
    --pca-surface: #ffffff;
    --pca-border: #e4e4e4;
    --pca-border-hover: #d1d5db;
    --pca-text-primary: #111827;
    --pca-text-secondary: #4b5563;
    --pca-text-muted: #6b7280;
    --pca-success: #10b981;
    --pca-success-bg: #d1fae5;
    --pca-featured-accent: #fde68a;
    --pca-featured-bg: #fef3c7;
    --pca-featured-text: #92400e;
    --pca-spacing-xs: 4px;
    --pca-spacing-sm: 8px;
    --pca-spacing-md: 16px;
    --pca-spacing-lg: 24px;
    --pca-radius-sm: 8px;
    --pca-radius-md: 12px;
    --pca-radius-pill: 9999px;
    --pca-shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --pca-shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --pca-shadow-lg: 0 8px 24px rgba(0,0,0,0.15);
}

/* ============================================================
   LAYOUT - WRAPPER & CONTAINER
   ============================================================ */
/* PCA Content Wrapper - Reset Bootstrap */
.pca-content-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #fcfcfc !important; /* Light gray background - forced priority */
}

/* Modern Container Layout */
.st-results.st-hotel-result.st-search-tour {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 var(--pca-spacing-md);
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--pca-text-primary);
    box-sizing: border-box;
    background-color: #fcfcfc !important; /* Ensure background on parent container */
}

/* Taxonomy pages: constrain content after removing st-results wrapper */
body.tax-st_tour_type .container-fluid .pca-content-wrapper {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Results section */
.pca-results-section {
    margin: 2rem 0;  /* Separation from header/footer components */
    width: 100%;
    background-color: #fcfcfc !important; /* Match wrapper background - forced priority */
    border-radius: 8px; /* Optional: subtle rounded corners */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Ensure full page background on tour archive pages */
body.post-type-archive-st_tours,
body.tax-st_tour_type,
body.page-template-excursions-template {
    background-color: #fcfcfc !important;
}

/* Apply background to excursions template main content area */
.page-template-excursions-template .container-fluid,
.page-template-excursions-template #primary {
    background-color: #fcfcfc !important;
}

/* Apply background to the modern search result wrapper in excursions template */
.page-template-excursions-template #modern-search-result {
    background-color: #fcfcfc !important;
    padding: 1rem;
    border-radius: 8px;
}

/* Apply background to service-list-wrapper containers */
.service-list-wrapper.service-tour,
#modern-search-result .service-list-wrapper {
    background-color: #fcfcfc !important;
}

/* Apply background to main content wrapper */
div#st-content-wrapper {
    background-color: #fcfcfc !important;
}

/* Apply background to header section */
.pca-header-section {
    background: #fcfcfc !important;
}

/* Responsive padding adjustment for mobile */
@media (max-width: 768px) {
    .pca-results-section {
        margin: 1rem 0;
        border-radius: 0; /* Remove border radius on mobile for edge-to-edge look */
    }
}

/* ============================================================
   PAGINATION
   ============================================================ */
.pca-pagination {
    display: flex;
    justify-content: center;
    margin: 40px 0;
}

.pca-pagination .page-numbers {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
}

.pca-pagination .page-numbers li {
    margin: 0;
}

.pca-pagination .page-numbers a,
.pca-pagination .page-numbers span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    color: #374151;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.15s ease;
}

.pca-pagination .page-numbers a:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #111827;
}

.pca-pagination .page-numbers .current {
    font-weight: 700;
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

.pca-pagination .page-numbers .dots {
    border: none;
    padding: 0 0.25rem;
}

.pca-pagination .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   EMPTY STATE (NO RESULTS)
   ============================================================ */
.pca-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
}

.pca-empty-state h3 {
    font-size: 24px;
    color: #374151;
    margin-bottom: 12px;
}

.pca-empty-state p {
    font-size: 16px;
    margin-bottom: 24px;
}

.pca-clear-filters-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    background: #3b82f6;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.15s ease;
}

.pca-clear-filters-btn:hover {
    background: #2563eb;
    color: white;
    text-decoration: none;
}

/* ============================================================
   ERROR STATE (NETWORK FAILURE)
   ============================================================ */
.pca-error-state {
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
}

.pca-error-state__icon {
    color: #ef4444;
    margin-bottom: 16px;
}

.pca-error-state h3 {
    font-size: 24px;
    color: #374151;
    margin-bottom: 12px;
}

.pca-error-state p {
    font-size: 16px;
    margin-bottom: 24px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.pca-retry-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pca-retry-btn:hover {
    background: #2563eb;
}

.pca-retry-btn:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .pca-tour-card,
    .pca-card-image,
    .pca-load-more-btn {
        transition: none;
        transform: none;
        will-change: auto;
    }

    .pca-tour-card:hover {
        transform: none;
    }

    .pca-tour-card:hover .pca-card-image {
        transform: none;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .pca-tour-card {
        border-width: 2px;
    }

    .pca-badge {
        border-width: 2px;
    }

    .pca-text-secondary {
        color: #4b5563;
    }
}

/* ============================================================
   RESPONSIVE - MOBILE
   ============================================================ */
@media (max-width: 480px) {
    .pca-content-wrapper {
        padding: 0 8px;
    }

    .st-results.st-hotel-result.st-search-tour {
        padding: 0 8px;
    }

    /* Override all Bootstrap container padding variants for more horizontal space on mobile */
    #st-content-wrapper .container,
    #st-content-wrapper .container-fluid,
    #st-content-wrapper .container-lg,
    #st-content-wrapper .container-md,
    #st-content-wrapper .container-sm,
    #st-content-wrapper .container-xl,
    #st-content-wrapper .container-xxl {
        padding-left: 8px !important;
        padding-right: 8px !important;
        max-width: 100%;
    }
}

/* ==========================================================================
   Hotel Extended Coverage Notice
   WCAG 2.1 AA Compliant - Contrast ratios verified:
   - Text (#166534) on bg (#f0fdf4): 5.8:1 ✓ (requires 4.5:1)
   - Bold text same ratio ✓
   ========================================================================== */
/* ==========================================================================
   HOTEL NOTICE — AI-Powered Confirmation Pattern
   White background with purple AI accent border. Clean and modern.
   ========================================================================== */
.pca-hotel-notice {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    margin-bottom: 16px;
    background: #ffffff;
    border: 1px solid rgba(124, 58, 237, 0.25);
    border-radius: 28px;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 1px 3px rgba(124, 58, 237, 0.08);
    animation: noticeSlideUp 0.4s ease-out;
}

@keyframes noticeSlideUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pca-hotel-notice__icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

/* Sparkle icon styling — AI purple universal color */
.pca-hotel-notice__sparkle {
    color: #7c3aed; /* AI purple */
    animation: hotelNoticeSparkle 3s ease-in-out infinite;
    transform-origin: center;
}

@keyframes hotelNoticeSparkle {
    0%, 100% {
        opacity: 0.85;
        transform: scale(1) rotate(0deg);
    }
    25% {
        opacity: 1;
        transform: scale(1.15) rotate(8deg);
    }
    50% {
        opacity: 0.9;
        transform: scale(1) rotate(0deg);
    }
    75% {
        opacity: 1;
        transform: scale(1.1) rotate(-8deg);
    }
}

.pca-hotel-notice__text {
    color: #374151; /* Neutral gray - clean on white */
    min-height: 1.4em; /* Prevent layout shift during streaming */
    font-weight: 450;
    letter-spacing: -0.01em;
}

.pca-hotel-notice__text strong {
    font-weight: 600;
    color: #111827; /* Dark for emphasis */
}

/* Typewriter streaming animation - icon entrance */
.pca-hotel-notice--streaming .pca-hotel-notice__icon:not(.pca-hotel-notice__sparkle) {
    animation: hotelNoticeIconPop 0.3s ease-out forwards;
}

/* Sparkle icon entrance - more dramatic burst */
.pca-hotel-notice--streaming .pca-hotel-notice__sparkle {
    animation: hotelNoticeSparkleEntrance 0.4s ease-out forwards, hotelNoticeSparkle 3s ease-in-out 0.4s infinite;
}

@keyframes hotelNoticeIconPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes hotelNoticeSparkleEntrance {
    0% {
        transform: scale(0) rotate(-45deg);
        opacity: 0;
    }
    60% {
        transform: scale(1.3) rotate(15deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Loading dots animation */
.pca-hotel-notice__dots {
    display: inline-block;
    color: #7c3aed;
    animation: hotelNoticePulse 0.8s ease-in-out infinite;
    font-size: 0.85em;
    letter-spacing: 0.15em;
}

@keyframes hotelNoticePulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Blinking cursor during streaming */
.pca-hotel-notice__cursor {
    display: inline-block;
    color: #7c3aed;
    font-weight: 300;
    animation: hotelNoticeBlink 0.6s step-end infinite;
    margin-left: 1px;
}

@keyframes hotelNoticeBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Completed state - subtle fade-in for the final text */
.pca-hotel-notice--complete .pca-hotel-notice__text {
    animation: hotelNoticeFadeIn 0.2s ease-out;
}

@keyframes hotelNoticeFadeIn {
    from { opacity: 0.8; }
    to { opacity: 1; }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .pca-hotel-notice--streaming .pca-hotel-notice__icon,
    .pca-hotel-notice__dots,
    .pca-hotel-notice__cursor,
    .pca-hotel-notice--complete .pca-hotel-notice__text,
    .pca-hotel-notice__sparkle {
        animation: none;
    }
    
    .pca-hotel-notice--streaming .pca-hotel-notice__icon,
    .pca-hotel-notice__sparkle {
        transform: scale(1);
        opacity: 1;
    }
}

/* ============================================================
   SKELETON LOADING - AJAX Filter Transition
   ============================================================ */

/* Skeleton card wrapper - matches actual tour card styling */
.pca-tour-card-wrapper.pca-skeleton {
    background: var(--pca-surface, #fff);
    border-radius: var(--radius-lg, 8px) !important;
    border: 1px solid #efefef !important;
    overflow: hidden;
    box-shadow: none !important;
    transform: none !important;
}

/* Skeleton shimmer animation */
@keyframes pca-skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Skeleton shimmer base gradient */
.pca-skeleton__image,
.pca-skeleton__title,
.pca-skeleton__badge,
.pca-skeleton__trust,
.pca-skeleton__rating,
.pca-skeleton__price {
    background: linear-gradient(
        90deg,
        #e8e8e8 25%,
        #d8d8d8 50%,
        #e8e8e8 75%
    );
    background-size: 200% 100%;
    animation: pca-skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}

/* Skeleton card inner wrapper */
.pca-skeleton__card {
    display: flex;
    flex-direction: column;
}

/* Skeleton image placeholder - desktop default */
.pca-skeleton__image {
    aspect-ratio: 16 / 10;
    width: 100%;
}

/* Skeleton content area */
.pca-skeleton__content {
    padding: var(--pca-spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--pca-spacing-sm);
}

/* Skeleton title */
.pca-skeleton__title {
    height: 20px;
    width: 85%;
}

/* Skeleton badge (Book now, pay later) */
.pca-skeleton__badge {
    height: 14px;
    width: 100px;
}

/* Skeleton trust signal (Free Cancellation) */
.pca-skeleton__trust {
    height: 14px;
    width: 120px;
}

/* Skeleton meta row (rating + price) */
.pca-skeleton__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

/* Skeleton rating */
.pca-skeleton__rating {
    height: 16px;
    width: 70px;
}

/* Skeleton price */
.pca-skeleton__price {
    height: 22px;
    width: 60px;
}

/* ============================================
   Mobile Skeleton: Horizontal Layout (< 768px)
   Matches tour-card-mobile-horizontal.css
   ============================================ */
@media (max-width: 767px) {
    .pca-skeleton__card {
        display: flex;
        flex-direction: row;
        padding: 12px;
        gap: 12px;
        min-height: 164px;
    }
    
    .pca-skeleton__image {
        width: 140px !important;
        height: 140px !important;
        flex-shrink: 0;
        aspect-ratio: 1 / 1;
        border-radius: 2px;
    }
    
    .pca-skeleton__content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0;
        gap: 6px;
        min-width: 0;
    }
    
    .pca-skeleton__title {
        height: 18px;
        width: 90%;
    }
    
    .pca-skeleton__badge {
        height: 12px;
        width: 90px;
    }
    
    .pca-skeleton__trust {
        height: 12px;
        width: 100px;
    }
    
    .pca-skeleton__meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: auto;
    }
    
    .pca-skeleton__rating {
        height: 14px;
        width: 60px;
    }
    
    .pca-skeleton__price {
        height: 18px;
        width: 50px;
    }
}

/* ============================================
   Desktop Skeleton: Vertical Layout (>= 768px)
   ============================================ */
@media (min-width: 768px) {
    .pca-skeleton__card {
        display: flex;
        flex-direction: column;
    }
    
    .pca-skeleton__image {
        aspect-ratio: 16 / 10;
        width: 100%;
        height: auto;
        border-radius: 0;
    }
    
    .pca-skeleton__content {
        padding: var(--pca-spacing-md);
    }
}

/* Grid loading state */
#pca-tours-grid.pca-grid--loading {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}

#pca-tours-grid.pca-grid--loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(252, 252, 252, 0.5);
    z-index: 1;
}

/* Skeleton grid container */
.pca-skeleton-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pca-spacing-md);
    padding: var(--pca-spacing-md) 0;
}

/* Skeleton card sizing */
.pca-skeleton-grid .pca-tour-card-wrapper.pca-skeleton {
    flex: 0 0 calc(33.333% - var(--pca-spacing-md));
    max-width: calc(33.333% - var(--pca-spacing-md));
}

@media (max-width: 991px) {
    .pca-skeleton-grid .pca-tour-card-wrapper.pca-skeleton {
        flex: 0 0 calc(50% - var(--pca-spacing-sm));
        max-width: calc(50% - var(--pca-spacing-sm));
    }
}

@media (max-width: 575px) {
    .pca-skeleton-grid .pca-tour-card-wrapper.pca-skeleton {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Fade-in animation for loaded cards */
@keyframes pca-card-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pca-tour-card-wrapper[data-ajax-loaded] {
    animation: pca-card-fade-in 0.3s ease-out forwards;
}

/* Stagger animation for multiple cards */
.pca-tour-card-wrapper[data-ajax-loaded]:nth-child(1) { animation-delay: 0ms; }
.pca-tour-card-wrapper[data-ajax-loaded]:nth-child(2) { animation-delay: 50ms; }
.pca-tour-card-wrapper[data-ajax-loaded]:nth-child(3) { animation-delay: 100ms; }
.pca-tour-card-wrapper[data-ajax-loaded]:nth-child(4) { animation-delay: 150ms; }
.pca-tour-card-wrapper[data-ajax-loaded]:nth-child(5) { animation-delay: 200ms; }
.pca-tour-card-wrapper[data-ajax-loaded]:nth-child(6) { animation-delay: 250ms; }
.pca-tour-card-wrapper[data-ajax-loaded]:nth-child(7) { animation-delay: 300ms; }
.pca-tour-card-wrapper[data-ajax-loaded]:nth-child(8) { animation-delay: 350ms; }
.pca-tour-card-wrapper[data-ajax-loaded]:nth-child(9) { animation-delay: 400ms; }
.pca-tour-card-wrapper[data-ajax-loaded]:nth-child(10) { animation-delay: 450ms; }
.pca-tour-card-wrapper[data-ajax-loaded]:nth-child(11) { animation-delay: 500ms; }
.pca-tour-card-wrapper[data-ajax-loaded]:nth-child(12) { animation-delay: 550ms; }

/* Filter result count update animation */
@keyframes pca-count-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.pca-filter-count--updated {
    animation: pca-count-pulse 0.3s ease-out;
}

/* Reduced motion: disable shimmer and transitions */
@media (prefers-reduced-motion: reduce) {
    .pca-skeleton__image,
    .pca-skeleton__title,
    .pca-skeleton__badge,
    .pca-skeleton__trust,
    .pca-skeleton__rating,
    .pca-skeleton__price,
    .pca-skeleton__text,
    .pca-skeleton__element {
        animation: none;
        background: #e8e8e8;
    }
    
    .pca-tour-card-wrapper[data-ajax-loaded] {
        animation: none;
    }
}

/* ============================================================
   SEE ALL EXCURSIONS LINK
   Shown after AJAX filtering results
   ============================================================ */
.pca-see-all-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: #324fbe;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(50, 79, 190, 0.25);
}

.pca-see-all-link:hover {
    background: #2a42a0;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(50, 79, 190, 0.3);
}

.pca-see-all-link svg {
    transition: transform 0.2s ease;
}

.pca-see-all-link:hover svg {
    transform: translateX(4px);
}

.pca-see-all-text {
    /* Inherits from parent */
}

/* Center the link in the wrapper with divider */
/* Note: :has() has good support (Chrome 105+, Safari 15.4+, Firefox 121+) */
/* Fallback for older browsers: wrapper gets flex via JS data attribute */
.pca-load-more-wrapper:has(.pca-see-all-link),
.pca-load-more-wrapper[data-has-see-all="true"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 32px;
    padding-top: 24px;
}

/* Decorative divider above button */
.pca-load-more-wrapper:has(.pca-see-all-link)::before,
.pca-load-more-wrapper[data-has-see-all="true"]::before {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #e4e4e4, transparent);
    margin-bottom: 20px;
}

/* ============================================================
   GRACIOUS EMPTY STATE
   Friendly, CRO-optimized empty state with smart suggestions
   ============================================================ */
.pca-empty-state {
    text-align: center;
    padding: 2rem 1rem;
    max-width: 400px;
    margin: 2rem auto;
    grid-column: 1 / -1; /* Span full width in grid */
}

/* Visual illustration */
.pca-empty-state__visual {
    margin-bottom: 1.25rem;
}

.pca-empty-state__visual svg {
    width: 80px;
    height: 80px;
    color: #f48121; /* Brand orange */
}

/* Friendly headline */
.pca-empty-state__title {
    font-size: 1.35rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

/* Contextual message */
.pca-empty-state__message {
    font-size: 0.95rem;
    color: #6b7280;
    margin: 0 0 1.5rem 0;
    line-height: 1.5;
}

/* Suggestions container */
.pca-empty-state__suggestions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* Individual suggestion pill */
.pca-suggestion-pill {
    display: block;
    padding: 0.875rem 1.25rem;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border: 1.5px solid #fed7aa;
    border-radius: 12px;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

.pca-suggestion-pill:hover,
.pca-suggestion-pill:focus {
    border-color: #fb923c;
    box-shadow: 0 2px 8px rgba(251, 146, 60, 0.2);
    transform: translateY(-1px);
    text-decoration: none;
    color: #9a3412;
}

.pca-suggestion-pill:focus {
    outline: 2px solid #f97316;
    outline-offset: 2px;
}

/* Suggestion pill text */
.pca-suggestion-pill__text {
    color: #57534e;
    font-size: 0.9rem;
    line-height: 1.4;
}

.pca-suggestion-pill__text strong {
    color: #292524;
    font-weight: 600;
}

/* Fallback clear all link */
.pca-empty-state__clear {
    color: #6b7280;
    font-size: 0.85rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.pca-empty-state__clear:hover,
.pca-empty-state__clear:focus {
    color: #374151;
    text-decoration: underline;
}

/* Primary CTA button for no-suggestions variant */
.pca-empty-state__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.75rem;
    background: linear-gradient(135deg, #ff9900 0%, #f48121 100%);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(255, 153, 0, 0.3);
    transition: all 0.2s ease;
    margin-top: 0.5rem;
}

.pca-empty-state__cta:hover,
.pca-empty-state__cta:focus {
    background: linear-gradient(135deg, #f48121 0%, #e67300 100%);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(255, 153, 0, 0.4);
    transform: translateY(-1px);
}

.pca-empty-state__cta:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(255, 153, 0, 0.3);
}

/* Desktop: larger visual and spacing */
@media (min-width: 768px) {
    .pca-empty-state {
        padding: 3rem 2rem;
        max-width: 480px;
    }
    
    .pca-empty-state__visual svg {
        width: 100px;
        height: 100px;
    }
    
    .pca-empty-state__title {
        font-size: 1.5rem;
    }
    
    .pca-empty-state__message {
        font-size: 1rem;
    }
    
    .pca-suggestion-pill {
        padding: 1rem 1.25rem;
        font-size: 0.9rem;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pca-suggestion-pill {
        transition: none;
    }
    
    .pca-suggestion-pill:hover {
        transform: none;
    }
}