/* VRH BA BOJE */

mark { color: #ff6c00; }

.footer-widget .widget-title::before { background: linear-gradient(95.45deg, #ff6c00 0.64%, #e55a00 98.23%); }
.footer-widget .social-nav li a { background: linear-gradient(95.45deg, #ff6c00 0.64%, #e55a00 98.23%); }
.footer-widget .social-nav li a::before { background: linear-gradient(95.45deg, #e55a00 98.23%, #ff6c00 0.64%); }
.footer-copyright { background-color: #ff6c00 !important; }

.hds-bg-color-eight { background-color: #ffd4a3 !important; }
.hds-bg-color-four { background-color: #ffcc80 !important; }
.hosting-data-server-hero::after { background-image: none !important; }

.header-gradient { 
	background: #534b3d;
	background-image: url(../images/mainbg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-image: url(/assets/img/mainbg.jpg) !important;
    background-attachment: fixed; 
}
    
    
.hm2-footer { background-color: #141414 !important; }
.footer-copyright {
    background-color: #353535 !important;
}

.topbar .topbar-right a+a::before {
    background-color: #f57422!important;
}  

  
.footer-copyright .copyright-links a+a::before {
    background-color: #f56500!important;
}
   
.footer-copyright .copyright-links a:hover {
    color: #ff6c00!important;
}

.footer-nav li a:hover {
    color: #ff6c00!important;
}

div.topbar-right a:hover {
    color: #ff6c00!important;
} 
.topbar-right i:hover {
    color: #ff6c00!important;
} 
  
    
.sticky-header { 

display: none !important;
animation: none !important;

 }
 
 .sticky-header.header-section { display: none !important; }
 

/* KRAJ VRH BA */











/* ======== SHARED HOSTING / INCLUDE ======== */

       /* Modern Loader Styles - Version 2 */
        .modern-loader-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.98);
            z-index: 9999;
            display: none;
            justify-content: center;
            align-items: center;
            animation: fadeIn 0.3s ease-out;
        }

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

        .loader-container {
            position: relative;
            text-align: center;
        }

        /* Dots loader */
        .loader-dots {
            display: inline-flex;
            gap: 15px;
            margin-bottom: 40px;
        }

        .dot {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #3498db;
            animation: dotPulse 1.4s ease-in-out infinite;
        }

        .dot:nth-child(1) {
            animation-delay: -0.32s;
            background: #e74c3c;
        }

        .dot:nth-child(2) {
            animation-delay: -0.16s;
            background: #f39c12;
        }

        .dot:nth-child(3) {
            animation-delay: 0;
            background: #2ecc71;
        }

        @keyframes dotPulse {
            0%, 80%, 100% {
                transform: scale(0.8);
                opacity: 0.5;
            }
            40% {
                transform: scale(1.2);
                opacity: 1;
            }
        }

        /* Loading bar */
        .loading-bar-container {
            width: 300px;
            height: 4px;
            background: #ecf0f1;
            border-radius: 2px;
            overflow: hidden;
            margin: 0 auto 30px;
        }

        .loading-bar {
            height: 100%;
            background: linear-gradient(90deg, #3498db, #2ecc71, #e74c3c);
            background-size: 200% 100%;
            animation: loadingBar 2s ease-in-out infinite;
            border-radius: 2px;
        }

        @keyframes loadingBar {
            0% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(100%);
            }
        }

        /* Text styling */
        .loader-text-container {
            color: #2c3e50;
        }

        .loader-main-text {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 10px;
            opacity: 0.9;
        }

        .loader-sub-text {
            font-size: 14px;
            color: #7f8c8d;
            font-weight: 400;
        }
        
/* ========= END SHARED HOSTING ===== */

/* ======== CONFIGURABILE HOSTING / INCLUDE ======== */

        /* Modern Loader Styles - Version 2 */
        .modern-loader-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.98);
            z-index: 9999;
            display: none;
            justify-content: center;
            align-items: center;
            animation: fadeIn 0.3s ease-out;
        }

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

        .loader-container {
            position: relative;
            text-align: center;
        }

        /* Dots loader */
        .loader-dots {
            display: inline-flex;
            gap: 15px;
            margin-bottom: 40px;
        }

        .dot {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #3498db;
            animation: dotPulse 1.4s ease-in-out infinite;
        }

        .dot:nth-child(1) {
            animation-delay: -0.32s;
            background: #e74c3c;
        }

        .dot:nth-child(2) {
            animation-delay: -0.16s;
            background: #f39c12;
        }

        .dot:nth-child(3) {
            animation-delay: 0;
            background: #2ecc71;
        }

        @keyframes dotPulse {
            0%, 80%, 100% {
                transform: scale(0.8);
                opacity: 0.5;
            }
            40% {
                transform: scale(1.2);
                opacity: 1;
            }
        }

        /* Loading bar */
        .loading-bar-container {
            width: 300px;
            height: 4px;
            background: #ecf0f1;
            border-radius: 2px;
            overflow: hidden;
            margin: 0 auto 30px;
        }

        .loading-bar {
            height: 100%;
            background: linear-gradient(90deg, #3498db, #2ecc71, #e74c3c);
            background-size: 200% 100%;
            animation: loadingBar 2s ease-in-out infinite;
            border-radius: 2px;
        }

        @keyframes loadingBar {
            0% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(100%);
            }
        }

        /* Text styling */
        .loader-text-container {
            color: #2c3e50;
        }

        .loader-main-text {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 10px;
            opacity: 0.9;
        }

        .loader-sub-text {
            font-size: 14px;
            color: #7f8c8d;
            font-weight: 400;
        }
        
/* ===== END K HOSTING ===== */


/* ===== MSH STILOVI ===== */

/* GORNJI DIO MODALA - MSH */
.msh-usage-info-container {
    background: #f8f9fa !important;
    border-radius: 10px;
    margin-bottom: 1.25rem;
    color: #495057;
    position: relative;
    border: 1px solid #dee2e6;
}

.msh-usage-info-card {
    position: relative;
}

.msh-close-x-button {
    position: absolute;
    top: -8px;
    right: -8px;
    background: white;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    z-index: 10;
}

.msh-close-x-button:hover {
    transform: scale(1.05);
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

.msh-close-x-button i {
    color: #495057;
    font-size: 16px;
}

.msh-usage-stats-inline {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.msh-usage-stat-value-inline {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
    color: #212529;
    text-transform: none;
}

.msh-usage-stat-value-inline::first-letter {
    text-transform: uppercase;
}

.msh-usage-stat-label-inline {
    font-size: 0.7rem;
    opacity: 0.9;
    color: #6c757d;
    text-transform: none;
    letter-spacing: 0.3px;
}

.msh-usage-stat-label-inline::first-letter {
    text-transform: uppercase;
}

.msh-usage-separator-inline {
    width: 1px;
    height: 35px;
    background: #dee2e6;
    margin: 0 0.25rem;
}

/* Promo kod stilovi - MSH */
.msh-promo-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.msh-promo-code-section {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.msh-promo-code-input-wrapper {
    position: relative;
}

.msh-promo-code-input {
    background: rgba(0,0,0,0.05);
    border: 1px solid #ced4da;
    color: #495057;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    width: 130px;
    transition: all 0.3s ease;
}

.msh-promo-code-input::placeholder {
    color: #6c757d;
}

.msh-promo-code-input:focus {
    background: white;
    border-color: #80bdff;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}

.msh-promo-display-applied {
    position: relative;
    padding-right: 28px;
}

.msh-promo-remove-x {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background: rgba(0,0,0,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.5 !important;
    transition: all 0.3s ease;
}

.msh-promo-remove-x:hover {
    background: rgba(0,0,0,0.2);
    transform: translateY(-50%) scale(1.05);
}

/* Dot before za .selectedFirst */
.selectedFirst {
  --dot-size: 8px;
  --dot-stroke: 2px;
  --dot-color: #636464; /* ili npr. #212529 */
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--bs-body-color);
}

.selectedFirst::before {
  content: "";
  inline-size: var(--dot-size);
  block-size: var(--dot-size);
  border-radius: 50%;
  border: var(--dot-stroke) solid var(--dot-color);
  background: transparent;
  flex: 0 0 var(--dot-size);
}


/* Dedicated IP checkbox styling - MSH */
.msh-dedicated-ip-checkbox {
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.msh-dedicated-ip-checkbox:hover {
    background: #e9ecef;
}

.msh-dedicated-ip-checkbox .form-check-input {
    width: 20px;
    height: 20px;
    border: 2px solid #dee2e6;
    cursor: pointer;
}

.msh-dedicated-ip-checkbox .form-check-input:checked {
    background-color: #ffc107;
    border-color: #ffc107;
}

.msh-dedicated-ip-checkbox strong {
    font-size: 14px;
    color: #495057;
}

.msh-dedicated-ip-checkbox small {
    font-size: 12px;
    color: #6c757d;
}

/* IP price in package features - MSH */
.msh-package-features li.text-warning {
    background: rgba(255, 193, 7, 0.1);
    padding: 2px 5px;
    border-radius: 4px;
    margin-top: 8px;
}

/* Dedicated IP linija u opisu paketa - MSH */
.msh-package-features .dedicated-ip-line {
    margin-top: 8px;
    text-align: left;
    font-size: .85rem;
    line-height: 1.5;
    color: #6c757d;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.msh-package-features .dedicated-ip-line i {
    font-size: 1.1em;
    margin-right: 8px;
    flex-shrink: 0;
}

.msh-package-features .dedicated-ip-line strong {
    font-weight: 600;
    color: #495057;
    margin-right: 4px;
}

.msh-package-features .dedicated-ip-line span {
    display: inline;
}

/* Responsive adjustments - MSH */
@media (max-width: 768px) {
    .msh-dedicated-ip-checkbox {
        font-size: 12px;
    }
    
    .msh-dedicated-ip-checkbox .form-check-input {
        width: 18px;
        height: 18px;
    }
}

/* Modal stilovi - MSH */
.msh-upgrade-modal-popup {
    border-radius: 12px;
    box-shadow: 0 10px 50px rgba(0,0,0,.15);
    max-width: 1400px;
    padding: 0;
}

.msh-upgrade-modal-popup .swal2-header {
    padding: 0;
}

.msh-upgrade-modal-popup .swal2-popup {
    border-radius: 12px!important;
}

.msh-upgrade-modal-content {
    padding: 0;
    overflow: visible;
    border-radius: 12px;
}

/* Container za pakete - MSH */
.msh-upgrade-packages-container {
    padding: 20px;
    background: #f8f9fa;
    width: 100%;
}

/* Kontejner za statistike - MSH */
.msh-usage-info-container {
    position: relative;
    margin-bottom: 20px;
}

.msh-usage-info-card {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    position: relative;
}

.msh-usage-stats-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

.msh-usage-stats-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* X dugme za zatvaranje - MSH */
.msh-close-x-button {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 2px solid #dee2e6;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.msh-close-x-button:hover {
    background: #f8f9fa;
    border-color: #adb5bd;
    transform: scale(1.1);
}

.msh-close-x-button i {
    font-size: 18px;
    color: #6c757d;
    font-weight: bold;
}

/* Kontejner za promo kod - MSH */
.msh-promo-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Period dropdown kao link - MSH */
.msh-period-link-display {
    color: #dc3545 !important;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .95rem;
}

.msh-period-link-display:hover {
    color: #bb2d3b !important;
    text-decoration: none;
}

.msh-period-link-display i {
    font-size: 14px;
    transition: transform 0.2s ease;
}

.msh-period-link-display.open i {
    transform: rotate(180deg);
}

.msh-period-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
    min-width: 180px;
    z-index: 1000;
    padding: 0.5rem 0;
}

.msh-period-dropdown-option {
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.95rem;
}

.msh-period-dropdown-option:hover {
    background: #f8f9fa;
}

.msh-period-dropdown-option.selected {
    background: #e7f5ff;
    color: #0c63e4;
    font-weight: 600;
}

.msh-period-dropdown-option i {
    color: #198754;
    display: none;
    font-size: 0.95rem;
}

.msh-period-dropdown-option.selected i {
    display: block;
}

/* Stil za dugmad u paketima - MSH */
.msh-package-footer button {
    width: 100% !important;
}

/* Stil za period sekciju - MSH */
.msh-period-stat-inline {
    text-align: center;
    position: relative;
}

/* Centriranje sadržaja u usage traci - MSH */
.msh-usage-single-line {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.msh-usage-center-section {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

/* Promo kod - prikazan kad je primijenjen - MSH */
.msh-promo-display-applied {
    position: relative;
    text-align: center;
}

.msh-promo-display-code {
    font-size: 18px;
    font-weight: 600;
    color: #212529;
    line-height: 1.2;
    margin-bottom: 4px;
}

.msh-promo-display-label {
    font-size: 12px;
    color: #6c757d;
    font-weight: normal;
}

.msh-promo-remove-x {
    position: absolute;
    top: -5px;
    right: -25px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dc3545;
    color: white;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.5 !important;
    font-weight: bold;
    transition: all 0.2s ease;
}

.msh-promo-remove-x:hover {
    background: #bb2d3b;
    transform: scale(1.1);
}

/* Postojeći stilovi za formu - MSH */
.msh-promo-code-section {
    display: flex;
    gap: 8px;
    align-items: center;
}

.msh-promo-code-input-wrapper {
    position: relative;
}

.msh-promo-code-input {
    padding: 8px 12px;
    border: 1px solid #4e88f1;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.2s ease;
    width: 140px;
}

.msh-promo-code-input:focus {
    outline: none;
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.msh-promo-code-input.is-invalid {
    border-color: #dc3545;
}

.msh-promo-code-input.is-valid {
    border-color: #198754;
}

.msh-promo-code-feedback {
    position: absolute;
    top: 100%;
    left: 0;
    font-size: 12px;
    margin-top: 2px;
    width: 200px;
    z-index: 10;
}

.msh-promo-code-feedback.invalid {
    color: #dc3545;
}

.msh-promo-code-feedback.valid {
    color: #198754;
}

/* Animacija za prijelaz između forme i prikaza - MSH */
.msh-promo-display-applied {
    animation: fadeIn 0.3s ease;
}

.msh-promo-code-section {
    animation: fadeIn 0.3s ease;
}

/* ========== STILOVI ZA CIJENE SA POPUSTOM - MSH ========== */

/* Ukloni plavi okvir za selektirani paket - MSH */
.msh-package-compact-card.selected-package {
    border-color: #dee2e6 !important;
    box-shadow: none !important;
}

/* Stilovi za cijene sa popustom - MSH */
.msh-price-with-discount {
    text-align: center;
}

.msh-original-price-crossed {
    margin-bottom: 5px;
}

.msh-price-old {
    font-size: 18px;
    color: #6c757d;
    text-decoration: line-through;
    text-decoration-color: #dc3545;
    text-decoration-thickness: 2px;
}

.msh-discount-save-text {
    display: inline-block;
    background: #198754;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Stilovi za regularnu cijenu - MSH */
.msh-package-regular-price {
    font-size: 22px;
    font-weight: 600;
    color: #68726d;
    margin-bottom: 2px;
}

.msh-package-regular-label {
    font-size: 13px;
    color: #6c757d;
}

/* Final price info - MSH */
.msh-final-price-info {
    padding: 5px 0 0px 0;
}

.msh-final-price-small {
    font-size: 22px;
    font-weight: 600;
    color: #198754;
    margin-bottom: 2px;
}

.msh-final-price-label-small {
    font-size: 13px;
    color: #6c757d;
}

/* Hover efekt za pakete sa popustom - MSH */
.msh-package-compact-card:has(.msh-price-with-discount) {
    position: relative;
}

.msh-package-compact-card:has(.msh-price-with-discount)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid #198754;
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.msh-package-compact-card:has(.msh-price-with-discount):hover::before {
    opacity: 0.3;
}

/* ========== GRID PAKETA - MSH ========== */

/* Grid paketa - osnovni stil - MSH */
.msh-packages-grid {
    display: flex !important;
    gap: 20px;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
    align-items: stretch !important;
}

/* Paketi u flex layoutu - MSH */
.msh-packages-grid .msh-package-compact-card {
    flex: 1 1 calc(25% - 15px);
    display: flex;
    flex-direction: column;
    height: auto;
}

/* Za 3 paketa - MSH */
.msh-packages-grid[data-package-count="3"] .msh-package-compact-card {
    flex: 1 1 calc(33.333% - 14px) !important;
}

/* Za 2 paketa - MSH */
.msh-packages-grid[data-package-count="2"] .msh-package-compact-card {
    flex: 1 1 calc(50% - 10px) !important;
}

/* Za 1 paket - MSH */
.msh-packages-grid[data-package-count="1"] .msh-package-compact-card {
    flex: 1 1 100% !important;
    max-width: 500px;
    margin: 0 auto;
}

/* Više od 4 paketa - MSH */
.msh-packages-grid[data-package-count="5"] {
    grid-template-columns: repeat(4, 1fr);
}

.msh-packages-grid[data-package-count="6"] {
    grid-template-columns: repeat(4, 1fr);
}

.msh-packages-grid[data-package-count="7"] {
    grid-template-columns: repeat(4, 1fr);
}

.msh-packages-grid[data-package-count="8"] {
    grid-template-columns: repeat(4, 1fr);
}

/* Responsive za srednje ekrane - MSH */
@media (max-width: 1200px) {
    .msh-packages-grid[data-package-count="4"] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .msh-packages-grid[data-package-count="5"] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .msh-packages-grid[data-package-count="6"] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .msh-packages-grid[data-package-count="7"] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .msh-packages-grid[data-package-count="8"] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .msh-packages-grid[data-package-count="3"] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Responsive za male tablete - MSH */
@media (max-width: 900px) {
    .msh-packages-grid[data-package-count="3"] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .msh-packages-grid[data-package-count="4"] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .msh-packages-grid[data-package-count="5"] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .msh-packages-grid[data-package-count="6"] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .msh-packages-grid[data-package-count="7"] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .msh-packages-grid[data-package-count="8"] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .msh-packages-grid[data-package-count="2"] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive za mobilne uređaje - MSH */
@media (max-width: 600px) {
    .msh-packages-grid[data-package-count="1"] {
        grid-template-columns: 1fr;
    }
    
    .msh-packages-grid[data-package-count="2"] {
        grid-template-columns: 1fr;
    }
    
    .msh-packages-grid[data-package-count="3"] {
        grid-template-columns: 1fr;
    }
    
    .msh-packages-grid[data-package-count="4"] {
        grid-template-columns: 1fr;
    }
    
    .msh-packages-grid[data-package-count="5"] {
        grid-template-columns: 1fr;
    }
    
    .msh-packages-grid[data-package-count="6"] {
        grid-template-columns: 1fr;
    }
    
    .msh-packages-grid[data-package-count="7"] {
        grid-template-columns: 1fr;
    }
    
    .msh-packages-grid[data-package-count="8"] {
        grid-template-columns: 1fr;
    }
}

/* Kartice paketa - MSH */
.msh-package-compact-card {
    background: #fff;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    transition: all .3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    animation: msh-slideIn .3s ease-out backwards;
}

.msh-package-compact-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
    border-color: #dee2e6;
}

.msh-package-compact-card.current-package {
    border-color: #198754;
    background: #f8fff9;
}

.msh-current-badge {
    position: absolute;
    top: -10px;
    right: 15px;
    background: #198754;
    color: #fff;
    padding: 4px 12px;
    font-size: .75rem;
    font-weight: 600;
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,.15);
}

.msh-package-header {
    margin-bottom: 15px;
}

.msh-package-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
}

.msh-package-features {
    flex: 1;
    margin-bottom: 20px;
    position: relative;
}

.msh-package-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.msh-package-features li {
    font-size: .85rem;
    color: #6c757d;
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.msh-package-features li:before {
    content: "•";
    color: #198754;
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1;
    margin-top: -2px;
}

/* Cijene - MSH */
.msh-package-pricing {
    border-top: 1px solid #e9ecef;
    padding-top: 15px;
    margin-bottom: 15px;
    text-align: center;
}

.msh-current-price-container {
    flex-direction: column;
    gap: 8px;
}

.msh-new-price-container {
    flex-direction: column;
    gap: 8px;
}

.msh-current-price-big {
    font-size: 22px;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 2px;
}

.msh-discounted-price-new {
    font-size: 22px;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 2px;
}

.msh-price-label {
    font-size: 14px;
    color: #6c757d;
}

/* Statistike inline stilovi - MSH */
.msh-usage-stat-inline {
    text-align: center;
}

.msh-usage-stat-value-inline {
    font-size: .95rem;
    font-weight: 600;
    color: #212529;
    margin: 0;
}

.msh-usage-stat-label-inline {
    font-size: 12px;
    color: #6c757d;
    margin: 4px 0 0 0;
}

.msh-usage-separator-inline {
    width: 1px;
    height: 40px;
    background: #dee2e6;
}

/* Scrollbar stilovi - MSH */
.msh-upgrade-modal-content::-webkit-scrollbar {
    width: 8px;
}

.msh-period-dropdown::-webkit-scrollbar {
    width: 8px;
}

.msh-upgrade-modal-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.msh-period-dropdown::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.msh-upgrade-modal-content::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.msh-period-dropdown::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.msh-upgrade-modal-content::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.msh-period-dropdown::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Responsive za mobile - MSH */
@media (max-width: 768px) {
    .msh-upgrade-modal-popup {
        width: 100%!important;
        margin: 0;
    }
    
    .msh-usage-single-line {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    
    .msh-usage-center-section {
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
    }
    
    .msh-usage-stats-inline {
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }
    
    .msh-usage-separator-inline {
        display: none;
    }
    
    .msh-promo-code-section {
        margin-top: 15px;
        width: 100%;
    }
    
    .msh-package-features .dedicated-ip-line {
        font-size: .75rem;
    }
}

/* Spinner/alert - MSH */
.msh-spinner-border {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    vertical-align: text-bottom;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: msh-spinner-border 0.75s linear infinite;
}

.msh-alert {
    border-radius: 8px;
    border: none;
    padding: 15px 20px;
}

.msh-alert-danger {
    background: #f8d7da;
    color: #721c24;
}

/* Upgrade modal zadržava svoj stil - MSH */
.msh-upgrade-modal-popup .swal2-html-container {
    margin: 0 !important;
    padding: 0 !important;
}


/* ===== MKH STILOVI ===== */

/* Suženje Swal modala na 1000px - MKH */
.mkh-upgrade-modal-popup {
    max-width: 900px !important;
    width: 90% !important;
}

@media (max-width: 1100px) {
    .mkh-upgrade-modal-popup {
        max-width: 800px !important;
    }
}

@media (max-width: 992px) {
    .mkh-upgrade-modal-popup {
        max-width: 90% !important;
        width: 90% !important;
    }
}

/* GORNJI DIO MODALA - MKH */
.mkh-usage-info-container {
    background: #f8f9fa !important;
    border-radius: 10px;
    margin-bottom: 1.25rem;
    color: #495057;
    position: relative;
    border: 1px solid #dee2e6;
}

.mkh-usage-info-card {
    position: relative;
}

.mkh-close-x-button {
    position: absolute;
    top: -8px;
    right: -8px;
    background: white;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    z-index: 10;
}

.mkh-close-x-button:hover {
    transform: scale(1.05);
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

.mkh-close-x-button i {
    color: #495057;
    font-size: 16px;
}

.mkh-usage-stats-inline {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.mkh-usage-stat-value-inline {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
    color: #212529;
    text-transform: none;
}

.mkh-usage-stat-value-inline::first-letter {
    text-transform: uppercase;
}

.mkh-usage-stat-label-inline {
    font-size: 0.7rem;
    opacity: 0.9;
    color: #6c757d;
    text-transform: none;
    letter-spacing: 0.3px;
}

.mkh-usage-stat-label-inline::first-letter {
    text-transform: uppercase;
}

.mkh-usage-separator-inline {
    width: 1px;
    height: 35px;
    background: #dee2e6;
    margin: 0 0.25rem;
}

/* Promo kod stilovi - MKH */
.mkh-promo-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mkh-promo-code-section {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.mkh-promo-code-input-wrapper {
    position: relative;
}

.mkh-promo-code-input {
    background: rgba(0,0,0,0.05);
    border: 1px solid #ced4da;
    color: #495057;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    width: 130px;
    transition: all 0.3s ease;
}

.mkh-promo-code-input::placeholder {
    color: #6c757d;
}

.mkh-promo-code-input:focus {
    background: white;
    border-color: #80bdff;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}

.mkh-promo-display-applied {
    position: relative;
    padding-right: 28px;
}

.mkh-promo-remove-x {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background: rgba(0,0,0,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.5 !important;
    transition: all 0.3s ease;
}

.mkh-promo-remove-x:hover {
    background: rgba(0,0,0,0.2);
}

/* Dedicated IP checkbox styling - MKH */
.mkh-dedicated-ip-checkbox {
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.mkh-dedicated-ip-checkbox:hover {
    background: #e9ecef;
}

.mkh-dedicated-ip-checkbox .form-check-input {
    width: 20px;
    height: 20px;
    border: 2px solid #dee2e6;
    cursor: pointer;
}

.mkh-dedicated-ip-checkbox .form-check-input:checked {
    background-color: #ffc107;
    border-color: #ffc107;
}

.mkh-dedicated-ip-checkbox strong {
    font-size: 14px;
    color: #495057;
}

.mkh-dedicated-ip-checkbox small {
    font-size: 12px;
    color: #6c757d;
}

/* IP price in package features - MKH */
.mkh-package-features li.text-warning {
    background: rgba(255, 193, 7, 0.1);
    padding: 2px 5px;
    border-radius: 4px;
    margin-top: 8px;
}

/* Dedicated IP linija u opisu paketa - MKH */
.mkh-package-features .dedicated-ip-line {
    margin-top: 8px;
    text-align: left;
    font-size: .85rem;
    line-height: 1.5;
    color: #6c757d;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.mkh-package-features .dedicated-ip-line i {
    font-size: 1.1em;
    margin-right: 8px;
    flex-shrink: 0;
}

.mkh-package-features .dedicated-ip-line strong {
    font-weight: 600;
    color: #495057;
    margin-right: 4px;
}

.mkh-package-features .dedicated-ip-line span {
    display: inline;
}

/* Responsive adjustments - MKH */
@media (max-width: 768px) {
    .mkh-dedicated-ip-checkbox {
        font-size: 12px;
    }
    
    .mkh-dedicated-ip-checkbox .form-check-input {
        width: 18px;
        height: 18px;
    }
}

/* Modal stilovi - MKH */
.mkh-upgrade-modal-popup {
    box-shadow: 0 10px 50px rgba(0,0,0,.15);
    max-width: 1400px;
    padding: 20px;
    border-radius: 0px;
}

.mkh-upgrade-modal-popup .swal2-header {
    padding: 0;
}


.mkh-upgrade-modal-content {
    padding: 0;
    overflow: visible;
}

/* Container za pakete - MKH */
.mkh-upgrade-packages-container {
    padding: 20px;
    background: #f8f9fa;
    width: 100%;
}

/* Kontejner za statistike - MKH */
.mkh-usage-info-container {
    position: relative;
    margin-bottom: 20px;
}

.mkh-usage-info-card {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    position: relative;
}

.mkh-usage-stats-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

.mkh-usage-stats-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

/* X dugme za zatvaranje - MKH */
.mkh-close-x-button {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 2px solid #dee2e6;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.mkh-close-x-button:hover {
    background: #f8f9fa;
    border-color: #adb5bd;
    transform: scale(1.1);
}

.mkh-close-x-button i {
    font-size: 18px;
    color: #6c757d;
    font-weight: bold;
}

/* Kontejner za promo kod - MKH */
.mkh-promo-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Period dropdown kao link - MKH */
.mkh-period-link-display {
    color: #dc3545 !important;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .95rem;
}

.mkh-period-link-display:hover {
    color: #bb2d3b !important;
    text-decoration: none;
}

.mkh-period-link-display i {
    font-size: 14px;
    transition: transform 0.2s ease;
}

.mkh-period-link-display.open i {
    transform: rotate(180deg);
}

.mkh-period-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
    min-width: 180px;
    z-index: 1000;
    padding: 0.5rem 0;
}

.mkh-period-dropdown-option {
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.95rem;
}

.mkh-period-dropdown-option:hover {
    background: #f8f9fa;
}

.mkh-period-dropdown-option.selected {
    background: #e7f5ff;
    color: #0c63e4;
    font-weight: 600;
}

.mkh-period-dropdown-option i {
    color: #198754;
    display: none;
    font-size: 0.95rem;
}

.mkh-period-dropdown-option.selected i {
    display: block;
}

/* Stil za dugmad u paketima - MKH */
.mkh-package-footer button {
    width: 100% !important;
}

/* Stil za period sekciju - MKH */
.mkh-period-stat-inline {
    text-align: center;
    position: relative;
}

/* Centriranje sadržaja u usage traci - MKH */
.mkh-usage-single-line {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.mkh-usage-center-section {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

/* Promo kod - prikazan kad je primijenjen - MKH */
.mkh-promo-display-applied {
    position: relative;
    text-align: center;
}

.mkh-promo-display-code {
    font-size: 18px;
    font-weight: 600;
    color: #212529;
    line-height: 1.2;
    margin-bottom: 4px;
}

.mkh-promo-display-label {
    font-size: 12px;
    color: #6c757d;
    font-weight: normal;
}

.mkh-promo-remove-x {
    position: absolute;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dc3545;
    color: white;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.5 !important;
    font-weight: bold;
    transition: all 0.2s ease;
}

.mkh-promo-remove-x:hover {
    background: #bb2d3b;

}

/* Postojeći stilovi za formu - MKH */
.mkh-promo-code-section {
    display: flex;
    gap: 8px;
    align-items: center;
}

.mkh-promo-code-input-wrapper {
    position: relative;
}

.mkh-promo-code-input {
    padding: 8px 12px;
    border: 1px solid #4e88f1;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.2s ease;
    width: 140px;
}

.mkh-promo-code-input:focus {
    outline: none;
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.mkh-promo-code-input.is-invalid {
    border-color: #dc3545;
}

.mkh-promo-code-input.is-valid {
    border-color: #198754;
}

.mkh-promo-code-feedback {
    position: absolute;
    top: 100%;
    left: 0;
    font-size: 12px;
    margin-top: 2px;
    width: 200px;
    z-index: 10;
}

.mkh-promo-code-feedback.invalid {
    color: #dc3545;
}

.mkh-promo-code-feedback.valid {
    color: #198754;
}

/* Animacija za prijelaz između forme i prikaza - MKH */
.mkh-promo-display-applied {
    animation: fadeIn 0.3s ease;
}

.mkh-promo-code-section {
    animation: fadeIn 0.3s ease;
}

/* ========== STILOVI ZA CIJENE SA POPUSTOM - MKH ========== */

/* Ukloni plavi okvir za selektirani paket - MKH */
.mkh-package-compact-card.selected-package {
    border-color: #dee2e6 !important;
    box-shadow: none !important;
}

/* Stilovi za cijene sa popustom - MKH */
.mkh-price-with-discount {
    text-align: center;
}

.mkh-original-price-crossed {
    margin-bottom: 5px;
}

.mkh-price-old {
    font-size: 18px;
    color: #6c757d;
    text-decoration: line-through;
    text-decoration-color: #dc3545;
    text-decoration-thickness: 2px;
}

.mkh-discount-save-text {
    display: inline-block;
    background: #198754;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Stilovi za regularnu cijenu - MKH */
.mkh-package-regular-price {
    font-size: 22px;
    font-weight: 600;
    color: #68726d;
    margin-bottom: 2px;
}

.mkh-package-regular-label {
    font-size: 13px;
    color: #6c757d;
}

/* Final price info - MKH */
.mkh-final-price-info {
    padding: 5px 0 0px 0;
}

.mkh-final-price-small {
    font-size: 22px;
    font-weight: 600;
    color: #198754;
    margin-bottom: 2px;
}

.mkh-final-price-label-small {
    font-size: 13px;
    color: #6c757d;
}

/* Hover efekt za pakete sa popustom - MKH */
.mkh-package-compact-card:has(.mkh-price-with-discount) {
    position: relative;
}

.mkh-package-compact-card:has(.mkh-price-with-discount)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid #198754;
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.mkh-package-compact-card:has(.mkh-price-with-discount):hover::before {
    opacity: 0.3;
}

/* ========== GRID PAKETA - MKH ========== */

/* Grid paketa - osnovni stil - MKH */
.mkh-packages-grid {
    display: flex !important;
    gap: 20px;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
    align-items: stretch !important;
}

/* Paketi u flex layoutu - MKH */
.mkh-packages-grid .mkh-package-compact-card {
    flex: 1 1 calc(25% - 15px);
    display: flex;
    flex-direction: column;
    height: auto;
}

/* Za 3 paketa - MKH */
.mkh-packages-grid[data-package-count="3"] .mkh-package-compact-card {
    flex: 1 1 calc(33.333% - 14px) !important;
}

/* Za 2 paketa - MKH */
.mkh-packages-grid[data-package-count="2"] .mkh-package-compact-card {
    flex: 1 1 calc(50% - 10px) !important;
}

/* Za 1 paket - MKH */
.mkh-packages-grid[data-package-count="1"] .mkh-package-compact-card {
    flex: 1 1 100% !important;
    max-width: 500px;
    margin: 0 auto;
}

/* Više od 4 paketa - MKH */
.mkh-packages-grid[data-package-count="5"] {
    grid-template-columns: repeat(4, 1fr);
}

.mkh-packages-grid[data-package-count="6"] {
    grid-template-columns: repeat(4, 1fr);
}

.mkh-packages-grid[data-package-count="7"] {
    grid-template-columns: repeat(4, 1fr);
}

.mkh-packages-grid[data-package-count="8"] {
    grid-template-columns: repeat(4, 1fr);
}

/* Responsive za srednje ekrane - MKH */
@media (max-width: 1200px) {
    .mkh-packages-grid[data-package-count="4"] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mkh-packages-grid[data-package-count="5"] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mkh-packages-grid[data-package-count="6"] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mkh-packages-grid[data-package-count="7"] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mkh-packages-grid[data-package-count="8"] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mkh-packages-grid[data-package-count="3"] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Responsive za male tablete - MKH */
@media (max-width: 900px) {
    .mkh-packages-grid[data-package-count="3"] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mkh-packages-grid[data-package-count="4"] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mkh-packages-grid[data-package-count="5"] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mkh-packages-grid[data-package-count="6"] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mkh-packages-grid[data-package-count="7"] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mkh-packages-grid[data-package-count="8"] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mkh-packages-grid[data-package-count="2"] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive za mobilne uređaje - MKH */
@media (max-width: 600px) {
    .mkh-packages-grid[data-package-count="1"] {
        grid-template-columns: 1fr;
    }
    
    .mkh-packages-grid[data-package-count="2"] {
        grid-template-columns: 1fr;
    }
    
    .mkh-packages-grid[data-package-count="3"] {
        grid-template-columns: 1fr;
    }
    
    .mkh-packages-grid[data-package-count="4"] {
        grid-template-columns: 1fr;
    }
    
    .mkh-packages-grid[data-package-count="5"] {
        grid-template-columns: 1fr;
    }
    
    .mkh-packages-grid[data-package-count="6"] {
        grid-template-columns: 1fr;
    }
    
    .mkh-packages-grid[data-package-count="7"] {
        grid-template-columns: 1fr;
    }
    
    .mkh-packages-grid[data-package-count="8"] {
        grid-template-columns: 1fr;
    }
}

/* Kartice paketa - MKH */
.mkh-package-compact-card {
    background: #fff;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    transition: all .3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    animation: msh-slideIn .3s ease-out backwards;
}

.mkh-package-compact-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
    border-color: #dee2e6;
}

.mkh-package-compact-card.current-package {
    border-color: #198754;
    background: #f8fff9;
}

.mkh-current-badge {
    position: absolute;
    top: -10px;
    right: 15px;
    background: #198754;
    color: #fff;
    padding: 4px 12px;
    font-size: .75rem;
    font-weight: 600;
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,.15);
}

.mkh-package-header {
    margin-bottom: 15px;
}

.mkh-package-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
}

.mkh-package-features {
    flex: 1;
    margin-bottom: 20px;
    position: relative;
}

.mkh-package-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mkh-package-features li {
    font-size: .85rem;
    color: #6c757d;
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.mkh-package-features li:before {
    content: "•";
    color: #198754;
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1;
    margin-top: -2px;
}

/* Cijene - MKH */
.mkh-package-pricing {
    border-top: 1px solid #e9ecef;
    padding-top: 15px;
    margin-bottom: 15px;
    text-align: center;
}

.mkh-current-price-container {
    flex-direction: column;
    gap: 8px;
}

.mkh-new-price-container {
    flex-direction: column;
    gap: 8px;
}

.mkh-current-price-big {
    font-size: 22px;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 2px;
}

.mkh-discounted-price-new {
    font-size: 22px;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 2px;
}

.mkh-price-label {
    font-size: 14px;
    color: #6c757d;
}

/* Statistike inline stilovi - MKH */
.mkh-usage-stat-inline {
    text-align: center;
}

.mkh-usage-stat-value-inline {
    font-size: .95rem;
    font-weight: 600;
    color: #212529;
    margin: 0;
}

.mkh-usage-stat-label-inline {
    font-size: 12px;
    color: #6c757d;
    margin: 4px 0 0 0;
}

.mkh-usage-separator-inline {
    width: 1px;
    height: 40px;
    background: #dee2e6;
}

/* Scrollbar stilovi - MKH */
.mkh-upgrade-modal-content::-webkit-scrollbar {
    width: 8px;
}

.mkh-period-dropdown::-webkit-scrollbar {
    width: 8px;
}

.mkh-upgrade-modal-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.mkh-period-dropdown::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.mkh-upgrade-modal-content::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.mkh-period-dropdown::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.mkh-upgrade-modal-content::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.mkh-period-dropdown::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Responsive za mobile - MKH */
@media (max-width: 768px) {
    .mkh-upgrade-modal-popup {
        width: 100%!important;
        margin: 0;
    }
    
    .mkh-usage-single-line {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    
    .mkh-usage-center-section {
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
    }
    
    .mkh-usage-stats-inline {
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }
    
    .mkh-usage-separator-inline {
        display: none;
    }
    
    .mkh-promo-code-section {
        margin-top: 15px;
        width: 100%;
    }
    
    .mkh-package-features .dedicated-ip-line {
        font-size: .75rem;
    }
}

/* Spinner/alert - MKH */
.mkh-spinner-border {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    vertical-align: text-bottom;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: msh-spinner-border 0.75s linear infinite;
}

.mkh-alert {
    border-radius: 8px;
    border: none;
    padding: 15px 20px;
}

.mkh-alert-danger {
    background: #f8d7da;
    color: #721c24;
}

/* Upgrade modal zadržava svoj stil - MKH */
.mkh-upgrade-modal-popup .swal2-html-container {
    margin: 0 !important;
    padding: 0 !important;
}


/* ===== ZAJEDNIČKE KLASE (NE ZAVISE OD PREFIKSA) ===== */

/* Stilovi za price boxes */
.price-boxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.price-box {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 1px solid #dee2e6;
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.price-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-color: #ced4da;
}

.price-box.highlight {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-color: #ced4da;
}
}

.price-box.highlight::before {
    background: rgba(255,255,255,0.3);
    height: 5px;
}

.price-box.highlight .price-box-label {
    color: #6c757d;
}

.price-box.highlight:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(73,80,87,0.3);
}

.price-box-value {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    line-height: 1.2;
    color: #2d3748;
    word-break: break-word;
    text-transform: none;
}

.price-box.highlight .price-box-value {
    color: #2d3748;
}

.price-box-label {
    font-size: 0.7rem;
    color: #6c757d;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.3px;
}

.price-box-label::first-letter {
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .price-boxes {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .price-box {
        padding: 0.875rem;
    }
    
    .price-box-value {
        font-size: 1.25rem;
    }
}

/* Opcije - dropdown i naziv u istom redu */
.upgrade-options-list {
    border-radius: 8px;
    background: #f8f9fa;
    padding: 0.5rem;
}

.compact-option-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem;
}

.compact-option-label {
    flex: 0 0 220px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #495057;
    text-align: left;
}

.compact-option-label i {
    font-size: 1.1rem;
}

.compact-option-select {
    flex: 1;
}

.compact-option-select .form-select {
    width: 100%;
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    border: 1px solid #ced4da;
    border-radius: 6px;
}

@media (max-width: 768px) {
    .compact-option-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    
    .compact-option-label {
        flex: none;
        width: 100%;
    }
}

/* Ikone - boje */
.packagedetaillist .ph-hard-drives { color: #6c757d !important; }
.packagedetaillist .ph-wifi-high { color: #17a2b8 !important; }
.packagedetaillist .ph-envelope { color: #ffc107 !important; }
.packagedetaillist .ph-browser { color: #6c757d !important; }
.packagedetaillist .ph-shield-check { color: #28a745 !important; }
.packagedetaillist .ph-broadcast { color: #6c757d !important; }

/* Specifični stilovi za Swal modala */
.swalNadogradnja.swal2-popup {
    padding: 1.5rem !important;
}

.swalNadogradnja .swal2-html-container {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

.swalSmanjenje.swal2-popup {
    padding: 1.5rem !important;
}

.swalSmanjenje .swal2-html-container {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

.swalSmanjenjeBesplatno.swal2-popup {
    padding: 1.5rem !important;
}

.swalSmanjenjeBesplatno .swal2-html-container {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

.swalNadogradnjaProduzenje.swal2-popup {
    padding: 2.5rem !important;
}

.swalNadogradnjaProduzenje .swal2-html-container {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

.swalProduzenje.swal2-popup {
    padding: 2rem !important;
}

.swalProduzenje .swal2-html-container {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

.swalObnova.swal2-popup {
    padding: 1.8rem !important;
}

.swalObnova .swal2-html-container {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

.swal2-container .swalNadogradnja .swal2-html-container,
.swal2-container .swalSmanjenje .swal2-html-container,
.swal2-container .swalSmanjenjeBesplatno .swal2-html-container,
.swal2-container .swalNadogradnjaProduzenje .swal2-html-container,
.swal2-container .swalProduzenje .swal2-html-container,
.swal2-container .swalObnova .swal2-html-container {
    padding: 0 !important;
    margin: 0 !important;
}

body .swal2-container .swal2-popup .swal2-html-container {
    padding: 0 !important;
}

ul.list-unstyled li {
    display: flex; 
    align-items: center;
}

.refreshbutton {
    --btn-padding-y: 0.2rem;
    --btn-padding-x: 0.475rem;
    --btn-font-size: 0.676rem;
}

refreshicon i {
    --btn-font-size: 0.6rem;
}

/* Dedicated IP badge animation */
@keyframes crown-glow {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
    100% { filter: brightness(1); }
}

.ph-crown {
    animation: crown-glow 2s ease-in-out infinite;
}

/* Animacije */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes msh-spinner-border {
    to {
        transform: rotate(360deg);
    }
}

/* Stilovi za sidebar */
.globalcp-sidebar-main .globalcp-list-group-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.625rem 1rem;
}

.globalcp-list-group-item.cancel-service-marked {
    background-color: #fdf5f5 !important;
}

.globalcp-list-group-item.cancel-service-marked:hover {
    background-color: #f8e5e5 !important;
}

.status-container {
    min-width: 140px;
}


.packagedetaillist { flex: 1 1 auto; }




/* Postojeći stilovi */
#HostingInfo h4 { font-size: 1rem !important; }
#HostingInfoDetails h4 { font-size: 1rem !important; }

#Statistike mt-2 { margin-top: .75rem !important; }

#HostingInfo div.row { --bs-gutter-x: 1.2rem !important; }

.capitalize { text-transform: capitalize; }

/* Čist, elegantan stil sa borderima */
.compact-content {
    min-height: 100vh;
    padding: 1rem;
    padding-top: 0px;
}

.compact-header {
    background: white;
    padding: 1.5rem;
    border-radius: 7px 12px 12px 7px;
    margin-bottom: 1.25rem;
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.075), var(--box-shadow);
    position: relative;
    border-left: 0px;
}

.compact-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #5865f2;
    border-radius: 12px 0 0 12px;
}

.compact-header h1 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #111827;
    padding-left: 0.75rem;
}

.compact-header .domain {
    font-size: 0.875rem;
    color: #6b7280;
    padding-left: 0.75rem;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.875rem;
    margin-bottom: 1.25rem;
}

.info-card {
    background: white;
    padding: 1.25rem;
    border-radius: 10px;
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.075), var(--box-shadow);
    transition: all 0.2s linear;
}

.info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: #d1d5db;
}

.info-icon {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-bottom: 0.625rem;
    font-size: 1.125rem;
    border: 2px solid;
    font-weight: 600;
}

.info-icon.success { 
    background: #f0fdf4; 
    color: #16a34a;
    border-color: #16a34a;
}
.info-icon.warning { 
    background: #fffbeb; 
    color: #ea580c;
    border-color: #ea580c;
}
.info-icon.danger { 
    background: #fef2f2; 
    color: #dc2626;
    border-color: #dc2626;
}
.info-icon.info { 
    background: #eff6ff; 
    color: #2563eb;
    border-color: #2563eb;
}
.info-icon.primary { 
    background: #f5f3ff; 
    color: #5865f2;
    border-color: #5865f2;
}

.info-label {
    font-size: 0.8rem;
    color: #9ca3af;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.info-value {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    text-transform: capitalize; /* Prvo slovo svake riječi veliko */
}

.resource-section {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.075), var(--box-shadow);
    margin-bottom: 1.25rem;
}

.resource-title {
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    color: #111827;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.resource-item {
    margin-bottom: 1.125rem;
}

.resource-item:last-child {
    margin-bottom: 0;
}

.resource-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.resource-name {
    font-size: 0.8rem;
    color: #4b5563;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.resource-name i {
    font-size: 1rem;
    color: #5865f2;
}

.resource-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
}

.progress-bar-small {
    background: #f3f4f6;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: #5865f2;
    border-radius: 4px;
    transition: width 0.6s ease;
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255,255,255,0.2) 50%, 
        transparent 100%);
    transform: translateX(-100%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

.progress-fill.success { 
    background: #16a34a;
}
.progress-fill.warning { 
    background: #ea580c;
}
.progress-fill.danger { 
    background: #dc2626;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.875rem;
}

.detail-item {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    gap: 0.875rem;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.detail-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.06);
}

.detail-icon-small {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9fafb;
    color: #5865f2;
    font-size: 1.125rem;
    flex-shrink: 0;
    border: 2px solid #5865f2;
}

.detail-text {
    flex: 1;
    min-width: 0;
}

.detail-value-small {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-label-small {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 500;
}

/* cPanel stilovi za kategorije */
.cpanel-section {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.075), var(--box-shadow);
    margin-bottom: 1.5rem;
}

.cpanel-category {
    margin-bottom: 2.5rem;
}

.cpanel-category:last-child {
    margin-bottom: 0;
}

.cpanel-category-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid #e5e7eb;
}

.cpanel-category-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    border: 2px solid;
}

.cpanel-category-icon.files { 
    background: #eff6ff; 
    color: #2563eb;
    border-color: #2563eb;
}
.cpanel-category-icon.databases { 
    background: #f5f3ff; 
    color: #7c3aed;
    border-color: #7c3aed;
}
.cpanel-category-icon.domains { 
    background: #f0fdf4; 
    color: #16a34a;
    border-color: #16a34a;
}
.cpanel-category-icon.email { 
    background: #fffbeb; 
    color: #ea580c;
    border-color: #ea580c;
}
.cpanel-category-icon.metrics { 
    background: #fef2f2; 
    color: #dc2626;
    border-color: #dc2626;
}
.cpanel-category-icon.security { 
    background: #f0fdfa; 
    color: #0891b2;
    border-color: #0891b2;
}
.cpanel-category-icon.software { 
    background: #fdf2f8; 
    color: #db2777;
    border-color: #db2777;
}
.cpanel-category-icon.advanced { 
    background: #faf5ff; 
    color: #9333ea;
    border-color: #9333ea;
}
.cpanel-category-icon.preferences { 
    background: #eef2ff; 
    color: #4f46e5;
    border-color: #4f46e5;
}

.cpanel-category-title {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
}

.cpanel-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.cpanel-item {
    background: #fafbfc;
    padding: 1.25rem;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    border: 1px solid #e5e7eb;
}

.cpanel-item:hover {
    background: white;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    border-color: #5865f2;
}

.cpanel-item-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 0.875rem;
    background: white;
    border: 2px solid #e5e7eb;
    transition: all 0.2s ease;
}

.cpanel-item:hover .cpanel-item-icon {
    transform: scale(1.05);
    border-color: currentColor;
}

.cpanel-item-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    line-height: 1.4;
}

.cpanel-item:hover .cpanel-item-title {
    color: #111827;
    font-weight: 600;
}

/* Hover boje za ikone */
.cpanel-item:hover .cpanel-item-icon {
    background: #f9fafb;
}

.cpanel-item:hover .cpanel-item-icon[style*="2196f3"] {
    border-color: #2196f3;
    color: #2196f3;
    background: #eff6ff;
}

.cpanel-item:hover .cpanel-item-icon[style*="673ab7"] {
    border-color: #673ab7;
    color: #673ab7;
    background: #f5f3ff;
}

.cpanel-item:hover .cpanel-item-icon[style*="4caf50"] {
    border-color: #4caf50;
    color: #4caf50;
    background: #f0fdf4;
}

.cpanel-item:hover .cpanel-item-icon[style*="ff9800"] {
    border-color: #ff9800;
    color: #ff9800;
    background: #fffbeb;
}

.cpanel-item:hover .cpanel-item-icon[style*="f44336"] {
    border-color: #f44336;
    color: #f44336;
    background: #fef2f2;
}

/* Interaktivne skale stilovi */
.resource-gauge {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 10px;
}

.gauge-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    background: #f1f5f9;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.gauge-circle:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.gauge-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    background: conic-gradient(
        var(--progress-color) 0deg var(--progress-angle),
        transparent var(--progress-angle) 360deg
    );
    mask: radial-gradient(circle at center, transparent 32px, black 33px);
    -webkit-mask: radial-gradient(circle at center, transparent 32px, black 33px);
}

.gauge-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
}

.gauge-percentage {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1;
    margin-bottom: 2px;
}

.gauge-label {
    font-size: 10px;
    color: #64748b;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gauge-info {
    background: white;
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 8px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.gauge-info:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.gauge-title {
    font-size: 11px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
    text-align: center;
}

.gauge-value {
    font-size: 10px;
    color: #6b7280;
    text-align: center;
    line-height: 1.2;
}

/* Animacija na učitavanje */
@keyframes gaugeLoad {
    from {
        --progress-angle: 0deg;
    }
    to {
        --progress-angle: var(--final-angle);
    }
}

.gauge-progress.animate {
    animation: gaugeLoad 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Pulsiranje za visoke vrijednosti */
@keyframes pulse-warning {
    0%, 100% { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
    50% { box-shadow: 0 4px 20px rgba(239, 68, 68, 0.3); }
}

.gauge-circle.warning {
    animation: pulse-warning 2s infinite;
}

/* Progress bar stilovi */
.resource-stat-item {
    padding: 14px 12px 12px 12px;
}

.resource-stat-item .text-muted {
    line-height: 1em !important;
}

.resource-stat-item:not(:last-child) {
    border-bottom: 1px solid #e0e0e0;
}

.progress {
    background-color: #f3f4f6;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 7px;
}

.progress-bar {
    transition: width 0.6s ease;
    background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
    animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
    from { background-position: 1rem 0; }
    to { background-position: 0 0; }
}

.bg-primary { background-color: #5865f2 !important; }
.bg-success { background-color: #16a34a !important; }
.bg-warning { background-color: #ea580c !important; }
.bg-danger { background-color: #dc2626 !important; }
.bg-info { background-color: #2563eb !important; }

.stat-row {
    font-size: 0.875rem;
}

.fw-semibold {
    font-weight: 600 !important;
}

.bg-purple { background-color: #9333ea !important; }

/* Novi stilovi za ikone u uglovima */
.package-features-container {
    position: relative;
    overflow: hidden;
    /* min-height: 347px; */
    min-height: 375px;
}

.package-features-container .upgrade-link {
    position: absolute;
    bottom: 15px;
    right: 15px;
    color: #001042;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    z-index: 10;
}

.package-features-container .upgrade-link:hover {
    color: #059669;
    text-decoration: none;
}

.package-features-container .upgrade-link i {
    font-size: 15px;
}

/* Package ikona u pozadini */
.package-features-container::after {
    content: '';
    position: absolute;
    top: 20px;
    right: -20px;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="rgba(34, 197, 94, 0.1)" viewBox="0 0 256 256"><path d="M223.68,66.15,135.68,18a15.88,15.88,0,0,0-15.36,0l-88,48.17a16,16,0,0,0-8.32,14v95.64a16,16,0,0,0,8.32,14l88,48.17a15.88,15.88,0,0,0,15.36,0l88-48.17a16,16,0,0,0,8.32-14V80.18A16,16,0,0,0,223.68,66.15ZM128,32.35,211.93,76.8,128,121.25,44.07,76.8ZM40,90.61l80,43.78v85.22L40,175.83Zm96,129v-85.22l80-43.78v85.22Z"/></svg>') no-repeat center right;
    background-size: 360px 360px;
    transform: rotate(30deg);
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

/* Responsivnost */
@media (max-width: 768px) {
    .resource-gauge {
        width: 100px;
        height: 100px;
    }
    
    .gauge-percentage {
        font-size: 16px;
    }
    
    .gauge-label {
        font-size: 9px;
    }
    
    .package-features-container .upgrade-link {
        font-size: 0.8rem;
    }
    
    .package-features-container::after {
        width: 100%;
        height: 100%;
        background-size: 250px 250px;
    }
}

/* Hover efekti za cPanel kartice - ISTI KAO POSTOJEĆI */
.hover-card {
    transition: all 0.2s ease;
    cursor: pointer;
}

.hover-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: #001042;
}

.hover-card:hover i {
    transform: scale(1.05);
}

.hover-card i {
    transition: transform 0.2s ease;
}

/* Koristi istu primary boju kao postojeći dizajn */
.text-primary {
    color: #001042 !important;
}

/* IZMJENA - Tekst u cPanel karticama crne boje umjesto muted */
.hover-card span {
    color: #000000 !important;
    font-weight: 400;
    font-size: 0.75rem; /* Smanjeno sa 0.875rem (14px) na 0.75rem (12px) */
}

/* Responsivnost */
@media (max-width: 768px) {
    .col-sm-6.col-md-4.col-lg-3 {
        margin-bottom: 0.75rem !important;
    }
}




  .mt-1-2 { margin-top: 1.2rem !important;}
  
  
    /* Ostali stilovi */
    .loading-cart {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .spinner {
      border: 4px solid rgba(0, 0, 0, 0.1);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border-left-color: #09f;
      animation: spin 1s linear infinite;
      margin-bottom: 10px;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    /* NOVO: Inline spinner koji se pojavljuje uz promjenu opcije */
    .inline-spinner {
      border: 2px solid rgba(0, 0, 0, 0.1);
      border-left-color: #09f;
      border-radius: 50%;
      width: 16px;
      height: 16px;
      animation: spin 0.5s linear infinite;
      display: inline-block;
      margin-left: 5px;
      vertical-align: middle;
    }
    
    
    .stavkabg {background-color: #fbfbfb !important;}
.nolist {list-style: none; }

.fs-13 {
  font-size: 13px;
}


.fs-14 {
  font-size: 14px;
}

b, strong {
    font-weight: 600;
}

/* style.css */
.accordion-button:not(.collapsed) {
  background-color: #e0e3ef !important;
  padding: 0.75rem !important;
}
.accordion-button {
  background-color: #f1f3f8 !important;
  padding: 0.75rem !important;
}
.accordion-button:focus {
  border: none !important;
  box-shadow: none !important;
}
.accordion-item {
  margin-bottom: 3px;
}
.status-domena-0 {
  color: #05875f;
  border-left: 5px solid #05875f;
  padding-left: 15px;
  padding-right: 15px;
  background-color: #f9f9f9;
  line-height: 3em;
  display: inline-block;
  width: auto;
}
.status-domena-1 {
  color: #ff0000;
  border-left: 5px solid #ff0000;
  padding-left: 15px;
  padding-right: 15px;
  background-color: #f9f9f9;
  line-height: 3em;
  display: inline-block;
  width: auto;
}
.status-domena-2 {
  color: #ff0000;
  border-left: 5px solid #ff0000;
  padding-left: 15px;
  padding-right: 15px;
  background-color: #f9f9f9;
  line-height: 3em;
  display: inline-block;
  width: auto;
}
.status-domena-check {
  color: #3c57de;
  border-left: 5px solid #3c57de;
  padding-left: 15px;
  padding-right: 15px;
  background-color: #f9f9f9;
  line-height: 3em;
  display: inline-block;
  width: auto;
}
.toright {
  float: right;
}
#NextStepOrder {
  display: none;
}
.sivibox {
  background-color: #f7f7f7;
  cursor: pointer;
}
#loaderOverlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.spinner {
  width: 64px;
  height: 64px;
  border: 8px solid #ddd;
  border-top: 8px solid #3b7ddd;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



/*LOADER BEZ SKLAPANJA */

 /* Reset & Basic Styles */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background-color: #ffffff;
      -webkit-font-smoothing: antialiased;
      position: relative;
      overflow-x: hidden;
    }
    /* Overlay Panels for Transition */
    .overlay {
      position: fixed;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,.6);
      z-index: 9999;
      pointer-events: none;
    }
    /* Loader Styles */
    .loader {
      margin: 0 auto;
      width: 100px;
      height: 50px;
      text-align: center;
      font-size: 10px;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10000;
      opacity: 0;
    }
    .loader > div {
      height: 100%;
      width: 8px;
      display: inline-block;
      margin: 0 2px;
      animation: delay 0.8s infinite ease-in-out;
    }
    .loader .bar1 { background-color: #754fa0; }
    .loader .bar2 { background-color: #09b7bf; animation-delay: -0.7s; }
    .loader .bar3 { background-color: #90d36b; animation-delay: -0.6s; }
    .loader .bar4 { background-color: #f2d40d; animation-delay: -0.5s; }
    .loader .bar5 { background-color: #fcb12b; animation-delay: -0.4s; }
    .loader .bar6 { background-color: #ed1b72; animation-delay: -0.3s; }
    @keyframes delay {
      0%, 40%, 100% { transform: scaleY(0.05); }
      20% { transform: scaleY(1.0); }
    }
    
    #loader .loader { opacity: 1 !important; } /*osiguravanje prikaza loadera na cart*/
    #loaderOverlay .loader { opacity: 1 !important; } /*osiguranje prikaza loadera na order_hosting */

/* KRAJ LOADERA */


.globalcp-page-content { margin: 0px; }
.globalcp-content-wrapper { display: flex; gap: 30px; }
.globalcp-content { flex: 1; }
.globalcp-sidebar { width: 320px; }

/* Klase za dinamičku vidljivost */
.hidden { display: none; }
.visible { display: block; }



        .error-message {
            color: red;
            margin-top: 10px;
        }
        .company-name {
            color: green;
            font-weight: bold;
        }
        .individual {
            color: gray;
            font-weight: bold;
        }
        .gravatar {
            border-radius: 50%;
            margin-right: 15px;
            width: 100px;
            height: 100px;
            object-fit: cover;
            display: block;
        }
        .welcome-container {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        .globalcp-nav-sidebar .globalcp-nav-link i {margin-right: 0px !important; }
        
.dropdown-divider {
    height: 0;
    margin: 1px;
    overflow: hidden;
    border-top: 1px solid rgba(0, 0, 0, 0.175);
    opacity: 1;
}
.globalcp-sidebar { width: 18rem !important; }
.globalcp-nav-link {padding-bottom: 5px;
    padding-top: 5px; }
.first {padding-bottom: 10px !important;
    padding-top: 10px !important; }
.globalcp-page-content {padding: 0px; }
.globalcp-h6, h6 {font-size: 0.875rem;}
:root, [data-color-theme=light] {
--success-rgb: 22, 203, 22;
}

p {font-size: var(--body-font-size); }

:root {
    --body-font-size: 0.845rem !important;
    --body-bg: 236 240 250;
    --primary: 1 98 232;
    --primary-rgb: 78, 136, 241;
    --secondary: 95 109 136;
    --warning: 251 188 11;
    --info: 0 185 255;
    --success: 22, 203, 22;
    --danger: 238 51 94;
    --light: 236 240 250;
    --dark: 59 72 99;
    --orange: 253 126 20;
    --pink: 241 0 117;
    --teal: 0 204 204;
    --purple: 72 0 201;
    --default-text-color: 3 27 78;
    --default-border: 234 232 241;
    --default-background: 248, 250, 253;
    --menu-bg: 255 255 255;
    --menu-prime-color: 91 110 136;
    --menu-secondary-color: 109 119 144;
    --icons-color: 91 110 136;
    --menu-category-color: 44 54 76;
    --menu-border-color: 234 232 241;
    --header-bg: 255 255 255;
    --header-prime-color: 113 130 155;
    --header-border-color: 234 232 241;
    --custom-white: 255 255 255;
    --custom-black: 0 0 0;
    --custom-bg-color: 236 240 250;
    --bootstrap-card-border: 234 232 241;
    --list-hover-focus-bg: 236 240 250;
    --text-muted: 121 135 161;
    --input-border: 233 237 246;
    --form-control-bg: 255 255 255;
    --card-title-color: 36 47 72;
    --card-box-shadow: -8px 12px 18px 0 #dadee8;
    --red: 208 61 70;
    --blue: 43 62 101;
    --green: 29 216 113;
    --cyan: 0 209 209;
    --indigo: 77 93 219;
    --azure: 23 193 244;
    --gray: 134 153 163;
    --yellow: 255 193 2;
    --facebook: 59 89 152;
    --twitter: 0 172 238;
    --github: 51 51 51;
    --google: 207 78 67;
    --youtube: 255 0 0;
}

html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent;
}
body {
  overflow-y: scroll; /* Show vertical scrollbar */
}
html {
    scrollbar-color: #33446e lightgray;
    scrollbar-width: thin;
}
*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
}

.bg-primary-gradient{
  background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
  --tw-gradient-from: rgb(var(--primary)) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(var(--primary) / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
  --tw-gradient-to: rgb(var(--primary) / 0.5) var(--tw-gradient-to-position) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}

.bg-secondary-gradient{
  background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
  --tw-gradient-from: rgb(var(--secondary)) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(var(--secondary) / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
  --tw-gradient-to: rgb(var(--secondary) / 0.5) var(--tw-gradient-to-position) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}

.bg-warning-gradient{
  background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
  --tw-gradient-from: #f76a2d var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(247 106 45 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
  --tw-gradient-to: #efa65f var(--tw-gradient-to-position) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}

.bg-info-gradient{
  background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
  --tw-gradient-from: rgb(var(--info)) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(var(--info) / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
  --tw-gradient-to: rgb(var(--info) / 0.5) var(--tw-gradient-to-position) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}

.bg-success-gradient{
  background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
  --tw-gradient-from: #029666 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(2 150 102 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
  --tw-gradient-to: #48d6a8 var(--tw-gradient-to-position) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}

.bg-danger-gradient{
  background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
  --tw-gradient-from: #f93a5a var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(249 58 90 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
  --tw-gradient-to: #f7778c var(--tw-gradient-to-position) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}

.bg-orange-gradient{
  background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
  --tw-gradient-from: rgb(var(--orange)) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(var(--orange) / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
  --tw-gradient-to: rgb(var(--orange) / 0.5) var(--tw-gradient-to-position) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}

.bg-purple-gradient{
  background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
  --tw-gradient-from: rgb(var(--purple)) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(var(--purple) / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
  --tw-gradient-to: rgb(var(--purple) / 0.5) var(--tw-gradient-to-position) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}

.bg-teal-gradient{
  background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
  --tw-gradient-from: rgb(var(-teal)) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
  --tw-gradient-to: rgb(0 204 204 / 0.5) var(--tw-gradient-to-position) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}

.bg-light-gradient{
  background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
  --tw-gradient-from: rgb(var(--light)) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(var(--light) / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
  --tw-gradient-to: rgb(var(--light) / 0.5) var(--tw-gradient-to-position) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}

.bg-dark-gradient{
  background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
  --tw-gradient-from: #000 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
  --tw-gradient-to: rgb(var(--dark) / 0.5) var(--tw-gradient-to-position) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}



.globalcp-nav-sidebar .globalcp-nav-link i {margin-right: 0px !important; }
.globalcp-nav-sidebar .globalcp-nav-item-header {font-weight: bold; color: #000; padding-bottom: 0px; }
.gap-5 {gap: 5px !important; }
.globalcp-nav-link { gap: 5px; font-size: 14px; align-items: center !important; }
.globalcp-nav-link i {font-size: 14px; }
.globalcp-14px { font-size: 14px !important; }
.pt-0 {padding-top: 0px !important;}
.globalcp-container-fluid {padding-left: 0px; }
.globalcp-navbar {margin-top: 20px; background-color: #f1f3f8;}
.menu-list {padding-bottom: 0px; margin-bottom: 0px; }
.header .navbar {padding-top: 10px; }

.globalc2p-sidebar-expand-lg {margin-left: 0px; margin-right: 0px; }
.globalcp-sidebar .globalcp-card {margin-bottom: 0px; }
ol, ul {padding-left: unset !important; }
.globalcp-row {margin-bottom: 20px; }
.text-white h6 {color: #fff !important; }
.text-muted {color: #a0a0a0 !important; }
.globalcp-form-control-feedback-icon {z-index: 1;}
a.globalcp-navbar-nav-link .active {font-weight: bold !important; }

.isticu {background: linear-gradient(to bottom left, #f1f3f8, transparent);}

.globalcp-sidebar {box-shadow: none !important; gap: 20px; }
.conatct-nmbers {margin-bottom: 0px !important; }
.pre-header .right .ms-btn { padding: 5px 11px; gap: 5px; }
.globalcp-status-indicator-container {margin-right: 10px; }

rect.load-clip {width: 100%; fill: rgb(102, 187, 106) !important; }
rect.load-clip .blue {width: 100%; fill: blue !important; }
.globalcp-card .mb-0 {margin-bottom: 0px; }
path.d3-area.green {fill: rgb(102, 187, 106) !important; opacity: 1; }
path.d3-area.blue {fill: blue !important; opacity: 1; }
path.d3-area.red {fill: red !important; opacity: 1; }
.bg-22 {background: #f24772 !important;}
.bg-22:hover {opacity: 0.8; cursor: pointer; }
.bg-23 {background: rgb(102, 187, 106) !important; }
.bg-23:hover {opacity: 0.8; cursor: pointer !important; }
.bg-24 {background: rgb(92, 107, 192) !important; opacity: 1 }
.bg-24:hover {opacity: 0.8;  cursor: pointer !important }
.kartica-podnaslov {font-size: 12px; opacity: 0.8;}
.progress {height: 1rem; border-radius: 2px;}
.supportpin {font-size: 25px; color: #66bb6a; font-weight: 500; }
.vaskredit {font-size: 25px; color: #66bb6a; font-weight: 500; }
.prosjecanodgovor {font-size:45px; color: rgb(102, 187, 106); }
.dropdown-menu {font-size:14px;}
.dropdown-item { padding: 7px 20px 7px 15px; }

@media (max-width: 991.98px) {
.banner.inner-banner .right-image { display: none; }
}

.tabelaselect {width: 5% !important;}
.tabelanaziv {width: 40% !important; }
.tabeladatum {width:25% !important;  }
.tabelaakcija {width: 5% !important;  }
.globalcp-card-header {background-color: #f1f3f8; padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; justify-content: space-between;}
.globalcp-card-header.incidenti {background-color: #ffeeee; padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; justify-content: space-between;}
.naslov-incidenti {color: #e90000 !important}
.warning-box {border-top: 4px solid #e90000 !important}
.table-selekt {width: 5% }

.globalcp-navbar-nav-link.globalcp-active, .globalcp-navbar-nav-link.globalcp-show, .globalcp-navbar-nav-link:active {
    color: #ff0000 !important;
    background-color: var(--navbar-active-bg);
    }
    
.globalcp-bg-plava {background-color: rgb(78, 136, 241) !important; }
.globalcp-btn-primary {background-color: rgb(78, 136, 241) !important; }
.globalcp-btn-dark {background-color: rgb(73, 73, 73) !important; }
.globalcp-statustext {font-size: 0.7rem }
.globalcp-list-group-item-action.active { background-color: #F3F4F6; }
.globalcp-datatable-footer {padding: 10px var(--card-cap-padding-x); }
.globalcp-page-link {padding: 5px 10px; font-size: 10px; min-width: auto !important; }
.table-status .globalcp-badge {min-width: 120px; }
.table-status-hosting .globalcp-badge {min-width: 94px; }

.table-status.finansije .globalcp-badge {min-width: 150px; }
.table-status.predracuni .globalcp-badge {min-width: 128px; }
.ownertextbadge {min-width: 57px; }

.table-nazivdomene { min-width: 25%; }
.globalcp-table tr:hover {background-color: #fbfbfb;}
.globalcp-navbar>.globalcp-container-fluid {--gutter-x: 0px !important; }
.globalcp-bg-primary {background-color: rgba(var(--primary-rgb: 47 119 218), var(--bg-opacity)) !important;}
li.globalcp-nav-item.dashboard {padding-left: 1px; }

body {
    background-image: linear-gradient(rgba(241, 244, 249, 0.5), rgba(241, 244, 249, 0.5)), url(/../cp/assets/images/backgrounds/bg_cp.jpg);
    background-size: fit !important;
    background-repeat: no-repeat !important;
    background-position: 50% 0%;
}
.globalcp-mb-1rem {margin-bottom: 1rem; margin-top: 2px; }
.globalcp-card-body-tiketi {padding: 0.975rem 1.25rem;}
td.vrijeme {width: 90px !important; }
.globalcp-left-5px {margin-left: 5px; }
.globalcp-tablepaddingfix { padding: 0.75rem 0rem !important;}
.fix-avatar {width: 40px; height: 40px; !important}
i.fix-top {margin-top: 0px !important; }
.globalcp-list-feed-item:before {width: 15px; height: 15px;left: -3px; }
.globalcp-list-feed-item.rijesenproblem:before {background-color: green; }
span.statnusninaslov.rijesenproblem {color: green !important; }
.globalcp-list-feed-item.prijavljenproblem:before {background-color: red; }
span.statnusninaslov.prijavljenproblem {color: red !important; }
span.statnusninaslov.analizautoku {color: orange !important; }
.globalcp-list-feed-item.analizautoku:before {background-color: orange; }
.globalcp-list-feed {    --feed-circle-border-width: 1px;    --feed-circle-border-color: #afafaf; }
.bold {font-weight: bold;}
.greentext {color: green !important; }
.redtext {color: red !important; }
.orangetext {color: orange !important; }
.left5 {margin-left: 5px; }

.globalcp-list-feed-item { padding-top: 0px; }
.timelineindicent { background-color: #F3F4F6;   padding: 15px;    border-radius: 5px 10px 10px 10px;  }

.timelineindicent::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 3px;
  width: 0;
  z-index: 1;
  left: 19px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent #F3F4F6 transparent transparent;
}

.loginforma {display: flex; justify-content: center; align-items: center; height: 100%;}
.globalcp-table-responsive { overflow: visible; }

/* Stiliziranje odabrane stavke */
.globalcp-list-group-item input[type="radio"]:checked ~ .globalcp-align-self-center {
    background-color: #e6f2ff;
}

/* Također stiliziramo cijeli label za hover i fokus */
.globalcp-list-group-item:focus-within, .globalcp-list-group-item:hover {
    background-color: #e6f2ff;
}
.globalcp-form-check-input:checked[type=radio] {
 box-shadow: none !Important;}
 
 .logo-login {
    display: flex;
    justify-content: center;
    align-items: center; /* Optional: centers the image vertically if the container has a fixed height */
    width: 100%; /* Optional: ensures the container takes up the full available width */
}

.logo-login img {
    max-width: 180px;
    height: auto;
    margin-bottom: 30px;
}

.bg-maksimalno-kredita {background-color: #66bb6a !important; }
.bg-nema-kredita {background-color: #ff6a63 !important; }
.globalcp-bg-light {background-color: rgb(228 228 228) !important; }
.bg-lightblue {background-color: #f9fdff; }
.bg-lightblue2 {background-color: #f1f3f8 }
.globalcp-navbar-nav-link:hover {background-color: #fff; }
.globalcp-sidebar {background: unset !important; }
.dropdown {float: right;}
.table-akcija a {float: right !Important; }
.ql-container {background-color: #fff !important; }
.formainput100 { --input-placeholder-color: #d0d0d0 !important; background-color: #fff !important; padding: 5px 10px !important; border-radius: 5px !important; border: 1px solid #ddd !important; height: 35px !important;}
.input-90-percent {width: 90%; margin: auto; float: center; justify-content: center; }
.globalcp-form-switch .globalcp-form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.5%29'/%3e%3c/svg%3e")
}

.globalcp-form-switch .globalcp-form-check-input:checked {
    background-position: right center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.globalcp-form-check-inline {
    --form-check-inline-margin-end: 1rem;
    display: inline-block;
    margin-right: var(--form-check-inline-margin-end)
}
.domaininfo {font-size: 0.875rem; font-weight:600; color: #1f0846; }
.form-label {margin-bottom: unset !important; }
.odgovor-korisnika { border-left: 4px solid rgb(78, 136, 241) !important; }
.odgovor-operatora { border-left: 4px solid rgb(102, 187, 106) !important; }
.float-right {float: right; text-align: right; }
textarea {
    margin: 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus {
    -webkit-text-fill-color: inherit !important;
    -webkit-box-shadow: unset !important;
    transition: background-color 5000s ease-in-out 0s;
    font-weight: inherit !important;
}


.tiketattachment {
    display: flex;
    height: 2.75rem;
    width: 9.85rem;
    align-items: center;
    border-radius: 0.5rem;
    border-width: 1px;
    border-color: rgb(var(--default-border));
    padding: 0.25rem 0.55rem;
    }
.tiketattachmenti-ime {
    display: inline-block;
    max-width: 6rem;
    font-size: 0.75rem;
}
.tiketattachmenti-velicina {
    display: inline-block;
    max-width: 8rem;
    font-size: 0.65rem;
}
.truncate {
overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    }
    
.globalcp-navbar-nav-link.back {
    background-color: #f1f3f8;
}
.globalcp-navbar-nav-link.back:hover {
    background-color: #fff;
}
.globalcp-card-body.selectclient:hover {
    background-color: #624fe8 !important;
    
}

.napomenabold { font-weight: 600 !important; }
.crveni-tekst-600 { font-weight: 600 !important; color: red; }
















    
    



.media-chat {
    --chat-message-padding-y: 0.625rem;
    --chat-message-padding-x: 1rem;
    --chat-message-bg: var(--gray-300);
    --chat-message-color: var(--body-color);
}

.media-chat-item-reverse {
    --chat-message-bg: var(--primary);
    --chat-message-color: var(--white);
    text-align: right;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse !important;
    -ms-flex-item-align: end;
    align-self: flex-end;
}

.animate__zoomOut {
    animation-duration: 0.2s !important; /* Skraćuje trajanje zatvaranja na 0.5 sekundi */
}

.cancel-button-custom {
    background-color: #616668 !important; /* Postavlja pozadinsku boju */
    color: #ffffff !important; /* Postavlja boju teksta, prilagodite po potrebi */
    border: none; /* Uklanja okvir ako nije potreban */
    /* Dodajte dodatne stilove po potrebi */
}
.swal2-actions {gap: 10px; }

.globalcp-form-control-feedback-start.globalcp-form-control.2fa-number {
padding-left: 0px !important;
}
.globalcp-bg-light2 {
    --bg-opacity: 1;
    background-color: rgba(var(--light-rgb), var(--bg-opacity)) !important;
}

.globalcp-card { background: #fff !important; }

input.globalcp-form-control { background-color: #fbfdff !important; }
select.globalcp-form-select { background-color: #fbfdff !important; height: 2.85em; padding: 0 .75em; }
#dnsTable.globalcp-table {    --form-select-indicator-padding: 1rem !important;     --table-cell-padding-y: 0.55rem;
    --table-cell-padding-x: 0.55rem; }
textarea.globalcp-form-control { background-color: #fbfdff !important; }
input.globalcp-form-control:disabled { background-color: #f6f6f6 !important; opacity: 0.7 !important; }
select.globalcp-form-select:disabled { background-color: #f6f6f6 !important; opacity: 0.7 !important; }
textarea.globalcp-form-control:disabled { background-color: #f6f6f6 !important; opacity: 0.7 !important; }

.sivibox { background-color: #fbfbfb !important; }
.globalcp-card>.globalcp-list-group {padding-top: 0px !important; padding-bottom: 0px !important; }
.globalcp-form-control.twofa-number {height: 2.875rem !important; font-size: 1rem !important; text-align: center !Important; }

/* Chrome, Safari, Edge, Opera */
input,twofa-number::-webkit-outer-spin-button,
input.twofa-number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input.twofa-number[type=number] {
  -moz-appearance: textfield;
}

/* Define the boxpaket class as a flex container with column direction */
.boxpaket {
    display: flex;
    flex-direction: column;
    /* Optional: Set a minimum height */
    min-height: 400px !important;/* Adjust as needed */
    /* Ensure the boxes stretch to fill the height */
}
.boxpaket > div:last-child {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* Progress Bar Classes */

/* 0-20% - Tamno Zelena */
.progress-bar-0-20 {
    background-color: #28a745; /* Tamno zelena (Bootstrap success green) */
}

/* 20-40% - Srednje Zelena */
.progress-bar-20-40 {
    background-color: #5cb85c; /* Srednje zelena (Bootstrap medium green) */
}

/* 40-60% - Svijetlo Zelena */
.progress-bar-40-60 {
    background-color: #8bc34a; /* Svijetlo zelena */
}

/* 60-80% - Narandžasta */
.progress-bar-60-80 {
    background-color: #fd7e14; /* Narandžasta (Bootstrap orange) */
}

/* 80-100% - Crvena */
.progress-bar-80-100 {
    background-color: #dc3545; /* Crvena (Bootstrap danger red) */
}

/* Opcionalno: Dodavanje tranzicije za glatke promjene širine */
.globalcp-progress-bar {
    transition: width 0.5s ease;
    height: 0.125rem; /* Visina progress bar-a */
    border-radius: 0.25rem; /* Zaobljenje uglova */
}


@media (max-width: 1599.98px) {
   #quick-contact h2 {
        font-size: 52px;
        color: #fff;
        line-height: 1.2;
        font-family: "Inter", sans-serif;
    	font-weight: 700;
    	-webkit-font-smoothing: antialiased;
    }
    
    #quick-contact .ms-btn {
    min-width: 250px;
    font-weight: 700;
    font-size: 16px !important;
    font-family: "Inter", sans-serif;
    line-height: 1.2em;
    letter-spacing: normal;
    text-decoration: none;
    display: inline-block;
    padding: 12px 17px !important;
    border-radius: 5px;
    border: none;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: .3s;
    cursor: pointer;
    }
    
    #header .header {
    position: absolute;
    width: 100%;
    height: auto;
    margin: 0 auto;
    font-size: 14px;
    font-weight: 400;
    padding-top: 0px;
    z-index: 10;
    line-height: 1.2em;
}

#header .pre-header .section-wrap {
    display: flex
;
    justify-content: space-between;
    align-items: center;
}
#header .pre-header { 

background-color: #2ba3eb0f;
    padding-top: 5px;
    padding-bottom: 5px;
}

#header .header .container {
    position: relative;
}
#header .pre-header .right .ms-btn {
    display: flex
;
    align-items: center;
    justify-content: center;
    min-width: inherit;
    padding: 7px 11px;
    font-size: 14px;
    line-height: 1.2em;
}
#header .header .navbar {
    padding: 0;
    padding-top: 15px;
}
#header .header .container {
--bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x)* .5);
    padding-left: calc(var(--bs-gutter-x)* .5);
    margin-right: auto;
    margin-left: auto;
}
#header .main-menu {
    display: flex
;
    justify-content: right;
    padding: 0;
    height: 100%;
    position: relative;
}
#header .main-menu>ul {
    display: flex
;
    align-items: center;
}
#header .header .logo-primary {
    display: flex
;
    align-items: center;
    justify-content: flex-start;
}

#header .header .logo-primary img {
    height: 44px;
}
#header ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#header .pre-header .left .conatct-nmbers .phone {
    font-weight: 400;
}
#header .pre-header .left .conatct-nmbers li {
    display: inline-flex
;
    align-items: center;
}
#header .pre-header .left .conatct-nmbers .email {
    margin: 0 15px 0 0;
}
#header .pre-header .left .conatct-nmbers li {
    display: inline-flex
;
    align-items: center;
}
#header .pre-header .left .conatct-nmbers .email span {
    font-size: 22px;
}
#header .pre-header .left .conatct-nmbers span {
    color: #2ba3eb;
    margin-right: 10px;
    text-decoration: none;
}
}

@media (max-width: 767.98px) {
    #quick-contact h2 {
        font-size: 34px;
        color: #fff;
        line-height: 1.2;
        font-family: "Inter", sans-serif;
    	font-weight: 700;
    	-webkit-font-smoothing: antialiased;
    }
        #quick-contact .ms-btn {
        min-width: 200px;
            font-weight: 700;
    font-size: 14px !important;
    font-family: "Inter", sans-serif;
    line-height: 1.2em;
    letter-spacing: normal;
    text-decoration: none;
    display: inline-block;
    padding: 8px 12px !important;
    border-radius: 5px;
    border: none;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: .3s;
    cursor: pointer;
    }
}

.infopodloga { background: #f2fff3; }
.align-items-center { align-items: center; }
.flex { display: flex; }
.form-group {margin-bottom: 10px; }
.input-group-text {font-size: 14px; }







@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 86% !important;
    }
}

.nav-menu { border: var(--border-width) var(--border-style) var(--border-color) !important; }
    .globalcp-navbar { background-color: #fff; 
}


    /* SWAL korekcija bez prefiksa */
    


/* ***** SWAL Naslov ***** */
.swal-title-custom {
  font-size: 18px;      /* Veličina fonta naslova */
  color: #212529;       /* Po potrebi promijenite boju */
  text-align: center; 
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    border-radius: 5px 5px 0px 0px;   /* Opcionalno poravnanje */
}

/* ***** SWAL Tekst ***** */
.swal-text-custom {
  font-size: 14px;      /* Veličina fonta */
  color: #555;          /* Boja teksta */
  line-height: 1.4;     /* Razmak između linija */
  text-align: center;   /* Opcionalno centriranje */
}

/* ***** Dugme za potvrdu ***** */
.confirm-button-custom {
  /* font-size: 14px;          /* Veličina fonta */
 /* padding: 0.5rem 1rem;     /* Unutrašnje razmake */
  cursor: pointer;          /* Ikonica za klik */
  /* Dodajte ostale stilove za .globalcp-btn i .globalcp-btn-primary ako želite */
}

.globalcp-btn:focus-visible {box-shadow: none; border: none !important; }

/* ***** Dugme za odustajanje ***** */
.cancel-button-custom {
  /* font-size: 14px;
  padding: 0.5rem 1rem; */
  cursor: pointer;
  /* Dodajte ostale stilove za .globalcp-btn i .cancel-button-custom ako želite */
}

/* ***** Animacije (ako koristite animate.css) ***** */
/* Animate.css obično uvozite iz CDN-a ili lokalno. 
   Ako želite, možete dodati prilagođene animacije ovdje. */
.animate__animated { 
  /* Ovo su bazne klase iz Animate.css */
}
.animate__bounceIn {
  /* Animacija pojavljivanja */
}
.animate__zoomOut {
  /* Animacija zatvaranja */
}


.cp-icon-max-height {
    max-height: 42px;
    width: auto; /* Ovo omogućuje da zadrži proporcionalne dimenzije */
}


swal2-container swal2-center swal2-backdrop-show { overflow-y: hidden !important; }

.custom-bg-1 {
    background-color: #d7fae2;
}

.custom-bg-2 {
    background-color: #ffd2fd;
}


.custom-bg-3 {
    background-color: #ffdbcc;
}

.custom-bg-4 {
    background-color: #c2e6f5;
}

.custom-bg-panel-cp {
    background-color: #fcfbfe;
}


/* Kraj Swall korekcije */





.useroptionmenu {padding: .3125rem 0.9375rem !important;}


.swal2-shown {
    overflow: unset !important;
    padding-right: 0px !important;
}

.logo {
    max-width: 160px;
    padding-left: 8px;
}
.bottom-text-payment {
    color: #a1a1a1;
}

@media (min-width: 1200px) {
    h3.naslovplacanje {
        font-size: 1.255rem;
        font-weight: 500;
    }
}




.brojukorpi { 
  position: absolute; 
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-size: 11px;
  top: -6px;
  right: -9px;
  width: 16px;
  height: 16px;
  background: red;
  color: #fff;
  border-radius: 50%;
  padding: 0;
  margin: 0;
}

.brojukorpi .inner {
  display: inline-block;
  /* Pomakni tekst prema dolje, prilagodi vrijednost po potrebi */
  transform: translateY(1px);
}
 .header-section a:hover {
    color: #ccc !important;
}











input.globalcp-form-control {}

.cardsum {padding: 15px 20px 15px 20px !important; }

/* Stil za "klikabilne" boxove */
.selectable-user-box {
  cursor: pointer;
  transition: background-color 0.1s ease-in-out;
  border: 1px solid #ddd;
  margin-bottom: 10px;
  min-height: 245px;  
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
}

.selectable-user-box:hover {
  background-color: #624fe8 !important;
  color: #fff;
  transition: background-color 0.1s ease-in-out;
}

/* Klasa koja označava trenutno selektovani box */
.user-box-selected {
  background-color: #624fe8 !important; color: #fff;
}

.user-box-selected {
  min-height: 245px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  border-radius: 5px;
}

/* Pravila za check ikonu */
.check-icon {
  display: none; 
  align-items: center; 
  justify-content: center; 
  width:30px; 
  height:30px; 
  background-color: white; 
  position: absolute; 
  right: 5px; 
  top:-10px; 
  border-radius: 50px;
  border: 1px solid #624fe8;
}
.check-icon i {font-size:22px; color: #624fe8; }

.selectable-user-box .check-icon {
  display: none;
}
.selectable-user-box.user-box-selected .check-icon {
  display: flex !important;
}

.custom-sidebar-width {
    width: 22rem !important;
}
.gap10 {flex-wrap: wrap; flex: 1;}

.nazivkompanije {font-size: 14px; border-bottom: 1px solid #ccc; padding: 10px 15px 10px 15px; min-height: 30px; margin-bottom: 0px; }
.podacilica { padding: 10px; }
.podacilica:hover {background-color: #624fe8; }

.obliklica {
  padding:10px; 
  font-size:10px; 
  letter-spacing:2px; 
  font-weight: 500; 
  border-radius: 0px 0px 5px 5px; 
  transition: background-color 0.1s ease-in-out;
}

.selectable-user-box .obliklica.pravno {background-color: #e4f9ed; }
.selectable-user-box:hover .obliklica.pravno {background-color: #48d585;  color: #fff; }
.user-box-selected .obliklica.pravno {background-color: #48d585;  color: #fff; }

.selectable-user-box .obliklica.fizicko {background-color: #d6e9f3; }
.selectable-user-box:hover .obliklica.fizicko {background-color: #48aed5; color: #fff; }
.user-box-selected .obliklica.fizicko {background-color: #48aed5; color: #fff; }

.podaciolicu { padding: 10px 15px 10px 15px; min-height: 157px; transition: background-color 0.4s ease-in-out; }
.podaciolicu p { margin-bottom:3px; }

.selectable-user-box-create { 
  transition: background-color 0.4s ease-in-out;
  background-color: #ebf4fe;
  display: flex; 
  align-items: center; 
  justify-content: center; 
  cursor: pointer;
  border: 1px solid #ddd;
  margin-bottom: 10px;
  min-height: 246px;  
  border-radius: 5px;
}

.radioSelekt {display: flex; align-items: center; gap:10px; }
.globalcp-form-check-label {margin-top:2px !important;}
.selectable-user-box-create:hover { background-color: #f8f9fa; color: #48d585; transition: background-color 0.4s ease-in-out; }

div:where(.swal2-container) input:where(.swal2-input), div:where(.swal2-container) input:where(.swal2-file), div:where(.swal2-container) textarea:where(.swal2-textarea), div:where(.swal2-container) select:where(.swal2-select), div:where(.swal2-container) div:where(.swal2-radio), div:where(.swal2-container) label:where(.swal2-checkbox) {margin:0 !important; width: 100%;}

.swal2-input:focus {box-shadow: none !important;}
div:where(.swal2-container) button:where(.swal2-close):focus-visible {box-shadow: none !important;}

/* Animation for arrow icon */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.spin {
  animation: spin 1s linear infinite;
}

.stavkabg {
    background-color: #fbfbfb !important;
}
/*div:where(.swal2-container).swal2-center>.swal2-popup { background: #f1f3f8;  }*/
.nav-tabs .nav-link {
    color: #5c5f6e !important;
    background: #fff !important;
    padding: 10px;
    border: 1px solid #f2f2f2;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
}
.nav-tabs .nav-link.active {
    background: #3c4da4 !important;
    color: #fff !important;
}
.nav-tabs .nav-link:focus {
    box-shadow: none !important;
}
.nav-tabs .nav-link:hover {
    background: #3c4da4 !important;
    color: #fff !important;
}




/* STil iz CART-a */

   /**************************************************
     * Glavni stilovi
     **************************************************/
    a.ukloni i:hover { color: red !important; }
    .stavkabg { background-color: #fbfbfb !important; }
    .nolist { list-style: none; }
    .left { float: left; }
    /* Disabled boja sada #a2a2a2 */
    .disabledgrey { color: #a2a2a2 !important; }
    .disabledbadge { background-color: #9da0a5 !important; color: white !important; }
    /* Disabled boja za krug */
    .disabledcircle { background-color: #a2a2a2 !important; }
    .defaultcolor { color: #001042 !important; }
    .empty { margin: 10px 0; }

    /* Dropdown stilovi */
    .dropdown-menu {
      min-width: auto;
      padding: 5px 0;
    }
    .dropdown-item {
      cursor: pointer;
    }
    
    /**************************************************
     * Loader overlay i spinner (uklonjen inline style)
     **************************************************/
    #loader {
      display: none;
      position: fixed;
      z-index: 9999;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .spinner {
      border: 16px solid #f3f3f3;
      border-top: 16px solid #3498db;
      border-radius: 50%;
      width: 120px;
      height: 120px;
      animation: spin 2s linear infinite;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /**************************************************
     * Order summary stilovi
     **************************************************/
    .order-line {
      display: flex;
      justify-content: space-between;
    }
    .globalcp-mb-22px { margin-bottom:22px; }
    .brisanjekorpedugme {
      --btn-hover-bg: #EF4444;
      --btn-hover-color: #fff;
      --btn-hover-border-color: #EF4444;
    }
    .cardsum {padding: 16px 20px 15px 20px !important; }

    /**************************************************
     * Stilovi za continue shopping modal
     **************************************************/
    .continue-container {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 10px;
    }
    .continue-option {
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 20px;
      width: 200px;
      text-align: center;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .continue-option:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    .continue-option img {
      width: 50px;
      height: 50px;
      margin-bottom: 10px;
    }

    /**************************************************
     * Dodatne prilagodbe za CSP (uklonjen inline style)
     **************************************************/
    .custom-sidebar-width {
      width: 22rem !important; /* bivši inline style="width: 22rem !important;" */
    }
    .hosting-usluga-label {
      margin-top: 8px; /* bivši inline style="margin-top:8px;" */
    }

    /* Hover efekt: mijenja boju pozadine na stavci u košarici i u sažetku narudžbe */
    .cart-item.hover-highlight,
    .order-summary-item.hover-highlight {
      background-color: #f5f5f5 !important;
    }

    /* Stilovi za disabled Whois dropdown – svi elementi unutar trebaju biti #a2a2a2 */
    .whois-dropdown.disabled .dropdown-toggle,
    .whois-dropdown.disabled .whois-label,
    .whois-dropdown.disabled .whois-value {
      color: #a2a2a2 !important;
    }
    .whois-dropdown.disabled .dropdown-toggle::after {
      border-top-color: #a2a2a2 !important;
    }
    
.swal2-html-container { padding: 0px; }
.nav-tabs .nav-link {
    color: #5c5f6e !important;
    background: #fff !important;
    padding: 10px;
    border: 1px solid #f2f2f2;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
}
.nav-tabs .nav-link.active {
    background: #3c4da4 !important;
    color: #fff !important;
}
.nav-tabs .nav-link:focus {
    box-shadow: none !important;
}
.nav-tabs .nav-link:hover {
    background: #3c4da4 !important;
    color: #fff !important;
}

.globalcp-sidebar-section-body.nopadding {padding:0px; padding-top:19px; }
.order-summary-total { border-radius: 0px; border-top:1px solid #ddd; border-bottom: 1px solid #ddd; box-shadow: none !important; }
.hosting-options {display: inline-block; }

.swal2-html-container {font-size:14px;}

.hosting-period-dropdown {font-size: .815rem !important; }
.domain-period-dropdown {font-size: .815rem !important; }


/* KRAJ STIlA IZ CARTA */

.paddingtop80 { padding-top: 100px !important;}
.paddingtop120 { padding-top: 120px !important;}
.hm10-hero-section {border-radius: 0px }
.hm-ct-info-wrapper .icon-wrapper { box-shadow: none !important; -webkit-box-shadow: none !important;}
.footer-widget .widget-title::before {bottom:-10px;}
.footer-widget .footer-nav li+li { margin-top:10px; }
.footer-widget .footer-nav li a:hover {transition: none !important; padding-left: 0px; color: #f2f2f2; }
.footer-widget .footer-nav li a:hover::before { display: none !important; }
.footer .logo {padding-left: 0px !important; }
.footer-copyright .copyright-links a+a::before { height: 19px;}
.paymentlogo {width: 60px; }
.footer-logo {width:250px;}

.footer-widget img.logo {padding-left:0px;}
.footer-social {margin-top:24px;}
.servisneinformacije {padding-left:20px;}
.uslugepodrska {padding-left:60px;}
.ft-payment-method {margin-top: 74px; background-color: unset !important;}
.paymentmethodsicons {gap:10px; margin-top:26px;}

.w80px {width: 80px; }
.mr-5 {margin-right:5px;}












/* TEL FORMA */
.iti {
  position: relative;
  display: inline-block; }
  .iti * {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
   }
  .iti__hide {
    display: none; }
  .iti__v-hide {
    visibility: hidden; }
  .iti input, .iti input[type=text], .iti input[type=tel] {
    position: relative;
    z-index: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-right: 36px;
    margin-right: 0; }
  .iti__flag-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    padding: 1px; }
  .iti__selected-flag {
    z-index: 1;
    position: relative;
    display: flex;
    align-items: center;
    height: 2.70em; !important;
    padding: 0 6px 0 8px; }
  .iti__arrow {
    margin-left: 6px;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid #555; }
    .iti__arrow--up {
      border-top: none;
      border-bottom: 4px solid #555; }
  .iti__country-list {
    position: absolute;
    z-index: 2;
    list-style: none;
    text-align: left;
    padding: 0;
    margin: 0 0 0 -1px;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
    background-color: white;
    border: 1px solid #CCC;
    white-space: nowrap;
    max-height: 200px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; }
    .iti__country-list--dropup {
      bottom: 100%;
      margin-bottom: -1px; }
    @media (max-width: 500px) {
      .iti__country-list {
        white-space: normal; } }
  .iti__flag-box {
    display: inline-block;
    width: 20px; }
  .iti__divider {
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid #CCC; }
  .iti__country {
    padding: 5px 10px;
    outline: none; }
  .iti__dial-code {
    color: #999; }
  .iti__country.iti__highlight {
    background-color: rgba(0, 0, 0, 0.05); }
  .iti__flag-box, .iti__country-name, .iti__dial-code {
    vertical-align: middle; }
  .iti__flag-box, .iti__country-name {
    margin-right: 6px; }
  .iti--allow-dropdown input, .iti--allow-dropdown input[type=text], .iti--allow-dropdown input[type=tel], .iti--separate-dial-code input, .iti--separate-dial-code input[type=text], .iti--separate-dial-code input[type=tel] {
    padding-right: 6px;
    padding-left: 101px;
    margin-left: 0; }
    .iti--allow-dropdown { width: 100%; }
  .iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container {
    right: auto;
    left: 0; }
  .iti--allow-dropdown .iti__flag-container:hover {
    cursor: pointer; }
    .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
      background-color: rgba(0, 0, 0, 0.05); }
  .iti--allow-dropdown input[disabled] + .iti__flag-container:hover,
  .iti--allow-dropdown input[readonly] + .iti__flag-container:hover {
    cursor: default; }
    .iti--allow-dropdown input[disabled] + .iti__flag-container:hover .iti__selected-flag,
    .iti--allow-dropdown input[readonly] + .iti__flag-container:hover .iti__selected-flag {
      background-color: transparent; }
  .iti--separate-dial-code .iti__selected-flag {
    background-color: rgba(0, 0, 0, 0.05); }
  .iti--separate-dial-code .iti__selected-dial-code {
    margin-left: 6px; }
  .iti--container {
    position: absolute;
    top: -1000px;
    left: -1000px;
    z-index: 1060;
    padding: 1px; }
    .iti--container:hover {
      cursor: pointer; }

.iti-mobile .iti--container {
  top: 30px;
  bottom: 30px;
  left: 30px;
  right: 30px;
  position: fixed; }

.iti-mobile .iti__country-list {
  max-height: 100%;
  width: 100%; }

.iti-mobile .iti__country {
  padding: 10px 10px;
  line-height: 1.5em; }

.iti__flag {
  width: 20px; }
  .iti__flag.iti__be {
    width: 18px; }
  .iti__flag.iti__ch {
    width: 15px; }
  .iti__flag.iti__mc {
    width: 19px; }
  .iti__flag.iti__ne {
    width: 18px; }
  .iti__flag.iti__np {
    width: 13px; }
  .iti__flag.iti__va {
    width: 15px; }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .iti__flag {
      background-size: 5652px 15px; } }
  .iti__flag.iti__ac {
    height: 10px;
    background-position: 0px 0px; }
  .iti__flag.iti__ad {
    height: 14px;
    background-position: -22px 0px; }
  .iti__flag.iti__ae {
    height: 10px;
    background-position: -44px 0px; }
  .iti__flag.iti__af {
    height: 14px;
    background-position: -66px 0px; }
  .iti__flag.iti__ag {
    height: 14px;
    background-position: -88px 0px; }
  .iti__flag.iti__ai {
    height: 10px;
    background-position: -110px 0px; }
  .iti__flag.iti__al {
    height: 15px;
    background-position: -132px 0px; }
  .iti__flag.iti__am {
    height: 10px;
    background-position: -154px 0px; }
  .iti__flag.iti__ao {
    height: 14px;
    background-position: -176px 0px; }
  .iti__flag.iti__aq {
    height: 14px;
    background-position: -198px 0px; }
  .iti__flag.iti__ar {
    height: 13px;
    background-position: -220px 0px; }
  .iti__flag.iti__as {
    height: 10px;
    background-position: -242px 0px; }
  .iti__flag.iti__at {
    height: 14px;
    background-position: -264px 0px; }
  .iti__flag.iti__au {
    height: 10px;
    background-position: -286px 0px; }
  .iti__flag.iti__aw {
    height: 14px;
    background-position: -308px 0px; }
  .iti__flag.iti__ax {
    height: 13px;
    background-position: -330px 0px; }
  .iti__flag.iti__az {
    height: 10px;
    background-position: -352px 0px; }
  .iti__flag.iti__ba {
    height: 10px;
    background-position: -374px 0px; }
  .iti__flag.iti__bb {
    height: 14px;
    background-position: -396px 0px; }
  .iti__flag.iti__bd {
    height: 12px;
    background-position: -418px 0px; }
  .iti__flag.iti__be {
    height: 15px;
    background-position: -440px 0px; }
  .iti__flag.iti__bf {
    height: 14px;
    background-position: -460px 0px; }
  .iti__flag.iti__bg {
    height: 12px;
    background-position: -482px 0px; }
  .iti__flag.iti__bh {
    height: 12px;
    background-position: -504px 0px; }
  .iti__flag.iti__bi {
    height: 12px;
    background-position: -526px 0px; }
  .iti__flag.iti__bj {
    height: 14px;
    background-position: -548px 0px; }
  .iti__flag.iti__bl {
    height: 14px;
    background-position: -570px 0px; }
  .iti__flag.iti__bm {
    height: 10px;
    background-position: -592px 0px; }
  .iti__flag.iti__bn {
    height: 10px;
    background-position: -614px 0px; }
  .iti__flag.iti__bo {
    height: 14px;
    background-position: -636px 0px; }
  .iti__flag.iti__bq {
    height: 14px;
    background-position: -658px 0px; }
  .iti__flag.iti__br {
    height: 14px;
    background-position: -680px 0px; }
  .iti__flag.iti__bs {
    height: 10px;
    background-position: -702px 0px; }
  .iti__flag.iti__bt {
    height: 14px;
    background-position: -724px 0px; }
  .iti__flag.iti__bv {
    height: 15px;
    background-position: -746px 0px; }
  .iti__flag.iti__bw {
    height: 14px;
    background-position: -768px 0px; }
  .iti__flag.iti__by {
    height: 10px;
    background-position: -790px 0px; }
  .iti__flag.iti__bz {
    height: 14px;
    background-position: -812px 0px; }
  .iti__flag.iti__ca {
    height: 10px;
    background-position: -834px 0px; }
  .iti__flag.iti__cc {
    height: 10px;
    background-position: -856px 0px; }
  .iti__flag.iti__cd {
    height: 15px;
    background-position: -878px 0px; }
  .iti__flag.iti__cf {
    height: 14px;
    background-position: -900px 0px; }
  .iti__flag.iti__cg {
    height: 14px;
    background-position: -922px 0px; }
  .iti__flag.iti__ch {
    height: 15px;
    background-position: -944px 0px; }
  .iti__flag.iti__ci {
    height: 14px;
    background-position: -961px 0px; }
  .iti__flag.iti__ck {
    height: 10px;
    background-position: -983px 0px; }
  .iti__flag.iti__cl {
    height: 14px;
    background-position: -1005px 0px; }
  .iti__flag.iti__cm {
    height: 14px;
    background-position: -1027px 0px; }
  .iti__flag.iti__cn {
    height: 14px;
    background-position: -1049px 0px; }
  .iti__flag.iti__co {
    height: 14px;
    background-position: -1071px 0px; }
  .iti__flag.iti__cp {
    height: 14px;
    background-position: -1093px 0px; }
  .iti__flag.iti__cr {
    height: 12px;
    background-position: -1115px 0px; }
  .iti__flag.iti__cu {
    height: 10px;
    background-position: -1137px 0px; }
  .iti__flag.iti__cv {
    height: 12px;
    background-position: -1159px 0px; }
  .iti__flag.iti__cw {
    height: 14px;
    background-position: -1181px 0px; }
  .iti__flag.iti__cx {
    height: 10px;
    background-position: -1203px 0px; }
  .iti__flag.iti__cy {
    height: 14px;
    background-position: -1225px 0px; }
  .iti__flag.iti__cz {
    height: 14px;
    background-position: -1247px 0px; }
  .iti__flag.iti__de {
    height: 12px;
    background-position: -1269px 0px; }
  .iti__flag.iti__dg {
    height: 10px;
    background-position: -1291px 0px; }
  .iti__flag.iti__dj {
    height: 14px;
    background-position: -1313px 0px; }
  .iti__flag.iti__dk {
    height: 15px;
    background-position: -1335px 0px; }
  .iti__flag.iti__dm {
    height: 10px;
    background-position: -1357px 0px; }
  .iti__flag.iti__do {
    height: 14px;
    background-position: -1379px 0px; }
  .iti__flag.iti__dz {
    height: 14px;
    background-position: -1401px 0px; }
  .iti__flag.iti__ea {
    height: 14px;
    background-position: -1423px 0px; }
  .iti__flag.iti__ec {
    height: 14px;
    background-position: -1445px 0px; }
  .iti__flag.iti__ee {
    height: 13px;
    background-position: -1467px 0px; }
  .iti__flag.iti__eg {
    height: 14px;
    background-position: -1489px 0px; }
  .iti__flag.iti__eh {
    height: 10px;
    background-position: -1511px 0px; }
  .iti__flag.iti__er {
    height: 10px;
    background-position: -1533px 0px; }
  .iti__flag.iti__es {
    height: 14px;
    background-position: -1555px 0px; }
  .iti__flag.iti__et {
    height: 10px;
    background-position: -1577px 0px; }
  .iti__flag.iti__eu {
    height: 14px;
    background-position: -1599px 0px; }
  .iti__flag.iti__fi {
    height: 12px;
    background-position: -1621px 0px; }
  .iti__flag.iti__fj {
    height: 10px;
    background-position: -1643px 0px; }
  .iti__flag.iti__fk {
    height: 10px;
    background-position: -1665px 0px; }
  .iti__flag.iti__fm {
    height: 11px;
    background-position: -1687px 0px; }
  .iti__flag.iti__fo {
    height: 15px;
    background-position: -1709px 0px; }
  .iti__flag.iti__fr {
    height: 14px;
    background-position: -1731px 0px; }
  .iti__flag.iti__ga {
    height: 15px;
    background-position: -1753px 0px; }
  .iti__flag.iti__gb {
    height: 10px;
    background-position: -1775px 0px; }
  .iti__flag.iti__gd {
    height: 12px;
    background-position: -1797px 0px; }
  .iti__flag.iti__ge {
    height: 14px;
    background-position: -1819px 0px; }
  .iti__flag.iti__gf {
    height: 14px;
    background-position: -1841px 0px; }
  .iti__flag.iti__gg {
    height: 14px;
    background-position: -1863px 0px; }
  .iti__flag.iti__gh {
    height: 14px;
    background-position: -1885px 0px; }
  .iti__flag.iti__gi {
    height: 10px;
    background-position: -1907px 0px; }
  .iti__flag.iti__gl {
    height: 14px;
    background-position: -1929px 0px; }
  .iti__flag.iti__gm {
    height: 14px;
    background-position: -1951px 0px; }
  .iti__flag.iti__gn {
    height: 14px;
    background-position: -1973px 0px; }
  .iti__flag.iti__gp {
    height: 14px;
    background-position: -1995px 0px; }
  .iti__flag.iti__gq {
    height: 14px;
    background-position: -2017px 0px; }
  .iti__flag.iti__gr {
    height: 14px;
    background-position: -2039px 0px; }
  .iti__flag.iti__gs {
    height: 10px;
    background-position: -2061px 0px; }
  .iti__flag.iti__gt {
    height: 13px;
    background-position: -2083px 0px; }
  .iti__flag.iti__gu {
    height: 11px;
    background-position: -2105px 0px; }
  .iti__flag.iti__gw {
    height: 10px;
    background-position: -2127px 0px; }
  .iti__flag.iti__gy {
    height: 12px;
    background-position: -2149px 0px; }
  .iti__flag.iti__hk {
    height: 14px;
    background-position: -2171px 0px; }
  .iti__flag.iti__hm {
    height: 10px;
    background-position: -2193px 0px; }
  .iti__flag.iti__hn {
    height: 10px;
    background-position: -2215px 0px; }
  .iti__flag.iti__hr {
    height: 10px;
    background-position: -2237px 0px; }
  .iti__flag.iti__ht {
    height: 12px;
    background-position: -2259px 0px; }
  .iti__flag.iti__hu {
    height: 10px;
    background-position: -2281px 0px; }
  .iti__flag.iti__ic {
    height: 14px;
    background-position: -2303px 0px; }
  .iti__flag.iti__id {
    height: 14px;
    background-position: -2325px 0px; }
  .iti__flag.iti__ie {
    height: 10px;
    background-position: -2347px 0px; }
  .iti__flag.iti__il {
    height: 15px;
    background-position: -2369px 0px; }
  .iti__flag.iti__im {
    height: 10px;
    background-position: -2391px 0px; }
  .iti__flag.iti__in {
    height: 14px;
    background-position: -2413px 0px; }
  .iti__flag.iti__io {
    height: 10px;
    background-position: -2435px 0px; }
  .iti__flag.iti__iq {
    height: 14px;
    background-position: -2457px 0px; }
  .iti__flag.iti__ir {
    height: 12px;
    background-position: -2479px 0px; }
  .iti__flag.iti__is {
    height: 15px;
    background-position: -2501px 0px; }
  .iti__flag.iti__it {
    height: 14px;
    background-position: -2523px 0px; }
  .iti__flag.iti__je {
    height: 12px;
    background-position: -2545px 0px; }
  .iti__flag.iti__jm {
    height: 10px;
    background-position: -2567px 0px; }
  .iti__flag.iti__jo {
    height: 10px;
    background-position: -2589px 0px; }
  .iti__flag.iti__jp {
    height: 14px;
    background-position: -2611px 0px; }
  .iti__flag.iti__ke {
    height: 14px;
    background-position: -2633px 0px; }
  .iti__flag.iti__kg {
    height: 12px;
    background-position: -2655px 0px; }
  .iti__flag.iti__kh {
    height: 13px;
    background-position: -2677px 0px; }
  .iti__flag.iti__ki {
    height: 10px;
    background-position: -2699px 0px; }
  .iti__flag.iti__km {
    height: 12px;
    background-position: -2721px 0px; }
  .iti__flag.iti__kn {
    height: 14px;
    background-position: -2743px 0px; }
  .iti__flag.iti__kp {
    height: 10px;
    background-position: -2765px 0px; }
  .iti__flag.iti__kr {
    height: 14px;
    background-position: -2787px 0px; }
  .iti__flag.iti__kw {
    height: 10px;
    background-position: -2809px 0px; }
  .iti__flag.iti__ky {
    height: 10px;
    background-position: -2831px 0px; }
  .iti__flag.iti__kz {
    height: 10px;
    background-position: -2853px 0px; }
  .iti__flag.iti__la {
    height: 14px;
    background-position: -2875px 0px; }
  .iti__flag.iti__lb {
    height: 14px;
    background-position: -2897px 0px; }
  .iti__flag.iti__lc {
    height: 10px;
    background-position: -2919px 0px; }
  .iti__flag.iti__li {
    height: 12px;
    background-position: -2941px 0px; }
  .iti__flag.iti__lk {
    height: 10px;
    background-position: -2963px 0px; }
  .iti__flag.iti__lr {
    height: 11px;
    background-position: -2985px 0px; }
  .iti__flag.iti__ls {
    height: 14px;
    background-position: -3007px 0px; }
  .iti__flag.iti__lt {
    height: 12px;
    background-position: -3029px 0px; }
  .iti__flag.iti__lu {
    height: 12px;
    background-position: -3051px 0px; }
  .iti__flag.iti__lv {
    height: 10px;
    background-position: -3073px 0px; }
  .iti__flag.iti__ly {
    height: 10px;
    background-position: -3095px 0px; }
  .iti__flag.iti__ma {
    height: 14px;
    background-position: -3117px 0px; }
  .iti__flag.iti__mc {
    height: 15px;
    background-position: -3139px 0px; }
  .iti__flag.iti__md {
    height: 10px;
    background-position: -3160px 0px; }
  .iti__flag.iti__me {
    height: 10px;
    background-position: -3182px 0px; }
  .iti__flag.iti__mf {
    height: 14px;
    background-position: -3204px 0px; }
  .iti__flag.iti__mg {
    height: 14px;
    background-position: -3226px 0px; }
  .iti__flag.iti__mh {
    height: 11px;
    background-position: -3248px 0px; }
  .iti__flag.iti__mk {
    height: 10px;
    background-position: -3270px 0px; }
  .iti__flag.iti__ml {
    height: 14px;
    background-position: -3292px 0px; }
  .iti__flag.iti__mm {
    height: 14px;
    background-position: -3314px 0px; }
  .iti__flag.iti__mn {
    height: 10px;
    background-position: -3336px 0px; }
  .iti__flag.iti__mo {
    height: 14px;
    background-position: -3358px 0px; }
  .iti__flag.iti__mp {
    height: 10px;
    background-position: -3380px 0px; }
  .iti__flag.iti__mq {
    height: 14px;
    background-position: -3402px 0px; }
  .iti__flag.iti__mr {
    height: 14px;
    background-position: -3424px 0px; }
  .iti__flag.iti__ms {
    height: 10px;
    background-position: -3446px 0px; }
  .iti__flag.iti__mt {
    height: 14px;
    background-position: -3468px 0px; }
  .iti__flag.iti__mu {
    height: 14px;
    background-position: -3490px 0px; }
  .iti__flag.iti__mv {
    height: 14px;
    background-position: -3512px 0px; }
  .iti__flag.iti__mw {
    height: 14px;
    background-position: -3534px 0px; }
  .iti__flag.iti__mx {
    height: 12px;
    background-position: -3556px 0px; }
  .iti__flag.iti__my {
    height: 10px;
    background-position: -3578px 0px; }
  .iti__flag.iti__mz {
    height: 14px;
    background-position: -3600px 0px; }
  .iti__flag.iti__na {
    height: 14px;
    background-position: -3622px 0px; }
  .iti__flag.iti__nc {
    height: 10px;
    background-position: -3644px 0px; }
  .iti__flag.iti__ne {
    height: 15px;
    background-position: -3666px 0px; }
  .iti__flag.iti__nf {
    height: 10px;
    background-position: -3686px 0px; }
  .iti__flag.iti__ng {
    height: 10px;
    background-position: -3708px 0px; }
  .iti__flag.iti__ni {
    height: 12px;
    background-position: -3730px 0px; }
  .iti__flag.iti__nl {
    height: 14px;
    background-position: -3752px 0px; }
  .iti__flag.iti__no {
    height: 15px;
    background-position: -3774px 0px; }
  .iti__flag.iti__np {
    height: 15px;
    background-position: -3796px 0px; }
  .iti__flag.iti__nr {
    height: 10px;
    background-position: -3811px 0px; }
  .iti__flag.iti__nu {
    height: 10px;
    background-position: -3833px 0px; }
  .iti__flag.iti__nz {
    height: 10px;
    background-position: -3855px 0px; }
  .iti__flag.iti__om {
    height: 10px;
    background-position: -3877px 0px; }
  .iti__flag.iti__pa {
    height: 14px;
    background-position: -3899px 0px; }
  .iti__flag.iti__pe {
    height: 14px;
    background-position: -3921px 0px; }
  .iti__flag.iti__pf {
    height: 14px;
    background-position: -3943px 0px; }
  .iti__flag.iti__pg {
    height: 15px;
    background-position: -3965px 0px; }
  .iti__flag.iti__ph {
    height: 10px;
    background-position: -3987px 0px; }
  .iti__flag.iti__pk {
    height: 14px;
    background-position: -4009px 0px; }
  .iti__flag.iti__pl {
    height: 13px;
    background-position: -4031px 0px; }
  .iti__flag.iti__pm {
    height: 14px;
    background-position: -4053px 0px; }
  .iti__flag.iti__pn {
    height: 10px;
    background-position: -4075px 0px; }
  .iti__flag.iti__pr {
    height: 14px;
    background-position: -4097px 0px; }
  .iti__flag.iti__ps {
    height: 10px;
    background-position: -4119px 0px; }
  .iti__flag.iti__pt {
    height: 14px;
    background-position: -4141px 0px; }
  .iti__flag.iti__pw {
    height: 13px;
    background-position: -4163px 0px; }
  .iti__flag.iti__py {
    height: 11px;
    background-position: -4185px 0px; }
  .iti__flag.iti__qa {
    height: 8px;
    background-position: -4207px 0px; }
  .iti__flag.iti__re {
    height: 14px;
    background-position: -4229px 0px; }
  .iti__flag.iti__ro {
    height: 14px;
    background-position: -4251px 0px; }
  .iti__flag.iti__rs {
    height: 14px;
    background-position: -4273px 0px; }
  .iti__flag.iti__ru {
    height: 14px;
    background-position: -4295px 0px; }
  .iti__flag.iti__rw {
    height: 14px;
    background-position: -4317px 0px; }
  .iti__flag.iti__sa {
    height: 14px;
    background-position: -4339px 0px; }
  .iti__flag.iti__sb {
    height: 10px;
    background-position: -4361px 0px; }
  .iti__flag.iti__sc {
    height: 10px;
    background-position: -4383px 0px; }
  .iti__flag.iti__sd {
    height: 10px;
    background-position: -4405px 0px; }
  .iti__flag.iti__se {
    height: 13px;
    background-position: -4427px 0px; }
  .iti__flag.iti__sg {
    height: 14px;
    background-position: -4449px 0px; }
  .iti__flag.iti__sh {
    height: 10px;
    background-position: -4471px 0px; }
  .iti__flag.iti__si {
    height: 10px;
    background-position: -4493px 0px; }
  .iti__flag.iti__sj {
    height: 15px;
    background-position: -4515px 0px; }
  .iti__flag.iti__sk {
    height: 14px;
    background-position: -4537px 0px; }
  .iti__flag.iti__sl {
    height: 14px;
    background-position: -4559px 0px; }
  .iti__flag.iti__sm {
    height: 15px;
    background-position: -4581px 0px; }
  .iti__flag.iti__sn {
    height: 14px;
    background-position: -4603px 0px; }
  .iti__flag.iti__so {
    height: 14px;
    background-position: -4625px 0px; }
  .iti__flag.iti__sr {
    height: 14px;
    background-position: -4647px 0px; }
  .iti__flag.iti__ss {
    height: 10px;
    background-position: -4669px 0px; }
  .iti__flag.iti__st {
    height: 10px;
    background-position: -4691px 0px; }
  .iti__flag.iti__sv {
    height: 12px;
    background-position: -4713px 0px; }
  .iti__flag.iti__sx {
    height: 14px;
    background-position: -4735px 0px; }
  .iti__flag.iti__sy {
    height: 14px;
    background-position: -4757px 0px; }
  .iti__flag.iti__sz {
    height: 14px;
    background-position: -4779px 0px; }
  .iti__flag.iti__ta {
    height: 10px;
    background-position: -4801px 0px; }
  .iti__flag.iti__tc {
    height: 10px;
    background-position: -4823px 0px; }
  .iti__flag.iti__td {
    height: 14px;
    background-position: -4845px 0px; }
  .iti__flag.iti__tf {
    height: 14px;
    background-position: -4867px 0px; }
  .iti__flag.iti__tg {
    height: 13px;
    background-position: -4889px 0px; }
  .iti__flag.iti__th {
    height: 14px;
    background-position: -4911px 0px; }
  .iti__flag.iti__tj {
    height: 10px;
    background-position: -4933px 0px; }
  .iti__flag.iti__tk {
    height: 10px;
    background-position: -4955px 0px; }
  .iti__flag.iti__tl {
    height: 10px;
    background-position: -4977px 0px; }
  .iti__flag.iti__tm {
    height: 14px;
    background-position: -4999px 0px; }
  .iti__flag.iti__tn {
    height: 14px;
    background-position: -5021px 0px; }
  .iti__flag.iti__to {
    height: 10px;
    background-position: -5043px 0px; }
  .iti__flag.iti__tr {
    height: 14px;
    background-position: -5065px 0px; }
  .iti__flag.iti__tt {
    height: 12px;
    background-position: -5087px 0px; }
  .iti__flag.iti__tv {
    height: 10px;
    background-position: -5109px 0px; }
  .iti__flag.iti__tw {
    height: 14px;
    background-position: -5131px 0px; }
  .iti__flag.iti__tz {
    height: 14px;
    background-position: -5153px 0px; }
  .iti__flag.iti__ua {
    height: 14px;
    background-position: -5175px 0px; }
  .iti__flag.iti__ug {
    height: 14px;
    background-position: -5197px 0px; }
  .iti__flag.iti__um {
    height: 11px;
    background-position: -5219px 0px; }
  .iti__flag.iti__un {
    height: 14px;
    background-position: -5241px 0px; }
  .iti__flag.iti__us {
    height: 11px;
    background-position: -5263px 0px; }
  .iti__flag.iti__uy {
    height: 14px;
    background-position: -5285px 0px; }
  .iti__flag.iti__uz {
    height: 10px;
    background-position: -5307px 0px; }
  .iti__flag.iti__va {
    height: 15px;
    background-position: -5329px 0px; }
  .iti__flag.iti__vc {
    height: 14px;
    background-position: -5346px 0px; }
  .iti__flag.iti__ve {
    height: 14px;
    background-position: -5368px 0px; }
  .iti__flag.iti__vg {
    height: 10px;
    background-position: -5390px 0px; }
  .iti__flag.iti__vi {
    height: 14px;
    background-position: -5412px 0px; }
  .iti__flag.iti__vn {
    height: 14px;
    background-position: -5434px 0px; }
  .iti__flag.iti__vu {
    height: 12px;
    background-position: -5456px 0px; }
  .iti__flag.iti__wf {
    height: 14px;
    background-position: -5478px 0px; }
  .iti__flag.iti__ws {
    height: 10px;
    background-position: -5500px 0px; }
  .iti__flag.iti__xk {
    height: 15px;
    background-position: -5522px 0px; }
  .iti__flag.iti__ye {
    height: 14px;
    background-position: -5544px 0px; }
  .iti__flag.iti__yt {
    height: 14px;
    background-position: -5566px 0px; }
  .iti__flag.iti__za {
    height: 14px;
    background-position: -5588px 0px; }
  .iti__flag.iti__zm {
    height: 14px;
    background-position: -5610px 0px; }
  .iti__flag.iti__zw {
    height: 10px;
    background-position: -5632px 0px; }

.iti__flag {
  height: 15px;
  box-shadow: 0px 0px 1px 0px #888;
  background-image: url("../img/flags.png");
  background-repeat: no-repeat;
  background-color: #DBDBDB;
  background-position: 20px 0; }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .iti__flag {
      background-image: url("../img/flags@2x.png"); } }

.iti__flag.iti__np {
  background-color: transparent; }
  
  
  .globalcp-list-inline {
    --list-inline-padding: .6rem!important
    }
    
  .selectclientmini {width: 500px; margin: auto; display: flex; min-height: 100vh; align-items: center;}  
    
    /* LOGIN */
    
                .globalcp-form-control.twofa-number {
                text-align: center;
                font-size: 20px;
                font-weight: bold;
            }
            .slide-toggle {
                overflow: hidden;
                transition: max-height 0.3s ease;
            }
            .hidden-section {
                max-height: 0;
            }
            .visible-section {
                max-height: 500px;
            }
            
    /*KRAJ LOGIN */
    
    
    
    
    
    
    
    
    /* MOBILNI UREĐAJI */
    


@media (max-width: 992px) {

.selectclientmini {width: auto; margin: auto; display: block; min-height: auto; align-items: center;}
.globalcp-page-content.selectclientmini { width: 90% !important; padding: 20px !important; }
.opis { display: flex;  align-items: center; font-size:12px;}

.glavnimenu { border: 0px !important; }
.nav-menu .row>* { padding-left: 0px !important; }  

}



/* CUSTOM */

@media (max-width: 992px) {

.globalcp-page-content {display: block; }
.globalcp-sidebar { position: relative !important; }
.globalcp-sidebar-main, .globalcp-sidebar-secondary { left: 0px !important; }

.globalcp-sidebar { width: 100% !important; margin-top: 20px; margin-bottom:10px; }

.uslugepodrska, .servisneinformacije { padding-left: 15px; }

.footer-widget .widget-title::before { margin: auto; left: 0; right: 0; }

footer { text-align: center; }

.paymentmethodsicons { justify-content: center; }

.globalcp-sidebar-expand-lg { z-index: auto; }

.globalcp-login-form { width: 90% !important; padding: 20px !important; }

}



@media (max-width: 992px) {
  /* Svaki red (tr) kao fleks container koji se prelama */
  .listapredracuna .globalcp-table-responsive .globalcp-table tr {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-bottom: 10px;
    padding: 12px;
    border-radius: 0px;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: var(--card-box-shadow);
  }
  
  .listapredracuna { box-shadow: none; background-color: unset !important; }
  .listapredracuna .globalcp-card { box-shadow: none; background-color: unset !important; }
  .listapredracuna .globalcp-card-header { box-shadow: var(--card-box-shadow); }
  .listapredracuna .globalcp-table-responsive { overflow-x: inherit; }

  /* Sve ćelije po 50% širine */
  .listapredracuna .globalcp-table-responsive .globalcp-table tr td {
    align-items: center;
    width: 50% !important;
    padding: 6px 10px !important;
    box-sizing: border-box;
    white-space: normal !important;
  }

  /* Lijeva ćelija u redu - lijevo poravnanje */
  .listapredracuna .globalcp-table-responsive .globalcp-table tr td.tblbrojpredracuna,
  .listapredracuna .globalcp-table-responsive .globalcp-table tr td.tbldatumizdavanja,
  .listapredracuna .globalcp-table-responsive .globalcp-table tr td.tblstatuspredracuna {
    justify-content: flex-start;
    text-align: left;
  }

  /* Desna ćelija u redu - desno poravnanje */
  .listapredracuna .globalcp-table-responsive .globalcp-table tr td.tbliznospredracuna,
  .listapredracuna .globalcp-table-responsive .globalcp-table tr td.tbldatumdospijeca,
  .listapredracuna .globalcp-table-responsive .globalcp-table tr td.tblakcije {
    justify-content: flex-end;
    text-align: right;
  }

  /* Redoslijed ćelija prema tvom zahtjevu */
  .listapredracuna .globalcp-table-responsive .globalcp-table tr td.tblbrojpredracuna {
    order: 1;
    border-top: 0px;
  }
  .listapredracuna .globalcp-table-responsive .globalcp-table tr td.tbliznospredracuna {
    order: 2;
    border-top: 0px;
  }
  .listapredracuna .globalcp-table-responsive .globalcp-table tr td.tbldatumizdavanja {
    order: 3;
  }
  .listapredracuna .globalcp-table-responsive .globalcp-table tr td.tbldatumdospijeca {
    order: 4;
  }
  .listapredracuna .globalcp-table-responsive .globalcp-table tr td.tblstatuspredracuna {
    order: 5;
  }
  .listapredracuna .globalcp-table-responsive .globalcp-table tr td.tblakcije {
    order: 6;
  }

  /* Dodaj tanke unutarnje bordere između ćelija (bez vanjskih) */
  .listapredracuna .globalcp-table-responsive .globalcp-table tr td {
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
  /* Ukloni border-right za desne ćelije (drugu u redu) */
  .listapredracuna .globalcp-table-responsive .globalcp-table tr td.tbliznospredracuna,
  .listapredracuna .globalcp-table-responsive .globalcp-table tr td.tbldatumdospijeca,
  .listapredracuna .globalcp-table-responsive .globalcp-table tr td.tblakcije {
    border-right: none;
  }
  /* Ukloni border-bottom za zadnji red ćelija (5 i 6) */
  .listapredracuna .globalcp-table-responsive .globalcp-table tr td.tblstatuspredracuna,
  .listapredracuna .globalcp-table-responsive .globalcp-table tr td.tblakcije {
    border-bottom: none;
    display: flex;
    align-items: flex-end;
  }


.karticedash { gap:10px; margin-top:10px; }

.globalcp-content {margin-left:0px; margin-right:0px;} 


.upitizapodrskustatistika.d-flex.flex-wrap > div {
  flex: 0 0 49% !important;
  max-width: 49% !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  font-size:12px;
}

.globalcp-ms-4 {margin-left:10px !important; }
.globalcp-left-5px {margin-left: 0px; }

}

/* SUPPORT TIKETI */

@media (max-width: 992px) {
  /* tbody i tbody tr blokovi i fleks kontejnere */
  .globalcp-table-responsive .posljednjiupiti tbody {
    display: block !important;
    width: 100% !important;
  }
  
   .globalcp-table-light {margin-bottom: 0px !important; }
   
   .globalcp-card-body-tiketi { background-color: #fff; box-shadow: var(--card-box-shadow); }

  .globalcp-table-responsive .posljednjiupiti tbody tr {
    display: flex !important;
    flex-wrap: wrap !important;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 0;
    margin-bottom: 10px;
    box-shadow: var(--card-box-shadow);
  }

  /* Sve td kao fleks item širine 50% */
  .globalcp-table-responsive .posljednjiupiti tbody tr td {
    align-items: center;
    width: 50% !important;
    padding: 10px 15px !important;
    box-sizing: border-box;
    white-space: normal !important;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
    
  

  /* Ukloni border-right za desne ćelije */
  .globalcp-table-responsive .posljednjiupiti tbody tr td:nth-child(even) {
    border-right: none;
  }

  /* Ukloni border-bottom za zadnje dvije ćelije (naslov i akcija) */
  .globalcp-table-responsive .posljednjiupiti tbody tr td.naslovupita,
  .globalcp-table-responsive .posljednjiupiti tbody tr td.akcijeupita {
    border-bottom: none;
  }

  /* Poravnanja: lijeve ćelije lijevo, desne desno */
  .globalcp-table-responsive .posljednjiupiti tbody tr td.vrijeme,
  .globalcp-table-responsive .posljednjiupiti tbody tr td.naslovupita {
    justify-content: flex-start;
    text-align: left;
  }

  .globalcp-table-responsive .posljednjiupiti tbody tr td.avatar-status {
  
  }
  .globalcp-table-responsive .posljednjiupiti tbody tr td.akcijeupita {
    justify-content: flex-end;
    text-align: right;
  }

  /* Postavi redoslijed da bude po redovima kao što tražiš */
  .globalcp-table-responsive .posljednjiupiti tbody tr td.vrijeme {
    order: 1;
    width: 35% !important;
  }
  .globalcp-table-responsive .posljednjiupiti tbody tr td.avatar-status {
    order: 2;
    width: 65% !important;
  }
  .globalcp-table-responsive .posljednjiupiti tbody tr td.naslovupita {
    order: 3;
    width: 80% !important;
    border-top:0px;
  }
  .globalcp-table-responsive .posljednjiupiti tbody tr td.akcijeupita {
    order: 4;
    width: 20% !important;
    display: flex;
    justify-content: center;
    border-top:0px;
  }

  /* Posebno za prvi red koji ima colspan */
  .globalcp-table-responsive .posljednjiupiti tbody tr.globalcp-table-light td[colspan] {
    width: 100% !important;
    display: block !important;
    border: none !important;
    padding: 10px 15px !important;
    text-align: left !important;
  }
}

@media (max-width: 768px) {
  /* Svaka vijest kao flex container, slika lijevo, tekst desno */
  .globalcp-card-body .globalcp-d-sm-flex {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: flex-start; /* Vertikalno centriraj */
    gap: 12px;
  }

 
  .supporttiketi { box-shadow: none; background-color: unset !important; }
  .supporttiketi .globalcp-card { box-shadow: none; background-color: unset !important; }
  .supporttiketi .globalcp-card-header { box-shadow: var(--card-box-shadow); }
  .supporttiketi .globalcp-table-responsive { overflow-x: inherit; }

  /* Slika manja i fiksne visine */
  .globalcp-card-body .globalcp-d-sm-flex a img {
    height: 65px !important;
    width: auto;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
  }

  /* Tekst desno zauzima preostali prostor */
  .globalcp-card-body .globalcp-d-sm-flex > div.globalcp-flex-fill {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertikalno centriraj naslov i uvodni tekst */
    overflow: hidden;
  }

  /* Naslov */
  .globalcp-card-body .globalcp-d-sm-flex > div.globalcp-flex-fill > a.globalcp-text-body.globalcp-fw-semibold {
    margin-bottom: 4px;
    font-size: 0.75rem;
    line-height: 1.2;
    text-overflow: ellipsis;
  }

  /* Uvodni tekst */
  .globalcp-card-body .globalcp-d-sm-flex > div.globalcp-flex-fill > span.globalcp-text-muted {
    font-size: 0.65rem;
    line-height: 1.3;
    color: #666;
    text-overflow: ellipsis;
  }
}


/* INCIDENTI */

@media (max-width: 992px) {
  /* Ciljamo samo tabele unutar .listaincidenata */
  .listaincidenata .globalcp-table-responsive .globalcp-table tbody {
    display: block !important;
    width: 100% !important;
  }
  
    .listaincidenata { box-shadow: none; background-color: unset !important; }
  .listaincidenata .globalcp-card { box-shadow: none; background-color: unset !important; }
  .listaincidenata .globalcp-card-header { box-shadow: var(--card-box-shadow); }
  .listaincidenata .globalcp-table-responsive { overflow-x: inherit; }
  
  .globalcp-me-3 { margin-right: 10px !important; }

  .listaincidenata .globalcp-table-responsive .globalcp-table tr {
    display: flex !important;
    flex-wrap: wrap !important;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 0;
    margin-bottom: 10px;
    box-shadow: var(--card-box-shadow);
  }

  .listaincidenata .globalcp-table-responsive .globalcp-table tr td {
    align-items: center;
    width: 50% !important;
    padding: 10px 15px !important;
    box-sizing: border-box;
    white-space: normal !important;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }

  .listaincidenata .globalcp-table-responsive .globalcp-table tr td:nth-child(even) {
    border-right: none;
  }

  .listaincidenata .globalcp-table-responsive .globalcp-table tr td.naslovincidenta,
  .listaincidenata .globalcp-table-responsive .globalcp-table tr td.akcijeincidenta {
    border-bottom: none;
  }

  .listaincidenata .globalcp-table-responsive .globalcp-table tr td.vrijemeincidenta,
  .listaincidenata .globalcp-table-responsive .globalcp-table tr td.serverincidenta,
  .listaincidenata .globalcp-table-responsive .globalcp-table tr td.naslovincidenta {
    justify-content: flex-start;
    text-align: left;
  }

  .listaincidenata .globalcp-table-responsive .globalcp-table tr td.akcijeincidenta {
    justify-content: flex-end;
    text-align: right;
  }

  .listaincidenata .globalcp-table-responsive .globalcp-table tr td.vrijemeincidenta {
    order: 1;
    width: 20% !important;
  }
  .listaincidenata .globalcp-table-responsive .globalcp-table tr td.serverincidenta {
    order: 2;
    width: 80% !important;
  }
  .listaincidenata .globalcp-table-responsive .globalcp-table tr td.naslovincidenta {
    order: 3;
    width: 80% !important;
  }
  .listaincidenata .globalcp-table-responsive .globalcp-table tr td.akcijeincidenta {
    order: 4;
    width: 20% !important;
    display: flex;
    align-items: center;
  }
}