.wpcf7-not-valid-tip {
    font-size: 0.75em;
    margin-top: 4px;
    margin-left: 4px;
}

.wpcf7-response-output {
    color: #fff;
    padding: 10px !important;
    margin-top: 0 !important;
    font-size: 0.875em;
}

body#tinymce {
    padding: 10px;
}

/*body, html {*/
/*    background-color: #ffffff;*/
/*}*/

.config-section {
    overflow: hidden;
}

/* Configurator layout on desktop: the page scrolls, not the sidebar. main.css
   caps .step-sidebar at the viewport height with a scrollbar of its own (and an
   open section used to be capped at 500px with yet another one), which on a
   short screen squeezed the sidebar into a small window. Now the sidebar takes
   its natural height and the bike stays put beside it (sticky). #configurator's
   overflow: hidden from main.css would disable sticky, hence the override. */
@media (min-width: 992px) {
    #configurator {
        overflow: visible;
        /* the fixed .config-footer would otherwise cover the last section */
        padding-bottom: calc(var(--config-footer-height) + 1rem);
    }

    #configurator .configurator__preview {
        position: sticky;
        top: 0;
    }

    #configurator .step-sidebar {
        max-height: none;
        overflow: visible;
    }

    /* The fade hinted that the sidebar scrolls on its own - it no longer does. */
    #configurator .step-sidebar__fade {
        display: none;
    }
}

.bike-canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
}

.bike-canvas__layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.summary-preview__canvas .bike-canvas {
    background: #E5E6E1;
}

.woocommerce-account .woocommerce-MyAccount-content {
    width: 100%;
}

.part-option--disabled {
    opacity: 0.45;
    cursor: not-allowed;

    input[type="radio"] { cursor: not-allowed; }
}

/*.part-options .part-option--disabled{
	display: none;
}*/

.part-option__note {
    font-size: 0.75rem;
    color: #b32d2e;
    margin-left: auto;
}

/* Step whose every option was filtered out as incompatible. */
.config-group__empty {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0;
}

/* Account > Your builds / Orders */

.builds-empty {
    margin-bottom: 0;
}

.bike-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 0.875rem;
}

.bike-card__size {
    margin-left: auto;
}

.build-status {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--dbr-secondary, #fcd831);
    font-size: 0.75rem;
    text-transform: uppercase;
}

.builds-notice {
    margin-bottom: 16px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--dbr-gray-200, #e9ecef);
    font-size: 0.875rem;
}

.builds-notice--delete-failed {
    background: var(--dbr-danger-bg-subtle, #f8d7da);
}

/* Trash button sitting above the card's main CTA. */

.bike-card__actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.bike-card__delete {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    border: 0;
    background: none;
    color: var(--dbr-gray-600, #6c757d);
    cursor: pointer;
    transition: color 0.15s ease-in-out;
}

.bike-card__delete:hover,
.bike-card__delete:focus-visible {
    color: #b32d2e;
}

/* Summary - the sidebar card once the deposit is paid (Summary.vue). */

.summary-card--ordered {
    border: 1px solid var(--dbr-success, #198754);
}

.summary-card__lead {
    margin-bottom: 16px;
    font-size: 0.875rem;
}

.order-meta {
    display: block;
    margin-top: 4px;
    color: var(--dbr-gray-600, #6c757d);
    font-size: 0.75rem;
}

/* Note for the shop, written just before paying. The card lays its children out
   with a gap of its own, so this only owns the label/field pair. */

#summary .summary-card__note {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    font-size: 0.875rem;
}

#summary .summary-card__note label span {
    color: var(--dbr-gray-600, #6c757d);
}

#summary .summary-card__note textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-family: inherit;
    resize: vertical;
}

#summary .summary-card__note textarea:focus-visible {
    outline: none;
    border-color: #000;
}

/* Repeated back on the receipt, where it is text rather than a field. */

#summary .summary-card__note-read {
    margin: 0;
    font-size: 0.875rem;
    white-space: pre-wrap;
}

