/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* Custom CSS for Nexus Theme
 *
 * This file allows you to customize the theme colors and styles for the entire Nexus template.
 *
 * To customize colors:
 * - Replace the var() references with your own hex colors or other CSS values.
 * - For example, instead of --primary: #4b5563; use --primary: #your-color;
 * - You can also override any CSS properties here.
 */

:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50: #fbf9fa;
    --neutral-100: #f4f5f7;
    --neutral-200: #e4e4e7;
    --neutral-300: #d0d5dd;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;

    /* Neutral shades */
    /* define own pallet with brand colors */
    --primary-50: var(--neutral-50);
    --primary-100: var(--neutral-100);
    --primary-200: var(--neutral-200);
    --primary-300: var(--neutral-300);
    --primary-400: var(--neutral-400);
    --primary-500: var(--neutral-500);
    --primary-600: var(--neutral-600);
    --primary-700: var(--neutral-700);
    --primary-800: var(--neutral-800);
    --primary-900: var(--neutral-900);
    --primary-950: var(--neutral-900);

    /* Primary colors */
    /* Use shades from comments if `primary` colors use other colors, then neutral */
    --primary: var(--neutral-900);          /* var(--primary-600) */
    --primary-lifted: var(--neutral-800);   /* var(--primary-700) */
    --primary-accented: var(--neutral-700); /* var(--primary-800) */

    /* Secondary colors */
    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* Success colors */
    --success: #00a63e;
    --success-lifted: #008236;
    --success-accented: #016630;

    /* Info colors */
    --info: #155dfc;
    --info-lifted: #1447e6;
    --info-accented: #193cb8;

    /* Notice colors */
    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    /* Warning colors */
    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    /* Error colors */
    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    /* Grayscale colors */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-900);

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

    /* Additional colors */
    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    /* Additional custom properties */
    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}
