/* ============================================
   CARDS.EC-WEB.FR - Card Themes
   ============================================ */

/* === THEME: CORPORATE (Default) === */
[data-card-theme="corporate"] {
    --theme-bg: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    --theme-card-bg: rgba(30, 41, 59, 0.9);
    --theme-accent: var(--accent, #3b82f6);
    --theme-accent-light: var(--accent-light, #60a5fa);
    --theme-text: #f8fafc;
    --theme-text-secondary: rgba(248, 250, 252, 0.7);
    --theme-border: rgba(255, 255, 255, 0.1);
    --theme-glow: rgba(59, 130, 246, 0.2);
}

/* === THEME: MINIMAL === */
[data-card-theme="minimal"] {
    --theme-bg: #fafafa;
    --theme-card-bg: #ffffff;
    --theme-accent: #171717;
    --theme-accent-light: #404040;
    --theme-text: #171717;
    --theme-text-secondary: rgba(23, 23, 23, 0.6);
    --theme-border: rgba(0, 0, 0, 0.08);
    --theme-glow: transparent;
}

[data-card-theme="minimal"] .card-inner {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

[data-card-theme="minimal"] .card-border-glow {
    display: none;
}

[data-card-theme="minimal"] .ambient-bg {
    display: none;
}

[data-card-theme="minimal"] .avatar-ring {
    background: var(--theme-accent);
}

/* === THEME: NEON === */
[data-card-theme="neon"] {
    --theme-bg: #0a0a0a;
    --theme-card-bg: rgba(10, 10, 10, 0.95);
    --theme-accent: #00ff88;
    --theme-accent-light: #00ffcc;
    --theme-text: #ffffff;
    --theme-text-secondary: rgba(255, 255, 255, 0.7);
    --theme-border: rgba(0, 255, 136, 0.3);
    --theme-glow: rgba(0, 255, 136, 0.4);
}

[data-card-theme="neon"] .card-inner {
    border: 1px solid var(--theme-border);
    box-shadow: 
        0 0 20px var(--theme-glow),
        0 0 40px rgba(0, 255, 136, 0.1),
        inset 0 0 60px rgba(0, 255, 136, 0.03);
}

[data-card-theme="neon"] .card-border-glow {
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-light));
    opacity: 0.6;
    animation: neon-pulse 2s ease-in-out infinite;
}

[data-card-theme="neon"] .avatar-ring {
    background: var(--theme-accent);
    box-shadow: 0 0 20px var(--theme-glow);
}

[data-card-theme="neon"] .card-name {
    text-shadow: 0 0 10px var(--theme-glow);
}

[data-card-theme="neon"] .contact-icon {
    background: transparent;
    border: 1px solid var(--theme-accent);
    box-shadow: 0 0 10px var(--theme-glow);
}

[data-card-theme="neon"] .contact-icon svg {
    color: var(--theme-accent);
}

@keyframes neon-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.8; }
}

/* === THEME: CREATIVE === */
[data-card-theme="creative"] {
    --theme-bg: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    --theme-card-bg: rgba(255, 255, 255, 0.15);
    --theme-accent: #ffffff;
    --theme-accent-light: rgba(255, 255, 255, 0.8);
    --theme-text: #ffffff;
    --theme-text-secondary: rgba(255, 255, 255, 0.85);
    --theme-border: rgba(255, 255, 255, 0.2);
    --theme-glow: rgba(255, 255, 255, 0.3);
}

[data-card-theme="creative"] .card-inner {
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

[data-card-theme="creative"] .ambient-bg .ambient-orb {
    display: none;
}

[data-card-theme="creative"] .card-logo {
    filter: brightness(0) invert(1);
}

[data-card-theme="creative"] .avatar-ring {
    background: rgba(255, 255, 255, 0.5);
}

[data-card-theme="creative"] .contact-icon {
    background: rgba(255, 255, 255, 0.2);
}

/* === THEME: GLASS === */
[data-card-theme="glass"] {
    --theme-bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    --theme-card-bg: rgba(255, 255, 255, 0.08);
    --theme-accent: #e94560;
    --theme-accent-light: #ff6b6b;
    --theme-text: #ffffff;
    --theme-text-secondary: rgba(255, 255, 255, 0.7);
    --theme-border: rgba(255, 255, 255, 0.1);
    --theme-glow: rgba(233, 69, 96, 0.3);
}

[data-card-theme="glass"] .card-inner {
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

[data-card-theme="glass"] .card-shine {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.25) 0%,
        transparent 50%
    );
    opacity: 1;
}

