/* Design tokens + brand overrides są w src/styles/tokens.css, bundlowane do wwwroot/dist/app.css.
   Fonts: user doda je manualnie w osobnej iteracji — na razie bez @font-face. */

/* ── Cookie consent ────────────────────────────────────────────── */
.doko-btn-consent-primary {
    background-color: #5a4082;
    color: #fff;
    border-color: #5a4082;
}
.doko-btn-consent-primary:hover,
.doko-btn-consent-primary:focus {
    background-color: #4a3472;
    border-color: #4a3472;
    color: #fff;
}


.nav {
    display: none;
    align-items: center;
    gap: 0.25rem;
}

@media (min-width: 768px) {
    .nav {
        display: flex;
    }
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--nav-item);
    border-radius: var(--radius);
    transition: all 0.2s;
    text-decoration: none;
}

.nav-link:hover {
    color: var(--nav-item-hover);
    background-color: var(--accent);
}

.nav-link.active {
    color: var(--primary);
    background-color: var(--primary-light);
}

.nav-link svg {
    width: 1rem;
    height: 1rem;
    color: var(--nav-icon);
}

.ambassador-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 0.25rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, hsl(264, 38%, 42%) 0%, hsl(264, 34%, 38%) 50%, hsl(268, 38%, 42%) 100%);
    border-radius: var(--radius);
    box-shadow: 0 2px 8px rgba(90, 64, 130, 0.3);
    transition: all 0.2s;
    text-decoration: none;
}

.ambassador-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(90, 64, 130, 0.4);
    color: white;
}





/*@import "public/homepage-hero.css";*/





/* =========================================================================== */
/* === TOP NAVIGATION ======================================================== */

#stickyToolbar {
    transform: translateY(-100%);
    transition: transform 180ms ease, box-shadow 180ms ease;
}
#stickyToolbar.is-visible {
    transform: translateY(0);
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
}

/* Helpdesk (i inne layouty bez hero-wbudowanego navbara) — sticky toolbar
   musi być widoczny od razu, nie dopiero po scrollu. Klasa ustawiana z _HelpdeskLayout.cshtml. */
body.nav-sticky-visible #stickyToolbar {
    transform: translateY(0) !important;
    display: block !important;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
}

/* =========================================================================== */
/* === REUSABLE ============================================================== */

.shadow-2 {
    box-shadow: 0 8px 20px rgba(0,0,0,.08) !important;
}

/* =========================================================================== */
/* === UNCLEANED ============================================================= */

.patternBg1 {
    background: url('/marketing/images/bgs/pattern_bg_fullhd.png') no-repeat center center;
}

.patternBg2 {
    background-image: url('/marketing/images/bgs/Seamless_pattern_2_750x500.png');
    background-position: center top;
    background-repeat: repeat;
    min-height: 100vh;
}

.patternBgMountains {
    background-image: url('/marketing/images/bgs/Seamless_pattern_2_750x500.png');
    background-position: center top;
    background-repeat: repeat;
}

.publicSubpage {
    background: url('/marketing/images/bgs/page_header.webp') no-repeat center center;
    background-size: cover;
    padding: 10dvh 0;
    margin-bottom: 2rem;
    filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.2));
}

.pageSection60 {
    min-height: 60dvh;
}

.pageSection100 {
    min-height: 100dvh;
}

.pageSection60, .pageSection100 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sectionBg1 {
    background: url('/marketing/images/bgs/section_bg_1.webp') no-repeat center center;
    background-size: cover;
    padding: 10dvh 0;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.border-primary {
    border-color: #8465b3 !important;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-control:focus {
    box-shadow: none;
    transition: all .1s linear;
    border-color: var(--color-primary) !important;
    box-shadow: inset 0px 0px 0px 1px var(--color-primary) !important;
}

body {
    font-size: 14px;
    background-color: var(--body-bg-color);
}

body:-webkit-full-screen {
    background-color: var(--body-bg-color);
}

body:-moz-full-screen {
    background-color: var(--body-bg-color);
}

body:-ms-fullscreen {
    background-color: var(--body-bg-color);
}

body:fullscreen {
    background-color: var(--body-bg-color);
}

.main {
    /*padding-left: var(--nav-opened-width);*/
}

.warning {
    background-color: rgba(255, 0, 0, .5) !important;
}

.bg-primary-light {
    background-color: rgba(235, 197, 197, 0.6);
}

.bg-secondary-light {
    background-color: rgba(214, 216, 219, 0.6);
}

.bg-success-light {
    background-color: rgba(195, 230, 203, 0.6);
}

.bg-info-light {
    background-color: rgba(190, 229, 235, 0.6);
}

.bg-warning-light {
    background-color: rgba(255, 238, 186, 0.6);
}

.bg-danger-light {
    background-color: rgba(248, 198, 198, 0.6);
}

/* Welcome Message */
.modal-content-welcome-message {
    border-radius: 16px;
}

.welcome-message-header h5 {
    color: white
}

.welcomeMessageProgressBar {
    border: 1px solid #666;
    height: 5px;
    width: 100%;
}

.welcomeMessageProgressBar-Fill {
    animation: fill 5s linear 1;
    height: 100%;
    background-color: #1c2d41;
}

#notification-modal .modal-content {
    min-height: auto;
}

.welcome-message-progress-bar {
    border: 1px solid #666;
    height: 5px;
    width: 100%;
}

.welcome-message-progress-bar-fill {
    animation: fill 5s linear 1;
    height: 100%;
    background-color: #1c2d41;
}