/* DCX2: additions layered over the WHMCS 9.1 Nexus templates. */
@font-face{font-family:DCX Jakarta;src:url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');font-style:normal;font-weight:200 800;font-display:swap}
@font-face{font-family:DCX Jakarta;src:url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');font-style:normal;font-weight:200 800;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--dcx-ink:#0f172b;--dcx-muted:#45556c;--dcx-primary:#c8102e;--dcx-hover:#b10d28;--dcx-border:#cad5e2;--dcx-canvas:#f8fafc;--dcx-panel:#fff}
body{background:var(--dcx-canvas);color:var(--dcx-ink);font-family:DCX Jakarta,Arial,sans-serif;font-size:16px;line-height:1.5}
a{color:var(--dcx-primary)}a:hover{color:var(--dcx-hover)}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #ec9eac;outline-offset:2px}
h1,h2,h3,h4,h5{color:var(--dcx-ink);font-weight:700;letter-spacing:0}h1{font-size:2rem;line-height:1.25}h2{font-size:1.5rem;line-height:1.3}
.container{max-width:1280px}#header{background:#fff;border-bottom:1px solid var(--dcx-border)}#header .topbar{background:var(--dcx-ink);color:#fff}#header .topbar a,#header .topbar button{color:inherit}#header .navbar-brand img{max-height:48px;width:auto}#header .navbar{background:#fff}#header .main-navbar-wrapper{border-top:1px solid #edf1f5}#header .navbar-nav .nav-link{font-weight:600;color:var(--dcx-ink)}#header .navbar-nav .nav-link:hover{color:var(--dcx-primary)}
.master-breadcrumb{background:transparent;border:0}.master-breadcrumb .breadcrumb{background:transparent;padding-left:0;color:var(--dcx-muted)}#main-body{padding-top:24px;padding-bottom:40px}.card,.panel{border:1px solid var(--dcx-border);border-radius:20px;background:var(--dcx-panel);box-shadow:none}.card-header{background:transparent;border-bottom:1px solid #e2e8f0;border-radius:20px 20px 0 0!important}.card-body{padding:24px}.sidebar .card{margin-bottom:16px}.sidebar .list-group-item{border-color:#edf1f5}.form-control,.custom-select{border:1px solid #7b8799;border-radius:8px;color:var(--dcx-ink);min-height:44px}.form-control:focus,.custom-select:focus{border-color:var(--dcx-primary);box-shadow:0 0 0 3px rgba(200,16,46,.14)}
.btn-primary{background:var(--dcx-primary);border-color:var(--dcx-primary);color:white}.btn-primary:hover,.btn-primary:focus{background:var(--dcx-hover);border-color:var(--dcx-hover);color:white}.btn:not(.msudp-btn){border-radius:8px}.table td,.table th{border-color:#e2e8f0}.table-responsive{overflow-x:auto}.dcx2-whatsapp-optin{margin:20px 0}.dcx2-whatsapp-optin input{margin-right:8px}#footer{background:#fff;border-top:1px solid #e2e8f0}
.dcx2-invoice .invoice-container{max-width:1120px;margin:32px auto;padding:32px;background:#fff;border:1px solid var(--dcx-border);border-radius:20px}.dcx2-invoice .invoice-header img{max-width:180px;max-height:64px}.dcx2-invoice .invoice-header h3{margin-top:20px}.dcx2-invoice .invoice-col{margin-bottom:20px}.dcx2-invoice .card{margin-bottom:24px}.dcx2-invoice .invoice-status span{border-radius:8px}.dcx2-qr{text-align:center;margin:24px auto}.dcx2-qr img{max-width:220px;width:100%;height:auto}.dcx2-receipt{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:20px 0}.dcx2-invoice .payment-btn-container{overflow:visible}.dcx2-invoice .payment-btn-container.msudp-shell{max-width:none}
@media(max-width:767px){h1{font-size:1.75rem}.card,.panel{border-radius:16px}.card-body{padding:20px}#main-body{padding-top:16px}.dcx2-invoice .invoice-container{margin:0 auto;padding:20px 16px;border:0;border-radius:0}.dcx2-invoice .invoice-header img{max-width:150px}.dcx2-invoice .invoice-col{text-align:left!important}#header .navbar-brand img{max-height:40px}}
@media print{.dcx2-invoice .invoice-container{border:0;margin:0;padding:0;max-width:none}}



.dcx2-invoice .card-header.bg-success,.dcx2-invoice .card-title.bg-info{background:var(--dcx-ink)!important;color:#fff!important}.dcx2-invoice .card-header.bg-success h3{color:#fff}.dcx2-invoice .invoice-status{margin-bottom:16px}.dcx2-invoice .invoice-status span{display:inline-block;font-size:14px;line-height:20px;font-weight:700;padding:8px 12px}.dcx2-invoice .invoice-status .unpaid,.dcx2-invoice .invoice-status .collections,.dcx2-invoice .invoice-status .pending{background:#fff5e8;color:#8a4a00}.dcx2-invoice .invoice-status .paid{background:#e9f6ef;color:#146539}.dcx2-invoice .invoice-status .refunded,.dcx2-invoice .invoice-status .cancelled{background:#f1f5f9;color:#45556c}.dcx2-invoice .invoice-col address{line-height:1.6}.dcx2-invoice .invoice-qr-wrapper{text-align:center}

.dcx2-menu-header{display:none}.dcx2-home-title{margin:0 0 24px}.tiles .row{gap:12px}.tiles .row>div{flex:1 1 170px;max-width:none}.tiles .tile{display:block;min-height:112px;padding:20px;background:#fff;border:1px solid var(--dcx-border);border-radius:16px;text-align:left}.tiles .tile:hover{background:#fff;border-color:#7b8799}.tiles .tile .stat{font-size:28px;line-height:34px;font-weight:700;color:var(--dcx-ink)}.tiles .tile .title{font-size:14px;line-height:22px;text-transform:none;color:var(--dcx-muted)}.tiles .tile .highlight,.tiles .tile>i{display:none}.client-home-cards .card-header{padding:18px 24px}.client-home-cards .card-title{font-size:17px;line-height:24px}.client-home-cards .card-footer:empty{display:none}.client-home-cards .card-body{text-align:left!important}

@media(max-width:1199px){.tiles .row>div{flex-basis:calc(50% - 12px)}}
@media(max-width:374px){.tiles .row>div{flex-basis:100%}}

@media(min-width:1200px){body.dcx2-authenticated #main-body .dcx2-context-sidebar{order:2}body.dcx2-authenticated #main-body .dcx2-main-content{order:1}}

.dcx2-invoice .dcx2-balance{margin:12px 0}.dcx2-invoice .dcx2-balance span{display:block;font-size:13px;color:var(--dcx-muted)}.dcx2-invoice .dcx2-balance strong{display:block;font-size:28px;line-height:1.25;color:var(--dcx-ink)}.dcx2-invoice .dcx2-gateway{margin-top:8px}.dcx2-invoice .dcx2-gateway .custom-select{width:auto;max-width:100%}.dcx2-invoice .dcx2-invoice-metadata{margin-bottom:16px}@media(max-width:767px){.dcx2-invoice .dcx2-gateway .custom-select{width:100%}}

#footer,#footer a,#footer button{color:var(--dcx-muted)}#footer a:hover{color:var(--dcx-primary)}


.dcx2-payment-logos{padding:24px 0;border-top:1px solid #e2e8f0;color:var(--dcx-muted)}.dcx2-payment-brands,.dcx2-payment-partners,.dcx2-payment-legal{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin:0 0 16px}.dcx2-payment-brands img{display:block;width:auto;max-width:60px;max-height:28px;object-fit:contain}.dcx2-payment-partners img{display:block;width:auto;max-width:100px;max-height:30px;object-fit:contain}.dcx2-payment-legal a{font-size:14px}.dcx2-invoice-legal{margin:24px 0;color:var(--dcx-muted);font-size:13px;line-height:1.6}.dcx2-invoice .dcx2-payment-logos{margin:24px 0}


@media(max-width:767px){#tableInvoicesList{display:block;width:100%!important;border:0;background:transparent}#tableInvoicesList thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#tableInvoicesList tbody{display:block;width:100%}#tableInvoicesList tbody tr{display:block;background:#fff;border:1px solid var(--dcx-border);border-radius:16px;margin:0 0 12px;padding:12px 16px}#tableInvoicesList tbody tr td{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;width:100%!important;padding:6px 0;border:0;text-align:right;white-space:normal;overflow-wrap:anywhere}#tableInvoicesList tbody tr td::before{content:attr(data-label);color:var(--dcx-muted);font-size:13px;text-align:left;flex:0 0 44%}#tableInvoicesList tbody tr td.dataTables_empty{display:block;text-align:center}#tableInvoicesList tbody tr td.dataTables_empty::before{content:none}}

@font-face{font-family:"Plus Jakarta Sans";src:url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");font-style:normal;font-weight:200 800;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");font-style:normal;font-weight:200 800;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Jedini novi layout: payments levo, partners desno. */
.dcx-footer__payment-partners-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  width: 100%;
  font-family: "Plus Jakarta Sans", sans-serif;
}

/* Scoped ekvivalenti postojećih DCX globalnih pravila. */
.dcx-footer__payment-partners-row,
.dcx-footer__payment-partners-row *,
.dcx-footer__payment-partners-row *::before,
.dcx-footer__payment-partners-row *::after {
  box-sizing: border-box;
}

.dcx-footer__payment-partners-row img {
  display: block;
  max-width: 100%;
}

.dcx-footer__payment-partners-row a {
  color: inherit;
  text-decoration: none;
}

/* Originalni DCX component CSS. */
.dcx-footer__payments {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.dcx-footer__payments-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dcx-footer__payments-title {
  font-size: 18px;
  font-weight: 700;
  color: #161c2d;
  margin: 0 0 20px;
}

.dcx-footer__card-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.dcx-footer__card-logos img {
  width: 60px;
  height: 44px;
  object-fit: contain;
}

.dcx-footer__digital-pays {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}

.dcx-footer__digital-pay {
  width: 46px;
  height: 28px;
  object-fit: contain;
}

.dcx-footer__digital-pay--google {
  transform: scale(1.6);
}

.dcx-footer__partners {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.dcx-footer__trust {
  margin-bottom: 10px;
}

.dcx-footer__program-badges {
  display: flex;
  align-items: center;
  gap: 20px;
}

.dcx-footer__program-badges a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 44px;
}

.dcx-footer__program-badges img {
  width: 60px;
  height: 44px;
  object-fit: contain;
}

.dcx-footer__partner-label {
  font-size: 12px;
  color: #526174;
  font-weight: 300;
  margin: 0 0 6px;
}

.dcx-footer__partner-logo {
  display: inline-block;
  margin-bottom: 16px;
}

.dcx-footer__partner-logo img.dcx-footer__chipcard {
  width: 150px;
  height: 34px;
  object-fit: contain;
}

.dcx-footer__partner-logo img.dcx-footer__raiffeisen {
  width: 120px;
  height: 30px;
  object-fit: contain;
}

@media (max-width: 1080px) {
  /* Novi zajednički wrapper prati originalni stacked raspored. */
  .dcx-footer__payment-partners-row {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .dcx-footer__payments {
    align-items: center;
  }

  .dcx-footer__partners {
    align-items: center;
    text-align: center;
  }

  .dcx-footer__trust {
    display: flex;
    justify-content: center;
  }

  .dcx-footer__partner-label {
    text-align: center;
  }

  .dcx-footer__partner-logo {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 767px) {
  .dcx-footer__payments-title {
    font-size: 16px;
    margin-bottom: 16px;
  }

  .dcx-footer__card-logos {
    gap: 12px;
  }

  .dcx-footer__card-logos img {
    width: 52px;
    height: 38px;
  }

  .dcx-footer__digital-pay {
    width: 40px;
    height: 24px;
  }
}

/* Responsive partner grouping: security marks above, partners side by side. */
@media (max-width: 1080px) {
  .dcx-footer__partners {
    display: grid;
    width: 100%;
    max-width: 440px;
    margin-bottom: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "trust trust" "chip-label bank-label" "chip-logo bank-logo";
    gap: 6px 16px;
    justify-items: center;
    align-items: end;
  }
  .dcx-footer__trust { grid-area: trust; }
  .dcx-footer__partners > .dcx-footer__partner-label:first-of-type { grid-area: chip-label; }
  .dcx-footer__partners > .dcx-footer__partner-label:last-of-type { grid-area: bank-label; }
  .dcx-footer__partners > .dcx-footer__partner-logo:first-of-type { grid-area: chip-logo; }
  .dcx-footer__partners > .dcx-footer__partner-logo:last-of-type { grid-area: bank-logo; }
  .dcx-footer__partners > .dcx-footer__partner-label { margin: 0; }
  .dcx-footer__partners > .dcx-footer__partner-logo { max-width: 100%; margin: 0; align-self: center; }
}

#footer .dcx2-payment-legal{justify-content:center;text-align:center}

/* Footer legal links: readable text and comfortable touch targets. */
#footer .dcx2-payment-legal { gap: 0 16px; margin: 0; }
#footer .dcx2-payment-legal a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9375rem; line-height: 1.5; font-weight: 400; color: #5c6b7e; text-decoration: underline; text-underline-offset: 3px; }
#footer .copyright { margin-top: 8px; font-size: 0.875rem; line-height: 1.5; color: #526174; }

/* Payment partners share one heading and retain their original logo sizes. */
#footer .dcx-footer__partners { display: flex; flex-direction: column; align-items: flex-end; }
#footer .dcx-footer__partner-group { display: flex; flex-direction: column; align-items: flex-end; }
#footer .dcx-footer__partner-logos { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
#footer .dcx-footer__partner-logos .dcx-footer__partner-logo { display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; }
@media (max-width: 1080px) {
  #footer .dcx-footer__partners, #footer .dcx-footer__partner-group { align-items: center; text-align: center; }
  #footer .dcx-footer__partner-logos { align-items: center; }
}

#footer .dcx2-payment-legal a:hover { color: var(--dcx-primary); }

#footer, #footer .dcx2-payment-logos { border-top: 0; }