/* === THEME: SUNSET === */
[data-card-theme="sunset"] {
    --theme-bg: linear-gradient(135deg, #ff6a00 0%, #ee0979 100%);
    --theme-card-bg: rgba(0, 0, 0, 0.3);
    --theme-accent: #ffffff;
    --theme-accent-light: #ffe4b5;
    --theme-text: #ffffff;
    --theme-text-secondary: rgba(255, 255, 255, 0.9);
    --theme-border: rgba(255, 255, 255, 0.2);
    --theme-glow: rgba(255, 255, 255, 0.2);
}

[data-card-theme="sunset"] .ambient-bg {
    display: none;
}

/* === THEME: OCEAN === */
[data-card-theme="ocean"] {
    --theme-bg: linear-gradient(135deg, #0077b6 0%, #023e8a 50%, #03045e 100%);
    --theme-card-bg: rgba(255, 255, 255, 0.1);
    --theme-accent: #00b4d8;
    --theme-accent-light: #90e0ef;
    --theme-text: #ffffff;
    --theme-text-secondary: rgba(255, 255, 255, 0.8);
    --theme-border: rgba(0, 180, 216, 0.3);
    --theme-glow: rgba(0, 180, 216, 0.3);
}

[data-card-theme="ocean"] .card-inner {
    backdrop-filter: blur(20px);
}

/* === THEME: DARK LUXURY === */
[data-card-theme="luxury"] {
    --theme-bg: #0a0a0a;
    --theme-card-bg: linear-gradient(145deg, #1a1a1a 0%, #0d0d0d 100%);
    --theme-accent: #d4af37;
    --theme-accent-light: #f4d03f;
    --theme-text: #ffffff;
    --theme-text-secondary: rgba(255, 255, 255, 0.7);
    --theme-border: rgba(212, 175, 55, 0.3);
    --theme-glow: rgba(212, 175, 55, 0.2);
}

[data-card-theme="luxury"] .card-inner {
    border: 1px solid var(--theme-border);
}

[data-card-theme="luxury"] .avatar-ring {
    background: linear-gradient(135deg, #d4af37, #f4d03f);
}

[data-card-theme="luxury"] .card-border-glow {
    background: linear-gradient(135deg, #d4af37, transparent, #f4d03f);
}

[data-card-theme="luxury"] .contact-icon {
    background: linear-gradient(135deg, #d4af37, #f4d03f);
}

/* === APPLY THEME VARIABLES === */
[data-card-theme] {
    background: var(--theme-bg);
}

[data-card-theme] .card-inner {
    background: var(--theme-card-bg);
    border-color: var(--theme-border);
}

[data-card-theme] .card-name,
[data-card-theme] .back-name {
    color: var(--theme-text);
}

[data-card-theme] .card-role {
    color: var(--theme-accent);
}

[data-card-theme] .card-function,
[data-card-theme] .card-company,
[data-card-theme] .contact-text,
[data-card-theme] .back-company {
    color: var(--theme-text-secondary);
}

[data-card-theme] .avatar-ring {
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-light));
}

[data-card-theme] .contact-icon {
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-light));
}

[data-card-theme] .social-link:hover {
    background: var(--theme-accent);
}

[data-card-theme] .action-btn {
    background: var(--theme-card-bg);
    border: 1px solid var(--theme-border);
    color: var(--theme-text-secondary);
}

[data-card-theme] .flip-btn:hover {
    background: var(--theme-accent);
    color: var(--theme-text);
}

/* ============================================
   ANIMATIONS
   ============================================ */

/* Holographic effect */
.effect-holographic .card-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        125deg,
        transparent 0%,
        rgba(255, 0, 128, 0.1) 20%,
        rgba(0, 255, 255, 0.1) 40%,
        rgba(255, 255, 0, 0.1) 60%,
        rgba(128, 0, 255, 0.1) 80%,
        transparent 100%
    );
    background-size: 400% 400%;
    animation: holographic 8s ease infinite;
    pointer-events: none;
    z-index: 10;
    border-radius: inherit;
    opacity: 0.5;
}

@keyframes holographic {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Shine sweep effect */
.effect-shine .card-inner::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 45%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0.1) 55%,
        transparent 100%
    );
    transform: rotate(25deg);
    animation: shine-sweep 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 10;
}

@keyframes shine-sweep {
    0% { transform: translateX(-100%) rotate(25deg); }
    100% { transform: translateX(100%) rotate(25deg); }
}

/* Particle background */
.effect-particles .particle-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.effect-particles .particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--theme-accent, var(--accent));
    border-radius: 50%;
    opacity: 0.6;
    animation: float-particle linear infinite;
}

@keyframes float-particle {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-100vh) scale(1);
        opacity: 0;
    }
}

/* Gradient animation for background */
.effect-gradient-animate {
    background-size: 400% 400%;
    animation: gradient-shift 15s ease infinite;
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ============================================
   KIOSK MODE
   ============================================ */

.kiosk-mode {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-bg, var(--bg-primary));
}

.kiosk-mode .card-wrapper {
    transform: scale(1.3);
}

.kiosk-mode .theme-toggle,
.kiosk-mode .edit-link,
.kiosk-mode .qr-section,
.kiosk-mode .card-footer {
    display: none !important;
}

.kiosk-mode .actions-bar {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
}

.kiosk-exit-btn {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s;
}

.kiosk-mode:hover .kiosk-exit-btn {
    opacity: 1;
}

@media (max-width: 768px) {
    .kiosk-mode .card-wrapper {
        transform: scale(1);
    }
}