/* /www/assets/css/style.css */

html {
    height: 100%; /* Zabezpečí, že html element má plnú výšku viewportu */
}

body {
    display: flex;
    flex-direction: column; /* Usporiada priame deti body (nav, main-content, footer) pod seba */
    min-height: 100vh; /* Minimálna výška body je 100% výšky viewportu */
    color: #333; /* Predvolená farba textu pre lepšiu čitateľnosť */
}

.main-content {
    flex-grow: 1; /* Táto trieda (ktorú máte na hlavnom obsahovom kontajneri) spôsobí, že sa roztiahne a vyplní dostupné miesto, čím posunie pätičku nadol */
    padding-bottom: 2rem; /* Pridá trochu miesta pod obsahom pred pätičkou */
}

/* Vylepšenie pre odkazy v pätičke */
.footer-link:hover {
    color: #adb5bd !important; /* Svetlejšia sivá pri prejdení myšou, !important pre prípadné prepísanie Bootstrapu */
    text-decoration: underline !important;
}

/* Príklad pre odkazy na sociálne siete v pätičke, ak by ste ich pridali */
.footer-link-social:hover {
    color: #0d6efd !important; /* Príklad: Bootstrap primárna modrá */
}

/* Globálne vylepšenie pre alerty (flash správy) */
.alert {
    border-left-width: 5px;
    border-radius: .25rem;
}
.alert-success { border-left-color: var(--bs-success); }
.alert-danger { border-left-color: var(--bs-danger); }
.alert-warning { border-left-color: var(--bs-warning); }
.alert-info { border-left-color: var(--bs-info); }

/* Zabezpečenie, aby navbar neprekrýval obsah pri skoku na kotvu (ak by ste mali) */
/* html { scroll-padding-top: 70px; } /* Výška vášho navbaru */

.feature-icon-small {
    width: 4rem;
    height: 4rem;
    /* Môžete pridať ďalšie štýly podľa potreby */
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    display: none; /* Skryté defaultne */
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
/* Pridaj si vlastný spinner alebo text */
.loading-overlay::after {
    content: 'Spracúvam...'; /* Alebo Bootstrap spinner */
    /* font-size: 1.5rem; */
}

#snippet--contentArea {
	opacity: 1;
}

	:root {
			--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
			--success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
			--dark-gradient: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
			
			/* Pôvodná premenná pre navbar, toasty, ajax loader - zachováme jej vyššiu priehľadnosť */
			--glass-bg: rgba(255, 255, 255, 0.1); 

			/* --- NOVÁ PREMENNÁ PRE POZADIE DROPDOWN MENU --- */
			/* Možnosť 1: Svetlý základ, menej priehľadný */
			--dropdown-glass-bg: rgba(255, 255, 255, 0.85); /* 75% nepriehľadnosť, biely základ */
			/* Možnosť 2: Tmavší základ, menej priehľadný (môže lepšie ladiť s bielym textom) */
			/* --dropdown-glass-bg: rgba(30, 30, 55, 0.8); */ /* 80% nepriehľadnosť, tmavo-modro-sivý základ */

			--glass-border: 1px solid rgba(255, 255, 255, 0.2);
			--shadow-light: 0 8px 32px rgba(31, 38, 135, 0.37);
			--shadow-dark: 0 4px 20px rgba(0, 0, 0, 0.1);
            --navbar-height: 60px; /* Alebo vaša skutočná výška navigácie */

		}

		* {
			font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
		}

		body {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			min-height: 100vh;
			position: relative;
		}

		body::before {
			content: '';
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: 
				radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
				radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
				radial-gradient(circle at 40% 80%, rgba(120, 219, 255, 0.3) 0%, transparent 50%);
			pointer-events: none;
			z-index: -1;
		}

		.navbar {
			background: var(--glass-bg) !important;
			backdrop-filter: blur(20px);
			border-bottom: var(--glass-border);
			box-shadow: var(--shadow-light);
			transition: all 0.3s ease;
		}

		.navbar-brand {
			font-weight: 700;
			font-size: 1.5rem;
			transition: transform 0.3s ease;
		}

		.navbar-brand:hover {
			transform: scale(1.05);
		}

		.navbar-nav .nav-link {
			font-weight: 500;
			position: relative;
			transition: all 0.3s ease;
			margin: 0 0.5rem;
			border-radius: 8px;
		}

		.navbar-nav .nav-link:hover,
		.navbar-nav .nav-link.active {
			background: var(--glass-bg);
			backdrop-filter: blur(10px);
			transform: translateY(-2px);
			color: #fff !important;
		}

		.navbar-nav .nav-link::after {
			content: '';
			position: absolute;
			bottom: -2px;
			left: 50%;
			width: 0;
			height: 2px;
			background: var(--primary-gradient);
			transition: all 0.3s ease;
			transform: translateX(-50%);
		}

		.navbar-nav .nav-link:hover::after,
		.navbar-nav .nav-link.active::after {
			width: 80%;
		}

		.main-content {
			background: rgba(255, 255, 255, 0.95);
			backdrop-filter: blur(20px);
			border-radius: 20px;
			box-shadow: var(--shadow-dark);
			margin-top: 2rem;
			margin-bottom: 2rem;
			min-height: calc(100vh - 430px);
			position: relative;
			overflow: hidden;
		}

		.main-content::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: 
				radial-gradient(circle at 90% 10%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
				radial-gradient(circle at 10% 90%, rgba(255, 119, 198, 0.1) 0%, transparent 50%);
			pointer-events: none;
			z-index: 0;
		}

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

		.alert {
			border: none;
			border-radius: 15px;
			backdrop-filter: blur(10px);
			box-shadow: var(--shadow-dark);
			animation: slideInDown 0.5s ease-out;
		}

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

		.dropdown-menu {
			background: var(--dropdown-glass-bg); /* <<< ZMENA TU: Použijeme novú premennú */
			backdrop-filter: blur(20px); /* Môžeš zvážiť zníženie blur, ak je pozadie menej priehľadné */
			border: var(--glass-border);
			border-radius: 15px;
			box-shadow: var(--shadow-light);
			animation: fadeInUp 0.3s ease-out;
		}

		@keyframes fadeInUp {
			from {
				opacity: 0;
				transform: translateY(10px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		.dropdown-item {
			border-radius: 10px;
			margin: 0.25rem;
			transition: all 0.3s ease;
		}

		.dropdown-item:hover {
			background: var(--glass-bg);
			backdrop-filter: blur(10px);
			transform: translateX(5px);
		}

		.badge {
			animation: pulse 2s infinite;
		}

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

		.footer {
			background: var(--dark-gradient) !important;
			position: relative;
			overflow: hidden;
		}

		.footer::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: 
				radial-gradient(circle at 70% 30%, rgba(120, 119, 198, 0.2) 0%, transparent 50%),
				radial-gradient(circle at 30% 70%, rgba(255, 119, 198, 0.2) 0%, transparent 50%);
			pointer-events: none;
		}

		.footer * {
			position: relative;
			z-index: 1;
		}

		.footer-link {
			transition: all 0.3s ease;
			position: relative;
		}

		.footer-link::after {
			content: '';
			position: absolute;
			bottom: -2px;
			left: 0;
			width: 0;
			height: 2px;
			background: var(--primary-gradient);
			transition: width 0.3s ease;
		}

		.footer-link:hover::after {
			width: 100%;
		}

		.footer-link:hover {
			color: #fff !important;
			transform: translateY(-2px);
		}

		.toast-container .toast {
			background: var(--glass-bg);
			backdrop-filter: blur(20px);
			border: var(--glass-border);
			border-radius: 15px;
			box-shadow: var(--shadow-light);
		}

        /* --- AJAX LOADER --- */
        #ajax-loader {
            /* Všetky pôvodné štýly zostávajú, len sme zmenili selektor a pridali display: none */
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: var(--glass-border);
            border-radius: 15px;
            padding: 2rem;
            font-weight: 600;
            color: #333; /* Na tomto pozadí je #333 lepšie čitateľné ako biela */
            box-shadow: var(--shadow-light);
            z-index: 10000; /* Zvýšime z-index pre istotu */
            animation: fadeIn 0.3s ease-out;
            
            /* === KĽÚČOVÁ ZMENA: Štandardne skrytý === */
            display: none; 
        }

        /* Trieda, ktorú pridá JavaScript na zobrazenie loadera */
        #ajax-loader.is-active {
            display: flex; /* Použijeme flex, keďže vnorený div je centrovaný pomocou d-flex */
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
            to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        }


		/* Mobile optimizations */
		@media (max-width: 768px) {
			.main-content {
				margin: 1rem;
				border-radius: 15px;
			}
			
			.navbar-nav .nav-link {
				margin: 0.25rem 0;
			}
		}

		/* Smooth scrolling */
		html {
			scroll-behavior: smooth;
		}

		/* Custom scrollbar */
		::-webkit-scrollbar {
			width: 8px;
		}

		::-webkit-scrollbar-track {
			background: rgba(255, 255, 255, 0.1);
		}

		::-webkit-scrollbar-thumb {
			background: var(--primary-gradient);
			border-radius: 4px;
		}

		::-webkit-scrollbar-thumb:hover {
			background: var(--secondary-gradient);
		}

		/* Dashboard Specific Styles - pridať do style.css */

