/* CSS variables and theme modes */
@font-face {
  font-family: "Italianno-Regular";
  src: url("/fonts/Italianno-Regular.woff2") format("woff2");
  font-display: swap;
}

.italianno-regular {
  font-family: "Italianno-Regular", cursive;
}
@font-face {
  font-family: 'bootstrap-icons';
  src: url('/fonts/bootstrap-icons.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
	font-family: 'EB Garamond';
	src: url('/fonts/eb-garamond-v31-latin-regular.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'EB Garamond';
	src: url('/fonts/eb-garamond-v31-latin-italic.woff2') format('woff2');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

/* Reset + box sizing */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Premenné – svetlý režim (môžeš doplniť podľa projektu) */
:root {
    --color-bg: #fff;
    --color-bg2: #e6e6e6;
    --color-text: #222;
    --color-text2: #e8e2e2;
    --color-primary: #cc1956;
    --color-secondary: #155f11;
    --color-success: #279c2c;
    --color-danger: #cb1b2c;
    --color-danger2: #dc3545;
    --color-danger3: #dc3545;
    --color-gray: #f8f9fa;
    --color-dark: #212529;
    --color-deactivate: #414141;
    --color-hover-bg: #f1f1f1;
    --color-shadow: #cbcbcb;
    --color-linear1: linear-gradient(white, rgb(255, 212, 212));
    --color-border1: #eeeeee;
    --color-border2: #cecece;
    --color-category: #0f6800;
    --color-category-active: #9a000f;
    --color-category-hover: #002a02;
    --color-input-bg: #f2f2f2;
    --color-input-text: #080808;
    --color-input-placeholder: #a5a5a5;
    --color-table-head: #979797;
    --color-table-border: #979797;
    --color-table-hover: #0f6800;
    --color-blue: #0a00ff;

    --card-bg-light: #eaeaea;

    --color-admin-bg: #c1c1c1;
    --color-admin-sidebar-hover: #a8a8a8;


    --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --transition-fast: 0.3s ease;
    --transition-slow: 0.5s ease;

    --gradient-top: #ffffff3f;
    --gradient-mid: #ffffffc9;
    --gradient-bottom: #ffffff;
}
html.dark-mode {
    --color-bg: #121212;
    --color-bg2: #141414;
    --color-text: #dedede;
    --color-primary: #ffa1c1;
    --color-secondary: #cc1956;
    --color-success: #4caf50;
    --color-danger: #dc3545;
    --color-danger2: #ff7d7d;
    --color-danger3: #fcbfbf;
    --color-gray: #1e1e1e;
    --color-dark: #dbdbdb;
    --color-deactivate: #7d7d7d;
    --color-hover-bg: #2a2a2a;
    --color-shadow: #2b2b2b;
    --color-linear1: linear-gradient(#1e1e1e, #1f001f);
    --color-border1: #2a002c;
    --color-border2: #262626;
    --color-category: #acd1a6;
    --color-category-active: #147218;
    --color-category-hover: #147218;
    --color-input-bg: #c3c3c3;
    --color-input-text: #0c0c0c;
    --color-input-placeholder: #b7b7b7;
    --color-table-head: #585858;
    --color-table-border: #414141;
    --color-table-hover: #e4dede;
    --color-blue: #0e3b7e;

    --card-bg-light: #232323;

    --color-admin-bg: #282828;
    --color-admin-sidebar-hover: #393939;

    --gradient-top: #00000033;
    --gradient-mid: #000000d3;
    --gradient-bottom: #000000;
}

html.light-mode {
    --color-bg: #ffffff;
    --color-text: #000000;
    --color-gray: #f4f4f4;
}
.mt-3 { margin-top: 1rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pb-3 { padding-bottom: 1rem !important; }


html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-main);
    scroll-behavior: smooth;
    line-height: 1.6;
}
body {
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.d-none {
  display: none;
}
main {
  flex: 1;
}
a {
    text-decoration: none;
    transition: color var(--transition-fast);
}
p {
    margin-bottom: 1rem;
}
.p-text-info {
    color: var(--color-category);
    font-size: 1.2rem;
}
ul {
    list-style: none;
    padding-left: 0;
}
/*------------Validácie------*/
.validation-error {
    color: #ff0018;
}
.input-validation-error,
.field-validation-error {
    /*border-color: var(--color-danger);*/
}
.field-validation-error {
    color: var(--color-danger);
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}
/*Iniciály v navigácii*/
.nav-user-initials {
    font-size: 0.8rem;
    padding: 0.5em 0.7em;
    border-radius: 50%;
    font-weight: bold;
    margin-right: 1rem;
    font-family: 'EB Garamond', sans-serif; 
    background-color: var(--color-category);
}
.navbar-collapse .nav-user-fullname {
    font-family: 'EB Garamond', sans-serif; 
    font-weight: 200;
    font-size: 1.2rem;
    color: var(--color-category);
}
/*Šablona tlačítka*/
.btn-custom {
    font-size: 1rem;
/*    font-weight: 300;
*/    letter-spacing: 0.03em;
    padding: 6px 10px;
    border: none;
    border-radius: 0;
    transition: all 0.25s ease;
    text-align: center;
    display: inline-block;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none;     /* IE 10+ (môžeš vynechať ak už neriešiš IE) */
    user-select: none; 
    cursor: pointer;
    margin: 5px;
    min-width: 100px;
    color: var(--color-text2);
}
.btn-custom-gray {
    background-color: #696969;
    box-shadow: inset 0 0 5px #4e4e4e, 0 2px 4px rgba(0, 0, 0, 0.3);
    text-shadow: 0px 0px 12px #000000;
}
.btn-custom-gray:hover {
    background-color: #383838;
    box-shadow: inset 0 0 6px #4e4e4e, 0 3px 6px rgba(0, 0, 0, 0.4);
    transform: scale(0.97);
    color: #ffffff;
}
.btn.btn-custom-gray:active {
    background-color: #191919 !important;
    color: #ffffff;
}
.btn-custom-red {
    background-color: #dc143c;
    box-shadow: inset 0 0 6px #ad0a2b, 0 3px 6px rgba(0, 0, 0, 0.4);
}
.btn-custom-red:hover {
    background-color: #ad0a2b;
    box-shadow: inset 0 0 6px #ad0a2b, 0 3px 6px rgba(0, 0, 0, 0.4);
    transform: scale(0.97);
    color: #ffffff;
}
.btn-custom-red:active {
    background-color: #82011b !important;
    color: #ffffff;
}
.btn-custom-green {
    background-color: #1d7e26;
    box-shadow: inset 0 0 6px #176d20, 0 3px 6px rgba(0, 0, 0, 0.4);
}
.btn-custom-green:hover {
    background-color: #145f1c;
    box-shadow: inset 0 0 6px #176d20, 0 3px 6px rgba(0, 0, 0, 0.4);
    transform: scale(0.97);
    color: #ffffff;
}
.btn.btn-custom-green:active {
    background-color: #0a4410 !important;
    color: #ffffff;
} 
.btn-custom-yellow {
    background-color: #b97900;
    box-shadow: inset 0 0 6px #794f00, 0 3px 6px rgba(0, 0, 0, 0.4);
}
.btn-custom-yellow:hover {
    background-color: #795d05;
    box-shadow: inset 0 0 6px #443a1e, 0 3px 6px rgba(0, 0, 0, 0.4);
    transform: scale(0.97);
    color: #ffffff;
}
.btn-custom-blue {
    background-color: #4682b4;
    box-shadow: inset 0 0 6px #4177a4, 0 3px 6px rgba(0, 0, 0, 0.4);
}
.btn-custom-blue:hover {
    background-color: #213e55;
    box-shadow: inset 0 0 6px #213e55, 0 3px 6px rgba(0, 0, 0, 0.4);
    transform: scale(0.97);
    color: #ffffff;
}
.btn-custom-blue:active {
    background-color: #1a3041 !important;
    color: #ffffff;
}
/*Šablóna tlačítka table*/
.btn-custom-table {
    font-size: 0.9rem;
    font-weight: 200;
    letter-spacing: 0.03em;
    padding: 4px 8px;
    border: none;
    border-radius: 0;
    transition: all 0.25s ease;
    text-align: center;
    display: inline-block;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none;     /* IE 10+ (môžeš vynechať ak už neriešiš IE) */
    user-select: none; 
    cursor: pointer;
    transition: all 0.25s ease;
}
.btn-custom-table-gray {
    color: #ffffff;
    background-color: #696969;
    box-shadow: 1px 1px 12px #555555 inset;
}
.btn-custom-table-gray:hover {
    color: #ffffff;
    background-color: #383838;
    box-shadow: 1px 1px 12px #383838 inset;
    transform: scale(0.97);
}
.btn-custom-table-gray:active {
    color: #ffffff !important;
    background-color: #222121 !important;
} 
.btn-custom-table-red {
    color: #ffffff;
    background-color: #dc143c;
    box-shadow: inset 0 0 6px #900d28, 0 3px 6px rgba(0, 0, 0, 0.4);
    transition: all 0.25s ease;
}
.btn-custom-table-red:hover {
    color: #ffffff;
    background-color: #900d28;
    box-shadow: inset 0 0 6px #550817, 0 3px 6px rgba(0, 0, 0, 0.4);
    transform: scale(0.97);
}
.btn-custom-table-red:active {
    color: #ffffff !important;
    background-color: #600618 !important;
}
.btn-custom-table-green {
    color: #ffffff;
    background-color: #1d7e26;
    box-shadow: inset 0 0 6px #114b17, 0 3px 6px rgba(0, 0, 0, 0.4);
    transition: all 0.25s ease;
}
.btn-custom-table-green:hover {
    color: #ffffff;
    background-color: #002a02;
    box-shadow: inset 0 0 6px #002a02, 0 3px 6px rgba(0, 0, 0, 0.4);
    transform: scale(0.97);
}
.btn-custom-table-green:active {
    color: #ffffff !important;
    background-color: #012302 !important;
}
.btn-custom-table-yellow {
    color: #ffffff;
    background-color: #b97900;
    box-shadow: inset 0 0 6px #794f00, 0 3px 6px rgba(0, 0, 0, 0.4);
    transition: all 0.25s ease;
}
.btn-custom-table-yellow:hover {
    color: #ffffff;
    background-color: #795d05;
    box-shadow: inset 0 0 6px #443a1e, 0 3px 6px rgba(0, 0, 0, 0.4);
    transform: scale(0.97);
}
.btn-custom-table-yellow:active {
    color: #ffffff !important;
    background-color: #5c4703 !important;
}
.btn-custom-table-blue {
    color: #ffffff;
    background-color: #4682b4;
    box-shadow: inset 0 0 6px #213e55, 0 3px 6px rgba(0, 0, 0, 0.4);
    transition: all 0.25s ease;
}
.btn-custom-table-blue:hover {
    color: #ffffff;
    background-color: #213e55;
    box-shadow: inset 0 0 6px #213e55, 0 3px 6px rgba(0, 0, 0, 0.4);
    transform: scale(0.97);
}
.btn-custom-table-blue:hover {
    color: #ffffff !important;
    background-color: #172a39 !important;
}
/*----------------Formuláre--Input-----Select------Search------Table */
input, textarea, select {
    font-family: var(--font-main);
    font-size: 1rem;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
}
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(233, 30, 99, 0.2);
}
/*„točiace sa kolečko“ už počas uploadu*/
.spinner {
  width: 32px;
  height: 32px;
  border: 4px solid #ddd;
  border-top-color: #710031;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-top: 10px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/*Zarovnanie spinnera na stred*/
#fullscreenLoader {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
}
/* Fixne zabráni zalomeniu textu v tabuľke */
.table-responsive table td,
.table-responsive table th {
    white-space: nowrap;  
}

 /*Nepovoliť zmenšovanie buniek*/ 
.table-responsive table {
    table-layout: auto;
    min-width: 90%;
    margin-right:0px;
}
.table-responsive td,
.table-responsive th {
      padding-right: 30px;
}
.table-kvety>thead>tr>th {
    background-color: var(--color-table-head);
    color: var(--color-text);
    font-weight: 400;
    width:180px;
    max-width: 220px;
    border: 1px solid black;
}
.table tr td {
    background-color: var(--color-input-bg);
}
.table tr:hover td {
    background-color: #e4dede !important;   
}
.table {
    /*border: 1px solid var(--color-table-border);*/
}
/* Základný vzhľad formulárov */
.form-group {
    margin-bottom: 1rem;
}
.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.25rem;
}
.form-group input,
.form-group textarea {
    background-color: var(--color-input-bg);
}
.form-group input:focus,
.form-group textarea:focus {
    background-color: var(--color-input-bg);
}
select.form-control {

    width: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: var(--color-input-bg);
    color: var(--color-input-text);
}
select.form-control:focus {
    outline: none;
    border-color: #1b7b2400;
    box-shadow: 0 0 0 2px #b1d5b4;    
}
.list-group-item:nth-child(odd) {
    background: var(--color-input-bg);
    border-color: var(--color-table-border);
}
.orders-list-group .list-group-item a{
    color: var(--color-danger); 
}
input.form-control,
select.form-control{
    height: 38px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 1rem;
}
/*---TOAST---*/    
.toast {
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
    color: #fff;
    padding: 1rem;
    margin-top: 0.5rem;
    border-radius: 8px;
    font-size: 1.1rem;
    min-width: 200px;
    max-width: 500px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    /*animation: fadeInOut 3s ease-in-out forwards !important;*/
    pointer-events: auto;
}
.toast-icon {
    width: 2rem;
    height: 2rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
}

.toast.success {
    background-color: #2c2c2c;
    border: 4px solid #0f6800;
    box-shadow: -5px -5px 20px #000000;
}

.toast.error {
    background-color: #2c2c2c;
    border: 4px solid #dc3545;
    box-shadow: -5px -5px 20px #000000;
}
.toast.info  {
    background-color: #2c2c2c; 
    border: 4px solid #17a2b8;
    box-shadow: -5px -5px 20px #000000;
}

.toast-icon.success {
    background-image: url('/icons/check-circle-green.svg');
}
.toast-icon.error {
    background-image: url('/icons/alert-circle-red.svg');
    }
.toast-icon.info {
    background-image: url('/icons/info-blue.svg');
}

.toast-message {
    flex-grow: 1;
    line-height: 1.4;
}

#toast-container {
    position: fixed ;
    bottom: 30px;
    right: 30px;
    z-index: 99999 ;
    pointer-events: none;
}

@keyframes fadeInOut {
    0%   { opacity: 0; transform: translateY(20px); }
    10%  { opacity: 1; transform: translateY(0); }
    90%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-10px); }
}
html.dark-mode .toast {
    background: #222;
    color: #f8f8f8;
}

/*    .platba-payment-icons .available-methods img {
        width: 5rem;
        height: 3rem;
        opacity: 0.8;
        transition: opacity 0.2s ease;
    }
    .available-methods img:hover {
        opacity: 1;
    }*/