/* Base styles */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  line-height: 1.6;
}

:root {
    /* Template color schemes */
    --neon-blue: #00f3ff;
    --neon-pink: #ff00ff;
    --forest-green: #228B22;
    --sunset-orange: #FF7F50;
    --ocean-blue: #4169E1;
    --purple-rain: #8A2BE2;
    --golden-yellow: #FFD700;
    --cherry-red: #DC143C;
    --mint-green: #98FF98;
    --lavender: #E6E6FA;
}

/* Theme-specific styles */
[data-bs-theme="light"] {
    --bs-body-bg: #f8f9fa;
    --bs-body-color: #212529;
}

[data-bs-theme="dark"] {
    --bs-body-bg: #212529;
    --bs-body-color: #f8f9fa;
}

body {
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    transition: background-color 0.3s ease;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    transition: background 0.3s ease;
}

[data-bs-theme="light"] .background-overlay {
    background: rgba(255, 255, 255, 0.85);
}

.container {
    position: relative;
    z-index: 1;
}

.card {
    position: relative;
    overflow: hidden;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    transition: background-color 0.3s ease;
}

[data-bs-theme="light"] .card {
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.125);
}

[data-bs-theme="dark"] .card {
    background-color: rgba(33, 37, 41, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.125);
}

.card-body {
    position: relative;
    z-index: 2;
    transition: background-color 0.3s ease;
}

[data-bs-theme="light"] .card-body {
    background: rgba(255, 255, 255, 0.8);
}

[data-bs-theme="dark"] .card-body {
    background: rgba(0, 0, 0, 0.6);
}

#themeToggle {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-picture {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--bs-primary);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.profile-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Template Styles */

