/*
Theme Name: Dataingenjor Hosting  
Theme URI: https://dataingenjor.no
Author: Dataingenjor
Description: WordPress hosting tema
Version: 1.0.3
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 25%, #a5d6a7 50%, #81c784 75%, #66bb6a 100%);
    background-size: 400% 400%;
    animation: bodyGradientShift 35s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    position: relative;
    overflow-x: hidden;
}

html {
    overflow-x: hidden;
    height: auto;
    min-height: 100%;
}

body {
    min-height: 100vh;
    height: auto;
}

/* Judaika - Större konsoliderad Cyber Davidstjärna + bakgrundsmönster */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        /* STOR CENTRAL CYBER DAVIDSTJÄRNA - Konsoliderad symbol */
        url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='cyberGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%232d8659;stop-opacity:0.15'/%3E%3Cstop offset='50%25' style='stop-color:%234a9d6e;stop-opacity:0.2'/%3E%3Cstop offset='100%25' style='stop-color:%232d8659;stop-opacity:0.15'/%3E%3C/linearGradient%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='3' result='coloredBlur'/%3E%3CfeMerge%3E%3CfeMergeNode in='coloredBlur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg opacity='0.4' filter='url(%23glow)'%3E%3Cpath d='M300 100 L400 300 L300 500 L200 300 Z' fill='url(%23cyberGrad)' stroke='%232d8659' stroke-width='2' opacity='0.6'/%3E%3Cpath d='M300 100 L500 300 L300 500 L100 300 Z' fill='url(%23cyberGrad)' stroke='%234a9d6e' stroke-width='2' opacity='0.6'/%3E%3C/g%3E%3C/svg%3E"),
        /* Mindre Davidstjärnor för djup */
        url("data:image/svg+xml,%3Csvg width='120' height='120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.08'%3E%3Cpath d='M60 20 L80 60 L60 100 L40 60 Z' fill='%232d8659'/%3E%3Cpath d='M60 20 L100 60 L60 100 L20 60 Z' fill='%234a9d6e'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='120' height='120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.06'%3E%3Cpath d='M60 20 L80 60 L60 100 L40 60 Z' fill='%232d8659'/%3E%3Cpath d='M60 20 L100 60 L60 100 L20 60 Z' fill='%234a9d6e'/%3E%3C/g%3E%3C/svg%3E"),
        /* Triangulära cyber-mönster */
        repeating-linear-gradient(
            60deg,
            transparent 0px,
            transparent 29px,
            rgba(45, 134, 89, 0.03) 29px,
            rgba(45, 134, 89, 0.03) 30px,
            transparent 30px,
            transparent 58px
        ),
        repeating-linear-gradient(
            -60deg,
            transparent 0px,
            transparent 29px,
            rgba(74, 157, 110, 0.03) 29px,
            rgba(74, 157, 110, 0.03) 30px,
            transparent 30px,
            transparent 58px
        );
    background-size: 
        600px 600px,
        120px 120px,
        180px 180px,
        60px 60px,
        60px 60px;
    background-position: 
        center center,
        0 0,
        60px 60px,
        0 0,
        30px 30px;
    pointer-events: none;
    z-index: -1;
    opacity: 1;
    animation: judaikaFloat 40s cubic-bezier(0.4, 0, 0.2, 1) infinite, cyberStarPulse 25s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes judaikaFloat {
    0% { 
        opacity: 0;
        transform: scale(0.98);
    }
    15% {
        opacity: 0;
        transform: scale(0.99);
    }
    25% {
        opacity: 0.3;
        transform: scale(1.0);
    }
    35% {
        opacity: 0.5;
        transform: scale(1.02);
    }
    40% { 
        opacity: 1;
        transform: scale(1.05);
    }
    50% {
        opacity: 1;
        transform: scale(1.08);
    }
    60% { 
        opacity: 1;
        transform: scale(1.12);
    }
    90% {
        opacity: 0.5;
        transform: scale(1.18);
    }
    100% { 
        opacity: 0;
        transform: scale(1.2);
    }
}

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

@keyframes cyberStarPulse {
    0% {
        filter: brightness(0.8) drop-shadow(0 0 10px rgba(45, 134, 89, 0));
        transform: scale(0.95);
        opacity: 0;
    }
    10% {
        filter: brightness(0.8) drop-shadow(0 0 10px rgba(45, 134, 89, 0));
        transform: scale(0.96);
        opacity: 0;
    }
    20% {
        filter: brightness(0.85) drop-shadow(0 0 12px rgba(45, 134, 89, 0.1));
        transform: scale(0.98);
        opacity: 0.2;
    }
    30% {
        filter: brightness(1.0) drop-shadow(0 0 20px rgba(74, 157, 110, 0.3));
        transform: scale(1.02);
        opacity: 0.5;
    }
    40% {
        filter: brightness(1.2) drop-shadow(0 0 30px rgba(74, 157, 110, 0.5));
        transform: scale(1.05);
        opacity: 0.7;
    }
    50% {
        filter: brightness(1.6) drop-shadow(0 0 60px rgba(74, 157, 110, 0.9)) drop-shadow(0 0 100px rgba(45, 134, 89, 0.7));
        transform: scale(1.15);
        opacity: 1;
    }
    60% {
        filter: brightness(1.5) drop-shadow(0 0 55px rgba(74, 157, 110, 0.8));
        transform: scale(1.2);
        opacity: 0.9;
    }
    70% {
        filter: brightness(1.3) drop-shadow(0 0 50px rgba(74, 157, 110, 0.7));
        transform: scale(1.22);
        opacity: 0.7;
    }
    95% {
        filter: brightness(0.7) drop-shadow(0 0 8px rgba(45, 134, 89, 0.12));
        transform: scale(1.28);
        opacity: 0.2;
    }
    100% {
        filter: brightness(0.6) drop-shadow(0 0 5px rgba(45, 134, 89, 0));
        transform: scale(1.3);
        opacity: 0;
    }
}

.site-header {
    background: linear-gradient(135deg, #2d8659 0%, #4a9d6e 100%);
    color: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.header-top {
    padding: 1.5rem 0;
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.logo-area {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2);
    border-radius: 8px;
}

.site-logo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-icon {
    font-size: 2rem;
}

.site-title {
    font-size: 1.8rem;
    font-weight: bold;
    margin: 0;
    white-space: nowrap;
}

.site-title a {
    color: white;
    text-decoration: none;
    transition: opacity 0.3s;
}

.site-title a:hover {
    opacity: 1;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.main-navigation {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%);
    padding: 0.75rem 1.5rem;
    border-radius: 16px;
    backdrop-filter: blur(15px);
    border: 2px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.main-navigation::before {
    content: '';
    position: absolute;
    top: -60%;
    right: -60%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(255,255,255,0.15) 0%, transparent 60%);
    animation: glow 6s ease-in-out infinite alternate;
}

.nav-menu {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    align-items: center;
    position: relative;
    z-index: 1;
}

.nav-menu li {
    margin: 0;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.6rem 1rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 10px;
    white-space: nowrap;
    display: inline-block;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
    position: relative;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.nav-menu a::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05));
    opacity: 0;
    transition: opacity 0.3s;
}

.nav-menu a:hover::before {
    opacity: 1;
}

.nav-menu a:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.site-main {
    max-width: 1200px;
    margin: 3rem auto;
    padding: 3rem 2rem;
    min-height: 60vh;
    background: linear-gradient(135deg, #f0f7f4 0%, #e8f5f0 50%, #f0f7f4 100%);
    background-size: 200% 200%;
    animation: subtleGradient 35s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    position: relative;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(45, 134, 89, 0.1);
}

/* Front Page Hero Section */
.front-page-main {
    padding: 0;
}

.front-page-hero {
    background: linear-gradient(135deg, rgba(45, 134, 89, 0.1) 0%, rgba(74, 157, 110, 0.05) 100%);
    padding: 80px 20px;
    margin: 0;
    position: relative;
    overflow: hidden;
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hero-content {
    text-align: center;
}

.hero-text {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.2rem;
    line-height: 1.8;
    color: #1a1a1a;
}

.hero-text > h2:first-child {
    font-size: 2.5rem;
    margin-bottom: 40px;
    color: #2d8659;
    text-align: center;
}

.hero-text h3 {
    font-size: 1.8rem;
    margin-top: 30px;
    margin-bottom: 15px;
    color: #1f5d3f;
}

.hero-text ul {
    text-align: left;
    display: inline-block;
    margin: 20px 0;
}

.hero-text li {
    margin: 10px 0;
    font-size: 1.1rem;
}

/* Call-to-Action Section */
.cta-section {
    background: linear-gradient(135deg, #2d8659 0%, #4a9d6e 100%);
    padding: 50px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(45, 134, 89, 0.3);
    max-width: 700px;
    margin: 0 auto 60px;
    position: relative;
    overflow: hidden;
    animation: ctaFadeIn 1s ease-out, ctaPulse 3s ease-in-out infinite 1s;
    transform-origin: center;
}

/* CTA inom hero-text ska ha mindre margin */
.hero-text .cta-section {
    margin: 40px auto 60px;
}

/* Fade-in animation när sidan laddas */
@keyframes ctaFadeIn {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Lätt pulserande effekt */
@keyframes ctaPulse {
    0%, 100% {
        box-shadow: 0 10px 40px rgba(45, 134, 89, 0.3), 0 0 0 0 rgba(45, 134, 89, 0.4);
    }
    50% {
        box-shadow: 0 10px 40px rgba(45, 134, 89, 0.4), 0 0 0 10px rgba(45, 134, 89, 0);
    }
}

.cta-section::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: ctaGlow 8s ease-in-out infinite;
}

.cta-section::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: ctaShine 4s ease-in-out infinite;
}

@keyframes ctaGlow {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translate(20px, 20px) scale(1.1);
        opacity: 0.5;
    }
}

@keyframes ctaShine {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 100%;
    }
}