/* Welcome Section */
.dashboard-welcome-section {
    margin-bottom: 2rem;
}

.welcome-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--shadow-light);
    padding: 2rem;
    position: relative;
    overflow: hidden;
    animation: slideInDown 0.8s ease-out;
}

.welcome-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 90% 10%, rgba(120, 119, 198, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 10% 90%, rgba(255, 119, 198, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.welcome-content {
    position: relative;
    z-index: 1;
}

.dashboard-title {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    font-size: 2.2rem;
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

.dashboard-subtitle {
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 0;
    font-weight: 400;
}

.welcome-decoration {
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    font-size: 4rem;
    color: rgba(22, 22, 22, 0.8);
    z-index: 1;
}

/* Dashboard Cards */
.dashboard-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--shadow-dark);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.6s ease-out;
}

.dashboard-card:hover {
/*    transform: translateY(-8px) scale(1.02); */
    box-shadow: 0 20px 40px rgba(31, 38, 135, 0.15);
}

.dashboard-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 80% 20%, rgba(120, 119, 198, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(255, 119, 198, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dashboard-card:hover::before {
    opacity: 1;
}

.dashboard-card .card-body {
    position: relative;
    z-index: 1;
    padding: 2rem;
}

/* Card Icons */
.card-icon-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.card-icon {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: white;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.card-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.dashboard-card:hover .card-icon::before {
    left: 100%;
}

.card-icon.services {
    background: var(--primary-gradient);
}

.card-icon.domains {
    background: var(--success-gradient);
}

.card-icon.invoices {
    background: var(--secondary-gradient);
}

.card-icon.profile {
    background: var(--dark-gradient);
}

.card-icon.support {
    background: linear-gradient(135deg, #ff6b6b 0%, #ffa500 100%);
}

.card-icon.actions {
    background: linear-gradient(135deg, #00d4aa 0%, #00b4d8 100%);
}

.dashboard-card:hover .card-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Dashboard Badges */
.card-badge-wrapper {
    display: flex;
    align-items: flex-start;
}

.dashboard-badge {
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: white;
    animation: pulse 2s infinite;
    min-width: 2rem;
    text-align: center;
}

.dashboard-badge.primary {
    background: var(--primary-gradient);
}

.dashboard-badge.info {
    background: var(--success-gradient);
}

.dashboard-badge.danger {
    background: var(--secondary-gradient);
}

/* Card Content */
.dashboard-card .card-title {
    font-weight: 600;
    font-size: 1.25rem;
    color: #333;
    margin-bottom: 1rem;
}

.dashboard-card .card-text {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

/* Dashboard Buttons */
.dashboard-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: none;
    cursor: pointer;
}

.dashboard-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.dashboard-btn:hover::before {
    left: 100%;
}

.dashboard-btn.primary {
    background: var(--primary-gradient);
    color: white;
}

.dashboard-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
    color: white;
}

.dashboard-btn.success {
    background: var(--success-gradient);
    color: white;
}

.dashboard-btn.success:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(79, 172, 254, 0.4);
    color: white;
}

.dashboard-btn.info {
    background: linear-gradient(135deg, #ff6b6b 0%, #ffa500 100%);
    color: white;
}

.dashboard-btn.info:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255, 107, 107, 0.4);
    color: white;
}

.dashboard-btn.outline {
    background: transparent;
    color: #667eea;
}

.dashboard-btn.outline:hover {
    background: var(--primary-gradient);
    color: white;
    transform: translateY(-2px);
}

.dashboard-btn.small {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

/* Quick Actions */
.quick-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Section Headers */
.section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.section-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.section-icon.warning {
    background: linear-gradient(135deg, #ffa726 0%, #ff7043 100%);
}

.section-icon.info {
    background: var(--success-gradient);
}

.section-title {
    font-weight: 600;
    font-size: 1.3rem;
    color: #333;
    margin: 0;
}

/* Expiring Items */
.expiring-items {
    margin-bottom: 1rem;
}

.expiring-item {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.expiring-item:hover {
    background: rgba(255, 193, 7, 0.2);
    transform: translateX(5px);
}

.item-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.item-icon {
    font-size: 1.2rem;
    color: #f57c00;
}

.item-details {
    display: flex;
    flex-direction: column;
}

.item-name {
    font-weight: 600;
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.item-name:hover {
    color: #667eea;
}

.item-type {
    color: #666;
    font-size: 0.85rem;
}

.expiry-badge {
    background: linear-gradient(135deg, #ffa726 0%, #ff7043 100%);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Ticket Items */
.ticket-items {
    margin-bottom: 1rem;
}

.ticket-item {
    background: rgba(32, 201, 151, 0.1);
    border: 1px solid rgba(32, 201, 151, 0.3);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    transition: all 0.3s ease;
}

.ticket-item:hover {
    background: rgba(32, 201, 151, 0.2);
    transform: translateX(5px);
}

.ticket-subject {
    font-weight: 600;
    color: #333;
    text-decoration: none;
    display: block;
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

.ticket-subject:hover {
    color: #667eea;
}

.ticket-meta {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.ticket-status {
    padding: 0.2rem 0.6rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.ticket-status.status-open {
    background: #e3f2fd;
    color: #1976d2;
}

.ticket-status.status-closed {
    background: #e8f5e8;
    color: #2e7d32;
}

.ticket-status.status-pending {
    background: #fff3e0;
    color: #f57c00;
}

.ticket-date {
    color: #666;
    font-size: 0.85rem;
}

/* Animation Delays for Staggered Effect */
.col-lg-4:nth-child(1) .dashboard-card,
.col-md-6:nth-child(1) .dashboard-card { animation-delay: 0.1s; }
.col-lg-4:nth-child(2) .dashboard-card,
.col-md-6:nth-child(2) .dashboard-card { animation-delay: 0.2s; }
.col-lg-4:nth-child(3) .dashboard-card,
.col-md-6:nth-child(3) .dashboard-card { animation-delay: 0.3s; }
.col-lg-4:nth-child(4) .dashboard-card,
.col-md-6:nth-child(4) .dashboard-card { animation-delay: 0.4s; }
.col-lg-4:nth-child(5) .dashboard-card,
.col-md-6:nth-child(5) .dashboard-card { animation-delay: 0.5s; }
.col-lg-4:nth-child(6) .dashboard-card,
.col-md-6:nth-child(6) .dashboard-card { animation-delay: 0.6s; }

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .dashboard-title {
        font-size: 1.8rem;
    }
    
    .welcome-card {
        padding: 1.5rem;
    }
    
    .welcome-decoration {
        display: none;
    }
    
    .dashboard-card .card-body {
        padding: 1.5rem;
    }
    
    .card-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
    
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .quick-actions .dashboard-btn {
        font-size: 0.9rem;
    }
    
    .item-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .ticket-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

@media (max-width: 576px) {
    .expiring-item,
    .ticket-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .expiry-badge {
        align-self: flex-end;
    }
}

/* === CART SPECIFIC STYLES === */
/* Pridajte tieto štýly do existujúceho style.css súboru */

/* Cart Items List */
.cart-items-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

/* Individual Cart Item */
.cart-item {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 1.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    animation: slideInLeft 0.5s ease-out;
}

.cart-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(102, 126, 234, 0.15);
    border-color: rgba(102, 126, 234, 0.3);
}

.cart-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary-gradient);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cart-item:hover::before {
    opacity: 1;
}

/* Cart Item Content Layout */
.cart-item-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.cart-item-info {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
}

.cart-item-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--primary-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.cart-item:hover .cart-item-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.cart-item-details {
    flex: 1;
    min-width: 0; /* Umožní správne zalamovanie textu */
}

.cart-item-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.cart-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.cart-meta-item {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    color: #666;
    background: rgba(102, 126, 234, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.cart-meta-item:hover {
    background: rgba(102, 126, 234, 0.2);
    transform: translateY(-1px);
}

.cart-item-description {
    font-size: 0.9rem;
    color: #777;
    margin: 0;
    line-height: 1.5;
    font-style: italic;
}

/* Cart Item Actions */
.cart-item-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    flex-shrink: 0;
}

.cart-item-price {
    font-size: 1.25rem;
    font-weight: 700;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
}

.cart-remove-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: #dc3545;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1rem;
}

.cart-remove-btn:hover {
    background: #dc3545;
    color: white;
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(220, 53, 69, 0.3);
}

/* Cart Total */
.cart-total {
    border-top: 2px solid rgba(102, 126, 234, 0.1);
    padding-top: 1.5rem;
    margin-top: 1rem;
}

.cart-total-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: var(--glass-border);
    border-radius: 16px;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}

.cart-total-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-gradient);
    opacity: 0.05;
    pointer-events: none;
}

.cart-total-label {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
}

.cart-total-amount {
    font-size: 1.5rem;
    font-weight: 700;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Terms and Conditions Section */
.cart-terms-section {
    margin-bottom: 2rem;
}

.custom-checkbox-wrapper {
    position: relative;
    margin-bottom: 1rem;
}

.custom-checkbox {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

.custom-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    cursor: pointer;
    user-select: none;
    line-height: 1.5;
}

.checkmark {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(102, 126, 234, 0.3);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    margin-top: 2px;
}

.checkmark i {
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: white;
    font-size: 0.8rem;
}

.custom-checkbox:checked + .custom-checkbox-label .checkmark {
    background: var(--primary-gradient);
    border-color: transparent;
    transform: scale(1.1);
}

.custom-checkbox:checked + .custom-checkbox-label .checkmark i {
    opacity: 1;
    transform: scale(1);
}

.custom-checkbox-label:hover .checkmark {
    border-color: rgba(102, 126, 234, 0.6);
    transform: scale(1.05);
}

.checkbox-text {
    color: #555;
    line-height: 1.6;
}

.terms-link {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
}

.terms-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-gradient);
    transition: width 0.3s ease;
}

.terms-link:hover {
    color: #5a67d8;
}

.terms-link:hover::after {
    width: 100%;
}

/* Form Error */
.form-error {
    display: flex;
    align-items: center;
    color: #dc3545;
    font-size: 0.9rem;
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 8px;
    padding: 0.75rem;
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Cart Submit Section */
.cart-submit-section {
    text-align: center;
}

.cart-confirm-btn {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    min-width: 280px;
    position: relative;
    overflow: hidden;
}

.cart-confirm-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.cart-confirm-btn.processing {
    pointer-events: none;
}

.btn-spinner {
    display: none;
    align-items: center;
    justify-content: center;
}

/* Empty Cart Styles */
.empty-cart-icon {
    font-size: 4rem;
    color: rgba(102, 126, 234, 0.3);
    margin-bottom: 1.5rem;
}

.empty-cart-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
}

.empty-cart-text {
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* Animations */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(30px);
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .cart-item-content {
        flex-direction: column;
        gap: 1rem;
    }
    
    .cart-item-info {
        width: 100%;
    }
    
    .cart-item-actions {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    
    .cart-item-meta {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
    
    .cart-total-content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .custom-checkbox-label {
        gap: 0.75rem;
    }
    
    .cart-confirm-btn {
        min-width: 100%;
        padding: 1rem;
    }
    
    .checkbox-text {
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .cart-item {
        padding: 1rem;
    }
    
    .cart-item-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .cart-item-name {
        font-size: 1rem;
    }
    
    .cart-item-price {
        font-size: 1.1rem;
    }
    
    .cart-meta-item {
        font-size: 0.8rem;
        padding: 0.2rem 0.5rem;
    }
}

/* Staggered animation for cart items */
.cart-item:nth-child(1) { animation-delay: 0.1s; }
.cart-item:nth-child(2) { animation-delay: 0.2s; }
.cart-item:nth-child(3) { animation-delay: 0.3s; }
.cart-item:nth-child(4) { animation-delay: 0.4s; }
.cart-item:nth-child(5) { animation-delay: 0.5s; }


/* Signin page custom styles */
.signin-container {
	padding: 2rem 0;
	animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

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

.signin-logo {
	position: relative;
}

.signin-logo-img {
	width: 80px;
	height: 80px;
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
	transition: all 0.3s ease;
	animation: float 3s ease-in-out infinite;
}

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

.signin-logo-img:hover {
	transform: scale(1.1);
	box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
}

.signin-title {
	font-size: 2.5rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	animation: slideInDown 0.8s ease-out;
}

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

.signin-subtitle {
	font-size: 1.1rem;
	margin-bottom: 0;
	animation: fadeIn 1s ease-out 0.3s both;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.signin-card {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 25px;
	box-shadow: 0 20px 60px rgba(31, 38, 135, 0.15);
	overflow: hidden;
	position: relative;
	animation: scaleIn 0.5s ease-out 0.2s both;
}

@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.signin-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: 
		radial-gradient(circle at 20% 20%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
		radial-gradient(circle at 80% 80%, rgba(255, 119, 198, 0.1) 0%, transparent 50%);
	pointer-events: none;
	z-index: 0;
}

.signin-card-body {
	padding: 3rem 2.5rem;
	position: relative;
	z-index: 1;
}

.signin-form-group {
	position: relative;
}

.signin-label {
	display: block;
	font-weight: 600;
	color: #4a5568;
	margin-bottom: 0.75rem;
	font-size: 0.95rem;
	transition: color 0.3s ease;
}

.signin-input-wrapper {
	position: relative;
}

.signin-input {
	width: 100%;
	padding: 1rem 1.25rem;
	border: 2px solid rgba(0, 0, 0, 0.1);
	border-radius: 15px;
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(10px);
	font-size: 1rem;
	font-weight: 500;
	transition: all 0.3s ease;
	position: relative;
	z-index: 2;
}

.signin-input:focus {
	outline: none;
	border-color: transparent;
	background: rgba(255, 255, 255, 0.95);
	transform: translateY(-2px);
	box-shadow: 0 10px 25px rgba(102, 126, 234, 0.15);
}

.signin-input-focus {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 2px solid transparent;
	border-radius: 15px;
	background: var(--primary-gradient);
	opacity: 0;
	transition: all 0.3s ease;
	z-index: 1;
}

.signin-input:focus + .signin-input-focus {
	opacity: 1;
}

.signin-input.is-invalid {
	border-color: #dc3545;
	animation: shake 0.5s ease-in-out;
}

@keyframes shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-5px); }
	75% { transform: translateX(5px); }
}

.signin-error-message {
	color: #dc3545;
	font-size: 0.875rem;
	margin-top: 0.5rem;
	font-weight: 500;
	animation: slideInUp 0.3s ease-out;
}

@keyframes slideInUp {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.signin-btn {
	background: var(--primary-gradient);
	border: none;
	border-radius: 15px;
	padding: 1rem 2rem;
	font-size: 1.1rem;
	font-weight: 600;
	color: white;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.signin-btn-content {
	position: relative;
	z-index: 2;
}

.signin-btn-shimmer {
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
	transition: left 0.6s;
	z-index: 1;
}

.signin-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
}

.signin-btn:hover .signin-btn-shimmer {
	left: 100%;
}

.signin-btn:active {
	transform: translateY(-1px);
}

.signin-links {
	margin-top: 2rem;
	animation: fadeIn 1.2s ease-out;
}

.signin-link-item {
	padding: 0.5rem 0;
}

.signin-link {
	color: #667eea;
	text-decoration: none;
	font-weight: 600;
	transition: all 0.3s ease;
	position: relative;
	margin-left: 0.5rem;
}

.signin-link::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--primary-gradient);
	transition: width 0.3s ease;
}

.signin-link:hover {
	color: #5a67d8;
	transform: translateY(-1px);
}

.signin-link:hover::after {
	width: 100%;
}

.signin-link-secondary {
	color: #718096;
	text-decoration: none;
	font-weight: 500;
	font-size: 0.95rem;
	transition: all 0.3s ease;
}

.signin-link-secondary:hover {
	color: #4a5568;
	transform: translateY(-1px);
}

.signin-alert {
	border: none;
	border-radius: 12px;
	background: rgba(220, 53, 69, 0.1);
	border-left: 4px solid #dc3545;
	backdrop-filter: blur(10px);
	animation: slideInDown 0.4s ease-out;
}

/* Responzívne úpravy */
@media (max-width: 768px) {
	.signin-container {
		padding: 1rem 0;
	}
	
	.signin-card-body {
		padding: 2rem 1.5rem;
	}
	
	.signin-title {
		font-size: 2rem;
	}
	
	.signin-input {
		padding: 0.875rem 1rem;
	}
}

@media (max-width: 480px) {
	.signin-card-body {
		padding: 1.5rem 1rem;
	}
	
	.signin-logo-img {
		width: 60px;
		height: 60px;
	}
}
/* === Štýly pre dátové karty (tabuľky, zoznamy) === */
.data-display-card {
    background: rgba(255, 255, 255, 0.88); /* Menej priehľadné biele pozadie */
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.25); /* Jemnejší border */
    border-radius: 20px;
    box-shadow: var(--shadow-dark); /* Použitie existujúceho tieňa */
    color: #333; /* Tmavý text pre dobrú čitateľnosť */
    margin-bottom: 2rem;
}

.animated-card { /* Môžete pridať globálne pre karty, ktoré chcete animovať */
    animation: fadeInUp 0.6s ease-out;
}

.data-display-card .card-header {
    background-color: rgba(255, 255, 255, 0.6); /* Svetlejšia, polopriehľadná hlavička */
    border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* Jemný oddeľovač */
    border-top-left-radius: 20px; /* Aby pasovalo na zaoblenie karty */
    border-top-right-radius: 20px;
    padding: 1rem 1.5rem;
}

.data-card-title {
    font-size: 1.5rem; /* Väčší nadpis */
    font-weight: 600;
    /* Gradientový text, ak sa vám páčil, inak jednoducho farba */
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
}
.data-card-title i {
    /* Aby ikona mala farbu z gradientu */
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.1em; /* Mierne väčšia ako text */
    vertical-align: middle;
}


.data-table {
    font-size: 0.9rem;
    color: #212529; /* Bootstrap default text color pre tabuľky */
}

.data-table-header th {
    background-color: rgba(0, 0, 0, 0.03); /* Veľmi jemné pozadie pre hlavičku tabuľky */
    border-bottom: 2px solid rgba(0, 0, 0, 0.07); /* Výraznejší spodný border hlavičky */
    color: #333;
    font-weight: 600;
    white-space: nowrap;
    padding: 0.9rem 1rem;
}

.data-table tbody tr {
    border-top: 1px solid #dee2e6; /* Bootstrap default border color */
}
.data-table tbody tr:first-child {
    border-top: none; /* Odstránenie horného borderu pre prvý riadok, ak header má už spodný */
}

.data-table td {
    padding: 0.8rem 1rem;
    vertical-align: middle;
}

.data-table .service-name {
    font-weight: 600;
    color: var(--bs-primary); /* Alebo ponechajte defaultnú farbu */
}

.data-table .badge.fs-7 { /* Zmenšenie fontu pre badge, ak je príliš veľký */
    font-size: 0.78rem;
    padding: 0.35em 0.6em;
}

.data-table .action-btn-table {
    padding: 0.25rem 0.6rem; /* Menší padding pre tlačidlá v tabuľke */
    font-size: 0.8rem;
}
.data-table .action-btn-table i {
    vertical-align: -0.05em; /* Mierne posunutie ikony */
}


.paginator-footer {
    background-color: rgba(255, 255, 255, 0.5); /* Podobné ako card-header */
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* Úprava pre tlačidlo "Objednať novú službu" na mobiloch */
@media (max-width: 767.98px) {
    .data-card-title {
        font-size: 1.3rem; /* Menší nadpis na mobiloch */
    }
    .dashboard-btn.small-on-mobile {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
        width: 100%; /* Tlačidlo na celú šírku pod nadpisom na mobile */
        margin-top: 0.75rem;
    }
    .data-display-card .card-header {
        padding: 1rem;
    }
}
/* Animácie pre riadky tabuľky (môžete ponechať, ak sa páčili) */
.table-row-animated {
    animation: fadeInRow 0.5s ease-out forwards;
    opacity: 0;
}
.table-row-animated:nth-child(1) { animation-delay: 0.1s; }
.table-row-animated:nth-child(2) { animation-delay: 0.15s; }
.table-row-animated:nth-child(3) { animation-delay: 0.2s; }
/* ...atď. */

@keyframes fadeInRow {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ak je potrebné doladiť štandardný Bootstrap paginátor, napr. pre "glass" vzhľad */
.pagination .page-item .page-link {
    /* border-radius: .5rem; */ /* Zaoblené rohy, ak chcete */
    /* transition: all 0.2s ease-in-out; */
}
/* .pagination .page-item.active .page-link { */
    /* background: var(--primary-gradient); */ /* Príklad gradientu pre aktívnu stránku */
    /* border-color: transparent; */
    /* color: white; */
/* } */

/* Štýly pre Detail služby - rozširujú existujúce .data-display-card a .dashboard-btn */

/* Hlavička stránky detailu */
.data-display-card .card-header .data-card-title {
    /* Používa sa existujúci .data-card-title */
}
.action-buttons-group .dashboard-btn {
    /* Zaistenie, že tlačidlá v skupine sú správne nastylované */
    margin-left: 0.5rem; /* Malý odstup medzi tlačidlami v skupine */
}
.action-buttons-group .dashboard-btn:first-child {
    margin-left: 0;
}

/* Sekcie v detaile služby */
.data-section-title {
    font-size: 1.2rem; /* O niečo menší ako hlavný titulok stránky */
    font-weight: 600;
    color: #444; /* Tmavšia farba pre lepšiu čitateľnosť na svetlom pozadí headeru sekcie */
    margin-bottom: 0; /* Odstránenie marginu, ak by nejaký bol */
}
.data-section-title i {
    color: var(--bs-primary); /* Farba ikony z primárnej farby */
}

/* Definičný zoznam (dl, dt, dd) pre lepšie zobrazenie */
.dl-horizontal-custom dt {
    font-weight: 600;
    color: #555;
    padding-top: 0.5rem; /* Pre lepšie zarovnanie s dd */
    padding-bottom: 0.5rem;
}
.dl-horizontal-custom dd {
    color: #212529;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed #eee; /* Jemná čiarkovaná linka pod každou položkou */
}
.dl-horizontal-custom .row:last-child dd {
    border-bottom: none; /* Posledná položka nemá spodnú linku */
}

/* Formulár na zmenu balíčka */
.current-package-name {
    color: var(--bs-primary); /* Zvýraznenie aktuálneho balíčka */
}
.custom-form-select { /* Štýl pre selectboxy, ak chceme viac "glass" */
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: .75rem; /* Zaoblenejšie rohy */
    padding: .5rem 1rem;
    transition: all 0.2s ease-in-out;
}
.custom-form-select:focus {
    background-color: rgba(255, 255, 255, 0.9);
    border-color: var(--bs-primary-border-subtle);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Prispôsobenie pre tlačidlá v action-buttons-group na mobiloch */
@media (max-width: 767.98px) {
    .action-buttons-group {
        width: 100%;
        margin-top: 1rem; /* Odsadenie od nadpisu */
        display: flex;
        flex-direction: column; /* Tlačidlá pod seba */
        gap: 0.5rem; /* Medzera medzi tlačidlami */
    }
    .action-buttons-group .dashboard-btn {
        width: 100%;
        margin-left: 0 !important; /* Reset marginu, ak bol pridaný pre desktop */
    }
}

/* Farba textu pre Bootstrap badges, ak default nevyhovuje */
.badge.bg-success { color: #034313 !important; }
.badge.bg-danger  { color: #fff !important; }
.badge.bg-warning { color: #000 !important; } /* Tmavý text pre žlté/oranžové pozadie */
.badge.bg-info    { color: #fff !important; } /* Pre svetlomodré zvážte #000, ak je biela nečitateľná */
.badge.bg-light   { color: #000 !important; } /* Tmavý text pre svetlé pozadie */
.badge.bg-dark    { color: #fff !important; }
.badge.bg-primary { color: #fff !important; } /* Predpokladajme, že primárna je tmavá dosť pre biely text */
.badge.bg-secondary { color: #fff !important; } /* Predpokladajme, že sekundárna je tmavá dosť pre biely text */
/* Doplňte ďalšie `bg-*` triedy, ktoré používate pre statusy */
.badge .bg-success { color: #034313 !important; }

/* Štýly pre Detail domény - rozširujú existujúce a pridávajú špecifické */

/* Už definované a použité: .data-display-card, .animated-card, .card-header, .data-card-title, 
   .data-section-title, .dl-horizontal-custom, .action-buttons-group, .dashboard-btn */

.domain-name { /* Pre názov domény v detaile */
    color: var(--bs-primary);
    font-weight: 700; /* Alebo bold z <strong> */
}

/* Automatické predĺženie v detaile */
.toggle-auto-renew-btn {
    padding: 0.25rem 0.6rem; /* Menšie tlačidlo */
    font-size: 0.85rem;
}
.toggle-auto-renew-btn i {
    font-size: 1.1em; /* Ikona o niečo väčšia */
    vertical-align: -0.15em;
}

/* Tabuľka DNS záznamov */
.dns-table td code { /* Pre lepšiu čitateľnosť DNS hodnôt */
    background-color: rgba(var(--bs-secondary-rgb), 0.07);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.88em;
    color: #555;
    word-break: break-all; /* Zalomenie dlhých hodnôt */
}
.dns-table .dns-content-cell {
    max-width: 300px; /* Obmedzenie šírky pre obsah, aby neroztiahlo tabuľku */
    overflow-wrap: break-word;
}
.dns-table .action-cell-dns .btn {
    /* Akcie sú už štýlované pomocou action-btn-table */
}
.dns-table .badge.bg-secondary {
    font-size: 0.8em;
}


/* Formulár pre DNS záznamy */
.dns-record-form .form-label.fw-semibold { /* Môžete použiť namiesto fw-semibold triedy aj globálny štýl */
    /* color: #333; */
}
.custom-form-input { /* Štýl pre inputy/textarea vo formulári, ak chceme viac "glass" */
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: .75rem;
    padding: .5rem 1rem;
    transition: all 0.2s ease-in-out;
}
.custom-form-input:focus {
    background-color: rgba(255, 255, 255, 0.9);
    border-color: var(--bs-primary-border-subtle);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}
/* Použije sa aj pre .custom-form-select z predchádzajúceho návrhu, ak zostal */


/* Úprava buttonov vo formulári */
.dns-record-form .dashboard-btn {
    padding: 0.6rem 1.2rem; /* Trochu menšie ako štandardné dashboard-btn */
    font-size: 0.95rem;
}

/* Štýly pre objednávku domény (Domain/order.latte) */

/* Názov domény v hlavnom titulku */
.data-card-title .domain-name {
    /* Použije farbu z gradientu --primary-gradient */
    font-weight: 700; /* Zabezpečí tučné písmo */
}

/* Vylepšenie pre alerty v tomto kontexte, ak treba */
/* .alert.alert-success, .alert.alert-danger na tejto stránke už môžu byť dostatočne nastylované globálne */

/* Vlastné štýly pre radio buttony (ak je to preferované pred Bootstrap default) */
.form-custom-radio .form-label.fw-bold {
    font-size: 1.1rem;
    color: #333;
}
.custom-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Medzera medzi radio buttonmi */
}
.custom-radio-item .form-check-input {
    width: 1.25em;
    height: 1.25em;
    margin-top: 0.2em; /* Lepšie vertikálne zarovnanie */
    border: 2px solid rgba(0,0,0,0.25);
}
.custom-radio-item .form-check-input:checked {
    background-color: var(--bs-primary); /* Alebo --primary-gradient, ak chceme gradient */
    border-color: var(--bs-primary);
}
.custom-radio-item .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb),0.25);
}
.custom-radio-item .form-check-label {
    font-size: 1rem;
    color: #444;
    padding-left: 0.5em;
    cursor: pointer;
}

/* Väčšie tlačidlo pre odoslanie objednávky */
.dashboard-btn.btn-lg {
    padding: 0.8rem 2rem; /* Prispôsobte podľa potreby */
    font-size: 1.15rem;
}

/* Štýly pre Detail kontraktu - rozširujú existujúce .data-display-card atď. */

/* Už definované a použité: .data-display-card, .animated-card, .card-header, .data-card-title, 
   .data-section-title, .dl-horizontal-custom, .dashboard-btn */

/* Špecifické pre položky kontraktu */
.contract-items-list .list-group-item {
    background-color: transparent; /* Ak je .data-display-card polopriehľadná, položky by nemali mať pevné pozadie */
    border-bottom: 1px solid rgba(0,0,0,0.07); /* Jemnejší oddeľovač medzi položkami */
    color: #333; /* Zaistenie tmavej farby textu */
}
.contract-items-list .list-group-item:last-child {
    border-bottom: none; /* Posledná položka bez oddeľovača */
    border-bottom-left-radius: 20px; /* Zaoblenie, ak je to posledná položka karty */
    border-bottom-right-radius: 20px;
}
.contract-items-list .item-description {
    font-weight: 600;
    color: var(--bs-emphasis-color); /* Trochu tmavšia ako bežný text */
}
.contract-items-list .item-price {
    /* fs-6 už zväčšuje badge, môžeme upraviť padding, ak treba */
    padding: 0.5em 0.9em;
}

/* Štýly pre Moje faktúry */

/* Už definované a použité: .data-display-card, .animated-card, .card-header, .data-card-title, 
   .data-section-title, .dashboard-btn, .data-table, .data-table-header, .action-btn-table,
   .paginator-footer, .table-row-animated */

/* Štatistické karty pre faktúry */
.status-card {
    /* Môže použiť štýl .dashboard-card alebo špecifický */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.status-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.1); /* Jemnejší tieň ako .dashboard-card */
}

.status-card-icon {
    font-size: 2.8rem; /* Väčšia ikona */
    line-height: 1;
}

.status-card-title {
    font-size: 1rem; /* O niečo menší titulok */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-card-count {
    /* fs-1 a fw-bolder už sú z Bootstrapu */
    color: #333; /* Hlavná farba pre číslo */
    line-height: 1;
}

/* Ak chcete farebné odlíšenie pre dashboard-card (alternatíva k použitiu .status-card.overdue-invoices) */
.dashboard-card.overdue-invoices {
    border-left: 5px solid var(--bs-danger);
}
.dashboard-card.unpaid-invoices {
    border-left: 5px solid var(--bs-warning);
}

/* Tabuľka faktúr */
.data-table .invoice-number {
    /* Už by mal byť fw-bold, pridáme farbu odkazu */
    color: var(--bs-link-color); 
    /* text-decoration: underline; */ /* z Latte už je */
}
.data-table .invoice-number:hover {
    color: var(--bs-link-hover-color);
}

/* Štýly pre Detail faktúry - rozširujú existujúce a pridávajú špecifické */

/* Už definované a použité: .data-display-card, .animated-card, .card-header, .data-card-title, 
   .data-section-title, .dl-horizontal-custom, .action-buttons-group, .dashboard-btn,
   .data-table, .data-table-header, .table-row-animated */

/* Mierne upravený definičný zoznam pre menšie odsadenie, ak je to potrebné */
.dl-tight dt,
.dl-tight dd {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

/* Tabuľka položiek faktúry */
.invoice-items-table th,
.invoice-items-table td {
    /* padding: 0.7rem 1rem; /* Menší padding, ak je default príliš veľký */
}
.invoice-items-table th.ps-4, .invoice-items-table td.ps-4 { padding-left: 1.5rem !important; } /* Väčší padding zľava pre prvý stĺpec */
.invoice-items-table th.pe-4, .invoice-items-table td.pe-4 { padding-right: 1.5rem !important; } /* Väčší padding sprava pre posledný stĺpec */


/* Zhrnutie cien v pätičke karty */
.invoice-summary-footer {
    background-color: rgba(248, 249, 250, 0.7); /* Svetlejšie pozadie, podobné .table-light, ale priehľadné */
    border-top: 1px solid rgba(0,0,0,0.08);
    border-bottom-left-radius: 20px; /* Aby pasovalo na zaoblenie karty */
    border-bottom-right-radius: 20px;
}
.dl-summary dt {
    font-weight: normal; /* Menej výrazné dt */
    color: #555;
    padding-bottom: 0.25rem;
}
.dl-summary dd {
    font-weight: 600; /* Výraznejšie dd */
    color: #212529;
    padding-bottom: 0.25rem;
    border-bottom: none; /* Bez čiary pod položkami v zhrnutí */
}
.dl-summary dt.fs-5, /* Pre celkovú sumu */
.dl-summary dd.fs-5 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.dl-summary dd.text-primary {
    color: var(--bs-primary) !important; /* Aby sa farba aplikovala správne */
}

/* Responsivita pre skupiny tlačidiel je už v predchádzajúcom CSS */
/* Štýly pre Centrum Podpory */

/* Používame .data-display-card a .data-card-title pre hlavný nadpis, ktoré už sú definované */
/* Používame .dashboard-card ako základ pre informačné karty, ktoré už je definované */

.support-hub-card {
    /* Môžeme pridať špecifické úpravy pre tieto karty, ak dashboard-card nie je úplne ideálny */
    /* Napríklad, ak chceme iný hover efekt alebo tiene */
    color: #333; /* Zaistenie tmavej farby textu, keďže dashboard-card môže mať svetlé pozadie */
}

.support-hub-card .dashboard-card-title { /* Prepis nadpisu z .dashboard-card ak treba */
    font-size: 1.35rem; /* Mierne väčší nadpis */
    color: #2c3e50; /* Tmavší nadpis */
}

.support-hub-card .card-text {
    color: #555; /* Mierne svetlejší text ako default #333 */
    font-size: 0.95rem;
    line-height: 1.6;
}

.support-hub-card .card-icon.support-icon { /* Použije štýl .card-icon z dashboardu */
    width: 64px;    /* Trochu väčšia ikona */
    height: 64px;
    border-radius: 18px; /* Viac zaoblené */
    font-size: 2rem;
}
.support-hub-card .card-icon.support-icon.tickets {
    background: var(--primary-gradient); /* Použitie gradientov z dashboard-btn */
}
.support-hub-card .card-icon.support-icon.knowledgebase {
    background: linear-gradient(135deg, #17a2b8, #138496); /* Napríklad pre Bootstrap info farbu */
    /* Alebo použite var(--success-gradient) ak sa hodí viac */
}

.ticket-status-summary .open-tickets-count {
    color: var(--bs-danger);
    font-size: 1.1em; /* Mierne väčšie a výraznejšie číslo */
}
.article-count-summary .articles-count {
    color: var(--bs-primary); /* Alebo iná farba */
    font-size: 1.1em;
}


.button-group-support { /* Pre skupinu tlačidiel pod sebou na mobile a vedľa seba na desktope */
    display: flex;
    flex-direction: column; /* Na mobile pod seba */
    gap: 0.5rem; /* Medzera medzi tlačidlami na mobile */
}

@media (min-width: 768px) { /* md breakpoint a vyššie */
    .button-group-support {
        flex-direction: row; /* Na desktope vedľa seba */
        align-items: center;
    }
    .button-group-support .dashboard-btn.ms-md-2 { /* ms-md-2 je Bootstrap trieda pre margin */
         /* Latte: ms-md-2 */
    }
    .button-group-support .dashboard-btn.mt-2.mt-md-0 {
        /* Latte: mt-2 mt-md-0 */
    }
}

/* Štýly pre dashboard-btn už sú definované globálne */

/* Štýly pre Databázu Znalostí */

/* Používame .data-display-card a .data-card-title pre hlavný nadpis, ktoré už sú definované */
/* Formulár vyhľadávania, ak by bol implementovaný */
.knowledge-base-search-form {
    min-width: 280px; /* Minimálna šírka pre vyhľadávacie pole */
}
.knowledge-base-search-form .form-control.custom-form-input {
    /* Štýly pre .custom-form-input už môžu byť definované */
    height: calc(1.5em + 1rem + 2px); /* Aby výška pasovala na .dashboard-btn.small */
}
.knowledge-base-search-form .dashboard-btn.small {
    height: calc(1.5em + 1rem + 2px); /* Rovnaká výška ako input */
    display: flex; /* Centrovanie ikony */
    align-items: center;
}

/* Samostatný nadpis pre sekcie ako "Kategórie" */
.section-title-standalone {
    font-size: 1.6rem;
    font-weight: 600;
    color: #333;
    /* Podobný štýl ako .data-card-title, ale bez pozadia karty */
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem; /* Väčší odstup pod nadpisom */
    border-bottom: 2px solid rgba(var(--bs-primary-rgb), 0.2);
}
.section-title-standalone i {
    color: var(--bs-primary);
}


/* Karty kategórií */
.category-card { /* Základom je .dashboard-card, tu len dopĺňame/prepisujeme */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Plynulejší prechod */
    border-left: 4px solid transparent; /* Pripravené pre hover efekt */
}
.category-card:hover {
    transform: translateY(-6px) scale(1.03); /* Výraznejší hover */
    box-shadow: 0 14px 28px rgba(31, 38, 135, 0.15), 0 10px 10px rgba(31, 38, 135, 0.12);
    border-left-color: var(--bs-primary);
}
.category-card-link:hover {
    /* text-decoration: none; /* Odkaz nemá podčiarknutie, ak je na celú kartu */
}

.category-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bs-primary); /* Titulok kategórie vo farbe primárnej */
    /* alebo: color: #2c3e50; */
}
.category-card .badge.bg-primary-soft { /* Bootstrap 5.3+ text-emphasis utility */
    background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
    /* color: var(--bs-primary-text-emphasis) !important; */ /* Túto triedu pridá Bootstrap, ak je k dispozícii */
}
.category-card-description {
    line-height: 1.5;
    min-height: 45px; /* Zaistenie minimálnej výšky, aby sa karty zarovnali aj pri krátkych popisoch */
}

.category-card-arrow {
    text-align: right;
    font-size: 1.5rem;
    color: rgba(var(--bs-primary-rgb), 0.5);
    transition: color 0.3s ease, transform 0.3s ease;
}
.category-card:hover .category-card-arrow {
    color: var(--bs-primary);
    transform: translateX(5px);
}

/* Voliteľné: Štýly pre zoznam článkov, ak by sa zobrazovali priamo na tejto stránke */
.list-group-item-action.list-group-item:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.05); /* Jemný hover efekt pre odkazy v zozname */
}

/* Štýly pre Kategóriu Databázy Znalostí */

/* Vlastný štýl pre breadcrumb navigáciu */
.breadcrumb-custom {
    background-color: rgba(255, 255, 255, 0.88); /* Rovnaké ako .data-display-card */
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px; /* Mierne menšie zaoblenie ako hlavné karty */
    box-shadow: var(--shadow-dark);
}
.breadcrumb-custom .breadcrumb {
    font-size: 0.9rem;
}
.breadcrumb-custom .breadcrumb-item a {
    color: var(--bs-primary);
    text-decoration: none;
    font-weight: 500;
}
.breadcrumb-custom .breadcrumb-item a:hover {
    text-decoration: underline;
}
.breadcrumb-custom .breadcrumb-item.active {
    color: #555; /* Tmavšia sivá pre aktívnu položku */
    font-weight: 500;
}
.breadcrumb-custom .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(0,0,0,0.4); /* Farba oddeľovača */
}
.breadcrumb-custom .breadcrumb-item i {
    margin-right: 0.25rem;
    vertical-align: -0.05em;
}

/* Používame existujúce .data-display-card, .data-card-title, .section-title-standalone */

/* Zoznam článkov */
.article-list-group .list-group-item {
    background-color: rgba(255, 255, 255, 0.88); /* Podobne ako karta */
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px; /* Zaoblenie položiek */
    margin-bottom: 0.75rem; /* Medzera medzi položkami */
    padding: 1rem 1.5rem;
    transition: all 0.25s ease-in-out;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.article-list-group .list-group-item:last-child {
    margin-bottom: 0;
}
.article-list-group .list-group-item-action:hover,
.article-list-group .list-group-item-action:focus {
    transform: translateY(-3px) scale(1.01);
    background-color: rgba(255, 255, 255, 0.95);
    border-color: rgba(var(--bs-primary-rgb), 0.3);
    box-shadow: 0 6px 15px rgba(var(--bs-primary-rgb),0.1);
    z-index: 2; /* Aby bol hovernutý prvok navrchu */
}

.article-list-item .article-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--bs-primary);
    /* color: #343a40; */ /* Prípadne tmavšia */
}
.article-list-item:hover .article-title {
    /* Môže zostať rovnaká, alebo mierne zmeniť */
}
.article-list-item .article-excerpt {
    color: #555;
    line-height: 1.5;
}
.article-list-item .article-meta {
    font-size: 0.85rem;
    color: #777 !important; /* Zaistenie farby pre .text-muted */
}
.article-list-item .article-meta i {
    vertical-align: -0.1em;
}

/* Štýly pre Zobrazenie Článku z Databázy Znalostí */

/* Používame existujúce: .breadcrumb-custom, .data-display-card, .animated-card, .data-card-title, .dashboard-btn */

.article-detail-card {
    /* Môžu tu byť špecifické úpravy, ak je potrebné odlíšiť od všeobecnej .data-display-card */
}

.article-detail-header { /* Pre hlavičku s titulkom a meta informáciami */
    padding-bottom: 0.8rem; /* Mierne väčší padding dole v hlavičke */
}
.article-detail-header .data-card-title {
    font-size: 1.8rem; /* Prípadne upraviť veľkosť titulku článku */
    line-height: 1.3;
}

.article-meta { /* Pre meta informácie pod titulkom */
    display: flex;
    flex-wrap: wrap; /* Aby sa meta informácie zalamovali na menších obrazovkách */
    gap: 0.25rem 1rem; /* Medzery medzi položkami (vertikálna | horizontálna) */
}
.article-meta span {
    display: inline-flex; /* Aby ikony a text boli pekne zarovnané */
    align-items: center;
}
.article-meta i {
    margin-right: 0.35em;
    color: #6c757d; /* Bootstrap muted color */
}

/* Samotný obsah článku */
.article-content-wrapper {
    font-size: 1rem; /* Prípadne 1.05rem alebo 1.1rem pre lepšiu čitateľnosť dlhších textov */
    line-height: 1.7; /* Väčšie riadkovanie */
    color: #333; /* Tmavší text pre obsah */
}

/* Základné štýlovanie pre obsah generovaný napr. z WYSIWYG editora */
.article-content-wrapper h1,
.article-content-wrapper h2,
.article-content-wrapper h3,
.article-content-wrapper h4,
.article-content-wrapper h5,
.article-content-wrapper h6 {
    margin-top: 1.8em;
    margin-bottom: 0.8em;
    font-weight: 600;
    line-height: 1.3;
    color: #2c3e50; /* Tmavší odtieň pre nadpisy v obsahu */
}
.article-content-wrapper h1 { font-size: 1.7em; }
.article-content-wrapper h2 { font-size: 1.5em; }
.article-content-wrapper h3 { font-size: 1.3em; }
.article-content-wrapper h4 { font-size: 1.15em; }

.article-content-wrapper p {
    margin-bottom: 1.2em;
}

.article-content-wrapper ul,
.article-content-wrapper ol {
    margin-bottom: 1.2em;
    padding-left: 1.8em;
}
.article-content-wrapper ul li,
.article-content-wrapper ol li {
    margin-bottom: 0.4em;
}

.article-content-wrapper a {
    color: var(--bs-primary);
    text-decoration: underline;
}
.article-content-wrapper a:hover {
    text-decoration: none;
}

.article-content-wrapper blockquote {
    margin: 1.5em 0;
    padding: 0.8em 1.5em;
    border-left: 4px solid rgba(var(--bs-primary-rgb), 0.3);
    background-color: rgba(var(--bs-primary-rgb), 0.05);
    color: #444;
    font-style: italic;
}
.article-content-wrapper blockquote p:last-child {
    margin-bottom: 0;
}

.article-content-wrapper pre {
    background-color: #f8f9fa; /* Svetlé pozadie pre kódové bloky */
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    padding: 1em;
    overflow-x: auto; /* Horizontálne skrolovanie pre dlhé riadky kódu */
    font-size: 0.9em;
    line-height: 1.5;
}
.article-content-wrapper code { /* Inline kód */
    background-color: rgba(var(--bs-secondary-rgb), 0.1);
    padding: .15em .3em;
    border-radius: .25rem;
    font-size: 0.9em;
}
.article-content-wrapper pre code { /* Kód v <pre> nemá extra pozadie a padding */
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

.article-content-wrapper img {
    max-width: 100%;
    height: auto;
    border-radius: .5rem; /* Jemné zaoblenie obrázkov */
    margin: 1em 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Jemný tieň pre obrázky */
}

.article-content-wrapper table {
    width: 100%;
    margin-bottom: 1.5em;
    border-collapse: collapse;
}
.article-content-wrapper th,
.article-content-wrapper td {
    border: 1px solid #dee2e6;
    padding: .6em .8em;
    text-align: left;
}
.article-content-wrapper thead th {
    background-color: #f8f9fa;
    font-weight: 600;
}
.article-content-wrapper tbody tr:nth-child(odd) {
    /* background-color: #fdfdfd; /* Veľmi jemné pruhovanie, ak chcete */
}

/* Štýly pre zoznam tiketov (voliteľné doplnenie) */
.data-table .ticket-id {
    color: var(--bs-link-color); /* Alebo vaša primárna farba */
}
.data-table .ticket-subject:hover strong {
    color: var(--bs-link-hover-color); /* Zmena farby pri hoveri predmetu */
}

/* Štýly pre stránku Podmienok ochrany osobných údajov (a podobné textové stránky) */

/* Používame existujúce: .data-display-card, .animated-card, .data-card-title, .dashboard-btn */

/* Pridáme triedu pre špeciálne štýlovanie obsahu článku/podmienok, ak ju už nemáme z predchádzajúcej šablóny */
.article-style-content { /* Zdedí základné štýly z .article-content-wrapper, ak existuje, alebo tu definujeme nové */
    font-size: 1rem; 
    line-height: 1.7;
    color: #333;
}

.content-section-title { /* Pre nadpisy H2 v texte podmienok */
    font-size: 1.45rem; /* Trochu menšie ako .data-card-title */
    font-weight: 600;
    color: var(--bs-primary); /* Použitie primárnej farby pre nadpisy sekcií */
    margin-top: 2.2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid rgba(var(--bs-primary-rgb), 0.15);
}
.content-section-title:first-of-type { /* Prvý H2 nadpis nemá taký veľký horný margin */
    margin-top: 0.5rem;
}

.article-style-content p {
    margin-bottom: 1.1em;
}

.article-style-content ul.list-styled { /* Pre odrážkové zoznamy v texte */
    list-style: none; /* Odstránenie defaultných odrážok */
    padding-left: 0;
    margin-bottom: 1.2em;
}
.article-style-content ul.list-styled li {
    position: relative;
    padding-left: 1.8em; /* Priestor pre vlastnú odrážku */
    margin-bottom: 0.6em;
}
.article-style-content ul.list-styled li::before { /* Vlastná odrážka */
    content: "\F272"; /* Bootstrap Icons: bi-check-circle-fill alebo \F26E pre bi-check-circle */
    /* Alebo jednoduchšie: content: "✓"; alebo content: "•"; */
    font-family: 'bootstrap-icons';
    position: absolute;
    left: 0;
    top: 0.05em; /* Jemné doladenie pozície */
    color: var(--bs-primary); /* Farba odrážky */
    font-size: 1.1em; /* Veľkosť odrážky */
    font-weight: normal;
}

.article-style-content strong { /* Štandardné zvýraznenie */
    /* color: #2c3e50; */ /* Prípadne tmavšia farba pre strong */
}

.article-style-content a {
    color: var(--bs-link-color); /* Alebo priamo var(--bs-primary) */
    /* text-decoration: underline; (môže byť, alebo text-decoration-underline z Latte) */
}
.article-style-content a:hover {
    text-decoration: none;
}

/* Horizontálna čiara pred dátumom platnosti */
.article-style-content hr {
    border-top: 1px solid rgba(0,0,0,0.1);
}

	.hero-section {
		background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
		border-radius: 20px;
		margin: 2rem 0;
		position: relative;
		overflow: hidden;
	}

	.hero-section::before {
		content: '';
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		background: 
			radial-gradient(circle at 30% 20%, rgba(120, 119, 198, 0.15) 0%, transparent 50%),
			radial-gradient(circle at 70% 80%, rgba(255, 119, 198, 0.15) 0%, transparent 50%);
		animation: float 20s ease-in-out infinite;
	}

	@keyframes float {
		0%, 100% { transform: translate(0, 0) rotate(0deg); }
		33% { transform: translate(-20px, -20px) rotate(1deg); }
		66% { transform: translate(20px, -10px) rotate(-1deg); }
	}

	.logo-hero {
		transition: all 0.5s ease;
		filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));
	}

	.logo-hero:hover {
		transform: scale(1.05) rotate(2deg);
		filter: drop-shadow(0 15px 30px rgba(0,0,0,0.2));
	}

	.domain-search-section {
		background: rgba(255, 255, 255, 0.9);
		backdrop-filter: blur(20px);
		border-radius: 20px;
		box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
		border: 1px solid rgba(255, 255, 255, 0.18);
		margin: 2rem 0;
        padding: 0 2rem;
		position: relative;
		overflow: hidden;
	}

	.domain-search-section::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: 
			radial-gradient(circle at 90% 10%, rgba(120, 119, 198, 0.05) 0%, transparent 50%),
			radial-gradient(circle at 10% 90%, rgba(255, 119, 198, 0.05) 0%, transparent 50%);
		pointer-events: none;
	}

	.domain-search-section > * {
		position: relative;
		z-index: 1;
	}

	.domain-search-form {
		max-width: 600px;
		margin: 0 auto;
	}

	.form-control-lg {
		border-radius: 15px;
		border: 2px solid rgba(102, 126, 234, 0.2);
		transition: all 0.3s ease;
		font-weight: 500;
	}

	.form-control-lg:focus {
		border-color: #667eea;
		box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.25);
		transform: translateY(-2px);
	}

	.btn-primary {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border: none;
		border-radius: 15px;
		font-weight: 600;
		padding: 0.75rem 2rem;
		transition: all 0.3s ease;
		box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
	}

	.btn-primary:hover {
		transform: translateY(-3px);
		box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
		background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
	}

	.btn-lg {
		padding: 1rem 2.5rem;
		font-size: 1.1rem;
	}

	.btn-outline-secondary {
		border: 2px solid #667eea;
		color: #667eea;
		border-radius: 15px;
		font-weight: 600;
		transition: all 0.3s ease;
	}

	.btn-outline-secondary:hover {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-color: #667eea;
		transform: translateY(-3px);
		box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
	}

	.card {
		border: none;
		border-radius: 20px;
		transition: all 0.4s ease;
		background: rgba(255, 255, 255, 0.9);
		backdrop-filter: blur(20px);
		box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
		overflow: hidden;
		position: relative;
	}

	.card::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
		transition: all 0.5s ease;
	}

	.card:hover::before {
		left: 100%;
	}

	.card:hover {
		transform: translateY(-10px) scale(1.02);
		box-shadow: 0 20px 40px rgba(31, 38, 135, 0.2);
	}

	.feature-icon-small {
		transition: all 0.4s ease;
		position: relative;
	}

	.card:hover .feature-icon-small {
		transform: scale(1.1) rotate(5deg);
	}

	.display-4 {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		font-weight: 800;
	}

	.display-6 {
		color: #2d3748;
		font-weight: 700;
		position: relative;
	}

	.display-6::after {
		content: '';
		position: absolute;
		bottom: -10px;
		left: 50%;
		transform: translateX(-50%);
		width: 80px;
		height: 4px;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 2px;
	}

	.bg-light {
		background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%) !important;
		position: relative;
		overflow: hidden;
	}

	.bg-light::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: 
			radial-gradient(circle at 20% 20%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
			radial-gradient(circle at 80% 80%, rgba(255, 119, 198, 0.1) 0%, transparent 50%);
		pointer-events: none;
	}

	.bg-light > * {
		position: relative;
		z-index: 1;
	}

	.list-group-item {
		background: rgba(255, 255, 255, 0.8);
		backdrop-filter: blur(10px);
		border: 1px solid rgba(255, 255, 255, 0.3);
		border-radius: 10px !important;
		margin-bottom: 0.5rem;
		transition: all 0.3s ease;
	}

	.list-group-item:hover {
		transform: translateX(5px);
		background: rgba(255, 255, 255, 0.95);
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	}

	.alert-success {
		background: linear-gradient(135deg, rgba(72, 187, 120, 0.1) 0%, rgba(56, 178, 172, 0.1) 100%);
		border: 1px solid rgba(72, 187, 120, 0.3);
		color: #22543d;
	}

	.alert-warning {
		background: linear-gradient(135deg, rgba(237, 137, 54, 0.1) 0%, rgba(245, 101, 101, 0.1) 100%);
		border: 1px solid rgba(237, 137, 54, 0.3);
		color: #744210;
	}

	.text-danger {
		color: #e53e3e !important;
		font-weight: 600;
	}

	.text-success {
		color: #38a169 !important;
		font-weight: 600;
	}

	.badge {
		font-weight: 600;
		padding: 0.5rem 0.75rem;
		border-radius: 10px;
	}

	.btn-sm {
		border-radius: 8px;
		font-weight: 600;
		transition: all 0.3s ease;
	}

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

	/* Icon animations */
	.bi {
		transition: all 0.3s ease;
	}

	.card:hover .bi {
		transform: scale(1.1);
	}

	/* Responsive adjustments */
	@media (max-width: 768px) {
		.hero-section {
			margin: 1rem 0;
			border-radius: 15px;
		}
		
		.domain-search-section {
			margin: 1rem 0;
			border-radius: 15px;
		}
		
		.domain-search-form {
			flex-direction: column;
		}
		
		.domain-search-form .form-control-lg {
			margin-bottom: 1rem;
			width: 100% !important;
		}
		
		.display-4 {
			font-size: 2.5rem;
		}
	}

	/* Loading animation */
	@keyframes slideInUp {
		from {
			opacity: 0;
			transform: translateY(30px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.hero-section, .domain-search-section, .card {
		animation: slideInUp 0.6s ease-out;
	}

	.card:nth-child(2) { animation-delay: 0.1s; }
	.card:nth-child(3) { animation-delay: 0.2s; }
	.card:nth-child(4) { animation-delay: 0.3s; }

    /* Štýly pre formulár Úpravy Profilu */

/* Používame existujúce: .data-display-card, .animated-card, .data-card-title, 
   .dashboard-btn, .custom-form-input, .custom-form-select, .signin-alert (pre chyby),
   .form-label.fw-semibold, .invalid-feedback */


/* Nadpisy sekcií vo formulári (Osobné údaje, Adresa, ...) */
.form-section-title {
    font-size: 1.35rem; /* Mierne menšie ako .data-section-title z karty */
    font-weight: 600;
    color: var(--bs-primary); /* Alebo #333 */
    margin-bottom: 1.25rem; /* Odsadenie pod nadpisom sekcie */
    padding-bottom: 0.5rem;
    /* border-bottom: 1px solid rgba(0,0,0,0.1); */ /* Voliteľná linka pod nadpisom */
}
.form-section-title i {
    vertical-align: -0.1em;
}
.form-section-title small.text-muted {
    font-size: 0.85em;
    font-weight: normal;
}

/* Horizontálna deliaca čiara */
.custom-hr {
    border-top: 1px solid rgba(0,0,0,0.08);
}

/* Úprava pre input[type="file"], ak ho budete používať v budúcnosti a chcete .custom-form-input štýl */
.form-control.custom-form-input[type="file"] {
    /* Bootstrap má vlastné štýly, toto by sa muselo špecifickejšie riešiť */
    /* Nateraz nechávam bez špeciálneho štýlu pre file input v tomto kontexte */
}

/* Štýly pre stránku Spracovanie Platby */

/* Používame existujúce: .data-display-card, .animated-card, .data-card-title, 
   .data-section-title, .dl-horizontal-custom, .dl-tight, .dashboard-btn, 
   .section-title-standalone (pre nadpis platobných metód) */

.invoice-highlight {
    color: var(--bs-primary);
}

/* Platobné údaje pre bankový prevod */
.payment-details dt {
    font-weight: 500; /* Mierne menej výrazné ako štandardné .fw-semibold */
    color: #555;
}
.payment-details dt i {
    color: var(--bs-secondary); /* Ikony pri popisoch budú sivé */
    font-size: 0.95em;
}
.payment-details dd strong {
    color: #212529; /* Tmavšia farba pre samotné údaje */
}
.payment-details dd strong.text-primary { /* Zvýraznenie sumy */
    color: var(--bs-primary) !important; 
}
.payment-details .copy-to-clipboard { /* Indikácia možnosti kopírovania */
    cursor: pointer;
    border-bottom: 1px dashed rgba(0,0,0,0.2);
    transition: background-color 0.2s ease-in-out;
}
.payment-details .copy-to-clipboard:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

/* QR Kód platba */
.qr-payment-section {
    /* Prípadné špecifické štýly */
}
.qr-code-image {
    max-width: 180px; /* Zväčšenie QR kódu */
    border: 1px solid #ddd;
    padding: 8px;
    border-radius: 8px;
    background-color: white; /* Aby bol vždy na bielom pozadí */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Karty platobných metód - podobné ako category-card */
.payment-method-card { /* Základom je .dashboard-card */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-left: 4px solid transparent; /* Pripravené pre hover efekt */
    min-height: 220px; /* Minimálna výška pre konzistenciu */
    display: flex; /* Aby card-body roztiahlo celú výšku */
    flex-direction: column;
}
.payment-method-card .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrovanie obsahu vertikálne */
    flex-grow: 1;
}

.payment-method-card:not(.is-disabled):hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 14px 28px rgba(31, 38, 135, 0.15), 0 10px 10px rgba(31, 38, 135, 0.12);
    /* border-left-color: var(--bs-primary); // Farbu definujeme pre každú metódu zvlášť */
}
.payment-method-card.is-disabled { /* Pre neaktívne metódy */
    opacity: 0.6;
    cursor: not-allowed;
    /* filter: grayscale(80%); */
}
.payment-method-card-link:hover {
    /* text-decoration: none; */
}

.payment-method-icon {
    font-size: 3rem; /* Veľká ikona metódy */
    margin-bottom: 0.75rem;
    line-height: 1;
}
/* Farby ikon pre jednotlivé metódy */
.payment-method-icon.icon-card i { color: #007bff; } /* Príklad modrej pre karty */
.payment-method-icon.icon-paypal i { color: #003087; } /* PayPal modrá */
.payment-method-icon.icon-digital-wallet i.bi-apple { color: #333; }
.payment-method-icon.icon-digital-wallet i.bi-google-play { color: #4285F4; }


.payment-method-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2c3e50;
}

.payment-method-description {
    line-height: 1.5;
    min-height: 3em; /* Zaistenie priestoru pre 2 riadky popisu */
}

.payment-method-arrow {
    font-weight: 600;
    color: var(--bs-primary); /* Šípka a text vo farbe primárnej */
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.payment-method-card:not(.is-disabled):hover .payment-method-arrow {
    /* color: darken(var(--bs-primary), 10%); */ /* Mierne tmavšia pri hover */
    transform: translateX(4px);
}
.payment-method-card .icon-card:hover ~ .payment-method-arrow, /* Príklad pre hover na ikonu */
.payment-method-card.payment-card:hover .payment-method-arrow { /* Špecifická trieda pre kartu, ak chceme viazať border na farbu ikony */
    /* border-left-color: #007bff; */
}
/* Môžete pridať špecifické hover efekty pre každú kartu */
.dashboard-card.payment-method-card:hover.card-stripe { border-left-color: #6772e5; } /* Príklad pre Stripe */
.dashboard-card.payment-method-card:hover.paypal-stripe { border-left-color: #003087; }


/* Bootstrap Tooltipy (ak by ste pridali copy-to-clipboard JS) */
.tooltip-inner {
  background-color: #333; /* Tmavší tooltip pre lepší kontrast */
  color: white;
  border-radius: .375rem;
  padding: .4rem .8rem;
  font-size: .85rem;
}
.tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #333;
}

.list-group-item {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}


.package-card-offer {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border: 1px solid #e0e0e0;
}

.package-card-offer:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.package-card-offer .card-title {
    font-weight: 600;
}

.package-card-offer .list-unstyled i {
    width: 1.2em; /* Zarovnanie ikoniek */
}