/* 1. Modern Minimal */
.template-modern-minimal {
    --template-primary: var(--bs-primary);
    background: linear-gradient(135deg, #2c3e50, #3498db);
}

/* 2. Neon Glow */
.template-neon-glow {
    --template-primary: var(--neon-blue);
    background: linear-gradient(45deg, #000, #1a1a1a);
    border: 2px solid var(--neon-blue);
    box-shadow: 0 0 20px var(--neon-blue);
}

/* 3. Gradient Flow */
.template-gradient-flow {
    background: linear-gradient(135deg, #FF416C, #FF4B2B);
}

/* 4. Retro Wave */
.template-retro-wave {
    --template-primary: var(--neon-pink);
    background: linear-gradient(180deg, #2b1055, #7597de);
}

/* 5. Nature Inspired */
.template-nature {
    --template-primary: var(--forest-green);
    background: linear-gradient(135deg, #134E5E, #71B280);
}

/* 6. Sunset Hues */
.template-sunset {
    --template-primary: var(--sunset-orange);
    background: linear-gradient(45deg, #f85032, #e73827);
}

/* 7. Ocean Breeze */
.template-ocean {
    --template-primary: var(--ocean-blue);
    background: linear-gradient(135deg, #36D1DC, #5B86E5);
}

/* 8. Purple Haze */
.template-purple {
    --template-primary: var(--purple-rain);
    background: linear-gradient(45deg, #8E2DE2, #4A00E0);
}

/* 9. Golden Hour */
.template-golden {
    --template-primary: var(--golden-yellow);
    background: linear-gradient(45deg, #FFB75E, #ED8F03);
}

/* 10. Cherry Blossom */
.template-cherry {
    --template-primary: var(--cherry-red);
    background: linear-gradient(135deg, #FFB8B8, #FF4B4B);
}

/* 11. Mint Condition */
.template-mint {
    --template-primary: var(--mint-green);
    background: linear-gradient(135deg, #AAFFA9, #11FFBD);
}

/* 12. Lavender Fields */
.template-lavender {
    --template-primary: var(--lavender);
    background: linear-gradient(45deg, #E6E6FA, #9890e3);
}

/* Additional Templates */

/* 13. Neo Brutalism */
.template-neo-brutalism {
    background: #000;
    border: 3px solid #fff;
    box-shadow: 8px 8px 0 #ff0;
}

/* 14. Cyberpunk */
.template-cyberpunk {
    background: linear-gradient(45deg, #ff00ff, #00ffff);
    border: 2px solid #fff;
}

/* 15. Minimalist Dark */
.template-minimalist-dark {
    background: linear-gradient(135deg, #141E30, #243B55);
}

/* 16. Paper Cut */
.template-paper-cut {
    background: #fff;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

/* 17. Geometric */
.template-geometric {
    background: linear-gradient(60deg, #1B1B1B 25%, transparent 25%) 0 0,
                linear-gradient(60deg, transparent 75%, #1B1B1B 75%) 0 0,
                linear-gradient(60deg, transparent 75%, #1B1B1B 75%) 0 0;
    background-size: 60px 100px;
    background-color: #2d2d2d;
}

/* 18. Vintage Press */
.template-vintage-press {
    background: #f4d03f;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 70px);
}

/* 19. Tech Minimal */
.template-tech-minimal {
    background: linear-gradient(135deg, #0F2027, #203A43, #2C5364);
}

/* 20. Cosmic */
.template-cosmic {
    background: linear-gradient(to bottom, #16222A, #3A6073);
    box-shadow: inset 0 0 50px rgba(255,255,255,0.1);
}

/* 21. Forest Dark */
.template-forest-dark {
    background: linear-gradient(135deg, #2C3E50, #3498DB);
}

/* 22. Candy Pop */
.template-candy-pop {
    background: linear-gradient(45deg, #FF6B6B, #FFE66D);
}

/* 23. Glass Morphism */
.template-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
}

/* 24. Industrial */
.template-industrial {
    background: repeating-linear-gradient(45deg, #2b2b2b, #2b2b2b 10px, #222 10px, #222 20px);
}

/* 25. Art Deco */
.template-art-deco {
    background: linear-gradient(45deg, #B79891, #94716B);
    border: 2px solid #d4af37;
}

/* 26. Watercolor */
.template-watercolor {
    background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}

/* 27. Circuit Board */
.template-circuit {
    background-color: #001;
    background-image: 
        radial-gradient(white 2px, transparent 2px),
        radial-gradient(white 2px, transparent 2px);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
}

/* 28. Botanical */
.template-botanical {
    background: linear-gradient(to right, #74ebd5, #ACB6E5);
}

/* 29. Pixel Art */
.template-pixel {
    background-color: #2d2d2d;
    background-image: 
        linear-gradient(45deg, #333 25%, transparent 25%),
        linear-gradient(-45deg, #333 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #333 75%),
        linear-gradient(-45deg, transparent 75%, #333 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* 30. Abstract Modern */
.template-abstract {
    background: linear-gradient(45deg, #ff3cac, #784ba0, #2b86c5);
}

.template-modern-minimal .social-link {
    background: none;
    border: 1px solid var(--template-primary);
    border-radius: 4px;
}

.template-neon-glow .social-link {
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid var(--template-primary);
    box-shadow: 0 0 15px var(--template-primary);
    border-radius: 8px;
}

.template-gradient-flow .social-link {
    background: linear-gradient(135deg, 
        rgba(var(--bs-primary-rgb), 0.2) 0%, 
        rgba(var(--bs-info-rgb), 0.2) 100%);
    backdrop-filter: blur(10px);
    border-radius: 12px;
}

.template-retro-wave .social-link {
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid var(--template-primary);
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
}

.template-nature .social-link {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    border: 2px solid var(--template-primary);
}

.template-sunset .social-link {
    background: linear-gradient(to right, var(--template-primary), #FFC0CB); /* Pink to Orange */
    border-radius: 10px;
    border: none;
}

.template-ocean .social-link {
    background: rgba(255,255,255,0.2);
    border: 2px solid var(--template-primary);
    box-shadow: 0 0 10px rgba(var(--template-primary-rgb), 0.5);
    border-radius: 6px;
}

.template-purple .social-link {
    background: var(--template-primary);
    color: white;
    border: none;
    border-radius: 8px;
}

.template-golden .social-link {
    background: rgba(0,0,0,0.5);
    border: 1px solid var(--template-primary);
    box-shadow: inset 0 0 10px var(--template-primary);
    border-radius: 15px;
}

.template-cherry .social-link {
    background: rgba(255,255,255,0.3);
    border: 2px dashed var(--template-primary);
    border-radius: 5px;
}

.template-mint .social-link {
    background: var(--template-primary);
    color: white;
    border-radius: 25px;
    border: none;
}

.template-lavender .social-link {
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--template-primary);
    border-radius: 12px;
}


/* Links container */
.links-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 500px;
    margin: 0 auto;
}

/* Social link base styles */
.social-link {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    text-decoration: none;
    color: var(--bs-light);
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="light"] .social-link {
    background: rgba(0, 0, 0, 0.1);
    color: var(--bs-dark);
}

.social-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="light"] .social-link:hover {
    color: var(--bs-light);
}

.social-link i {
    font-size: 1.5rem;
    width: 30px;
    text-align: center;
}

/* Template selection styles */
.template-select-container {
    max-height: 400px;
    overflow-y: auto;
    padding: 1rem;
    background: var(--bs-dark);
    border-radius: 12px;
    margin-bottom: 2rem;
}

.template-preview-card {
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-bottom: 1rem;
}

.template-preview-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.template-preview-card.selected {
    border-color: var(--bs-primary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .profile-picture {
        width: 120px;
        height: 120px;
    }

    .social-link {
        padding: 0.8rem 1.2rem;
    }

    #themeToggle {
        width: 35px;
        height: 35px;
    }
}

/* Base Template Styles */
.template-card {
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    min-height: 600px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

/* Template Styles */
.template-modern-minimal { background: #ffffff; color: #333; }
.template-neon-glow { background: #0c0c0c; color: #fff; box-shadow: 0 0 20px rgba(0, 255, 255, 0.3); }
.template-gradient-flow { background: linear-gradient(135deg, #6e8efb, #a777e3); color: #fff; }
.template-retro-wave { background: #2b1055; color: #ff2d95; border: 2px solid #ff2d95; }
.template-nature { background: linear-gradient(to bottom, #a8e6cf, #dcedc1); color: #2d3436; }
.template-glass { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); color: #fff; }
.template-neo-brutalism { background: #ffffff; border: 3px solid #000; box-shadow: 8px 8px 0 #000; color: #000; }
.template-sunset { background: linear-gradient(45deg, #ff512f, #dd2476); color: #fff; }
.template-ocean { background: linear-gradient(45deg, #2193b0, #6dd5ed); color: #fff; }
.template-purple { background: linear-gradient(45deg, #6a3093, #a044ff); color: #fff; }
.template-golden { background: linear-gradient(45deg, #b79f5b, #e2c275); color: #fff; }
.template-cherry { background: linear-gradient(45deg, #ff758c, #ff7eb3); color: #fff; }
.template-mint { background: linear-gradient(45deg, #00b09b, #96c93d); color: #fff; }
.template-lavender { background: linear-gradient(45deg, #7f7fd5, #91eae4); color: #fff; }
.template-cyberpunk { background: #000; color: #0ff; text-shadow: 0 0 5px #0ff; }
.template-minimalist-dark { background: #1a1a1a; color: #fff; }
.template-paper-cut { background: #f5f5f5; color: #333; box-shadow: 0 15px 35px rgba(0,0,0,0.1); }
.template-geometric { background: #2c3e50; color: #fff; }
.template-vintage-press { background: #f4d03f; color: #333; }
.template-tech-minimal { background: #ecf0f1; color: #2c3e50; }
.template-cosmic { background: #1a1a2e; color: #fff; }
.template-forest-dark { background: #2d3436; color: #fff; }
.template-candy-pop { background: linear-gradient(45deg, #ffafbd, #ffc3a0); color: #333; }
.template-industrial { background: #34495e; color: #fff; }
.template-art-deco { background: #2c3e50; color: #f1c40f; }
.template-watercolor { background: linear-gradient(45deg, #89f7fe, #66a6ff); color: #333; }
.template-circuit { background: #000; color: #00ff00; }
.template-botanical { background: #f6f6f6; color: #2d3436; }
.template-pixel { background: #2d3436; color: #fff; }
.template-abstract { background: linear-gradient(45deg, #fc466b, #3f5efb); color: #fff; }

.template-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    z-index: -1; /*Ensuring background image is behind the gradient*/
    background-image: url(<%= profile.background_image %>); /*Use the background image*/
}

/* Template overlay styles */
.template-card > * {
    position: relative;
    z-index: 1; /*Ensuring content is on top*/
}

/* Common Elements with improved contrast */
.profile-picture {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0 auto 1rem;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 2;
}

.profile-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-name {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 2;
}

.profile-title {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 2;
}

.profile-bio {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 2;
    padding: 0 1rem;
}

/* Profile Links with improved visibility */
.profile-links {
    position: relative;
    z-index: 2;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border-radius: 15px;
    margin: 1rem 0;
}

.profile-links .btn {
    width: 100%;
    padding: 1rem;
    margin-bottom: 0.8rem;
    font-weight: 600;
    font-size: 1.1rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    border: none;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
}

.profile-links .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 1);
}

/* Louden Template */
.template-louden {
    position: relative;
}

.template-louden::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(255,228,196,0.95), rgba(255,218,185,0.95));
    z-index: 1;
}

/* Lingham Template */
.template-lingham {
    position: relative;
}

.template-lingham::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,50,0,0.97), rgba(0,100,0,0.97));
    z-index: 1;
}

/* Lane Template */
.template-lane {
    position: relative;
}

.template-lane::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(42,27,61,0.97), rgba(68,49,141,0.97));
    z-index: 1;
}

/* Common Elements */
.profile-picture {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0 auto 1rem;
    overflow: hidden;
    border: 3px solid white;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
}

.profile-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-name {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.profile-bio {
    font-size: 1rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

/* Button Hover Effects */
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Template-specific button styles */
.template-louden .btn {
    background: #fff;
    color: #333;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.template-lingham .btn {
    background: rgba(255,255,255,0.95);
    color: #006400;
    border-radius: 25px;
    font-weight: 700;
}

.template-lane .btn {
    background: #ff8c00;
    color: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Edit and Analytics buttons */
.btn-outline-light {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border: 2px solid rgba(255, 255, 255, 0.8);
    font-weight: 600;
    padding: 0.8rem 1.5rem;
    margin: 0 0.5rem;
}

.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: white;
    transform: translateY(-2px);
}

/* Profile info section styles */
.profile-info-section {
    position: relative;
    z-index: 2;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border-radius: 15px;
    margin: 1rem 0;
}

.profile-content {
    padding: 1rem;
}

/* Template base styles */
.template-card {
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background: var(--template-bg, #fff);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: all 0.3s ease;
  position: relative;
}

/* Modern Minimal */
.template-modern-minimal {
  --template-bg: #ffffff;
  background: #ffffff;
  color: #333;
}

/* Neon Glow */
.template-neon-glow {
  --template-bg: #0c0c0c;
  background: #0c0c0c;
  color: #fff;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
}

.template-neon-glow .btn {
  text-shadow: 0 0 10px currentColor;
}

/* Gradient Flow */
.template-gradient-flow {
  --template-bg: linear-gradient(135deg, #6e8efb, #a777e3);
  background: linear-gradient(135deg, #6e8efb, #a777e3) !important;
  color: #fff;
  z-index: 1;
  position: relative;
}

/* Retro Wave */
.template-retro-wave {
  --template-bg: #2b1055;
  background: #2b1055;
  color: #ff2d95;
  border: 2px solid #ff2d95;
}

/* Nature Inspired */
.template-nature {
  --template-bg: linear-gradient(to bottom, #a8e6cf, #dcedc1);
  background: linear-gradient(to bottom, #a8e6cf, #dcedc1);
  color: #2d3436;
}

/* Glass Morphism */
.template-glass {
  --template-bg: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* Neo Brutalism */
.template-neo-brutalism {
  --template-bg: #ffffff;
  background: #ffffff;
  border: 3px solid #000;
  box-shadow: 8px 8px 0 #000;
  color: #000;
}

/* Profile elements */
.profile-picture {
  width: 120px;
  height: 120px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
}

.profile-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-name {
  font-size: 1.8rem;
  margin: 1rem 0;
  text-align: center;
}

.profile-title {
  text-align: center;
  color: var(--template-title-color, #666);
  margin-bottom: 1rem;
}

.profile-bio {
  text-align: center;
  margin-bottom: 2rem;
}

.profile-links {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.profile-links .btn {
  width: 100%;
  padding: 0.8rem;
  border-radius: 0.5rem;
  text-align: center;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.profile-links .btn:hover {
  transform: translateY(-2px);
}

/* Template-specific animations */
.template-neon-glow .profile-links .btn {
  animation: glow 2s ease-in-out infinite alternate;
}

.template-gradient-flow .profile-links .btn {
  animation: flow 3s ease infinite;
}

@keyframes glow {
  0% { box-shadow: 0 0 5px currentColor; }
  100% { box-shadow: 0 0 20px currentColor; }
}

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