.cta-title {
    font-size: 2.2rem;
    color: #ffffff;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
    animation: ctaTitleFadeIn 1.2s ease-out 0.3s both;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

@keyframes ctaTitleFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.cta-text {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 30px;
    line-height: 1.6;
    position: relative;
    z-index: 1;
    animation: ctaTextFadeIn 1.2s ease-out 0.6s both;
}

@keyframes ctaTextFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.cta-button {
    display: inline-block;
    background: #ffffff;
    color: #2d8659 !important;
    padding: 18px 45px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
    border: 3px solid transparent;
    animation: ctaButtonFadeIn 1.2s ease-out 0.9s both, ctaButtonPulse 2s ease-in-out infinite 2s;
    overflow: hidden;
}

.cta-button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(45, 134, 89, 0.1);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.cta-button:hover::before {
    width: 300px;
    height: 300px;
}

.cta-button:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.5);
    background: #f0f7f4;
    border-color: #4a9d6e;
    animation: none;
}

.cta-button:active {
    transform: translateY(-1px) scale(1.02);
}

@keyframes ctaButtonFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes ctaButtonPulse {
    0%, 100% {
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow: 0 5px 25px rgba(45, 134, 89, 0.4), 0 0 15px rgba(255, 255, 255, 0.3);
    }
}

/* Serviceavtal Page */
.serviceavtal-page {
    padding: 60px 20px;
    min-height: 70vh;
}

.serviceavtal-container {
    max-width: 1000px;
    margin: 0 auto;
}

.serviceavtal-header {
    text-align: center;
    margin-bottom: 60px;
}

.serviceavtal-title {
    font-size: 2.8rem;
    color: #2d8659;
    margin-bottom: 15px;
    animation: ctaTitleFadeIn 1s ease-out;
}

.serviceavtal-subtitle {
    font-size: 1.3rem;
    color: #666;
    margin: 0;
}

.serviceavtal-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-bottom: 60px;
}

.serviceavtal-option {
    background: white;
    padding: 50px 40px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    animation: ctaFadeIn 1s ease-out;
}

.serviceavtal-option::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(45, 134, 89, 0.05), transparent);
    transition: left 0.5s ease;
}

.serviceavtal-option:hover::before {
    left: 100%;
}

.serviceavtal-option:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 50px rgba(45, 134, 89, 0.2);
}

.serviceavtal-option:nth-child(2) {
    animation-delay: 0.2s;
}

.option-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    display: block;
    animation: optionIconFloat 3s ease-in-out infinite;
}

@keyframes optionIconFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.option-title {
    font-size: 1.8rem;
    color: #2d8659;
    margin-bottom: 15px;
}

.option-description {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
}

.option-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 3px solid transparent;
}

.option-button-login {
    background: linear-gradient(135deg, #2d8659 0%, #4a9d6e 100%);
    color: #ffffff !important;
    box-shadow: 0 5px 20px rgba(45, 134, 89, 0.3);
}

.option-button-login:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 30px rgba(45, 134, 89, 0.4);
    border-color: #ffffff;
}

.option-button-register {
    background: linear-gradient(135deg, #4a9d6e 0%, #2d8659 100%);
    color: #ffffff !important;
    box-shadow: 0 5px 20px rgba(45, 134, 89, 0.3);
}

.option-button-register:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 30px rgba(45, 134, 89, 0.4);
    border-color: #ffffff;
}

.option-button .button-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.option-button:hover .button-icon {
    transform: translateX(5px);
}

.serviceavtal-footer {
    text-align: center;
    margin-top: 40px;
    padding: 20px;
    color: #666;
    font-size: 1rem;
}

.serviceavtal-footer p {
    margin: 0;
    line-height: 1.6;
}

.serviceavtal-content {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    margin-top: 40px;
}

.serviceavtal-content h2,
.serviceavtal-content h3 {
    color: #2d8659;
    margin-top: 30px;
    margin-bottom: 15px;
}

.serviceavtal-content p {
    line-height: 1.8;
    color: #333;
}

/* Responsive Design för Serviceavtal */
@media (max-width: 768px) {
    .serviceavtal-title {
        font-size: 2.2rem;
    }
    
    .serviceavtal-options {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .serviceavtal-option {
        padding: 40px 30px;
    }
    
    .option-icon {
        font-size: 3rem;
    }
}

/* Recent Nyheter Section */
.recent-nyheter-section {
    padding: 60px 20px;
    background: rgba(255, 255, 255, 0.5);
}

.recent-nyheter-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    font-size: 2rem;
    color: #2d8659;
    text-align: center;
    margin-bottom: 40px;
}

.nyheter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.nyhet-card {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nyhet-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(45, 134, 89, 0.2);
}

.nyhet-card h3 {
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.nyhet-card h3 a {
    color: #2d8659;
    text-decoration: none;
}

.nyhet-card h3 a:hover {
    color: #1f5d3f;
    text-decoration: underline;
}

.nyhet-excerpt {
    color: #666;
    margin-bottom: 15px;
    line-height: 1.6;
}

.read-more {
    color: #2d8659;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: transform 0.2s ease;
}

.read-more:hover {
    transform: translateX(5px);
    color: #1f5d3f;
}

/* Responsive Design för Front Page */
@media (max-width: 768px) {
    .front-page-hero {
        padding: 50px 15px;
    }
    
    .hero-text h2 {
        font-size: 2rem;
    }
    
    .cta-section {
        padding: 40px 20px;
    }
    
    .cta-title {
        font-size: 1.8rem;
    }
    
    .cta-text {
        font-size: 1.1rem;
    }
    
    .cta-button {
        padding: 15px 35px;
        font-size: 1.1rem;
    }
    
    .nyheter-grid {
        grid-template-columns: 1fr;
    }
}

.entry-header {
    margin-bottom: 2rem;
}

.entry-title {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    color: #1a1a1a;
    font-weight: 700;
    line-height: 1.2;
}

.entry-content {
    font-size: 1.5rem;
    line-height: 1.8;
    color: #1a1a1a;
    font-weight: 400;
}

.entry-content p {
    margin-bottom: 1.5rem;
    color: #1a1a1a;
}

.entry-content h1 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    color: #1a1a1a;
    font-weight: 700;
    line-height: 1.2;
}

.site-footer {
    background: linear-gradient(135deg, #1f5d3f 0%, #2d8659 50%, #3a9d6e 100%);
    color: white;
    padding: 3rem 0;
    margin-top: 4rem;
    position: relative;
    overflow: hidden;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.3;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.footer-left {
    display: flex;
    align-items: center;
}

.footer-content-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    margin-top: 10px;
    margin-top: 10px;
}

.footer-right {
    text-align: right;
}

.footer-right p:not(.footer-identity) {
    margin-bottom: 0.5rem;
    opacity: 1;
    font-size: 0.95rem;
}

.footer-social-media {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: white;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 11px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    position: relative;
}

.footer-social-link::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.footer-social-link:hover::before {
    opacity: 1;
}

.footer-social-link:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    border-color: rgba(255, 255, 255, 0.4);
}

.footer-social-link svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    position: relative;
    z-index: 1;
}

.footer-social-link.facebook:hover {
    background: #1877f2;
    border-color: #1877f2;
}

.footer-social-link.linkedin:hover {
    background: #0077b5;
    border-color: #0077b5;
}

.footer-contact {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%);
    padding: 0.75rem 1.5rem;
    border-radius: 16px;
    backdrop-filter: blur(15px);
    border: 2px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.footer-contact::before {
    content: '';
    position: absolute;
    top: -60%;
    right: -60%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(255,255,255,0.15) 0%, transparent 60%);
    animation: glow 6s ease-in-out infinite alternate;
}

@keyframes glow {
    0% { 
        transform: translate(0, 0) scale(1);
        opacity: 0.6;
    }
    50% { 
        transform: translate(-20px, -20px) scale(1.1);
        opacity: 0.8;
    }
    100% { 
        transform: translate(0, 0) scale(1);
        opacity: 0.6;
    }
}

.footer-contact::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
}

.footer-contact-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.6rem 1rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    white-space: nowrap;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-contact-link::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05));
    opacity: 0;
    transition: opacity 0.3s;
}

.footer-contact-link:hover::before {
    opacity: 1;
}