@keyframes fill {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

.modal-content .welcome-message-header {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    background-color: #1c2d41;
}

.welcome-message-header .btn-close {
    filter: invert(1);
}

.modal-footer .btn-welcome-message {
    background-color: #1c2d41;
    border: none;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.modal-footer .btn-welcome-message:hover {
    background-color: #27466f
}

.modal-footer .btn-welcome-message:active {
    background-color: #1c2d41
}

.modal-body, .welcome-message-content {
    overflow-wrap: break-word;
}

.modal-body img {
    max-width: 100%;
    height: auto;
    margin-top: 5px;
    display: block;
}

.modal-body .chip img {
    width:inherit;
    height:inherit;
    border-radius:100%;
    margin:0 var(--mdb-chip-img-margin-right) 0 var(--mdb-chip-img-margin-left)
}

.chip .structure-icon {
    min-width: 32px;
    width:inherit;
    height:inherit;
    border-radius:50%;
    margin:0 var(--mdb-chip-img-margin-right) 0 var(--mdb-chip-img-margin-left);
    background-color: var(--color-primary);
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.chip .structure-icon i{
    color: white;
}

.structure-avatar {
    min-width: 80px;
    border-radius:50%;
    margin:0 var(--mdb-chip-img-margin-right) 0 var(--mdb-chip-img-margin-left);
    background-color: var(--color-primary);
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.structure-avatar i{
    color: white;
}

.divider-home {
    width: 100%;
    border-top: 2px solid var(--color-primary-hover);
}

/* Welcome Message */
.welcome-message-content img {
    width: 100%;
    height: auto;
    display: block;
}

.welcome-message-settings a {
    max-height: 100px;
    padding-left: 0;
    padding-right: 0;
    display: grid;
    margin-top: 3%;
}

.welcome-message-settings a:first-child {
    margin-top: 0;
}

@media (max-width: 700px) {
    .welcome-message-media-query {
        flex-direction: column;
    }

    .welcome-message-media-query div {
        width: 100%;
    }

    .welcome-message-media-query button {
        width: 100%;
    }
}

.welcome-message-settings a:first-child {
    margin-top: 0;
}

/* Header */

.header {
    height: var(--header-height);
    background-color: #2d347d;
}

/* Form icon */

.form-icon {
    height: 48px;
}

/* Cursor */

button, a {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}

.cursor-pointer {
    cursor: pointer;
}

/* Hover effects*/

.hover-bs-border {
    transition: box-shadow 0.3s ease;
}

.hover-bs-border:hover {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--bs-primary);
}

.hover-bs-border.border-purple:hover {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--color-primary-hover);
}

/* custom bg colors */
.bg-nav {
    background-color: var(--nav-bg-color);
}

.bg-nav-selected-menu-item {
    background-color: var(--nav-menu-item-selected-bg-color);
}

/* page title */

.page-title h1 {
    font-size: 28px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.5em;
    padding-bottom: 15px;
    position: relative;
}

.page-title h1:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 5px;
    width: 55px;
    background-color: #2d347d;
}

.page-title h1:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 2px;
    height: 1px;
    width: 95%;
    max-width: 500px;
    background-color: #2d347d;
}

.workbook-index-td-warning {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* datatable page title */

.page-title-datatable h1 {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1em;
    padding-bottom: 15px;
    position: relative;
}

.page-title-datatable h1:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 5px;
    width: 55px;
    background-color: #2d347d;
}

.page-title-datatable h1:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 2px;
    height: 1px;
    width: 95%;
    max-width: 500px;
    background-color: #2d347d;
}

.no-border-return-button {
    border: none !important;
}

.no-border-return-button:hover {
    color: var(--bs-primary) !important;
}

.card.hoverable:hover, a.hoverable:hover {
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.2));
}

.card.hoverable-sm:hover, a.hoverable-sm:hover {
    filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.2));
}

.indent {
    opacity: 50%;
    height: 100%;
    margin-left: 50%;
    border-left: 2px solid;
}

.indent-l-shape {
    opacity: 50%;
    height: calc(50% + 8px);
    margin-left: 50%;
    border-left: 2px solid;
    border-bottom: 2px solid;
    border-bottom-left-radius: var(--mdb-border-radius);
}

.indent-t-shape-part-1 {
    opacity: 50%;
    height: calc(50% + 8px);
    margin-left: 50%;
    border-left: 2px solid;
    border-bottom: 2px solid;
}

.indent-t-shape-part-2 {
    opacity: 50%;
    height: calc(50% - 8px);
    margin-left: 50%;
    border-left: 2px solid;
}

.hierarchy-card {
    max-width: 50% !important;
    margin-bottom: 1% !important;
    overflow: visible !important;
}

.hierarchy-container-group {
    position: relative;
    display: flex;
    column-count: 2;
    flex-wrap: wrap;
    width: 80vw;
}

.hierarchy-container-group::before {
    content: '';
    width: 5.5%;
    height: 100%;
    margin-left: 3%;
    border-left: 1px dotted black;
    position: absolute;
}

.hierarchy-card-container {
    position: relative !important;
    display: flex;
    width: 100vw;
}

.hierarchy-card-container::before {
    content: '';
    width: 5.5%;
    min-height: 50px;
    height: 75%;
    margin-right: 0.5%;
    margin-left: 3%;
    border-bottom: 1px dotted black;
}

.hierarchy-card .dropdown-menu {
    z-index: 3000 !important;
}

.hierarchy-card-container::before {
    z-index: 0;
}

.switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 17px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 13px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(13px);
    -ms-transform: translateX(13px);
    transform: translateX(13px);
}

.slider.round {
    border-radius: 16px;
}

.slider.round:before {
    border-radius: 50%;
}

details.accordion-item:not([open]) > .accordion-button {
    background-color: var(--bs-accordion-bg);
}

details.accordion-item:not([open]) > .accordion-button::after {
    background-image: var(--bs-accordion-btn-active-icon);
    transform: unset;
}

details.accordion-item[open] > .accordion-button::after {
    background-image: var(--bs-accordion-btn-icon);
    transform: var(--bs-accordion-btn-icon-transform);
}

.accordion-notes-item {
    box-shadow: none !important;
    border: none !important;
}

.accordion-notes {
    background-color: unset !important;
    box-shadow: none !important;
    border: none !important;
    padding: 2px;
}

.accordion-notes-header {
    font-size: 0.9rem !important;
    width: 100% !important;
}

.accordion-notes-icons > i {
    display: none;
}

.accordion-notes:hover .accordion-notes-icons > i {
    display: inline-block;
}

.accordion-notes-icons:hover i {
    cursor: pointer;
}

.onHover {
    filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.2));
}

.onHover:hover {
    transition: all .2s linear;
    filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.1));
}

/* Notification */

.notification {
    padding: 0 10px;
}

.notification.notification-success {
    border-left: solid 3px var(--bs-success);
}

.notification.notification-primary {
    border-left: solid 3px var(--bs-primary);
}

.notification.notification-danger {
    border-left: solid 3px var(--bs-danger);
}

/* purple */

.text-purple {
    color: var(--color-primary-hover);
}

.text-light-purple {
    color: var(--color-primary);
}

.text-capybara {
    color: var(--color-capybara);
}

.bg-purple {
    color: white !important;
    background-color: var(--color-primary) !important;
}

.border-purple {
    border-color: var(--color-primary), 1 !important;
}

.storage-item-icons {
    font-size: 30px;
}

.storage-item-icons.storage-folder {
    color: #ffd767;
}


.btn-primary {
    --mdb-btn-bg: var(--color-primary);
    --mdb-btn-color: #fff;
    --mdb-btn-box-shadow: 0 4px 9px -4px var(--color-primary);
    --mdb-btn-hover-bg: var(--color-primary-hover);
    --mdb-btn-hover-color: #fff;
    --mdb-btn-focus-bg: var(--color-primary-hover);
    --mdb-btn-focus-color: #fff;
    --mdb-btn-active-bg: var(--color-primary-hover);
    --mdb-btn-active-color: #fff;
    --mdb-btn-box-shadow-state: 0 8px 9px -4px rgba(109, 57, 187, 0.3), 0 4px 18px 0 rgba(117, 56, 192, 0.2);
}

.btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.btn-primary,
.btn-primary span,
.btn-primary i {
    color: var(--color-light) !important;
}