/* A group option (StepSection.vue): one choice that fills several steps at once.
   The head reads like any other part option - the rest only unfolds once the
   group is the answer, so an unselected group is exactly one row. */

#configurator .part-group {
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 1.25rem;
    overflow: hidden;
}

#configurator .part-group--selected {
    border: 2px solid #000;
    background: #D4D6CD;
}

#configurator .part-group__head {
    border: 0;
    border-radius: 0;
    width: 100%;
}

/* The head carries the group's own border, so its checked state must not draw a
   second one inside it. */
#configurator .part-group .part-option:has(input:checked) {
    border: 0;
}

#configurator .part-group__count {
    display: block;
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.55);
}

#configurator .part-group__parts {
    padding: 0 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#configurator .part-group__part {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    padding-top: 0.5rem;
}

#configurator .part-group__part-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.875rem;
}

#configurator .part-group__part-label {
    color: rgba(0, 0, 0, 0.55);
    flex: 0 0 30%;
}

#configurator .part-group__part-name {
    flex: 1;
}

#configurator .part-group__alternatives {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

/* Inside the group the rows are already indented by the card, so they read as a
   list rather than as another set of top-level options. */
#configurator .part-group__alternatives .part-option {
    padding: 8px 12px;
    background: #fff;
    font-size: 0.875rem;
}

/* Configurator stepper - a step that holds a pick swaps its number for the same
   tick the section headers use, and the step being edited keeps a halo so "done"
   and "where I am" stay two different things (both dots are black). */

#configurator .step__check {
    width: 12px;
    height: 12px;
    color: #fff;
}

#configurator .step--active {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
}

/* The section number reads like the stepper dot above it: filled black once the
   step holds a pick, or while it is the one open for editing - outlined the rest
   of the time, so "still to do" is the quiet state instead of the loud one. */

#configurator .config-section__number {
    background: #fff;
    border: 1px solid #000;
    color: #000;
}

#configurator .config-section__number--done,
#configurator .config-section--open .config-section__number {
    background: #000;
    border-color: #000;
    color: #fff;
}

/* Optional step walked past without a pick: greyed out in the stepper and in
   its own section header, so it reads as left out rather than still to do. */

#configurator .step--skipped {
    background: rgba(0, 0, 0, 0.25);
    border-color: transparent;
    color: #fff;
}

#configurator .config-section__number--skipped {
    background: rgba(0, 0, 0, 0.25);
    border-color: transparent;
    color: #fff;
}

/* Part rows read as one line: the maker in regular weight, the part itself in
   bold. The space between them is a non-breaking one printed in the template -
   Vue's compiler drops a whitespace-only text node between two elements, and a
   flex gap here would push the name onto its own line. */

#configurator .part-option__brand {
    font-weight: 400;
    text-transform: uppercase;
}

#configurator .part-option__name {
    font-weight: 700;
}

/* The part's parameters (ACF configurator_specs) on their own line below the
   name, same size and colour as the name, in regular weight. */
#configurator .part-option__specs {
    display: block;
    margin-top: 0.25rem;
    line-height: 100%;
    color: #000;
}

/* "Bez tejto položky" on an optional step - a real choice in the radio group
   (a radio can't be unchecked), but a quieter one than an actual part, and with
   no price column since it costs nothing. */

#configurator .part-option--none .part-option__name {
    color: rgba(0, 0, 0, 0.55);
    font-style: italic;
}

#configurator .part-option--none:has(input:checked) .part-option__name {
    color: #000;
}

/* Frame variant pickers - the frame section renders one per WooCommerce
   attribute the frame is sold in, so beyond size/colour there can be
   attributes whose options are words rather than swatches. */

.variant-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.variant-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 999px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.variant-btn input[type="radio"] {
    display: none;
}

.variant-btn:hover {
    background: rgba(212, 214, 205, 0.5);
}

.variant-btn:has(input:checked) {
    background: #d4d6cd;
    border: 2px solid #000;
}

/* Combination the frame isn't built in (or is out of stock). */

.size-btn.is-unavailable,
.color-btn.is-unavailable,
.variant-btn.is-unavailable {
    opacity: 0.35;
    cursor: not-allowed;
    text-decoration: line-through;
}

