/* ==========================================================================
   Individual Product Page Styles
   ========================================================================== */

/* ---------- Product Hero ---------- */
.product-hero {
    padding: 8rem 0 5rem;
}

.product-hero .split {
    gap: var(--space-3xl);
}

.product-hero .page-hero__content {
    max-width: none;
}

.product-hero__visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-hero__visual .device-mockup {
    transition: transform var(--transition-slow);
}

.product-hero__visual .device-mockup:hover {
    transform: perspective(800px) rotateY(-5deg) translateY(-5px);
}

/* Product Logo in Hero */
.product-hero__logo {
    height: 50px;
    width: auto;
    margin-bottom: var(--space-xl);
    filter: none;
}

/* ---------- Product-specific color themes (from actual logos) ---------- */

/* Authyo: Navy Blue #2B3990 + Green #1EA34E */
.product-hero--authyo {
    background: linear-gradient(135deg, #0f1a3d 0%, #1a2a6c 40%, #2B3990 100%);
}

.product-hero--authyo .page-hero__bg {
    background-image:
        radial-gradient(circle at 70% 30%, rgba(30, 163, 78, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 20% 70%, rgba(43, 57, 144, 0.2) 0%, transparent 40%);
}

.product-page--authyo {
    --product-color: #2B3990;
    --product-color-light: #3B4AB0;
    --product-accent: #1EA34E;
    --product-gradient: linear-gradient(135deg, #2B3990, #1EA34E);
}

/* Jalpi: Dark Navy #1E2152 + Red #C41E2A */
.product-hero--jalpi {
    background: linear-gradient(135deg, #0d0f28 0%, #1a1c45 40%, #1E2152 100%);
}

.product-hero--jalpi .page-hero__bg {
    background-image:
        radial-gradient(circle at 70% 30%, rgba(196, 30, 42, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 20% 70%, rgba(30, 33, 82, 0.2) 0%, transparent 40%);
}

.product-page--jalpi {
    --product-color: #1E2152;
    --product-color-light: #2E3175;
    --product-accent: #C41E2A;
    --product-gradient: linear-gradient(135deg, #1E2152, #C41E2A);
}

/* EmailIdea: Coral #E8675A + Slate Navy #3D4F6F */
.product-hero--emailidea {
    background: linear-gradient(135deg, #1a2636 0%, #2d3f54 40%, #3D4F6F 100%);
}

.product-hero--emailidea .page-hero__bg {
    background-image:
        radial-gradient(circle at 70% 30%, rgba(232, 103, 90, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 20% 70%, rgba(61, 79, 111, 0.2) 0%, transparent 40%);
}

.product-page--emailidea {
    --product-color: #E8675A;
    --product-color-light: #F08B80;
    --product-accent: #3D4F6F;
    --product-gradient: linear-gradient(135deg, #E8675A, #3D4F6F);
}

/* SMSIdea: Purple #4C1D95 + Red #C41E2A */
.product-hero--smsidea {
    background: linear-gradient(135deg, #1a0a3d 0%, #35126b 40%, #4C1D95 100%);
}

.product-hero--smsidea .page-hero__bg {
    background-image:
        radial-gradient(circle at 70% 30%, rgba(196, 30, 42, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 20% 70%, rgba(76, 29, 149, 0.2) 0%, transparent 40%);
}

.product-page--smsidea {
    --product-color: #4C1D95;
    --product-color-light: #6D28D9;
    --product-accent: #C41E2A;
    --product-gradient: linear-gradient(135deg, #4C1D95, #C41E2A);
}

/* ---------- Product-themed elements ---------- */

/* Section label uses product color */
.product-page .section-header__label {
    color: var(--product-color);
}

/* Card icon uses product colors */
.product-page .card__icon {
    background: color-mix(in srgb, var(--product-color) 10%, transparent);
    color: var(--product-color);
}

.product-page .card:hover .card__icon {
    background: var(--product-gradient);
    color: #fff;
}

/* Badge uses product color */
.product-page .badge {
    background: color-mix(in srgb, var(--product-color) 10%, transparent);
    color: var(--product-color);
}

/* CTA gradient uses product colors */
.product-page .cta-section {
    background: var(--product-gradient);
}

/* Small feature cards in split section */
.product-page .card[style*="padding: var(--space-lg)"] {
    border-left: 3px solid color-mix(in srgb, var(--product-color) 25%, transparent);
}

.product-page .card[style*="padding: var(--space-lg)"]:hover {
    border-left-color: var(--product-color);
}

/* ==========================================================================
   PRODUCT PAGES - DARK MODE
   ========================================================================== */

/* Cards */
[data-theme="dark"] .product-page .card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .product-page .card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .product-page .card__title {
    color: #fff;
}

[data-theme="dark"] .product-page .card__desc {
    color: rgba(255, 255, 255, 0.5);
}

/* Card icons - use !important to beat inline styles */
[data-theme="dark"] .product-page .card__icon {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--color-primary-light) !important;
}

[data-theme="dark"] .product-page .card__icon svg {
    stroke: var(--color-primary-light) !important;
}

[data-theme="dark"] .product-page .card:hover .card__icon {
    background: var(--color-primary) !important;
    color: #fff !important;
}

[data-theme="dark"] .product-page .card:hover .card__icon svg {
    stroke: #fff !important;
}

/* Why section small cards */
[data-theme="dark"] .product-page .card[style*="padding: var(--space-lg)"] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    border-left: 3px solid color-mix(in srgb, var(--product-color) 40%, transparent);
}

[data-theme="dark"] .product-page .card[style*="padding: var(--space-lg)"] h4 {
    color: #fff;
}

[data-theme="dark"] .product-page .card[style*="padding: var(--space-lg)"] p {
    color: rgba(255, 255, 255, 0.45);
}

/* Split section text */
[data-theme="dark"] .product-page .split h2 {
    color: #fff;
}

[data-theme="dark"] .product-page .split p {
    color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .product-page .section-header__label {
    color: var(--product-color-light, var(--product-color));
}

/* Device mockup dark overrides */
[data-theme="dark"] .product-page .device-mockup--phone .device-mockup__screen,
[data-theme="dark"] .product-page .device-mockup--browser .device-mockup__screen {
    background: var(--theme-bg-card) !important;
}

[data-theme="dark"] .product-page .device-mockup--browser .device-mockup__bar {
    background: var(--theme-bg-elevated);
    border-color: rgba(255, 255, 255, 0.06);
}

/* Check list */
[data-theme="dark"] .product-page .check-list__item {
    color: rgba(255, 255, 255, 0.7);
}

/* Badges / industry tags */
[data-theme="dark"] .product-page .badge {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
}