.btn-outline-primary {
    --mdb-btn-bg: transparent;
    --mdb-btn-color: var(--color-primary);
    --mdb-btn-hover-bg: var(--color-purple-subtle);
    --mdb-btn-hover-color: var(--color-primary-hover);
    --mdb-btn-focus-bg: var(--color-purple-subtle);
    --mdb-btn-focus-color: var(--color-primary-hover);
    --mdb-btn-active-bg: var(--color-purple-subtle);
    --mdb-btn-active-color: var(--color-primary-hover);
    --mdb-btn-outline-border-color: var(--color-primary);
    --mdb-btn-outline-focus-border-color: var(--color-purple-emphasis);
    --mdb-btn-outline-hover-border-color: var(--color-purple-emphasis);
    border-color: var(--color-primary);
}

.btn-outline-primary-success {
    --mdb-btn-bg: transparent;
    --mdb-btn-color: var(--color-primary);
    --mdb-btn-hover-bg: color-mix(in srgb, var(--mdb-success), white 15%);
    --mdb-btn-hover-color: white !important;
    --mdb-btn-focus-bg: var(--color-purple-subtle);
    --mdb-btn-focus-color: var(--color-primary-hover);
    --mdb-btn-active-bg: var(--color-purple-subtle);
    --mdb-btn-active-color: var(--color-primary-hover);
    --mdb-btn-border-color: var(--color-primary);
    --mdb-btn-focus-border-color: var(--mdb-success);
    --mdb-btn-hover-border-color: var(--mdb-success);
    border-color: var(--color-primary);
}

.btn-outline-primary-danger {
    --mdb-btn-bg: var(--color-light);
    --mdb-btn-color: var(--color-primary);
    --mdb-btn-hover-bg: var(--mdb-danger);
    --mdb-btn-hover-color: white;
    --mdb-btn-focus-bg: var(--color-purple-subtle);
    --mdb-btn-focus-color: var(--color-primary-hover);
    --mdb-btn-active-bg: var(--color-purple-subtle);
    --mdb-btn-active-color: var(--color-primary-hover);
    --mdb-btn-border-color: var(--color-primary);
    --mdb-btn-focus-border-color: var(--mdb-danger);
    --mdb-btn-hover-border-color: var(--mdb-danger);
    border-color: var(--color-primary);
}

.btn-link {
    --mdb-btn-bg: var(--color-transparent);
    --mdb-btn-color: var(--color-primary);
    --mdb-btn-hover-bg: var(--color-purple-subtle-light);
    --mdb-btn-hover-color: var(--color-primary);
    --mdb-btn-focus-bg: var(--color-purple-subtle);
    --mdb-btn-focus-color: var(--color-primary-hover);
    --mdb-btn-active-bg: var(--color-purple-subtle);
    --mdb-btn-active-color: var(--color-primary-hover);
}

.btn-outline-primary.disabled, .btn-outline-primary:disabled {
    color: #fff;
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    --mdb-nav-pills-link-active-bg: var(--color-purple-subtle);
    --mdb-nav-pills-link-active-color: var(--color-purple-emphasis);
    background-color: var(--mdb-nav-pills-link-active-bg);
    color: var(--mdb-nav-pills-link-active-color);
}

.border-primary {
    --mdb-border-opacity: 1;
    border-color: rgba(var(--color-primary-hover), var(--mdb-border-opacity)) !important;
}

.btn-secondary {
    --mdb-btn-bg: var(--color-secondary);
    --mdb-btn-color: var(--color-primary);
    --mdb-btn-box-shadow: 0 4px 9px -4px #e3ebf7;
    --mdb-btn-hover-bg: #d5cbd9;
    --mdb-btn-hover-color: var(--color-primary);
    --mdb-btn-focus-bg: #d5cbd9;
    --mdb-btn-focus-color: var(--color-primary);
    --mdb-btn-active-bg: #d5cbd9;
    --mdb-btn-active-color: var(--color-primary);
    --mdb-btn-box-shadow-state: transparent;
}

.btn-secondary.disabled, .btn-secondary:disabled {
    color: #fff;
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}


a {
    color: var(--color-primary);
    text-decoration: none;
}

.text-primary {
    color: var(--color-primary) !important;
    text-decoration: none;
}

a:hover {
    color: var(--color-primary-hover);
    text-decoration: none;
}

.badge-primary {
    background-color: var(--color-purple-subtle);
    color: var(--color-purple-emphasis);
}

/* Preview images using MDB input */
.file-upload-preview img {
    object-fit: contain;
    height: 100%;
}

.tooltip ul {
    text-align: left;
    margin: 0;
    padding: 10px;
}

.universal-Addresses-Component-Card {
    margin-bottom: 0.5rem;
    padding: 0.5rem;
}

.universal-Document-Component-Card {
    margin-bottom: 0.5rem;
    padding: 0.5rem;
}

.universal-ExternalPerson-Component-Card {
    height: 275px;
    width: 275px;
    margin-left: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
}

.componentDiv {
    margin-top: 14px;
}

.btn .badge {
    position: absolute;
    top: -1px;
    right: -1px;
}

.border-primary {
    border-color: var(--color-primary) !important;
}

.form-control:focus, .form-control:active {
    transition: all .2s linear;
    border-color: var(--color-primary) !important;
    outline: 0;
    box-shadow: inset 0 0 0 1px var(--color-primary) !important;
}

.form-outline {
    --mdb-form-outline-select-notch-border-color: var(--color-primary) !important;
}