.footer-contact-link:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(-8px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.footer-contact-link .icon {
    font-size: 1.4rem;
    min-width: 26px;
    text-align: center;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.footer-contact-link .text {
    font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

@media (max-width: 1200px) {
    .nav-menu {
        gap: 1.5rem;
    }
    .nav-menu a {
        font-size: 0.95rem;
        padding: 0.5rem;
    }
}

@media (max-width: 968px) {
    .header-container {
        flex-direction: column;
        gap: 1.5rem;
    }
    .header-left {
        width: 100%;
        justify-content: center;
    }
    .header-right {
        width: 100%;
        justify-content: center;
    }
    .nav-menu {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
    .site-title {
        font-size: 1.5rem;
    }
    .entry-title {
        font-size: 2.5rem;
    }
    .entry-content {
        font-size: 1.3rem;
    }
    .entry-content h1 {
        font-size: 2.5rem;
    }
    .site-main {
        padding: 2rem 1.5rem;
    }
    .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-left {
        width: 100%;
    }
    .footer-right {
        width: 100%;
        align-items: center;
    }
    .footer-contact {
        align-items: center;
        min-width: auto;
        width: 100%;
        max-width: 450px;
    }
    .footer-contact-link {
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .header-container {
        padding: 0 1rem;
    }
    .site-title {
        font-size: 1.3rem;
    }
    .nav-menu {
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
        text-align: center;
    }
    .nav-menu a {
        display: block;
        width: 100%;
    }
    .entry-title {
        font-size: 2rem;
    }
    .entry-content {
        font-size: 1.2rem;
    }
    .entry-content h1 {
        font-size: 2rem;
    }
    .footer-social-link {
        width: 44px;
        height: 44px;
        padding: 10px;
    }
    .footer-contact {
        padding: 1.5rem 1.75rem;
        min-width: auto;
    }
    .footer-contact-link {
        font-size: 1rem;
        padding: 0.85rem 1.2rem;
    }
    .footer-contact-link .icon {
        font-size: 1.5rem;
    }
}

/* Hide contact text by default, show on hover */
.footer-contact-link .text {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: 0;
}

.footer-contact-link:hover .text {
    max-width: 200px;
    opacity: 1;
    margin-left: 0.5rem;
}

/* Make the contact link padding consistent */
.footer-contact-link {
    padding: 0.6rem 0.8rem !important;
}

.footer-contact-link:hover {
    padding: 0.6rem 1rem !important;
}

/* Blue color on hover expand */
.footer-contact-link:hover .text {
    color: #4A9FF5 !important;
    text-shadow: 0 2px 8px rgba(74, 159, 245, 0.4);
}

/* Icon pulses when hovering */
.footer-contact-link:hover .icon {
    transform: scale(1.1);
    filter: drop-shadow(0 2px 8px rgba(74, 159, 245, 0.5));
}

/* Tighter spacing between phone and email */
.footer-contact {
    gap: 0.5rem !important;
}

/* Adjust icon size for better fit */
.footer-contact-link .icon {
    font-size: 1.3rem !important;
    min-width: 24px !important;
}

/* Blue background on hover expand - override previous */
.footer-contact-link:hover {
    background: linear-gradient(135deg, rgba(74, 159, 245, 0.3) 0%, rgba(74, 159, 245, 0.15) 100%) !important;
    border-color: rgba(74, 159, 245, 0.5) !important;
    box-shadow: 0 6px 20px rgba(74, 159, 245, 0.3) !important;
}

.footer-contact-link:hover .text {
    color: white !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Auth Buttons Styling */
.auth-buttons {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: 1rem;
}

.auth-btn {
    padding: 0.7rem 1.5rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
    position: relative;
    overflow: hidden;
}

.auth-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05));
    opacity: 0;
    transition: opacity 0.3s;
}

.auth-btn:hover::before {
    opacity: 1;
}

.auth-btn-login {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

.auth-btn-login:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}

.auth-btn-register {
    background: rgba(255, 255, 255, 0.25);
    color: white;
    border-color: rgba(255, 255, 255, 0.4);
    font-weight: 700;
}

.auth-btn-register:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
}

.auth-btn-profile {
    background: linear-gradient(135deg, rgba(45, 134, 89, 0.3) 0%, rgba(74, 157, 110, 0.3) 100%);
    color: white;
    border-color: rgba(45, 134, 89, 0.5);
}

.auth-btn-profile:hover {
    background: linear-gradient(135deg, rgba(45, 134, 89, 0.4) 0%, rgba(74, 157, 110, 0.4) 100%);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(45, 134, 89, 0.4);
    border-color: rgba(45, 134, 89, 0.7);
}

.auth-btn-logout {
    background: rgba(255, 100, 100, 0.2);
    color: white;
    border-color: rgba(255, 150, 150, 0.4);
}

.auth-btn-logout:hover {
    background: rgba(255, 100, 100, 0.3);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 100, 100, 0.4);
    border-color: rgba(255, 150, 150, 0.6);
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-greeting {
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
    white-space: nowrap;
}

/* Responsive adjustments for auth buttons */
@media (max-width: 968px) {
    .auth-buttons {
        margin-left: 0;
        margin-top: 1rem;
        justify-content: center;
        width: 100%;
    }
    
    .user-menu {
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
    }
    
    .user-greeting {
        text-align: center;
    }
}

@media (max-width: 640px) {
    .auth-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .auth-btn {
        width: 100%;
        text-align: center;
    }
}

/* Gravatar Styling */
.header-title-gravatar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.gravatar-link {
    display: inline-block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.gravatar-link:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
}

.gravatar-avatar {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0;
}

/* Responsive adjustments for Gravatar */
@media (max-width: 768px) {
    .header-title-gravatar {
        gap: 0.5rem;
    }
    
    .gravatar-avatar {
        width: 32px;
        height: 32px;
    }
    
    .site-title {
        font-size: 1.2rem;
    }
}

/* Update Gravatar size */
.gravatar-avatar {
    display: block;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50%;
    margin: 0;
}

.gravatar-link {
    border-width: 3px;
}

/* Responsive adjustments for Gravatar */
@media (max-width: 768px) {
    .gravatar-avatar {
        width: 45px !important;
        height: 45px !important;
    }
}

@media (max-width: 968px) {
    .login-container {
        padding: 2rem 1.5rem;
    }
    
    .login-header h1 {
        font-size: 2rem;
    }
    
    .register-form,
    .login-form {
        padding: 1.5rem;
    }
    
    .form-header h2 {
        font-size: 1.5rem;
    }
}

@media (max-width: 640px) {
    .login-page-wrapper {
        padding: 1.5rem 0.5rem;
    }
    
    .login-container {
        padding: 1.5rem 1rem;
        border-radius: 16px;
    }
    
    .login-header h1 {
        font-size: 1.75rem;
    }
    
    .login-subtitle {
        font-size: 1rem;
    }
    
    .register-form,
    .login-form {
        padding: 1.25rem;
    }
}

@media (max-width: 968px) {
    .login-container {
        padding: 3rem 2rem;
    }
    
    .login-header h1 {
        font-size: 2.5rem;
    }
    
    .register-form,
    .login-form {
        padding: 2rem;
    }
    
    .form-header h2 {
        font-size: 1.75rem;
    }
}

@media (max-width: 640px) {
    .login-page-wrapper {
        padding: 2rem 1rem;
    }
    
    .login-container {
        padding: 2rem 1.5rem;
        border-radius: 24px;
    }
    
    .welcome-icon {
        font-size: 3rem;
    }
    
    .login-header h1 {
        font-size: 2rem;
    }
    
    .login-subtitle {
        font-size: 1rem;
    }
    
    .register-form,
    .login-form {
        padding: 1.5rem;
    }
    
    .form-icon {
        font-size: 2.5rem;
    }
    
    .form-header h2 {
        font-size: 1.5rem;
    }
    
    .code-input {
        font-size: 1.1rem;
        letter-spacing: 3px;
    }
}

@media (max-width: 640px) {
    .login-page-wrapper {
        padding: 1.5rem 0.75rem;
    }
    
    .login-container {
        padding: 2rem 1.25rem;
        border-radius: 20px;
    }
    
    .welcome-icon {
        font-size: 2.5rem;
    }
    
    .login-header h1 {
        font-size: 1.75rem;
    }
    
    .login-subtitle {
        font-size: 0.9rem;
    }
    
    .register-form,
    .login-form {
        padding: 1.25rem;
    }
    
    .form-icon {
        font-size: 1.75rem;
    }
    
    .form-header h2 {
        font-size: 1.25rem;
    }
    
    .code-input {
        font-size: 1rem;
        letter-spacing: 2px;
    }
}

/* Compact Green Login Page Design */
.login-page-wrapper {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 25%, #a5d6a7 50%, #81c784 75%, #66bb6a 100%);
    background-size: 400% 400%;
    animation: gradientShift 30s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    position: relative;
    overflow: hidden;
}

.login-page-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

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

.login-container {
    max-width: 600px;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 15px 50px rgba(45, 134, 89, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.5);
    padding: 2.5rem;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.welcome-icon {
    font-size: 3rem;
    margin-bottom: 0.75rem;
    animation: wave 2s ease-in-out infinite;
    display: inline-block;
}

@keyframes wave {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(20deg); }
    75% { transform: rotate(-20deg); }
}

.login-header h1 {
    font-size: 2.25rem;
    background: linear-gradient(135deg, #2d8659 0%, #4a9d6e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    font-weight: 800;
    letter-spacing: -1px;
}

.login-subtitle {
    color: #666;
    font-size: 1rem;
    margin: 0;
    font-weight: 400;
}

.auth-forms {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-header {
    margin-bottom: 1.25rem;
    text-align: center;
}

.form-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: inline-block;
}

.form-header h2 {
    font-size: 1.5rem;
    color: #1a1a1a;
    margin-bottom: 0.25rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.form-description {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}

.register-form,
.login-form {
    padding: 1.5rem;
    background: linear-gradient(135deg, #ffffff 0%, #f0f7f4 100%);
    border-radius: 16px;
    border: 2px solid rgba(45, 134, 89, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.register-form::before,
.login-form::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(45, 134, 89, 0.05), transparent);
    transition: left 0.5s;
}

.register-form:hover::before,
.login-form:hover::before {
    left: 100%;
}

.register-form:hover,
.login-form:hover {
    border-color: rgba(45, 134, 89, 0.3);
    box-shadow: 0 8px 20px rgba(45, 134, 89, 0.15);
    transform: translateY(-2px);
}

.form-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0.75rem 0;
    position: relative;
}

.divider-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, #e0e0e0, transparent);
}

.divider-text {
    color: #999;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.75rem;
}

.divider-icon {
    font-size: 1rem;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #1a1a1a;
    font-size: 0.9rem;
}

.label-icon {
    font-size: 1rem;
}

.label-required {
    color: #ff4757;
    font-weight: 700;
    margin-left: 0.25rem;
}

.input-wrapper {
    position: relative;
}

.form-group input {
    width: 100%;
    padding: 0.875rem 1.25rem;
    border: 2px solid #e8e8e8;
    border-radius: 10px;
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, #f0f7f4 0%, #e8f5f0 50%, #f0f7f4 100%);
    background-size: 200% 200%;
    animation: subtleGradient 35s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    position: relative;
    box-sizing: border-box;
    font-family: inherit;
}

.form-group input:focus {
    outline: none;
    border-color: #2d8659;
    box-shadow: 0 0 0 3px rgba(45, 134, 89, 0.1), 0 3px 10px rgba(45, 134, 89, 0.15);
    transform: translateY(-1px);
}

.form-group input::placeholder {
    color: #bbb;
}

.code-input {
    font-family: "Courier New", "Monaco", monospace;
    font-size: 1.1rem;
    letter-spacing: 3px;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1rem;
}

.form-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    font-size: 0.8rem;
    margin-top: 0.25rem;
    font-style: italic;
}

.hint-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    width: 100%;
    margin-top: 0.25rem;
    position: relative;
    overflow: hidden;
}

.submit-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.submit-btn:hover::before {
    width: 300px;
    height: 300px;
}

.submit-btn-primary {
    background: linear-gradient(135deg, #2d8659 0%, #4a9d6e 100%);
    color: white;
    box-shadow: 0 6px 15px rgba(45, 134, 89, 0.4);
}

.submit-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(45, 134, 89, 0.5);
}

.submit-btn-secondary {
    background: linear-gradient(135deg, #4a9d6e 0%, #2d8659 100%);
    color: white;
    box-shadow: 0 6px 15px rgba(45, 134, 89, 0.35);
}

.submit-btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(45, 134, 89, 0.45);
}

.btn-text {
    position: relative;
    z-index: 1;
}

.btn-icon {
    width: 18px;
    height: 18px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

.submit-btn:hover .btn-icon {
    transform: translateX(4px);
}

.notice {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    animation: slideInDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.notice-icon-wrapper {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.5);
}

.notice-icon {
    width: 20px;
    height: 20px;
}

.notice-content {
    flex: 1;
}

.notice-content strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.notice-content p {
    margin: 0;
    font-size: 0.85rem;
    opacity: 1;
}

/* Förbättrad styling för registreringsmeddelande */
.registered-notice {
    margin-bottom: 2rem;
    border-left: 4px solid #2d8659;
}

.registered-notice .notice-content {
    padding: 1.5rem;
}

.registered-notice .notice-content ol {
    margin: 15px 0;
    padding-left: 20px;
}

.registered-notice .notice-content ol li {
    margin: 8px 0;
    line-height: 1.6;
}

.notice-success {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
    border-color: #28a745;
}

.notice-success .notice-icon-wrapper {
    background: rgba(40, 167, 69, 0.2);
}

.notice-success .notice-icon {
    color: #28a745;
}

.notice-error {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    color: #721c24;
    border-color: #dc3545;
}

.notice-error .notice-icon-wrapper {
    background: rgba(220, 53, 69, 0.2);
}

.notice-error .notice-icon {
    color: #dc3545;
}

@media (max-width: 640px) {
    .login-page-wrapper {
        padding: 1.5rem 0.75rem;
    }
    
    .login-container {
        padding: 2rem 1.25rem;
        border-radius: 20px;
    }
    
    .welcome-icon {
        font-size: 2.5rem;
    }
    
    .login-header h1 {
        font-size: 1.75rem;
    }
    
    .login-subtitle {
        font-size: 0.9rem;
    }
    
    .register-form,
    .login-form {
        padding: 1.25rem;
    }
    
    .form-icon {
        font-size: 1.75rem;
    }
    
    .form-header h2 {
        font-size: 1.25rem;
    }
    
    .code-input {
        font-size: 1rem;
        letter-spacing: 2px;
    }
}

/* Form Switch Link */
.form-switch {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(45, 134, 89, 0.1);
    text-align: center;
}

.form-switch p {
    margin: 0;
    color: #666;
    font-size: 0.9rem;
}

.switch-link {
    color: #2d8659;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
}

.switch-link:hover {
    color: #4a9d6e;
    border-bottom-color: #4a9d6e;
}

/* Site Main Background Design */
.site-main {
    background: linear-gradient(135deg, #f0f7f4 0%, #e8f5f0 50%, #f0f7f4 100%);
    background-size: 200% 200%;
    animation: subtleGradient 35s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    position: relative;
    min-height: calc(100vh - 200px);
}

.site-main::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(45, 134, 89, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(74, 157, 110, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(45, 134, 89, 0.02) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.site-main > * {
    position: relative;
    z-index: 1;
}

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

/* Alternative: Subtle pattern overlay */
.site-main::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(45, 134, 89, 0.01) 10px,
            rgba(45, 134, 89, 0.01) 20px
        );
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}


/* Site Main Background Effects (Updated) */
.site-main::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(45, 134, 89, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(74, 157, 110, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(45, 134, 89, 0.02) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
    border-radius: 12px;
}

.site-main::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(45, 134, 89, 0.01) 10px,
            rgba(45, 134, 89, 0.01) 20px
        );
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
    border-radius: 12px;
}




@keyframes waveMove {
    0% {
        background-position: 0 0, 50px 50px;
    }
    100% {
        background-position: 200px 0, 250px 50px;
    }
}

@keyframes waveMove2 {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 180px 0;
    }
}

        opacity: 1;
    }
    60% {
        opacity: 0.88;
        filter: brightness(1.02);
    }
    75% {
        opacity: 1;
        filter: brightness(1.2);
    }
    90% {
        opacity: 0.92;
        filter: brightness(1.08);
    }
}

        0 0 15px rgba(45, 134, 89, 0.6),
        0 0 30px rgba(74, 157, 110, 0.4);
    pointer-events: none;
    z-index: -1;
    border-radius: 2px;
    animation: waveBlink 8s ease-in-out infinite, waveFlow 8s linear infinite;
}