.color-btn.is-unavailable {
    text-decoration: none;
}

/* Share modal: the Instagram button is a <button>, since there is no URL to
   send it to - it copies the link instead (see useShareUrl.js). */

#shareModal .share-social__icon {
    padding: 0;
    background: none;
    cursor: pointer;
}

/* Feedback under the e-mail form / the social row. */

#shareModal .share-email__message,
#shareModal .share-social__message {
    margin: 0;
    font-size: 0.875rem;
    line-height: 130%;
}

#shareModal .share-email__message[data-state="error"],
#shareModal .share-social__message[data-state="error"] {
    color: #C0392B;
}

#shareModal .share-email__message[data-state="success"],
#shareModal .share-social__message[data-state="success"] {
    color: #1E7A46;
}

#shareModal .share-email .btn[disabled] {
    opacity: 0.6;
    cursor: wait;
}

/* Info modal lightbox (InfoModal.vue): a geometry table is unreadable at modal
   width, so any picture in the note opens full-screen above the modal. Lives
   here rather than in main.raw.css, which is regenerated from outside the repo. */

#infoModal .modal-body img {
    max-width: 100%;
    height: auto;
    cursor: zoom-in;
}

.info-lightbox {
    position: fixed;
    inset: 0;
    /* Above the Bootstrap modal, which sits at 1055. */
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.85);
    cursor: zoom-out;
}

.info-lightbox img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 0.5rem;
    background: #fff;
}


#infoModal .modal-dialog{

    width: 100%;
    padding: 0px 1rem;
}

/* --- Summary: a package as one block ---------------------------------------
   The parts of one option belong together, so they are bracketed under the
   package's name once instead of every line repeating the same badge. Sections
   without a package keep their items as direct children of .summary-group
   (which is the flex column spacing them), hence `display: contents`. */

#summary .summary-item-list {
    display: contents;
}

#summary .summary-package {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-left: 12px;
    border-left: 2px solid #D4D6CD;
}

#summary .summary-package__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

#summary .summary-package__name {
    background: #D4D6CD;
    border-radius: 999px;
    padding: 2px 10px;
    font-family: Milkface;
    font-size: 14px;
}

#summary .summary-package__total {
    font-size: 14px;
    color: #6B6B6B;
    white-space: nowrap;
}

/* WooCommerce order attribution stamps this element (hidden inputs only) into the register form;
   as a flex item of .auth-form it would still take a gap. Hidden, its inputs are still submitted. */
.auth-form wc-order-attribution-inputs {
    display: none;
}

/* "Delete account" confirmation dialog (woocommerce/myaccount/form-edit-account.php). */
.delete-account {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem 0 0;
}

.delete-account .account-card__text {
    margin-bottom: 0;
}

.delete-account__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

div.woocommerce-order-withdrawal-content {
    max-width: 720px;
    margin: 3rem auto;
    padding: 0 1rem;
}