.nav-tabs .nav-link.active {
    color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.subscriptionModuleItemsSum {
    font-weight: normal; !important;
    font-size: 0.75rem;
    color: grey;
}

.subscriptionModuleItemsSumDanger {
    font-weight: normal; !important;
    font-size: 0.75rem;
    color: red;
}

.sticky-top-modules {
    position: sticky;
    top: 70px;
    z-index: 1020;
}

/*Color of thumb */
.range {
    --mdb-range-thumb-background: var(--color-primary-hover) !important;
}

input[type="range"]::-webkit-slider-thumb {
    background-color: var(--color-primary) !important;
}

input[type="range"]:active::-webkit-slider-thumb {
    background-color: var(--color-primary-hover) !important;
    transform: scale(1.2);
    box-shadow: 0 0 8px rgba(85, 26, 93, 0.8) !important;
}

/* For Firefox */
input[type="range"]::-moz-range-thumb {
    background-color: var(--color-primary) !important;
}

input[type="range"]:active::-moz-range-thumb {
    background-color: var(--color-primary-hover) !important;
    transform: scale(1.2);
    box-shadow: 0 0 8px rgba(85, 26, 93, 0.8) !important;
}

.form-outline {
    --mdb-input-focus-label-color: var(--color-primary) !important;
    --mdb-input-focus-border-color: var(--color-primary) !important;
}

.select-wrapper {
    --mdb-form-outline-select-label-color: var(--color-primary) !important;
}

.stepper {
    --mdb-stepper-step-head-bg: var(--color-purple-emphasis) !important;
}

[id^="quill-editor"] .ql-editor {
    min-height: 200px;
}

.daterange-select {
    padding: .26rem .75rem;
    border: 1px solid #ccc; 
    width: 100%;
    min-height: auto;
    border-radius: var(--mdb-border-radius); 
    font-size: 1rem; 
    cursor: pointer;
}

.badge-wrap {
    white-space: normal !important;
    overflow-wrap: anywhere;
}

.hover\:bg-purple-subtle:hover {
    transition: background-color .2s linear;
    background-color: var(--color-purple-subtle-light);
    border-radius: var(--mdb-border-radius);
}
@import "/marketing/css/common/settings/settings.css";

.hero-heading {
    font-size: 4rem;
    line-height: 1.2;
}

.hero-text {
    font-size: 1.3rem;
    line-height: 1.2;
    max-width: 500px;
}

.hero-button {
    font-size: 1.05rem;
    padding: 0.7rem 5rem;
}

.hero-images {
    position: relative;
    width: 100%;
    max-width: 700px;
    margin-left: auto;
}

.hero-images img.hero-bg {
    position: absolute;
    top: -25%;
    left: 40%;
    width: 100%;
    z-index: 1;
    border: 1px solid var(--color-primary);
}

.hero-images img.hero-image {
    position: relative;
    z-index: 2;
    width: 100%;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.hero-images img.bero-avatar {
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 110px;
    z-index: 3;
}

@media (max-width: 1400px) {
    .hero-images {
        margin-top: 4rem;
    }
}

.cascading-right {
    margin-right: -50px;
}
@media (max-width: 991.98px) {
    .cascading-right {
        margin-right: 0;
    }
}

.stepper-active .stepper-head-icon {
    background-color: var(--color-secondary);
    color: var(--color-primary-hover);
}

.stepper-step:last-of-type::after {
    display: none !important;
}

.switch {
    font-size: 17px;
    position: relative;
    display: inline-block;
    width: 3.1em;
    margin-right: 1em;
    height: 1.6em;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(182, 182, 182);
    transition: .4s;
    border-radius: 10px;
}

.slider:before {
    position: absolute;
    content: "✖";
    height: 1em;
    width: 1em;
    border-radius: 5px;
    left: 0.3em;
    bottom: 0.3em;
    transform: rotate(270deg);
    background-color: rgb(255, 255, 255);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .5s;
}

.switch input:checked + .slider:before {
    content: "✔";
}

.switch input:checked + .slider {
    background-color: var(--color-primary);
}

.switch input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

.switch input:checked + .slider:before {
    transform: translateX(1.5em);
}
.switch, .form-check-label {
    vertical-align: middle;
}

.was-validated .form-control:valid
{
    border-color: var(--color-primary) !important;
}

.subscription-card {
    background: #fff;
    border-radius: 12px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 1rem;
}

.btn-check:checked + .btn {
    background-color: var(--color-secondary);
    border-color:var(--color-secondary);
    color: var(--color-light) !important;
}

.btn-check:checked + .btn .text-muted,
.btn-check:checked + .btn .subscriptionDuration {
    color: var(--color-primary-hover) !important;
}

.subscription-option label.btn {
    border-radius: 10px;
    padding: 0.5rem;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    border-width: 2px;
    max-height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.btn-check:checked + .btn .text-muted {
    color: rgba(255, 255, 255, 0.7) !important; 
}

.subscriptionDuration {
    font-weight: 600;
    font-size: 1rem;
}

.stepper-content {
    min-height: 550px;
    height: auto !important;
    overflow: visible !important;
}

.validation-summary-errors ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.validation-summary-errors li {
    position: relative;
    padding-left: 1.7em;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    font-size: 1rem;
}

.validation-summary-errors li::before {
    content: "✖";
    color: #e74c3c;
    font-size: 1rem;
    position: absolute;
    left: 0;
    top: 0.06em;
    width: 1.4em;
    text-align: center;
}
#index-cards-container {
    --emp-card-w: 1000px; 
}
#index-cards-container .card {
        width: var(--emp-card-w);
        max-width: 100%;
}

#navbarMegaMenuDropdown + .dropdown-menu {
    z-index: 5001 !important;
}

.color-option.active {
    outline: 2px solid var(--color-primary);
}

/* ========== COOKIE CONSENTS ========== */