html::after {
    content: "";
    position: fixed;
    top: 60%;
    left: -200px;
    width: 250px;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(74, 157, 110, 0.6) 30%,
        rgba(45, 134, 89, 0.8) 50%,
        rgba(74, 157, 110, 0.6) 70%,
        transparent 100%
    );
    box-shadow: 
        0 0 12px rgba(74, 157, 110, 0.5),
        0 0 25px rgba(45, 134, 89, 0.3);
    pointer-events: none;
    z-index: -1;
    border-radius: 2px;
    animation: waveBlink2 10s ease-in-out infinite 2s, waveFlow2 10s linear infinite 3s;
}

@keyframes waveBlink {
    0%, 100% {
        opacity: 0.4;
        filter: brightness(1);
    }
    25% {
        opacity: 0.7;
        filter: brightness(1.3);
    }
    50% {
        opacity: 0.5;
        filter: brightness(1.1);
    }
    75% {
        opacity: 0.8;
        filter: brightness(1.4);
    }
}

@keyframes waveBlink2 {
    0%, 100% {
        opacity: 0.3;
        filter: brightness(1);
    }
    30% {
        opacity: 0.6;
        filter: brightness(1.25);
    }
    60% {
        opacity: 0.4;
        filter: brightness(1.15);
    }
    85% {
        opacity: 0.7;
        filter: brightness(1.35);
    }
}

@keyframes waveFlow {
    0% {
        transform: translateX(0);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        transform: translateX(calc(100vw + 200px));
        opacity: 0;
    }
}

@keyframes waveFlow2 {
    0% {
        transform: translateX(0);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        transform: translateX(calc(100vw + 200px));
        opacity: 0;
    }
}

/* Cyber Intelligence Blink Effect - Random Pulsing Triangles */
@keyframes cyberPulse {
    0%, 100% {
        opacity: 0.85;
        filter: brightness(1);
    }
    15% {
        opacity: 1;
        filter: brightness(1.15);
    }
    30% {
        opacity: 0.9;
        filter: brightness(1.05);
    }
    45% {
        opacity: 0.95;
        filter: brightness(1.1);
    }
    60% {
        opacity: 0.88;
        filter: brightness(1.02);
    }
    75% {
        opacity: 1;
        filter: brightness(1.2);
    }
    90% {
        opacity: 0.92;
        filter: brightness(1.08);
    }
}

@keyframes cyberPulse2 {
    0%, 100% {
        opacity: 0.5;
        filter: brightness(1);
    }
    20% {
        opacity: 0.7;
        filter: brightness(1.1);

/* Cyber Triangle Pattern + Wave Effect - Complete med Judaika + Scanlines */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        /* Scanlines */
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.03) 0px,
            rgba(0, 0, 0, 0.03) 1px,
            transparent 1px,
            transparent 2px
        ),
        /* Ytterligare Davidstjärnor för djup */
        url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.05'%3E%3Cpath d='M100 30 L130 100 L100 170 L70 100 Z' fill='%232d8659'/%3E%3Cpath d='M100 30 L170 100 L100 170 L30 100 Z' fill='%234a9d6e'/%3E%3C/g%3E%3C/svg%3E"),
        repeating-linear-gradient(
            60deg,
            transparent 0px,
            transparent 29px,
            rgba(45, 134, 89, 0.12) 29px,
            rgba(45, 134, 89, 0.12) 30px,
            transparent 30px,
            transparent 58px
        ),
        repeating-linear-gradient(
            -60deg,
            transparent 0px,
            transparent 29px,
            rgba(74, 157, 110, 0.12) 29px,
            rgba(74, 157, 110, 0.12) 30px,
            transparent 30px,
            transparent 58px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 25px,
            rgba(45, 134, 89, 0.08) 25px,
            rgba(45, 134, 89, 0.08) 26px,
            transparent 26px,
            transparent 50px
        );
    background-size: 
        100% 4px,
        200px 200px,
        60px 60px,
        60px 60px,
        50px 50px;
    background-position: 
        0 0,
        100px 100px,
        0 0,
        30px 30px,
        0 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 1;
    animation: scanlineMove 15s cubic-bezier(0.4, 0, 0.2, 1) infinite, cyberPulse 8s cubic-bezier(0.4, 0, 0.2, 1) infinite, judaikaRotate 50s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes judaikaRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================
   CYBER EFFECTS - Glitch, Neon, Scanlines, Holographic
   ============================================ */

