/* Audio Shop Styles */

/* Character card base styles */
.shop-character-card {
    transition: all 0.3s ease;
    border: 2px solid #e5e7eb;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Fixed height for description to maintain uniform card heights */
.shop-character-card .description {
    min-height: 4rem;
    max-height: 4rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: 1.33rem;
}

/* Owned button styling */
.owned-btn {
    opacity: 1 !important;
    cursor: default !important;
}

.owned-btn:hover {
    transform: none !important;
}

/* Token cost badge */
.token-cost-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #78350f;
    padding: 6px 12px;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
}

.token-icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Buy button styles */
.buy-btn {
    transition: all 0.3s ease;
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

.buy-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.buy-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Character-specific backgrounds - always applied */
/* PODCAST HOST */
.shop-character-card[data-character="george&jeremy"] {
    background: linear-gradient(135deg, rgba(255, 183, 3, 0.65), rgba(255, 102, 102, 0.65));
    border-color: #f59e0b;
    box-shadow: 0 4px 15px rgba(255, 183, 3, 0.2);
}

.shop-character-card[data-character="george&jeremy"] h4,
.shop-character-card[data-character="george&jeremy"] p {
    color: white;
}

/* laura */
.shop-character-card[data-character="laura"] {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.7), rgba(251, 113, 133, 0.7), rgba(253, 186, 116, 0.7));
    border-color: #ec4899;
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.25);
}

.shop-character-card[data-character="laura"] h4,
.shop-character-card[data-character="laura"] p {
    color: white;
}

/* mrdickins */
.shop-character-card[data-character="mrdickins"] {
    background: linear-gradient(135deg, rgba(34, 139, 87, 0.65), rgba(107, 142, 35, 0.65));
    border-color: #166534;
    box-shadow: 0 4px 15px rgba(34, 139, 87, 0.2);
}

.shop-character-card[data-character="mrdickins"] h4,
.shop-character-card[data-character="mrdickins"] p {
    color: white;
}

/* roxxane */
.shop-character-card[data-character="roxxane"] {
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.65), rgba(234, 88, 12, 0.65));
    border-color: #0d9488;
    box-shadow: 0 4px 15px rgba(13, 148, 136, 0.25);
}

.shop-character-card[data-character="roxxane"] h4,
.shop-character-card[data-character="roxxane"] p {
    color: white;
}

/* HAROLD */
.shop-character-card[data-character="harold"] {
    background: linear-gradient(135deg, rgba(255, 11, 19, 0.65), rgba(255, 140, 0, 0.65));
    border-color: #ef4444;
    box-shadow: 0 4px 15px rgba(255, 89, 94, 0.2);
}

.shop-character-card[data-character="harold"] h4,
.shop-character-card[data-character="harold"] p {
    color: white;
}

/* chris&tammy */
.shop-character-card[data-character="chris&tammy"] {
    background: linear-gradient(135deg, rgba(91, 33, 182, 0.65), rgba(72, 72, 74, 0.65));
    border-color: #5b21b6;
    box-shadow: 0 4px 15px rgba(91, 33, 182, 0.2), 0 0 5px rgba(72, 72, 74, 0.15);
}

.shop-character-card[data-character="arnold"] {
    background: linear-gradient(
        135deg,
        rgba(33, 97, 255, 0.75),   /* electric blue body */
        rgba(255, 115, 0, 0.55)    /* fiery orange flame */
    );
    border-color: #ff7300;         /* flame orange */
    box-shadow: 
        0 4px 15px rgba(33, 97, 255, 0.25), 
        0 0 5px rgba(255, 115, 0, 0.25);
    transition: 0.25s ease;
}

.shop-character-card[data-character="roxxy"] {
    background: linear-gradient(
        135deg,
        rgba(123, 70, 195, 0.75),   /* purple frame */
        rgba(255, 140, 0, 0.55)     /* warm orange keys */
    );
    border-color: #7b46c3;          /* deep purple accent */
    box-shadow: 
        0 4px 15px rgba(123, 70, 195, 0.25),
        0 0 8px rgba(255, 140, 0, 0.25);
    transition: 0.25s ease;
}

.shop-character-card[data-character="tanya"] {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.75),  /* bright white marker body */
        rgba(255, 90, 70, 0.60)     /* friendly red/orange accent */
    );
    border-color: #ff5a46;          /* energetic warm red */
    box-shadow: 
        0 4px 15px rgba(255, 90, 70, 0.25),
        0 0 8px rgba(255, 255, 255, 0.25);
    transition: 0.25s ease;
}

.shop-character-card[data-character="lola"] {
    background: linear-gradient(
        135deg,
        rgba(42, 82, 122, 0.75),   /* deep navy base */
        rgba(66, 130, 181, 0.55)   /* lighter steel blue highlight */
    );
    border-color: #2a527a;          /* navy blue accent */
    box-shadow: 
        0 4px 15px rgba(66, 130, 181, 0.25),
        0 0 8px rgba(42, 82, 122, 0.25);
    transition: 0.25s ease;
}

.shop-character-card[data-character="giovanni"] {
    background: linear-gradient(
        135deg,
        rgba(242, 210, 160, 0.8),   /* creamy beige base */
        rgba(255, 132, 38, 0.55)    /* orange accent from cap/shoes */
    );
    border-color: #ff8426;          /* warm orange edge */
    box-shadow: 
        0 4px 15px rgba(255, 132, 38, 0.25),
        0 0 8px rgba(242, 210, 160, 0.25);
    transition: 0.25s ease;
}

.shop-character-card[data-character="zara"] {
    background: linear-gradient(
        135deg,
        rgba(255, 231, 64, 0.8),    /* bright yellow base */
        rgba(255, 85, 150, 0.6)     /* hot pink accent */
    );
    border-color: #ff5596;          /* strong pink highlight */
    box-shadow:
        0 4px 15px rgba(255, 231, 64, 0.25),
        0 0 8px rgba(255, 85, 150, 0.25);
    transition: 0.25s ease;
}