.app-btn-consent-primary { background-color: #5a4082; color: #fff; border-color: #5a4082; }
.app-btn-consent-primary:hover { background-color: #4a3472; border-color: #4a3472; }
/* ========== ERROR PAGES ========== */

.error-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.error-code {
    font-size: 6rem;
    font-weight: 800;
    color: rgba(95, 73, 142, 0.15);
    line-height: 1;
}

.error-title {
    font-weight: 700;
    color: #1a1a2e;
}

.error-message {
    max-width: 460px;
    margin: 0 auto;
}


/* ========== Brand ========== */
.doko-brand-logo {
    display: block;
    height: 32px;
}

/* ========== HeaderSimple ========== */
	/* ═══════════════════════════════════════════════════════════
       MINI HERO — Dokobero subpages (mountain variant)
       ═══════════════════════════════════════════════════════════ */

	/* ── Hero section ── */
	.doko-hero {
		position: relative;
		isolation: isolate;
		background: linear-gradient(160deg, #3d2a63 0%, #5f498e 40%, #7b5fbf 100%);
		padding: 0;
	}

	/* Navbar inside hero — wrapper klasa PLUS container muszą być wyżej niż hero-content,
	   bo .doko-hero > .container ustawia wszystkim z-index:1 i sibling content
	   (późniejszy DOM) łapie kliki ze pop-out dropdownu. */
	.doko-hero > .container:has(> .doko-hero-nav) {
		z-index: 10;
	}

	.doko-hero-nav {
		position: relative;
		z-index: 100;
		padding: 20px 0;
	}

	.doko-hero-nav .navbar {
		padding: 10px 16px;
		border-radius: 14px;
		background: rgba(255,255,255,.92) !important;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		box-shadow: 0 2px 12px rgba(0,0,0,.06);
	}

	/* Background mountain image — clipped to hero bounds */
	.doko-hero-bg {
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		background: url('/marketing/images/subpage-hero-bg.webp') center bottom / cover no-repeat;
		opacity: .2;
		overflow: hidden;
	}

	/* Bottom fade — blends into page white */
	.doko-hero-bottom-fade {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 180px;
		z-index: 2;
		pointer-events: none;
		background: linear-gradient(to bottom,
		transparent 0%,
		rgba(61,42,99,.08) 25%,
		rgba(61,42,99,.35) 50%,
		rgba(61,42,99,.75) 75%,
		rgb(61,42,99) 100%);
	}

	/* Subtle radial glow */
	.doko-hero::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		background:
			radial-gradient(ellipse at 70% 30%, rgba(255,255,255,.08) 0%, transparent 60%),
			radial-gradient(ellipse at 15% 80%, rgba(123,95,191,.15) 0%, transparent 45%);
	}

	/* Content above decorations */
	.doko-hero > .container { position: relative; z-index: 1; }
	.doko-hero-bg { z-index: 0; }
	.doko-hero-bottom-fade { z-index: 2; }

	/* ── Content ── */
	.doko-hero-content {
		padding: 56px 0 160px;
		max-width: 640px;
	}

	/* Entrance animations */
	.doko-hero-badge,
	.doko-hero h1,
	.doko-hero-desc,
	.doko-hero-actions {
		opacity: 0;
		transform: translateY(16px);
		animation: doko-hero-enter .5s ease-out forwards;
	}

	.doko-hero h1        { animation-delay: .08s; }
	.doko-hero-desc       { animation-delay: .16s; }
	.doko-hero-actions    { animation-delay: .24s; }

	@keyframes doko-hero-enter {
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.doko-hero-badge,
		.doko-hero h1,
		.doko-hero-desc,
		.doko-hero-actions {
			animation: none;
			opacity: 1;
			transform: none;
		}
	}

	/* Badge */
	.doko-hero-badge {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 5px 14px;
		border-radius: 100px;
		background: rgba(255,255,255,.12);
		border: 1px solid rgba(255,255,255,.18);
		color: rgba(255,255,255,.9);
		font-size: .75rem;
		font-weight: 600;
		letter-spacing: .04em;
		margin-bottom: 16px;
		backdrop-filter: blur(4px);
	}

	.doko-hero-badge i { font-size: .68rem; }

	/* Title */
	.doko-hero h1 {
		font-size: clamp(1.6rem, 4vw, 2.4rem);
		font-weight: 800;
		color: #fff;
		letter-spacing: -.02em;
		line-height: 1.2;
		margin-bottom: 14px;
	}

	/* Description */
	.doko-hero-desc {
		font-size: clamp(.9rem, 1.5vw, 1.05rem);
		color: rgba(255,255,255,.78);
		line-height: 1.6;
		max-width: 520px;
		margin-bottom: 24px;
	}

	/* Actions */
	.doko-hero-actions {
		display: flex;
		gap: 10px;
		flex-wrap: wrap;
	}

	.doko-hero-actions .btn-hero-primary {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 10px 22px;
		border-radius: 10px;
		background: #fff;
		color: #5f498e;
		font-weight: 700;
		font-size: .88rem;
		text-decoration: none;
		border: none;
		transition: transform .12s, box-shadow .15s;
	}

	.doko-hero-actions .btn-hero-primary:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 20px rgba(0,0,0,.15);
	}

	.doko-hero-actions .btn-hero-ghost {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 10px 22px;
		border-radius: 10px;
		background: transparent;
		color: #fff;
		font-weight: 600;
		font-size: .88rem;
		text-decoration: none;
		border: 1.5px solid rgba(255,255,255,.3);
		transition: background .12s, border-color .15s;
	}

	.doko-hero-actions .btn-hero-ghost:hover {
		background: rgba(255,255,255,.1);
		border-color: rgba(255,255,255,.5);
		color: #fff;
	}

	/* ── Responsive ── */
	@media (max-width: 991.98px) {
		.doko-hero-content { padding: 44px 0 140px; }
		.doko-hero-bottom-fade { height: 140px; }
	}

	@media (max-width: 575.98px) {
		.doko-hero-content { padding: 32px 0 120px; }
		.doko-hero-bottom-fade { height: 100px; }
	}

/* ========== HeaderPublicMenu ========== */
    .doko-nav-link {
        font-size: .88rem;
        font-weight: 600;
        color: var(--dk-text, #1a1a2e) !important;
        padding: 8px 14px !important;
        border-radius: 8px;
        transition: background .12s, color .12s;
    }

    .doko-nav-link:hover,
    .doko-nav-link:focus {
        background: rgba(95,73,142,.06);
        color: var(--dk-purple, #5f498e) !important;
    }

    .doko-btn-primary {
        background: var(--dk-purple, #5f498e) !important;
        color: #fff !important;
        border: none;
        border-radius: 8px;
        font-weight: 600;
        font-size: .82rem;
        padding: 8px 18px;
        transition: box-shadow .15s, transform .12s;
    }

    .doko-btn-primary:hover {
        box-shadow: 0 4px 14px rgba(95,73,142,.3);
        transform: translateY(-1px);
        color: #fff !important;
    }

    .doko-btn-outline {
        background: transparent !important;
        color: var(--dk-purple, #5f498e) !important;
        border: 1.5px solid rgba(95,73,142,.3) !important;
        border-radius: 8px;
        font-weight: 600;
        font-size: .82rem;
        padding: 7px 16px;
        transition: background .12s, border-color .12s;
    }

    .doko-btn-outline:hover {
        background: rgba(95,73,142,.06) !important;
        border-color: rgba(95,73,142,.5) !important;
    }

    @media (max-width: 991.98px) {
        .doko-nav-link { padding: 10px 12px !important; }
    }

/* ========== FooterPublic ========== */
	/* ═══════════════════════════════════════════════════════════
       FOOTER — Dokobero Dark Purple (Bookend with Hero)
       ═══════════════════════════════════════════════════════════ */

	.doko-footer {
		--ft-bg-deep: #2a1f44;
		--ft-bg-mid: #362a54;
		--ft-purple: #8b6fc0;
		--ft-purple-bright: #a78bda;
		--ft-text: rgba(255,255,255,.85);
		--ft-muted: rgba(255,255,255,.5);
		--ft-border: rgba(255,255,255,.1);
		--ft-link-hover-bg: rgba(255,255,255,.08);

		position: relative;
		background: var(--ft-bg-deep);
		color: var(--ft-text);
		overflow: hidden;
	}

	/* ── Gradient fade-in band (like Huel, but purple) ── */
	.doko-footer-fade {
		position: relative;
		height: 280px;
		background: linear-gradient(to bottom, transparent 0%, var(--ft-bg-deep) 100%);
		pointer-events: none;
	}

	/* Optional background image behind the fade — replace src later */
	.doko-footer-fade-bg {
		position: absolute;
		inset: 0;
		background:
			url('/marketing/images/footer-bg.webp') center center / cover no-repeat;
		opacity: .15;
		z-index: 0;
	}
	.doko-footer-fade::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(to bottom, transparent 0%, var(--ft-bg-deep) 100%);
		z-index: 1;
	}

	/* ── Main footer ── */
	.doko-footer-main {
		position: relative;
		z-index: 2;
		padding: 16px 0 64px;
	}

	/* Column titles */
	.doko-footer .ft-title {
		font-size: .7rem;
		font-weight: 700;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--ft-purple);
		margin-bottom: 16px;
	}

	/* Links */
	.doko-footer .ft-link {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 6px 8px;
		margin: 2px -8px;
		border-radius: 8px;
		font-size: .88rem;
		color: var(--ft-text);
		text-decoration: none;
		transition: background .15s, color .15s;
	}

	.doko-footer .ft-link:hover {
		background: var(--ft-link-hover-bg);
		color: #fff;
	}

	/* Ikony Lucide to <svg> po inicie (createIcons() podmienia <i data-lucide="..."> na <svg>).
	   Stylujemy oba tagi + klasa -init, żeby trafić pre- i post-init. */
	.doko-footer .ft-link i,
	.doko-footer .ft-link svg {
		flex-shrink: 0;
		width: 14px;
		height: 14px;
		color: var(--ft-purple);
		opacity: .55;
		stroke-width: 1.5;
		transition: opacity .15s, color .15s;
	}

	.doko-footer .ft-link:hover i,
	.doko-footer .ft-link:hover svg {
		opacity: .9;
		color: var(--ft-purple-bright);
	}

	/* ── Brand column ── */
	.doko-footer .ft-brand {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 32px 28px;
		border-radius: 16px;
		border: 1px solid var(--ft-border);
		background: rgba(255,255,255,.04);
		backdrop-filter: blur(4px);
	}

	.doko-footer .ft-brand-logo { max-width: 200px; }

	.doko-footer .ft-brand-name {
		font-weight: 700;
		color: #fff;
		margin-bottom: 0;
	}

	.doko-footer .ft-brand-tagline {
		font-size: .85rem;
		color: var(--ft-muted);
		margin: 12px 0 16px;
		line-height: 1.5;
	}

	.doko-footer .ft-brand-cta {
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
		justify-content: center;
	}

	.doko-footer .btn-doko {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 8px 18px;
		border-radius: 8px;
		font-size: .82rem;
		font-weight: 600;
		text-decoration: none;
		transition: transform .12s, box-shadow .12s;
	}

	.doko-footer .btn-doko:hover {
		transform: translateY(-1px);
	}

	.doko-footer .btn-doko-primary {
		background: linear-gradient(135deg, #7c5cbf, #5f498e);
		color: #fff;
	}

	.doko-footer .btn-doko-primary:hover {
		box-shadow: 0 4px 20px rgba(124,92,191,.4);
		color: #fff;
	}

	.doko-footer .btn-doko-outline {
		background: transparent;
		border: 1px solid var(--ft-border);
		color: var(--ft-purple-bright);
	}

	.doko-footer .btn-doko-outline:hover {
		background: var(--ft-link-hover-bg);
		border-color: var(--ft-purple);
		color: #fff;
	}

	/* Social icons */
	.doko-footer .ft-social {
		display: flex;
		gap: 8px;
		margin-top: 20px;
	}

	.doko-footer .ft-social a {
		width: 36px;
		height: 36px;
		border-radius: 10px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border: 1px solid var(--ft-border);
		background: rgba(255,255,255,.04);
		color: var(--ft-muted);
		text-decoration: none;
		font-size: .9rem;
		transition: background .15s, color .15s, border-color .15s, transform .15s;
	}

	.doko-footer .ft-social a:hover {
		background: var(--ft-link-hover-bg);
		border-color: var(--ft-purple);
		color: var(--ft-purple-bright);
		transform: translateY(-2px);
	}

	/* Contact mini-card */
	.doko-footer .ft-contact {
		padding: 20px;
		border-radius: 12px;
		background: rgba(139,111,192,.1);
		border: 1px solid rgba(139,111,192,.2);
		margin-top: 20px;
	}

	.doko-footer .ft-contact-title {
		font-size: .85rem;
		font-weight: 700;
		color: var(--ft-purple-bright);
		margin-bottom: 4px;
	}

	.doko-footer .ft-contact-desc {
		font-size: .78rem;
		color: var(--ft-muted);
		margin-bottom: 10px;
	}

	/* ── Bottom bar ── */
	.doko-footer-bottom {
		border-top: 1px solid var(--ft-border);
		padding: 24px 0;
		position: relative;
		z-index: 2;
	}

	.doko-footer-bottom .ft-copyright {
		font-size: .78rem;
		color: var(--ft-muted);
	}

	.doko-footer-bottom .ft-copyright a {
		color: var(--ft-purple-bright);
		text-decoration: none;
		font-weight: 600;
	}

	.doko-footer-bottom .ft-copyright a:hover { color: #fff; }

	.doko-footer-bottom .ft-legal {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 20px;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.doko-footer-bottom .ft-legal a {
		font-size: .78rem;
		color: var(--ft-muted);
		text-decoration: none;
		transition: color .12s;
	}

	.doko-footer-bottom .ft-legal a:hover { color: #fff; }

	.doko-footer-bottom .ft-version {
		font-size: .72rem;
		color: rgba(255,255,255,.2);
	}

	/* ── Responsive ── */
	@media (max-width: 991.98px) {
		.doko-footer-fade { height: 200px; }
		.doko-footer-main { padding-bottom: 48px; }
		.doko-footer .ft-brand { margin-bottom: 28px; }
	}

	@media (max-width: 575.98px) {
		.doko-footer-fade { height: 140px; }
		.doko-footer-main { padding-bottom: 36px; }
		.doko-footer-bottom { text-align: center; }
		.doko-footer-bottom .ft-legal { justify-content: center; }
	}

/* Footer brand logo (inline -> class) */
.ft-brand-logo {
    height: 40px;
    border-radius: 20%;
}

/* ========== GoToOffer ========== */
    .gto-section {
        padding: 72px 0 80px;
        /* background: linear-gradient(to bottom, #f8f8fa 0%, #e8e0f4 100%); */
        background: linear-gradient(to bottom, #ffffff 0%, #e8e0f4 100%);
    }

    .gto-card {
        background: linear-gradient(135deg, #3d2a63 0%, #5f498e 50%, #7b5fbf 100%);
        border-radius: 20px;
        padding: 48px 40px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 12px 48px rgba(42,31,68,.25);
    }

    .gto-card::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: .04;
        background-image: radial-gradient(circle, #fff 1px, transparent 1px);
        background-size: 28px 28px;
    }

    .gto-card > * { position: relative; z-index: 1; }

    .gto-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: rgba(255,255,255,.85);
        background: rgba(255,255,255,.12);
        border: 1px solid rgba(255,255,255,.18);
        padding: 4px 14px;
        border-radius: 100px;
        margin-bottom: 16px;
    }

    .gto-title {
        font-size: clamp(1.4rem, 3vw, 1.9rem);
        font-weight: 800;
        color: #fff;
        letter-spacing: -.02em;
        margin-bottom: 12px;
    }

    .gto-desc {
        font-size: .95rem;
        color: rgba(255,255,255,.72);
        line-height: 1.6;
        max-width: 460px;
        margin-bottom: 24px;
    }

    .gto-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 24px;
        border-radius: 10px;
        font-weight: 700;
        font-size: .88rem;
        text-decoration: none;
        transition: transform .12s, box-shadow .15s;
    }

    .gto-btn--primary {
        background: #fff;
        color: #5f498e;
    }

    .gto-btn--primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0,0,0,.15);
        color: #5f498e;
    }

    .gto-btn--outline {
        background: transparent;
        color: #fff;
        border: 1.5px solid rgba(255,255,255,.3);
    }

    .gto-btn--outline:hover {
        background: rgba(255,255,255,.1);
        border-color: rgba(255,255,255,.5);
        color: #fff;
    }

    @media (max-width: 767.98px) {
        .gto-section { padding: 48px 0 56px; }
        .gto-card { padding: 32px 24px; }
    }

/* ========== Layout defaults ========== */

.defaultSection {
    padding: 13dvh 0;
}

@media (max-width: 767.98px) {
    .defaultSection {
        padding: 45px 30px !important;
    }
}

.fa-25 {
    width: 25px;
    text-align: center;
}

#homepage-hero-nav .dropdown-menu,
#stickyToolbar .dropdown-menu {
    z-index: 1060;
}

/* ========== Modal — stan .show (dograny) ========== */
/* app.css (Bootstrap) nie ustawia opacity dla samego .modal.show (a element bywa wygaszany przez
   klasę .fade). Bez tego okno modala potrafi zostać na opacity:0 (niewidoczne). Dokładamy standardowy
   stan Bootstrapa tutaj (site.css ładuje się po app.css). Backdrop dublujemy jako zabezpieczenie.
   Dotyczy bramki zgody (#cookieBanner) i modala ustawień cookies (#cookieModal). */
.modal.show {
    opacity: 1;
}
.modal-backdrop.show {
    opacity: .5;
}

/* ========== Cookie consent gate ========== */
/* Bramka zgody renderuje się jako blokujący modal Bootstrap (#cookieBanner.modal.cookie-gate)
   — patrz src/components/CookieBanner.astro. Backdrop i wyszarzenie tła daje Bootstrap. */

.cookie-gate .modal-header {
    border-bottom: 0;
    padding-bottom: 0;
}

.cookie-gate .modal-footer {
    border-top: 0;
}

/* ========== Utility ========== */

.sticky-spacer {
    display: none;
    height: 0;
}

.pixel-noscript {
    display: none;
}

.sticky-toolbar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1035;
    border-bottom: 2px solid rgba(90, 64, 130, .12);
}


/* ══════════════════════════════════════════════════════════════════════
   Floating action buttons (FAB) — cały portal.
   Stos przyklejony do prawego dolnego rogu:
     - "?" FAB (góra): Bootstrap dropdown z szybkimi linkami
     - Back-to-top FAB (dół): pojawia się po >500px scroll (init w src/main.js)
   ══════════════════════════════════════════════════════════════════════ */
.doko-fab-stack {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: var(--doko-z-fixed);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    pointer-events: none; /* dzieci nadpisują — nie blokujemy tła */
}

.doko-fab-stack > * {
    pointer-events: auto;
}

.doko-fab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 0;
    background: var(--doko-primary);
    color: #fff;
    box-shadow: var(--doko-shadow-primary);
    cursor: pointer;
    transition:
        transform var(--doko-transition-base),
        opacity var(--doko-transition-base),
        background-color var(--doko-transition-base);
}

.doko-fab-btn:hover,
.doko-fab-btn:focus-visible {
    background: var(--doko-primary-hover);
    transform: translateY(-2px);
    outline: 0;
}

.doko-fab-btn i[data-lucide] {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2.25;
}

/* Back-to-top: ukryty dopóki window.scrollY < 500px (kontroluje src/main.js) */
.doko-fab-btn--top {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
}

.doko-fab-btn--top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* "?" help menu — Bootstrap dropdown. Menu pozycjonuje się nad przyciskiem (dropup). */
.doko-fab-menu {
    min-width: 240px;
    padding: 0.5rem;
    border: 1px solid var(--doko-border);
    border-radius: var(--doko-radius-md);
    box-shadow: var(--doko-shadow-lg);
    margin-bottom: 0.5rem;
}

.doko-fab-menu-title {
    font-size: 0.7rem;
    font-weight: var(--doko-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--doko-ink-soft);
    padding: 0.375rem 0.75rem 0.5rem;
}

.doko-fab-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--doko-radius-sm);
    font-size: 0.9rem;
    color: var(--doko-ink);
}