/* Scanlines är nu integrerade i body::after ovan */

@keyframes scanlineMove {
    0% { transform: translateY(0); }
    100% { transform: translateY(4px); }
}

/* Cyber Glitch Effect på Header */
.site-header {
    position: relative;
}

.site-header::before,
.site-header::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    opacity: 0;
    animation: glitch 3s infinite;
}

.site-header::before {
    animation-delay: -1.5s;
    clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
    transform: translate(-2px, 0);
    filter: hue-rotate(90deg);
}

.site-header::after {
    animation-delay: -0.5s;
    transform: translate(2px, 0);
    filter: hue-rotate(-90deg);
}

@keyframes glitch {
    0%, 100% { opacity: 0; }
    10%, 90% { opacity: 0; }
    20%, 80% { opacity: 0.1; }
    30%, 70% { opacity: 0; }
    40%, 60% { opacity: 0.15; }
    50% { opacity: 0.2; }
}

/* Cyber Neon Glow på Navigation */
.main-navigation {
    position: relative;
    box-shadow: 
        0 0 10px rgba(45, 134, 89, 0.5),
        0 0 20px rgba(74, 157, 110, 0.3),
        0 0 30px rgba(45, 134, 89, 0.2),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
    animation: neonPulse 3s ease-in-out infinite;
}

@keyframes neonPulse {
    0%, 100% {
        box-shadow: 
            0 0 10px rgba(45, 134, 89, 0.5),
            0 0 20px rgba(74, 157, 110, 0.3),
            0 0 30px rgba(45, 134, 89, 0.2),
            inset 0 0 20px rgba(255, 255, 255, 0.1);
    }
    50% {
        box-shadow: 
            0 0 20px rgba(45, 134, 89, 0.8),
            0 0 40px rgba(74, 157, 110, 0.5),
            0 0 60px rgba(45, 134, 89, 0.4),
            inset 0 0 30px rgba(255, 255, 255, 0.2);
    }
}

/* Cyber Grid Overlay - Läggs till i body istället */

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        /* Kombinerar judaika och cyber grid */
        url("data:image/svg+xml,%3Csvg width='120' height='120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.08'%3E%3Cpath d='M60 20 L80 60 L60 100 L40 60 Z' fill='%232d8659'/%3E%3Cpath d='M60 20 L100 60 L60 100 L20 60 Z' fill='%234a9d6e'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='120' height='120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.06'%3E%3Cpath d='M60 20 L80 60 L60 100 L40 60 Z' fill='%232d8659'/%3E%3Cpath d='M60 20 L100 60 L60 100 L20 60 Z' fill='%234a9d6e'/%3E%3C/g%3E%3C/svg%3E"),
        /* Cyber Grid */
        linear-gradient(rgba(45, 134, 89, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(45, 134, 89, 0.03) 1px, transparent 1px),
        /* Triangulära cyber-mönster */
        repeating-linear-gradient(
            60deg,
            transparent 0px,
            transparent 29px,
            rgba(45, 134, 89, 0.03) 29px,
            rgba(45, 134, 89, 0.03) 30px,
            transparent 30px,
            transparent 58px
        ),
        repeating-linear-gradient(
            -60deg,
            transparent 0px,
            transparent 29px,
            rgba(74, 157, 110, 0.03) 29px,
            rgba(74, 157, 110, 0.03) 30px,
            transparent 30px,
            transparent 58px
        );
    background-size: 
        120px 120px,
        180px 180px,
        50px 50px,
        50px 50px,
        60px 60px,
        60px 60px;
    background-position: 
        0 0,
        60px 60px,
        0 0,
        0 0,
        0 0,
        30px 30px;
    pointer-events: none;
    z-index: -1;
    opacity: 0.7;
    animation: judaikaFloat 35s cubic-bezier(0.4, 0, 0.2, 1) infinite, gridPulse 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes gridPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* Cyber Holographic Effect - Uppdaterad för att fungera med digital rain */
.site-main {
    position: relative;
}

/* Flyttar holographic till en wrapper */
.site-main > * {
    position: relative;
    z-index: 1;
}

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

@keyframes holographicGlow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

/* Matrix Rain Effect - BORTTAGEN */

/* Cyber Digital Rain Effect (Subtle) - Använder .site-main istället */
.site-main {
    position: relative;
}

/* digitalRain animation - BORTTAGEN */

/* Cyber Glitch Text Effect */
.site-title a,
.nav-menu a,
.entry-title {
    position: relative;
    text-shadow: 
        0 0 5px rgba(45, 134, 89, 0.5),
        0 0 10px rgba(74, 157, 110, 0.3);
    animation: textGlow 4s ease-in-out infinite;
}

@keyframes textGlow {
    0%, 100% {
        text-shadow: 
            0 0 5px rgba(45, 134, 89, 0.5),
            0 0 10px rgba(74, 157, 110, 0.3);
    }
    50% {
        text-shadow: 
            0 0 10px rgba(45, 134, 89, 0.8),
            0 0 20px rgba(74, 157, 110, 0.5),
            0 0 30px rgba(45, 134, 89, 0.3);
    }
}

/* Cyber Border Glow på Buttons */
.auth-btn,
.submit-btn,
.footer-social-link {
    position: relative;
    overflow: hidden;
}

.auth-btn::after,
.submit-btn::after,
.footer-social-link::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        transparent,
        rgba(45, 134, 89, 0.3),
        transparent 30%
    );
    animation: borderRotate 3s linear infinite;
    opacity: 0;
    transition: opacity 0.3s;
}

.auth-btn:hover::after,
.submit-btn:hover::after,
.footer-social-link:hover::after {
    opacity: 1;
}

@keyframes borderRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Cyber Particle Effect */
.site-header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(2px 2px at 20% 30%, rgba(45, 134, 89, 0.3), transparent),
        radial-gradient(2px 2px at 60% 70%, rgba(74, 157, 110, 0.3), transparent),
        radial-gradient(1px 1px at 50% 50%, rgba(45, 134, 89, 0.4), transparent),
        radial-gradient(1px 1px at 80% 10%, rgba(74, 157, 110, 0.3), transparent),
        radial-gradient(2px 2px at 90% 40%, rgba(45, 134, 89, 0.2), transparent),
        radial-gradient(1px 1px at 33% 60%, rgba(74, 157, 110, 0.3), transparent);
    background-size: 200% 200%;
    background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%, 50% 50%, 0% 0%;
    animation: particleFloat 20s ease infinite;
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
}

@keyframes particleFloat {
    0%, 100% { background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%, 50% 50%, 0% 0%; }
    25% { background-position: 100% 0%, 0% 100%, 0% 0%, 100% 100%, 25% 75%, 50% 50%; }
    50% { background-position: 100% 100%, 0% 0%, 0% 100%, 100% 0%, 75% 25%, 100% 100%; }
    75% { background-position: 0% 100%, 100% 100%, 100% 0%, 0% 0%, 50% 50%, 50% 0%; }
}

/* Cyber Data Stream Lines */
.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(45, 134, 89, 0.8),
        rgba(74, 157, 110, 1),
        rgba(45, 134, 89, 0.8),
        transparent
    );
    background-size: 200% 100%;
    animation: dataStream 3s linear infinite;
    box-shadow: 
        0 0 10px rgba(45, 134, 89, 0.6),
        0 0 20px rgba(74, 157, 110, 0.4);
}

@keyframes dataStream {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Cyber Hexagon Pattern - Kombineras med holographic */
.site-main::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        /* Hexagon pattern */
        url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.05'%3E%3Cpolygon points='50,5 90,25 90,65 50,85 10,65 10,25' fill='none' stroke='%232d8659' stroke-width='0.5'/%3E%3C/g%3E%3C/svg%3E"),
        /* Holographic gradient */
        linear-gradient(
            45deg,
            rgba(45, 134, 89, 0.1),
            rgba(74, 157, 110, 0.1),
            rgba(45, 134, 89, 0.1),
            rgba(74, 157, 110, 0.1)
        );
    background-size: 
        100px 100px,
        400% 400%;
    background-position: 
        0 0,
        0 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
    animation: hexPulse 12s cubic-bezier(0.4, 0, 0.2, 1) infinite, holographic 15s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    border-radius: 12px;
}

.site-main:hover::after {
    opacity: 0.6;
}

@keyframes hexPulse {
    0% { 
        opacity: 0.1; 
        transform: scale(0.9);
    }
    40% { 
        opacity: 0.8; 
        transform: scale(1.1);
    }
    60% { 
        opacity: 0.9; 
        transform: scale(1.15);
    }
    100% { 
        opacity: 0; 
        transform: scale(1.25);
    }
}

/* Cyber Terminal Cursor Blink */
.site-title::after {
    content: "▊";
    animation: cursorBlink 1s step-end infinite;
    color: rgba(45, 134, 89, 0.8);
    margin-left: 2px;
}

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

/* Cyber Loading Bars */
.site-header {
    position: relative;
}

.site-header::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(
        90deg,
        rgba(45, 134, 89, 1),
        rgba(74, 157, 110, 1),
        rgba(45, 134, 89, 1)
    );
    animation: loadingBar 4s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(45, 134, 89, 0.8);
    z-index: 10;
}

@keyframes loadingBar {
    0% { width: 0%; left: 0%; }
    50% { width: 100%; left: 0%; }
    100% { width: 0%; left: 100%; }
}

/* ============================================
   CYBER DAVIDSTJÄRNA - Holographic Overlay
   ============================================ */