form.woocommerce-OrderWithdrawalForm {
    background: #fff;
    border-radius: 1rem;
    padding: 3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

form.woocommerce-OrderWithdrawalForm p.form-row,
form.woocommerce-OrderWithdrawalForm fieldset.woocommerce-order-withdrawal-content__radio-field {
    margin: 0;
    padding: 0;
    float: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

form.woocommerce-OrderWithdrawalForm p.woocommerce-form-row--first,
form.woocommerce-OrderWithdrawalForm p.woocommerce-form-row--last {
    width: calc(50% - 0.75rem);
}

form.woocommerce-OrderWithdrawalForm .clear {
    display: none;
}

form.woocommerce-OrderWithdrawalForm .form-row label,
form.woocommerce-OrderWithdrawalForm .woocommerce-order-withdrawal-content__radio-field legend {
    font-family: Gellix;
    font-size: 1rem;
    font-weight: 700;
    line-height: 100%;
    color: #000 !important;
    margin-bottom: 0;
}

form.woocommerce-OrderWithdrawalForm .form-row label .required,
form.woocommerce-OrderWithdrawalForm .woocommerce-order-withdrawal-content__radio-field legend .required {
    color: #b32d2e;
    text-decoration: none;
}

form.woocommerce-OrderWithdrawalForm .form-row label .optional {
    font-weight: 400;
    opacity: 0.6;
}

form.woocommerce-OrderWithdrawalForm .woocommerce-input-wrapper {
    display: block;
}

form.woocommerce-OrderWithdrawalForm input.woocommerce-Input,
form.woocommerce-OrderWithdrawalForm textarea.woocommerce-Input {
    width: 100%;
    border: 1px solid #000 !important;
    border-radius: 999px;
    padding: 0.813rem 1rem !important;
    font-size: 1rem !important;
    line-height: 1.25em !important;
    font-family: Milkface !important;
    background: #fff;
    box-shadow: none;
    outline: none;
    transition: border-color 0.2s ease;
}

form.woocommerce-OrderWithdrawalForm input.woocommerce-Input:focus,
form.woocommerce-OrderWithdrawalForm textarea.woocommerce-Input:focus {
    border-color: #000;
}

form.woocommerce-OrderWithdrawalForm textarea.woocommerce-Input--textarea {
    border-radius: 1rem;
    min-height: 140px;
    resize: none;
}

form.woocommerce-OrderWithdrawalForm fieldset.woocommerce-order-withdrawal-content__radio-field {
    border: none;
    gap: 0.75rem;
}

form.woocommerce-OrderWithdrawalForm .woocommerce-order-withdrawal-content__radio-field legend {
    padding: 0;
    float: none;
    width: auto;
    margin-bottom: 0.5rem;
}

form.woocommerce-OrderWithdrawalForm label.woocommerce-order-withdrawal-content__radio-label {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-family: Milkface;
    font-weight: 400;
    font-size: 1rem;
    cursor: pointer;
}

form.woocommerce-OrderWithdrawalForm input.input-radio {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    border-radius: 50%;
    margin: 0;
    flex-shrink: 0;
    display: grid;
    place-content: center;
    cursor: pointer;
    background: #fff;
}

form.woocommerce-OrderWithdrawalForm input.input-radio::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.15s ease;
    background: #000;
}

form.woocommerce-OrderWithdrawalForm input.input-radio:checked::before {
    transform: scale(1);
}

.woocommerce-order-withdrawal-content__intro {
    font-size: 1.5rem;
    font-weight: bold;
    font-family: Milkface;
}

.woocommerce-order-withdrawal-content__note {
    color: #000;
    font-size: 1rem;
}

.woocommerce-order-withdrawal-content__step--current {
    color: #000;
}

form.woocommerce-OrderWithdrawalForm .woocommerce-order-withdrawal-content__note {
    font-family: "Office Times Round";
    font-size: 0.875rem;
    opacity: 1;
    color: #000;
    width: 100%;
    margin-top: -1rem;
}

form.woocommerce-OrderWithdrawalForm p.woocommerce-order-withdrawal-content__actions {
    margin: 0;
    flex-direction: row;
}

form.woocommerce-OrderWithdrawalForm button.woocommerce-Button {
    border-radius: 40px;
    padding: 11px 16px;
    font-size: 1rem;
    font-family: Milkface;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0.25px;
    background: #000;
    color: #fff;
    cursor: pointer;
    transition: 200ms all ease-in-out;
    border: 2px solid black;
}

form.woocommerce-OrderWithdrawalForm button.woocommerce-Button:hover {
    background: #fff;
    color: #000;
}

div.woocommerce-order-withdrawal-content .woocommerce-order-withdrawal-content__intro {
    font-family: Gellix;
    font-size: 1.3125rem;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: -0.21px;
    color: #000;
}

ol.woocommerce-order-withdrawal-content__steps {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 1rem;
    font-family: Milkface;
    font-size: 1rem;
}

ol.woocommerce-order-withdrawal-content__steps li {
    opacity: 0.5;
}

ol.woocommerce-order-withdrawal-content__steps li[aria-current="step"],
ol.woocommerce-order-withdrawal-content__steps li.is-active {
    opacity: 1;
    font-weight: 700;
}

dl.woocommerce-order-withdrawal-content__review {
    background: #fff;
    border-radius: 1rem;
    padding: 3rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

dl.woocommerce-order-withdrawal-content__review dt {
    font-family: Gellix;
    font-size: 0.875rem;
    font-weight: 400;
    opacity: 0.6;
    margin: 0;
    padding-top: 1.25rem;
}

dl.woocommerce-order-withdrawal-content__review dt:first-child {
    padding-top: 0;
}

dl.woocommerce-order-withdrawal-content__review dd {
    font-family: Gellix;
    font-size: 1.125rem;
    font-weight: 700;
    color: #000;
    margin: 0.25rem 0 0;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

dl.woocommerce-order-withdrawal-content__review dd:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

form.woocommerce-OrderWithdrawalForm button.woocommerce-Button + button.woocommerce-Button,
form.woocommerce-OrderWithdrawalForm p.woocommerce-order-withdrawal-content__actions button + button {
    margin-left: 0.5rem;
}

body.woocommerce-order-withdrawal main {
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body.woocommerce-order-withdrawal div.woocommerce-order-withdrawal-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
}
.woocommerce-order-withdrawal-content a {
    color: #000;
    font-weight: bold;
}

.woocommerce-order-withdrawal-content strong {
    font-size: 1.5rem;
}

@media (max-width: 767.98px) {
    form.woocommerce-OrderWithdrawalForm {
        padding: 2rem;
    }

    form.woocommerce-OrderWithdrawalForm p.woocommerce-form-row--first,
    form.woocommerce-OrderWithdrawalForm p.woocommerce-form-row--last {
        width: 100%;
    }
}

/* Text page (template-text.php) - privacy policy, terms and conditions, ... */
.text-page {
    padding-top: 3rem;
    padding-bottom: 4rem;
}

.text-page .page__title {
    text-align: center;
}

.text-page__content {
    max-width: 760px;
    margin: 0 auto;
    font-family: Milkface;
    font-size: 1rem;
    line-height: 150%;
    color: #000;
}

.text-page__content > :first-child {
    margin-top: 0;
}

.text-page__content > :last-child {
    margin-bottom: 0;
}

.text-page__content h2,
.text-page__content h3,
.text-page__content h4 {
    font-weight: 700;
    line-height: 120%;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.text-page__content h2 {
    font-size: 1.75rem;
}

.text-page__content h3 {
    font-size: 1.375rem;
}

.text-page__content h4 {
    font-size: 1.125rem;
}

.text-page__content p,
.text-page__content ul,
.text-page__content ol,
.text-page__content table,
.text-page__content blockquote {
    margin-bottom: 1.25rem;
}

.text-page__content ul,
.text-page__content ol {
    padding-left: 1.5rem;
}

.text-page__content li + li {
    margin-top: 0.375rem;
}

.text-page__content a {
    color: #000;
    font-weight: 600;
    text-decoration: underline;
}

.text-page__content a:hover {
    text-decoration: none;
}

.text-page__content table {
    width: 100%;
    border-collapse: collapse;
}

.text-page__content th,
.text-page__content td {
    padding: 0.5rem 0.75rem;
    border: 1px solid #000;
    text-align: left;
    vertical-align: top;
}

.text-page__content blockquote {
    padding-left: 1rem;
    border-left: 3px solid #000;
}

#summary-page {
    padding-top: 0;
}

.navbar-nav:not(.nav-right) {
    .btn-icon-alt,
    .btn {
        margin-left: 0.75rem;
    }
}

@media (max-width: 767.98px) {
    .text-page {
        padding-top: 2rem;
        padding-bottom: 3rem;
    }

    .text-page__content h2 {
        font-size: 1.5rem;
    }

    .text-page__content h3 {
        font-size: 1.25rem;
    }

    .text-page__content .wp-block-table {
        overflow-x: auto;
    }
}

.part-option__price{
	margin-left: 0.5rem;
}