.doko-fab-menu .dropdown-item:hover,
.doko-fab-menu .dropdown-item:focus {
    background: var(--doko-primary-soft);
    color: var(--doko-primary);
}

.doko-fab-menu .dropdown-item i[data-lucide] {
    width: 1rem;
    height: 1rem;
    color: var(--doko-primary);
    flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════════════════
   Featured partner card — wspólny komponent dla /partners (pierwszy partner)
   i strony głównej (sekcja "Nasi partnerzy").
   ══════════════════════════════════════════════════════════════════════ */
.ptr-featured {
    position: relative;
    background: var(--doko-surface);
    border: 1px solid var(--doko-border);
    border-radius: var(--doko-radius-lg);
    padding: 40px;
    box-shadow: var(--doko-shadow-md);
    overflow: hidden;
    transition: transform var(--doko-transition-base), box-shadow var(--doko-transition-base);
}

/* Kolorowy akcent w prawym górnym rogu — subtelny „shine" */
.ptr-featured::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--doko-primary-soft) 0%, transparent 70%);
    pointer-events: none;
}

.ptr-featured-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--doko-primary);
    color: #fff;
    padding: 6px 14px;
    border-radius: var(--doko-radius-pill);
    font-size: 0.75rem;
    font-weight: var(--doko-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 24px;
    z-index: 1;
}