/* Ytterligare cyber-layer för Davidstjärnan */
.site-main::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    margin: -300px 0 0 -300px;
    background-image: 
        url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='holograd' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%232d8659;stop-opacity:0.1'/%3E%3Cstop offset='25%25' style='stop-color:%234a9d6e;stop-opacity:0.2'/%3E%3Cstop offset='50%25' style='stop-color:%232d8659;stop-opacity:0.15'/%3E%3Cstop offset='75%25' style='stop-color:%234a9d6e;stop-opacity:0.2'/%3E%3Cstop offset='100%25' style='stop-color:%232d8659;stop-opacity:0.1'/%3E%3C/linearGradient%3E%3Cfilter id='cyberGlow'%3E%3CfeGaussianBlur stdDeviation='4' result='coloredBlur'/%3E%3CfeMerge%3E%3CfeMergeNode in='coloredBlur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg opacity='0.5' filter='url(%23cyberGlow)'%3E%3Cpath d='M300 100 L400 300 L300 500 L200 300 Z' fill='url(%23holograd)' stroke='%232d8659' stroke-width='3'/%3E%3Cpath d='M300 100 L500 300 L300 500 L100 300 Z' fill='url(%23holograd)' stroke='%234a9d6e' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 0;
    opacity: 1;
    animation: holographicStar 35s cubic-bezier(0.4, 0, 0.2, 1) infinite, starGlitch 40s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    mix-blend-mode: screen;
}

@keyframes holographicStar {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.96);
        filter: brightness(0.7);
    }
    12% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.97);
        filter: brightness(0.7);
    }
    20% {
        opacity: 0.2;
        transform: translate(-50%, -50%) scale(0.99);
        filter: brightness(0.75);
    }
    30% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1.01);
        filter: brightness(0.9);
    }
    35% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1.03);
        filter: brightness(1.0);
    }
    45% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.08);
        filter: brightness(1.2);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.12);
        filter: brightness(1.5);
    }
    70% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.2);
        filter: brightness(1.3);
    }
    92% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1.26);
        filter: brightness(0.6);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.3);
        filter: brightness(0.5);
    }
}

@keyframes starGlitch {
    0%, 95%, 100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    96% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1.02);
    }
    97% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(0.98);
    }
    98% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Cyber Circuit Lines runt Davidstjärnan */
.site-main::after {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    width: 700px;
    height: 700px;
    margin: -350px 0 0 -350px;
    background-image: 
        /* Circuit lines */
        url("data:image/svg+xml,%3Csvg width='700' height='700' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.3' stroke='%232d8659' stroke-width='1' fill='none'%3E%3Cpath d='M350 50 L350 150 M350 550 L350 650 M50 350 L150 350 M550 350 L650 350 M200 200 L250 250 M500 500 L550 550 M200 500 L250 450 M500 200 L550 150'/%3E%3Ccircle cx='350' cy='50' r='3' fill='%234a9d6e'/%3E%3Ccircle cx='350' cy='650' r='3' fill='%234a9d6e'/%3E%3Ccircle cx='50' cy='350' r='3' fill='%234a9d6e'/%3E%3Ccircle cx='650' cy='350' r='3' fill='%234a9d6e'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 0;
    opacity: 1;
    animation: circuitPulse 15s cubic-bezier(0.4, 0, 0.2, 1) infinite, circuitRotate 50s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes circuitPulse {
    0% {
        opacity: 0;
        filter: brightness(0.8);
    }
    15% {
        opacity: 0;
        filter: brightness(0.8);
    }
    25% {
        opacity: 0.2;
        filter: brightness(0.9);
    }
    40% {
        opacity: 0.7;
        filter: brightness(1.3);
    }
    60% {
        opacity: 0.8;
        filter: brightness(1.5);
    }
    100% {
        opacity: 0;
        filter: brightness(0.6);
    }
}

@keyframes circuitRotate {
    0% { 
        transform: translate(-50%, -50%) rotate(0deg) scale(0.96);
        opacity: 0;
    }
    10% {
        transform: translate(-50%, -50%) rotate(36deg) scale(0.97);
        opacity: 0;
    }
    18% {
        transform: translate(-50%, -50%) rotate(65deg) scale(0.99);
        opacity: 0.15;
    }
    30% {
        transform: translate(-50%, -50%) rotate(108deg) scale(1.02);
        opacity: 0.4;
    }
    40% { 
        transform: translate(-50%, -50%) rotate(144deg) scale(1.06);
        opacity: 0.7;
    }
    50% {
        transform: translate(-50%, -50%) rotate(180deg) scale(1.1);
        opacity: 0.75;
    }
    60% { 
        transform: translate(-50%, -50%) rotate(216deg) scale(1.15);
        opacity: 0.8;
    }
    95% {
        transform: translate(-50%, -50%) rotate(342deg) scale(1.27);
        opacity: 0.15;
    }
    100% { 
        transform: translate(-50%, -50%) rotate(360deg) scale(1.3);
        opacity: 0;
    }
}

/* Ytterligare cyber-effekter för mer "cyber-känsla" */
.site-main {
    position: relative;
}

/* Cyber Data Matrix Effect - BORTTAGEN */

/* Flytande zoom och fade på hela sidan (ingen glitch) */
body {
    animation: bodyBreath 35s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes bodyBreath {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.002);
        filter: brightness(1.02);
    }
}

/* ============================================
   FLER CYBER-OBJEKT - Rikare cyber-miljö
   ============================================ */

/* Cyber Ringar - Koncentriska cirklar (använder .site-main istället) */
.site-main::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 800px;
    margin: -400px 0 0 -400px;
    border: 2px solid rgba(45, 134, 89, 0.2);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: cyberRing1 50s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    box-shadow: 
        0 0 20px rgba(45, 134, 89, 0.3),
        inset 0 0 20px rgba(74, 157, 110, 0.2);
}

.site-main::after {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    margin: -300px 0 0 -300px;
    border: 2px solid rgba(74, 157, 110, 0.25);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: cyberRing2 45s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    box-shadow: 
        0 0 30px rgba(74, 157, 110, 0.4),
        inset 0 0 30px rgba(45, 134, 89, 0.3);
}

@keyframes cyberRing1 {
    0% {
        opacity: 0.2;
        transform: translate(-50%, -50%) scale(0.8);
    }
    40% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.1);
    }
    60% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.4);
    }
}

@keyframes cyberRing2 {
    0% {
        opacity: 0.15;
        transform: translate(-50%, -50%) scale(0.75);
    }
    35% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1.05);
    }
    55% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.15);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.35);
    }
}

/* Cyber Strålar - Radiella linjer (använder .site-header istället) */
.site-header::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    width: 1000px;
    height: 1000px;
    margin: -500px 0 0 -500px;
    background-image: 
        repeating-conic-gradient(
            from 0deg at 50% 50%,
            transparent 0deg,
            rgba(45, 134, 89, 0.1) 2deg,
            transparent 4deg,
            rgba(74, 157, 110, 0.08) 6deg,
            transparent 8deg
        );
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
    animation: cyberRays 60s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    border-radius: 50%;
}

@keyframes cyberRays {
    0% {
        opacity: 0.3;
        transform: translate(-50%, -50%) rotate(0deg) scale(0.9);
    }
    50% {
        opacity: 0.7;
        transform: translate(-50%, -50%) rotate(180deg) scale(1.2);
    }
    100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) rotate(360deg) scale(0.9);
    }
}

/* Cyber Punkter/Noder - Glödande punkter (använder .main-navigation istället) */
.main-navigation::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(45, 134, 89, 0.6) 2px, transparent 2px),
        radial-gradient(circle at 80% 70%, rgba(74, 157, 110, 0.6) 2px, transparent 2px),
        radial-gradient(circle at 50% 20%, rgba(45, 134, 89, 0.5) 1.5px, transparent 1.5px),
        radial-gradient(circle at 30% 80%, rgba(74, 157, 110, 0.5) 1.5px, transparent 1.5px),
        radial-gradient(circle at 70% 50%, rgba(45, 134, 89, 0.4) 2px, transparent 2px);
    background-size: 
        200px 200px,
        250px 250px,
        180px 180px,
        220px 220px,
        200px 200px;
    background-position: 
        0 0,
        100% 100%,
        50% 0,
        0 100%,
        100% 50%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.8;
    animation: cyberNodes 35s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes cyberNodes {
    0% {
        opacity: 0.4;
        transform: scale(0.9);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 0.4;
        transform: scale(0.9);
    }
}

/* Cyber Polygoner - Hexagoner och trianglar */
.site-footer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.3'%3E%3Cpolygon points='100,20 180,80 180,140 100,180 20,140 20,80' fill='none' stroke='%232d8659' stroke-width='1'/%3E%3Cpolygon points='100,50 150,80 150,120 100,150 50,120 50,80' fill='none' stroke='%234a9d6e' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='150' height='150' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.25'%3E%3Cpolygon points='75,10 140,60 140,120 75,140 10,120 10,60' fill='none' stroke='%234a9d6e' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 200px 200px, 150px 150px;
    background-position: 10% 20%, 90% 80%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.5;
    animation: cyberPolygons 45s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes cyberPolygons {
    0% {
        opacity: 0.3;
        transform: scale(0.85) rotate(0deg);
    }
    45% {
        opacity: 0.7;
        transform: scale(1.1) rotate(180deg);
    }
    100% {
        opacity: 0.3;
        transform: scale(0.85) rotate(360deg);
    }
}