.shop-character-card[data-character="milo"] {
    background: linear-gradient(
        135deg,
        rgba(255, 145, 50, 0.8),   /* cheerful orange body */
        rgba(255, 200, 60, 0.6)    /* golden yellow pocket accent */
    );
    border-color: #ff9132;         /* bold orange edge */
    box-shadow:
        0 4px 15px rgba(255, 145, 50, 0.25),
        0 0 8px rgba(255, 200, 60, 0.25);
    transition: 0.25s ease;
}

.shop-character-card[data-character="mrpatel"] {
    background: linear-gradient(
        135deg,
        rgba(184, 134, 64, 0.85),   /* warm wood grain */
        rgba(120, 72, 24, 0.65)     /* dark brown undertone */
    );
    border-color: #784818;          /* classic ruler edge tone */
    box-shadow:
        0 4px 15px rgba(184, 134, 64, 0.25),
        0 0 8px rgba(120, 72, 24, 0.25);
    transition: 0.25s ease;
}

.shop-character-card[data-character="jeremy"] {
    background: linear-gradient(
        135deg,
        rgba(255, 115, 115, 0.8),   /* coral pink body */
        rgba(28, 94, 74, 0.65)      /* dark green headphones accent */
    );
    border-color: #1c5e4a;          /* rich forest green outline */
    box-shadow:
        0 4px 15px rgba(255, 115, 115, 0.25),
        0 0 8px rgba(28, 94, 74, 0.25);
    transition: 0.25s ease;
}

.shop-character-card[data-character="felix"] {
    background: linear-gradient(
        135deg,
        rgba(255, 206, 47, 0.85),   /* bright folder yellow */
        rgba(255, 94, 77, 0.6)      /* red-orange interior accent */
    );
    border-color: #ffbe32;          /* golden yellow edge */
    box-shadow:
        0 4px 15px rgba(255, 206, 47, 0.25),
        0 0 8px rgba(255, 94, 77, 0.25);
    transition: 0.25s ease;
}

.shop-character-card[data-character="chris&tammy"] h4,
.shop-character-card[data-character="chris&tammy"] p {
    color: white;
}

/* Character-specific hover states - enhanced shadows */
.shop-character-card[data-character="george&jeremy"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(255, 183, 3, 0.4);
}

.shop-character-card[data-character="laura"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(236, 72, 153, 0.4);
}

.shop-character-card[data-character="mrdickins"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(34, 139, 87, 0.4);
}

.shop-character-card[data-character="roxxane"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(13, 148, 136, 0.4);
}

.shop-character-card[data-character="harold"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(255, 89, 94, 0.4);
}

.shop-character-card[data-character="chris&tammy"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(91, 33, 182, 0.35), 0 0 15px rgba(72, 72, 74, 0.2);
}

.shop-character-card[data-character="arnold"]:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 8px 30px rgba(33, 97, 255, 0.45), 
        0 0 20px rgba(255, 115, 0, 0.35);
}

.shop-character-card[data-character="roxxy"]:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 8px 30px rgba(123, 70, 195, 0.45),
        0 0 20px rgba(255, 140, 0, 0.35);
}

.shop-character-card[data-character="tanya"]:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 8px 30px rgba(255, 90, 70, 0.40),
        0 0 20px rgba(255, 255, 255, 0.35);
}

.shop-character-card[data-character="lola"]:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 8px 30px rgba(66, 130, 181, 0.45),
        0 0 20px rgba(42, 82, 122, 0.35);
}

.shop-character-card[data-character="giovanni"]:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 8px 30px rgba(255, 132, 38, 0.4),
        0 0 20px rgba(242, 210, 160, 0.35);
}

.shop-character-card[data-character="zara"]:hover {
    transform: translateY(-4px);
    box-shadow:
        0 8px 30px rgba(255, 231, 64, 0.45),
        0 0 20px rgba(255, 85, 150, 0.35);
}

.shop-character-card[data-character="milo"]:hover {
    transform: translateY(-4px);
    box-shadow:
        0 8px 30px rgba(255, 145, 50, 0.45),
        0 0 20px rgba(255, 200, 60, 0.35);
}

.shop-character-card[data-character="mrpatel"]:hover {
    transform: translateY(-4px);
    box-shadow:
        0 8px 30px rgba(184, 134, 64, 0.45),
        0 0 20px rgba(120, 72, 24, 0.35);
}

.shop-character-card[data-character="jeremy"]:hover {
    transform: translateY(-4px);
    box-shadow:
        0 8px 30px rgba(255, 115, 115, 0.45),
        0 0 20px rgba(28, 94, 74, 0.35);
}

.shop-character-card[data-character="felix"]:hover {
    transform: translateY(-4px);
    box-shadow:
        0 8px 30px rgba(255, 206, 47, 0.45),
        0 0 20px rgba(255, 94, 77, 0.35);
}
/* Advisory badge and spacer - ensures consistent card heights */
.advisory-badge {
    min-height: 28px;
}

.advisory-badge-spacer {
    min-height: 28px;
}

/* Demo button styles */
.demo-btn {
    transition: all 0.3s ease;
}

.demo-btn:hover {
    transform: translateY(-1px);
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .shop-character-card {
        border-color: #374151;
    }
}

/* Grid layout for cards - 3 per row */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
}

@media (min-width: 640px) {
    .shop-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .shop-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Character wrapper - contains card and buy button */
.character-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Purchase confirmation animation */
@keyframes purchaseSuccess {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.purchase-success {
    animation: purchaseSuccess 0.5s ease-in-out;
}