.ptr-featured-badge i[data-lucide] {
    width: 14px;
    height: 14px;
}

.ptr-featured-body {
    position: relative;
    display: flex;
    align-items: center;
    gap: 40px;
    z-index: 1;
}

.ptr-featured-logo {
    flex-shrink: 0;
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--doko-bg-muted);
    border: 1px solid var(--doko-border);
    border-radius: var(--doko-radius-md);
    padding: 20px;
}

.ptr-featured-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ptr-featured-info {
    flex: 1;
    min-width: 0;
}

.ptr-featured-name {
    font-size: clamp(1.4rem, 2.5vw, 1.75rem);
    font-weight: var(--doko-weight-bold);
    color: var(--doko-ink);
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

.ptr-featured-location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--doko-ink-muted);
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.ptr-featured-location i[data-lucide] {
    width: 14px;
    height: 14px;
    color: var(--doko-primary);
}

.ptr-featured-desc {
    color: var(--doko-ink-muted);
    line-height: 1.65;
    margin-bottom: 20px;
    max-width: 56ch;
}

.ptr-featured-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.ptr-featured-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-weight: var(--doko-weight-semibold);
}

.ptr-featured-actions .btn i[data-lucide] {
    width: 18px;
    height: 18px;
}

/* Responsive */
@media (max-width: 767.98px) {
    .ptr-featured {
        padding: 28px 24px;
    }
    .ptr-featured-body {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
    .ptr-featured-logo {
        width: 120px;
        height: 120px;
        padding: 14px;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   Navbar mega-menu — Produkt (1 kolumna z opisami) + Wsparcie (2 kolumny)
   Bazuje na Bootstrap .dropdown-menu (positioning + show/hide),
   nadpisujemy layout/size/styling. Na mobile collapse do inline listy.
   ══════════════════════════════════════════════════════════════════════ */

/* Dropdown trigger — strzałka dropdown-toggle w brand color */
.navbar .nav-item.dropdown .doko-nav-link.dropdown-toggle::after {
    margin-left: 0.4em;
    vertical-align: 0.15em;
    opacity: 0.6;
    transition: transform var(--doko-transition-fast);
}

.navbar .nav-item.dropdown.show .doko-nav-link.dropdown-toggle::after {
    transform: rotate(-180deg);
    opacity: 1;
}

.doko-megamenu {
    padding: 16px;
    border: 1px solid var(--doko-border);
    border-radius: var(--doko-radius-md);
    box-shadow: var(--doko-shadow-lg);
    margin-top: 0.5rem;
}

/* Wersja 1-kolumnowa (Produkt) — z opisami pod tytułami */
.doko-megamenu--single {
    min-width: 380px;
}

/* Wersja 2-kolumnowa (Wsparcie) — grid na child wrapper, żeby nie kolidować
   z Bootstrapowym toggle display:none ↔ display:block na .dropdown-menu */
.doko-megamenu--double {
    min-width: 520px;
}

.doko-megamenu-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.doko-megamenu-col-title {
    font-size: 0.72rem;
    font-weight: var(--doko-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--doko-ink-soft);
    padding: 6px 12px 10px;
    border-bottom: 1px solid var(--doko-border-subtle);
    margin-bottom: 6px;
}

/* Pozycja z ikoną + tytułem + opisem (Produkt) */
.doko-megamenu-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px;
    border-radius: var(--doko-radius-sm);
    color: var(--doko-ink);
    text-decoration: none;
    transition: background-color var(--doko-transition-fast);
}

.doko-megamenu-item:hover,
.doko-megamenu-item:focus-visible {
    background: var(--doko-primary-soft);
    color: var(--doko-ink);
    outline: 0;
}

.doko-megamenu-item-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--doko-primary-soft);
    color: var(--doko-primary);
    border-radius: var(--doko-radius-sm);
    transition: background-color var(--doko-transition-fast), color var(--doko-transition-fast);
}