/* Cyber Grid Overlay - Ytterligare grid-lager (använder .site-footer istället) */
.site-footer::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(45, 134, 89, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(45, 134, 89, 0.05) 1px, transparent 1px),
        linear-gradient(45deg, rgba(74, 157, 110, 0.03) 1px, transparent 1px),
        linear-gradient(-45deg, rgba(74, 157, 110, 0.03) 1px, transparent 1px);
    background-size: 
        40px 40px,
        40px 40px,
        60px 60px,
        60px 60px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
    animation: cyberGridPulse 40s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes cyberGridPulse {
    0% {
        opacity: 0.4;
        transform: scale(0.95);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
    100% {
        opacity: 0.4;
        transform: scale(0.95);
    }
}

/* Cyber Orbiterande Element - Små cirklar som roterar */
.main-navigation::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    margin: -150px 0 0 -150px;
    background-image: 
        radial-gradient(circle at 0% 50%, rgba(45, 134, 89, 0.4) 3px, transparent 3px),
        radial-gradient(circle at 100% 50%, rgba(74, 157, 110, 0.4) 3px, transparent 3px),
        radial-gradient(circle at 50% 0%, rgba(45, 134, 89, 0.3) 2px, transparent 2px),
        radial-gradient(circle at 50% 100%, rgba(74, 157, 110, 0.3) 2px, transparent 2px);
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
    animation: cyberOrbit 55s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes cyberOrbit {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(0.8);
        opacity: 0.4;
    }
    50% {
        transform: translate(-50%, -50%) rotate(180deg) scale(1.2);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg) scale(0.8);
        opacity: 0.4;
    }
}

/* Cyber Linjer - Diagonala stråk */
.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 50px,
            rgba(45, 134, 89, 0.1) 50px,
            rgba(45, 134, 89, 0.1) 51px,
            transparent 51px,
            transparent 100px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 50px,
            rgba(74, 157, 110, 0.08) 50px,
            rgba(74, 157, 110, 0.08) 51px,
            transparent 51px,
            transparent 100px
        );
    pointer-events: none;
    z-index: 1;
    opacity: 0.5;
    animation: cyberLines 45s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes cyberLines {
    0% {
        opacity: 0.3;
        transform: translateX(0);
    }
    50% {
        opacity: 0.7;
        transform: translateX(20px);
    }
    100% {
        opacity: 0.3;
        transform: translateX(0);
    }
}

/* Liten diskret Davidstjärna i vänstra hörnet längst ner - synlig ENDAST vid hover */
.subtle-star-corner {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 50px;
    height: 50px;
    background-image: 
        url("data:image/svg+xml,%3Csvg width='50' height='50' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='starGlow'%3E%3CfeGaussianBlur stdDeviation='2' result='coloredBlur'/%3E%3CfeMerge%3E%3CfeMergeNode in='coloredBlur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg opacity='0.15' filter='url(%23starGlow)'%3E%3Cpath d='M25 5 L30 20 L25 35 L20 20 Z' fill='%232d8659'/%3E%3Cpath d='M25 5 L40 20 L25 35 L10 20 Z' fill='%234a9d6e'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: auto;
    z-index: 0;
    opacity: 0;
    filter: blur(0.5px);
    transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease;
    cursor: pointer;
}

.subtle-star-corner:hover {
    opacity: 0.9;
    transform: scale(1.3);
    filter: blur(0px) drop-shadow(0 0 15px rgba(45, 134, 89, 0.8)) drop-shadow(0 0 30px rgba(74, 157, 110, 0.6));
}

@keyframes subtleStarFloat {
    0% {
        opacity: 0.04;
        transform: scale(0.9);
    }
    50% {
        opacity: 0.1;
        transform: scale(1.05);
    }
    100% {
        opacity: 0.04;
        transform: scale(0.9);
    }
}

/* Ytterligare subtil judaika-layer (ersätter den gamla body::before) */

/* Profile Page Styles */
.profile-container {
    max-width: 1400px;
    margin: 60px auto;
    padding: 50px;
    background: white;
    border-radius: 25px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.profile-container > h1 {
    font-size: 2.5rem;
    color: #2d8659;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 3px solid #e0e0e0;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.profile-info {
    margin: 40px 0 50px 0;
    padding: 30px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 20px;
    border: 1px solid #e0e0e0;
}

.profile-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.profile-field:hover {
    padding-left: 10px;
    background: rgba(45, 134, 89, 0.02);
    margin: 0 -15px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 10px;
}

.profile-field:last-child {
    border-bottom: none;
}

.profile-field label {
    font-weight: 700;
    color: #333;
    min-width: 180px;
    font-size: 1.05rem;
    letter-spacing: 0.3px;
}

.profile-field span {
    color: #555;
    font-size: 1.05rem;
    font-weight: 500;
}

.profile-serviceavtal {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #2d8659;
}

.serviceavtal-badge {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.serviceavtal-badge.serviceavtal-mini {
    background: #e3f2fd;
    color: #1976d2;
    border: 2px solid #1976d2;
}

.serviceavtal-badge.serviceavtal-silver {
    background: #f5f5f5;
    color: #616161;
    border: 2px solid #9e9e9e;
}

.serviceavtal-badge.serviceavtal-gold {
    background: #fff9c4;
    color: #f57f17;
    border: 2px solid #fbc02d;
}

.serviceavtal-badge.serviceavtal-premium {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: 2px solid #764ba2;
}

.serviceavtal-badge.serviceavtal-none {
    background: #f5f5f5;
    color: #999;
    border: 2px solid #ddd;
}

.profile-actions {
    margin-top: 50px;
    padding-top: 40px;
    text-align: center;
    border-top: 2px solid #e0e0e0;
}

.logout-btn {
    display: inline-block;
    padding: 16px 40px;
    background: linear-gradient(135deg, #d63638 0%, #b32d2e 100%);
    color: white;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.05rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(214, 54, 56, 0.3);
    letter-spacing: 0.5px;
}

.logout-btn:hover {
    background: linear-gradient(135deg, #b32d2e 0%, #d63638 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(214, 54, 56, 0.4);
}

/* ServiceAvtal Package Selection */
.serviceavtal-selection {
    margin-top: 60px;
    padding: 70px 60px;
    background: linear-gradient(135deg, 
        rgba(248, 249, 250, 0.97) 0%, 
        rgba(255, 255, 255, 0.99) 50%,
        rgba(248, 249, 250, 0.97) 100%);
    border-radius: 35px;
    box-shadow: 
        0 25px 70px rgba(0, 0, 0, 0.15),
        0 10px 30px rgba(0, 0, 0, 0.1),
        0 0 0 2px rgba(0, 0, 0, 0.08),
        inset 0 2px 5px rgba(255, 255, 255, 0.9),
        inset 0 -2px 5px rgba(0, 0, 0, 0.05);
    border: 3px solid rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.serviceavtal-selection::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(45, 134, 89, 0.03) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.selection-header {
    text-align: center;
    margin-bottom: 60px;
    padding: 0 20px;
}

.selection-icon {
    font-size: 4rem;
    margin-bottom: 25px;
    animation: pulse 2s ease-in-out infinite;
    display: inline-block;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.serviceavtal-selection h2 {
    color: #2d8659;
    margin-bottom: 20px;
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.selection-description {
    color: #666;
    margin-bottom: 0;
    font-size: 1.15rem;
    line-height: 1.8;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 400;
}

.selection-notice {
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border: 2px solid #28a745;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.selection-notice .notice-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.selection-notice .notice-content {
    flex: 1;
}

.selection-notice strong {
    display: block;
    color: #155724;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.selection-notice p {
    color: #155724;
    margin: 0;
}

.serviceavtal-packages {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 60px;
    position: relative;
    z-index: 1;
    padding: 0 10px;
}


.serviceavtal-package.package-card + .serviceavtal-package.package-card::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    height: 3px;
    background: #000;
    z-index: 2;
    border-radius: 2px;
}

.serviceavtal-package.package-card {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.98) 0%, 
        rgba(248, 249, 250, 0.95) 50%,
        rgba(255, 255, 255, 0.98) 100%);
    border: 5px solid #000 !important;
    border-radius: 50px !important;
    padding: 0;
    text-align: left;
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 
        0 25px 70px rgba(0, 0, 0, 0.2),
        0 10px 30px rgba(0, 0, 0, 0.15),
        0 0 0 2px rgba(0, 0, 0, 0.08),
        inset 0 2px 5px rgba(255, 255, 255, 0.9),
        inset 0 -2px 5px rgba(0, 0, 0, 0.05);
    margin-bottom: 50px !important;
    margin-top: 25px !important;
    isolation: isolate;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    perspective: 1000px;
    transform-style: preserve-3d;
    opacity: 0;
    animation: rollDownFadeIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Animation för paket-kort när sidan laddas */
@keyframes rollDownFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-80px) scale(0.85) rotateX(-15deg);
    }
    60% {
        opacity: 0.8;
        transform: translateY(10px) scale(1.02) rotateX(2deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg);
    }
}

.serviceavtal-package.package-card:nth-child(1) {
    animation-delay: 0.1s !important;
}

.serviceavtal-package.package-card:nth-child(2) {
    animation-delay: 0.2s !important;
}

.serviceavtal-package.package-card:nth-child(3) {
    animation-delay: 0.3s !important;
}

.serviceavtal-package.package-card:nth-child(4) {
    animation-delay: 0.4s !important;
}

.serviceavtal-package.package-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(90deg, 
        rgba(0, 0, 0, 0.1) 0%, 
        rgba(0, 0, 0, 0.05) 50%, 
        rgba(0, 0, 0, 0.1) 100%);
    z-index: 1;
    border-radius: 30px 30px 0 0;
}

.serviceavtal-package.package-card::after {
    content: '';
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 5px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        #000 20%, 
        #000 80%, 
        transparent 100%);
    z-index: 1;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.serviceavtal-package.package-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 1;
}

.serviceavtal-package.package-card:hover::before {
    opacity: 1;
}

.serviceavtal-package.package-card:hover {
    transform: translateY(-20px) scale(1.02);
    box-shadow: 
        0 30px 80px rgba(0, 0, 0, 0.25),
        0 0 0 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border-color: #000 !important;
}

.serviceavtal-package.package-card:hover::after {
    width: 90%;
    height: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.package-badge-popular {
    position: absolute;
    top: 25px;
    right: -40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 10px 50px;
    font-size: 0.8rem;
    font-weight: 800;
    transform: rotate(45deg);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
    letter-spacing: 2px;
    z-index: 10;
    text-transform: uppercase;
}

.serviceavtal-package[data-package="mini"] {
    border-color: #000 !important;
    border-left: 6px solid #1976d2;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        -6px 0 0 0 #1976d2;
}

.serviceavtal-package[data-package="mini"]:hover {
    border-color: #1976d2;
    box-shadow: 0 15px 40px rgba(25, 118, 210, 0.3);
}

.serviceavtal-package[data-package="mini"]::before {
    background: linear-gradient(90deg, #1976d2, #42a5f5);
}

.serviceavtal-package[data-package="silver"] {
    border-color: #000 !important;
    border-left: 6px solid #616161;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        -6px 0 0 0 #616161;
}

.serviceavtal-package[data-package="silver"]:hover {
    border-color: #616161;
    box-shadow: 0 15px 40px rgba(97, 97, 97, 0.3);
}

.serviceavtal-package[data-package="silver"]::before {
    background: linear-gradient(90deg, #9e9e9e, #bdbdbd);
}

.serviceavtal-package[data-package="gold"] {
    border-color: #000 !important;
    border-left: 6px solid #f57f17;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        -6px 0 0 0 #f57f17;
}

.serviceavtal-package[data-package="gold"]:hover {
    border-color: #f57f17;
    box-shadow: 0 15px 40px rgba(245, 127, 23, 0.3);
}

.serviceavtal-package[data-package="gold"]::before {
    background: linear-gradient(90deg, #fbc02d, #fdd835);
}

.serviceavtal-package[data-package="premium"] {
    border: 4px solid #000 !important;
    border-left: 6px solid #667eea;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.98) 0%, 
        rgba(248, 249, 250, 0.95) 100%);
    position: relative;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        -6px 0 0 0 #667eea,
        0 0 30px rgba(102, 126, 234, 0.1);
}

.serviceavtal-package[data-package="premium"]::after {
    content: 'POPULÄR';
    position: absolute;
    top: 20px;
    right: -35px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 5px 40px;
    font-size: 0.75rem;
    font-weight: 700;
    transform: rotate(45deg);
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
    letter-spacing: 1px;
}

.serviceavtal-package[data-package="premium"]:hover {
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
}

.serviceavtal-package[data-package="premium"]::before {
    background: linear-gradient(90deg, #667eea, #764ba2);
}

.package-header {
    padding: 50px 35px 35px;
    text-align: center;
    border-bottom: 2px solid rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, 
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(248, 249, 250, 0.8) 100%);
    border-radius: 50px 50px 0 0;
}

.package-icon-wrapper {
    margin-bottom: 25px;
}

.package-icon-bg {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.25),
        0 5px 15px rgba(0, 0, 0, 0.15),
        inset 0 2px 5px rgba(255, 255, 255, 0.3);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    border: 3px solid rgba(255, 255, 255, 0.5);
}

.package-icon-bg::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: inherit;
    opacity: 0.3;
    filter: blur(10px);
    transition: all 0.5s ease;
}

.serviceavtal-package:hover .package-icon-bg {
    transform: scale(1.2) rotate(15deg);
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.3),
        0 8px 20px rgba(0, 0, 0, 0.2),
        inset 0 2px 5px rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.8);
}

.serviceavtal-package:hover .package-icon-bg::before {
    transform: scale(1.2);
    opacity: 0.5;
}

.package-icon {
    font-size: 4.5rem;
    display: block;
    transition: transform 0.5s ease;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25));
}

.serviceavtal-package:hover .package-icon {
    transform: scale(1.1);
}

.package-title-wrapper {
    position: relative;
    z-index: 2;
}

.package-name {
    margin: 0 0 12px 0;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    transition: all 0.3s ease;
    line-height: 1.2;
}

.serviceavtal-package:hover .package-name {
    transform: translateY(-2px);
}

.package-subtitle {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #666;
    margin-top: 8px;
}

.serviceavtal-package[data-package="mini"] .package-name {
    color: #1976d2;
}

.serviceavtal-package[data-package="silver"] .package-name {
    color: #616161;
}

.serviceavtal-package[data-package="gold"] .package-name {
    color: #f57f17;
}

.serviceavtal-package[data-package="premium"] .package-name {
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.package-body {
    padding: 40px 35px;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, 
        rgba(255, 255, 255, 0.5) 0%, 
        rgba(248, 249, 250, 0.3) 100%);
}

.package-description {
    color: #555;
    margin-bottom: 35px;
    font-size: 1.1rem;
    line-height: 1.8;
    text-align: center;
    font-weight: 400;
    padding: 0 10px;
}

.package-features-wrapper {
    flex: 1;
}

.package-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left;
}

.package-features li {
    list-style: none !important;
    list-style-type: none !important;
}

.package-features li {
    padding: 16px 0 !important;
    color: #444;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    position: relative;
    padding-left: 8px !important;
    list-style: none !important;
    list-style-type: none !important;
}

.package-features li:last-child {
    border-bottom: none;
}

.package-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 2px;
    background: currentColor;
    transition: width 0.3s ease;
}

.package-features li:hover {
    color: #2d8659;
    padding-left: 10px;
    transform: translateX(5px);
}

.package-features li:hover::before {
    width: 3px;
}

.feature-icon {
    font-weight: 700;
    font-size: 1.3rem;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.package-features li:hover .feature-icon {
    background: rgba(45, 134, 89, 0.1);
    transform: scale(1.1);
}

.feature-text {
    flex: 1;
    line-height: 1.6;
    font-weight: 500;
}

.package-footer {
    padding: 50px 35px !important;
    background: linear-gradient(135deg,
        rgba(248, 249, 250, 0.95) 0%,
        rgba(255, 255, 255, 0.9) 50%,
        rgba(248, 249, 250, 0.95) 100%);
    border-top: 5px solid #000 !important;
    border-radius: 0 0 50px 50px !important;
    position: relative;
    z-index: 2;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center;
    text-align: right !important;
    margin-top: 25px !important;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.05);
}

.package-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0, 0, 0, 0.1) 50%, 
        transparent 100%);
}

.package-select-form {
    margin: 0 !important;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.package-select-btn {
    padding: 32px 75px !important;
    color: white;
    border: none;
    border-radius: 30px;
    font-size: 1.6rem !important;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 22px;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 3px;
    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.35),
        0 8px 20px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    margin-left: auto !important;
    margin-right: 0 !important;
    min-width: 320px !important;
    border: 3px solid rgba(255, 255, 255, 0.25);
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.package-select-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.package-select-btn:hover::before {
    width: 300px;
    height: 300px;
}

.package-select-btn:hover {
    transform: translateY(-8px) scale(1.12) !important;
    box-shadow: 
        0 25px 60px rgba(0, 0, 0, 0.45),
        0 12px 30px rgba(0, 0, 0, 0.35),
        0 0 0 4px rgba(255, 255, 255, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.5),
        0 0 40px rgba(255, 255, 255, 0.4) !important;
    filter: brightness(1.25) saturate(1.2) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    border-width: 4px !important;
    letter-spacing: 4px !important;
    animation: buttonPulse 1.5s ease-in-out infinite;
}

@keyframes buttonPulse {
    0%, 100% {
        box-shadow: 
            0 25px 60px rgba(0, 0, 0, 0.45),
            0 12px 30px rgba(0, 0, 0, 0.35),
            0 0 0 4px rgba(255, 255, 255, 0.3),
            inset 0 2px 0 rgba(255, 255, 255, 0.5),
            0 0 40px rgba(255, 255, 255, 0.4);
    }
    50% {
        box-shadow: 
            0 25px 60px rgba(0, 0, 0, 0.45),
            0 12px 30px rgba(0, 0, 0, 0.35),
            0 0 0 4px rgba(255, 255, 255, 0.5),
            inset 0 2px 0 rgba(255, 255, 255, 0.5),
            0 0 60px rgba(255, 255, 255, 0.6);
    }
}

.package-select-btn:active {
    transform: translateY(-1px) scale(0.98);
}

.btn-text {
    position: relative;
    z-index: 1;
}

.btn-arrow {
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.package-select-btn:hover .btn-arrow {
    transform: translateX(10px) scale(1.3);
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.package-select-btn.package-mini {
    background: linear-gradient(135deg, #1976d2 0%, #42a5f5 100%);
}

.package-select-btn.package-mini:hover {
    background: linear-gradient(135deg, #42a5f5 0%, #1976d2 100%);
    box-shadow: 0 8px 20px rgba(25, 118, 210, 0.4);
}

.package-select-btn.package-silver {
    background: linear-gradient(135deg, #616161 0%, #9e9e9e 100%);
}

.package-select-btn.package-silver:hover {
    background: linear-gradient(135deg, #9e9e9e 0%, #616161 100%);
    box-shadow: 0 8px 20px rgba(97, 97, 97, 0.4);
}

.package-select-btn.package-gold {
    background: linear-gradient(135deg, #f57f17 0%, #fbc02d 100%);
}

.package-select-btn.package-gold:hover {
    background: linear-gradient(135deg, #fbc02d 0%, #f57f17 100%);
    box-shadow: 0 8px 20px rgba(245, 127, 23, 0.4);
}

.package-select-btn.package-premium {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.package-select-btn.package-premium:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

@media (max-width: 768px) {
    .serviceavtal-packages {
        grid-template-columns: 1fr;
    }
}

/* Login Method Toggle */
.login-method-toggle {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    background: #f5f5f5;
    padding: 5px;
    border-radius: 10px;
}

.method-tab {
    flex: 1;
    padding: 12px 20px;
    text-align: center;
    text-decoration: none;
    color: #666;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: transparent;
}

.method-tab:hover {
    background: rgba(45, 134, 89, 0.1);
    color: #2d8659;
}

.method-tab.active {
    background: linear-gradient(135deg, #2d8659 0%, #4a9d6e 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(45, 134, 89, 0.3);
}