.doko-megamenu-item:hover .doko-megamenu-item-icon {
    background: var(--doko-primary);
    color: #fff;
}

.doko-megamenu-item-icon i[data-lucide],
.doko-megamenu-item-icon svg {
    width: 20px;
    height: 20px;
}

.doko-megamenu-item-body {
    flex: 1;
    min-width: 0;
}

.doko-megamenu-item-title {
    font-weight: var(--doko-weight-semibold);
    font-size: 0.95rem;
    color: var(--doko-ink);
    margin-bottom: 2px;
}

.doko-megamenu-item-desc {
    font-size: 0.8rem;
    color: var(--doko-ink-muted);
    line-height: 1.4;
}

/* Pozycja prosta (Wsparcie) — ikona + tekst */
.doko-megamenu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--doko-radius-sm);
    color: var(--doko-ink);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: var(--doko-weight-medium);
    transition: background-color var(--doko-transition-fast), color var(--doko-transition-fast);
}

.doko-megamenu-link:hover,
.doko-megamenu-link:focus-visible {
    background: var(--doko-primary-soft);
    color: var(--doko-primary);
    outline: 0;
}

.doko-megamenu-link i[data-lucide],
.doko-megamenu-link svg {
    width: 16px;
    height: 16px;
    color: var(--doko-primary);
    flex-shrink: 0;
}

/* ── CTA "Załóż konto" z subtitlem — wyróżnienie główne ── */
.doko-btn-primary--cta {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
    padding: 6px 18px !important;
}

.doko-btn-primary-main {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: var(--doko-weight-bold);
}

.doko-btn-primary-main i[data-lucide],
.doko-btn-primary-main svg {
    width: 14px;
    height: 14px;
}

.doko-btn-primary-sub {
    font-size: 0.7rem;
    font-weight: var(--doko-weight-regular);
    opacity: 0.85;
    letter-spacing: 0.01em;
}

/* Outline CTA "Zamów wdrożenie" — ikona + tekst */
.doko-btn-outline {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}

.doko-btn-outline i[data-lucide],
.doko-btn-outline svg {
    width: 14px;
    height: 14px;
}


/* ══════════════════════════════════════════════════════════════════════
   Mega-menu — mobile (<992px)
   Bootstrap navbar schowa dropdown do navbar-collapse. Mega-menu ma być
   inline (nie absolute), pełna szerokość, kolumny stacka się pionowo.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .doko-megamenu {
        position: static !important;
        transform: none !important;
        min-width: 0;
        width: 100%;
        margin: 0.25rem 0 0.5rem;
        padding: 8px;
        border: 0;
        box-shadow: none;
        background: var(--doko-primary-soft);
    }

    .doko-megamenu-cols {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .doko-megamenu-item {
        padding: 10px 12px;
    }

    .doko-megamenu-item-icon {
        width: 36px;
        height: 36px;
    }

    .doko-megamenu-item-desc {
        display: none; /* mniej ciasno na mobile */
    }

    /* Prawa strona: CTA buttony na pełną szerokość, w stacku */
    .navbar-nav.ms-auto .nav-item {
        width: 100%;
    }

    .navbar-nav.ms-auto .btn {
        width: 100%;
        justify-content: center;
    }

    .doko-btn-primary--cta {
        padding: 10px 18px !important;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   Submit button — stan „is-submitting" (ustawiany przez ajax-forms.js)
   Zachowuje brand color (nie szarzeje jak Bootstrap default :disabled),
   blokuje pointer-events (dodatkowa ochrona poza disabled),
   pokazuje cursor progress.
   ══════════════════════════════════════════════════════════════════════ */
button.is-submitting,
.btn.is-submitting {
    pointer-events: none;
    cursor: progress;
    opacity: 0.85;
}

/* Spinner w buttonie — rozmiar dopasowany do sm/lg wersji */
button.is-submitting .spinner-border-sm,
.btn.is-submitting .spinner-border-sm {
    vertical-align: -0.15em;
}

/* ==========================================================================
   Widżet konta w menu (zalogowany) — awatar + imię/nazwisko + login,
   ten sam układ co pasek konta w strefie osobistej (.personal-user-*).
   ========================================================================== */
.doko-account-chip {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: 5px 14px 5px 6px;
    border: 1px solid var(--doko-border, rgba(95, 73, 142, .18));
    border-radius: var(--doko-radius-pill, 999px);
    background: var(--doko-surface, #fff);
    text-decoration: none;
    line-height: 1.2;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.doko-account-chip:hover,
.doko-account-chip:focus-visible {
    border-color: var(--doko-primary, #5f498e);
    box-shadow: 0 2px 10px rgba(95, 73, 142, .12);
}

.doko-account-chip-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--doko-primary-soft, #f3eefb);
}

.doko-account-chip-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.doko-account-chip-name {
    font-size: .85rem;
    font-weight: var(--doko-weight-semibold, 600);
    color: var(--doko-ink, #1f1b2e);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.doko-account-chip-login {
    font-size: .72rem;
    color: var(--doko-ink-soft, #6b6880);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

/* ── Pola formularzy ────────────────────────────────────────────────── */
/* Kremowe tło marki (--doko-bg: #fffdf5) wsiąka przez Bootstrapowe
   --bs-body-bg we wszystkie form-control — pola mają być zawsze białe,
   krem zostaje tłem strony. */
.form-control,
.form-select,
textarea.form-control {
    background-color: #fff;
}