/* ===== ONBOARDING LAYOUT ===== */

body {
    font-family: var(--font-sans);
}

.hidden {
    display: none !important;
}

.onboarding-layout {
    display: flex;
    min-height: 100vh;
    background: var(--color-bg);
    padding: 16px;
    box-sizing: border-box;
    align-items: stretch;    
}

.ob-profile-submit {
    width: auto !important;
}

/* ===== SIDEBAR ===== */

.onboarding-sidebar {
    width: 400px;
    flex-shrink: 0;
    border-radius: var(--radius-card-lg);
    background: var(--color-bg-green);
    overflow: hidden;
    position: fixed;
    box-sizing: border-box;
    height: calc(100% - 50px);
}


/* Content sits above both pseudo-element layers */
.onboarding-sidebar-bg {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 32px;
    box-sizing: border-box;
}

.onboarding-sidebar-logo {
    color: var(--color-white);
    font-size: 32px;
    font-family: var(--font-serif);
    font-weight: 400;
    line-height: 40px;
    text-decoration: none;
    display: block;
    margin-bottom: 48px;
}

.onboarding-sidebar-logo:hover,
.onboarding-sidebar-logo:visited {
    color: var(--color-white);
    text-decoration: none;
}

.onboarding-sidebar-content {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.onboarding-sidebar-heading {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.onboarding-sidebar-heading-title {
    color: var(--color-white);
    font-size: 16px;
    font-family: var(--font-sans);
    font-weight: 600;
    line-height: 24px;
}

.onboarding-sidebar-heading-subtitle {
    color: var(--color-white);
    font-size: 14px;
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 22px;
}

/* ===== VERTICAL STEPS NAV ===== */

.onboarding-steps-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.onboarding-step-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.onboarding-step-dot {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.onboarding-step-dot--active {
    background: var(--color-white);
    border: 1.5px solid var(--color-green-900);
}

.onboarding-step-dot--active::after {
    content: '';
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    background: var(--color-green-900);
    display: block;
}

.onboarding-step-dot--inactive {
    background: transparent;
    border: 1.5px solid var(--color-bg-light);
}

.onboarding-step-dot--completed {
    background-color: #576245;
    background-image: url("data:image/svg+xml,%3Csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M5.16613%2013.7748C4.71195%2013.775%204.27638%2013.5944%203.9555%2013.273L0.295374%209.61425C-0.098458%209.22029%20-0.098458%208.58169%200.295374%208.18773C0.689332%207.7939%201.32794%207.7939%201.72189%208.18773L5.16613%2011.632L14.2781%202.51998C14.6721%202.12615%2015.3107%202.12615%2015.7046%202.51998C16.0985%202.91394%2016.0985%203.55255%2015.7046%203.9465L6.37675%2013.273C6.05587%2013.5944%205.6203%2013.775%205.16613%2013.7748Z'%20fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
}

.onboarding-step-label--completed {
    color: white;
}

.onboarding-step-label {
    font-size: 16px;
    font-family: var(--font-sans);
    line-height: 24px;
}

.onboarding-step-label--active {
    color: var(--color-white);
    font-weight: 600;
}

.onboarding-step-label--inactive {
    color: var(--color-green-200);
    font-weight: 400;
}

.onboarding-step-connector-wrap {
    height: 24px;
    display: flex;
    justify-content: center;
    width: 32px;
}

.onboarding-step-connector-line {
    width: 1px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}

    .onboarding-step-connector-line::after {
        content: '';
        width: 1px;
        background: var(--color-bg-light);
        display: block;
        flex: 1;
    }

/* ===== HELP CARD ===== */

.onboarding-help-card {
    background: var(--color-bg-help);
    border-radius: var(--radius-card);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.onboarding-help-title {
    color: var(--color-white);
    font-size: 14px;
    font-family: var(--font-sans);
    font-weight: 600;
    line-height: 22px;
}

.onboarding-help-text {
    color: var(--color-white);
    font-size: 14px;
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 22px;
}

.onboarding-help-btn {
    height: 40px;
    padding: 4px 20px;
    border-radius: var(--radius-btn-sm);
    border: 1px solid var(--color-green-200);
    background: transparent;
    color: var(--color-white);
    font-size: 14px;
    font-family: var(--font-sans);
    font-weight: 500;
    line-height: 22px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
    cursor: default;
}

/* ===== MAIN CONTENT PANEL ===== */

.onboarding-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 400px;
}

.onboarding-content {
    flex: 1;
    margin: 48px 48px 0 48px;    
    box-sizing: border-box;
    width: 1088px;
}

.onboarding-footer {
    flex-shrink: 0;
    padding: 16px 48px;
    background: var(--color-bg);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
}

/* ===== STEP CONTENT STRUCTURE ===== */

.ob-step-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.ob-step-header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ob-step-kicker {
    color: var(--color-text-muted);
    font-size: 14px;
    font-family: var(--font-sans);
    font-weight: 500;
    line-height: 22px;
}

.ob-step-title {
    color: var(--color-text-dark);
    font-size: 32px;
    font-family: var(--font-serif);
    font-weight: 400;
    line-height: 40px;
    margin: 0;
}

.ob-step-description {
    color: var(--color-text-dark);
    font-size: 16px;
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 40px;
}

.ob-back-btn {
    height: 40px;
    padding: 4px 20px;
    border-radius: var(--radius-btn);
    border: 1px solid var(--color-green-900);
    background: transparent;
    color: var(--color-text-dark);
    font-size: 14px;
    font-family: var(--font-sans);
    font-weight: 500;
    line-height: 22px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.ob-back-btn:hover {
    background: var(--color-green-900-a05);
    color: var(--color-text-dark);
    text-decoration: none;
}

@media (min-width: 420px)
{
    .ob-back-btn{
        width: 165px;
        justify-content: center;
    }
}

/* ===== FORM SECTIONS ===== */

.ob-form {
    display: flex;
    flex-direction: column;    
}

.ob-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 48px;
}

.ob-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ob-section-title {
    color: var(--color-text-dark);
    font-size: 16px;
    font-family: var(--font-sans);
    font-weight: 600;
    line-height: 24px;
}

.ob-row {
    
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.ob-col {
    flex: 1;
    min-width: 0;
}

.ob-col-input {
    flex: 1;
    min-width: 0;
    max-width: 300px;
}

.ob-col--postal {
    width: 120px;
    flex: none;
}

.ob-row-inner {
    display: flex;
    flex: 1;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
}

/* ===== CONSENT CHECKBOX ROW ===== */

.ob-consent-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.ob-consent-text {
    color: var(--color-text-dark);
    font-size: 14px;
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 22px;
}

/* ===== TOGGLE SWITCH ===== */

.ob-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ob-toggle-label {
    color: var(--color-text-dark);
    font-size: 16px;
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 24px;
    cursor: pointer;
}

.ob-toggle {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.ob-toggle input[type="checkbox"] {
    width: 48px;
    height: 26px;
    appearance: none;
    -webkit-appearance: none;
    background: var(--color-border);
    border-radius: 13px;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
    padding: 0;
    margin: 0;
}

.ob-toggle input[type="checkbox"]:checked {
    background: var(--color-green-700);
    background-image: none;
    border-color: transparent;
}

.ob-toggle input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    background: var(--color-white);
    transition: transform 0.2s ease;
    pointer-events: none;
}

.ob-toggle input[type="checkbox"]:checked::after {
    transform: translateX(22px);
}

/* ===== FARM ADDRESS FIELDS ===== */

.ob-farm-fields {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ob-farm-fields.is-hidden {
    display: none;
}

/* ===== INFO ICON ===== */

.ob-info-icon {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    flex-shrink: 0;
}

/* ===== TIP BOX ===== */

.ob-tip {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    border-radius: var(--radius-card);
    color: var(--color-text-mid);
    font-size: 16px;
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 24px;
    background: var(--color-bg-subtle);
}

.ob-tip svg {
    flex-shrink: 0;
    margin-top: 4px;
}

/* ===== FIELD HELPERS ===== */

.ob-field-hint {
    color: var(--color-text-muted);
    font-size: 11px;
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 18px;
}

.ob-optional {
    color: var(--color-text-muted);
    font-size: 11px;
    font-family: var(--font-sans);
    font-weight: 400;
}

/* ===== FILE DROP-ZONE COMPONENT ===== */

.file-input-wrapper,
.image-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.file-drop-zone,
.image-drop-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-text-muted);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    user-select: none;
}

.file-drop-zone:hover,
.file-drop-zone--drag-over,
.image-drop-zone:hover,
.image-drop-zone--drag-over {
    border-color: var(--color-green-700);
    background: var(--color-bg-hover);
}

.file-drop-zone__icon,
.image-drop-zone__icon {
    flex-shrink: 0;
}

.file-drop-zone__text,
.image-drop-zone__text {
    color: var(--color-text-dark);
    font-size: 12px;
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 20px;
    text-align: center;
}

.file-drop-zone__link,
.image-drop-zone__link {
    text-decoration: underline;
    cursor: pointer;
}

/* The real <input type="file"> is hidden; clicks are forwarded via JS */
.file-drop-zone__input,
.image-drop-zone__input {
    display: none;
}

.image-drop-zone__preview {
    margin: 4px 0 0;
    padding: 8px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    border: dashed 1px var(--color-text-muted);
    border-radius: var(--radius-md);
}

.file-drop-zone__preview {
    margin: 4px 0 0;
    padding: 8px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    border: none;
}


.image-drop-zone__preview-item {
    display: flex;
    height: 204px;
    width: 204px;
    align-items: center;
    position: relative;
}

@media (max-width:768px){
    .image-drop-zone__preview-item {
        max-height: 204px;
        max-width: 204px;
        flex: 1 48%;        
    }
}

.file-drop-zone__preview-item {
    display: flex;
    gap: 8px;
    height: 40px;
    width: 850px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    align-items: center;
    position: relative;
    justify-content: space-between;    
    padding: 16px 0;
}

.file-drop-zone__preview-item-add {
    display: flex;
    height: 40px;
    width: auto;
    border: none;
    border-radius: var(--radius-input);
    align-items: center;
    position: relative;
    justify-content: space-between;
    padding: 16px 0;
}


.image-drop-zone__preview-thumb {
    max-width: 100%;
    max-height: 100%;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.file-drop-zone__preview-thumb
{
    max-width: 100%;
    max-height: 100%;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-left: 16px;
}

.file-drop-zone__preview-img,
.image-drop-zone__preview-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; 
    display: block;
}

.file-drop-zone__preview-info,
.image-drop-zone__preview-info {
    flex: 1 1 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 16px;
}

.file-drop-zone__preview-name,
.image-drop-zone__preview-name {
    color: var(--color-text-dark);
    font-size: 12px;
    font-family: var(--font-sans);
    font-weight: 500;
    line-height: 20px;
    word-break: break-all;
}


.image-drop-zone__preview-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    padding: 8px;
    border: none;
    background: var(--color-bg);
    border-radius: var(--radius-xl);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.file-drop-zone__preview-remove {

    width: 32px;
    height: 32px;
    padding: 8px;
    border: none;
    background: var(--color-bg);
    border-radius: var(--radius-xl);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-right: 16px;

}

.file-drop-zone__preview-remove:hover,
.image-drop-zone__preview-remove:hover {
    background: var(--color-bg-hover);
}

.file-drop-zone__preview-add,
.image-drop-zone__preview-add {
    max-width: 100%;
    max-height: 100%;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

    .file-drop-zone__preview-add,
    .image-drop-zone__preview-add {
        max-width: 100%;
        max-height: 100%;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }



/* Single-file preview (avatar + edit/remove) */
.file-drop-zone__single-preview {
    display: flex;
    align-items: center;
    gap: 24px;
}

.file-drop-zone__single-preview-img {
    width: 120px;
    height: 120px;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
}

.file-drop-zone__single-preview-actions {
    display: flex;
    gap: 4px;
}

.onboarding-buttons {
    padding: 16px 0;
    position: sticky;
    bottom: 0;
    background-color: var(--color-bg);
    display: flex;
}

    .onboarding-buttons:has(:only-child) {
        justify-content: flex-end;
    }


    .onboarding-buttons:has(:nth-child(2):last-child) {
        justify-content: space-between;
    }

@media (max-width: 767px) {
    .ob-profile-form {
        min-width: 0;
    }

    .ob-profile-form .ob-tip {
        box-sizing: border-box;
        gap: 12px;
        padding: 16px;
        font-size: 14px;
        line-height: 22px;
    }

    .ob-profile-form .file-input-wrapper,
    .ob-profile-form .image-input-wrapper {
        min-width: 0;
    }

    .ob-profile-form .file-drop-zone,
    .ob-profile-form .image-drop-zone {
        box-sizing: border-box;
        min-height: 144px;
        padding: 20px 16px;
    }

    .ob-profile-form .image-drop-zone__preview {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        box-sizing: border-box;
        width: 100%;
        gap: 12px;
    }

    .ob-profile-form .image-drop-zone__preview-item {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }

    .ob-profile-form .image-drop-zone__preview-thumb,
    .ob-profile-form .image-drop-zone__preview-img {
        width: 100%;
        height: 100%;
    }

    .ob-profile-form .image-drop-zone__preview-img {
        object-fit: cover;
    }

    .ob-profile-form .file-drop-zone__single-preview {
        flex-wrap: wrap;
        gap: 16px;
    }

    .ob-profile-form .file-drop-zone__single-preview-img {
        width: 104px;
        height: 104px;
    }

    .ob-profile-form .file-drop-zone__preview {
        width: 100%;
        box-sizing: border-box;
        padding: 0;
        gap: 12px;
    }

    .ob-profile-form .file-drop-zone__preview-item {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 72px;
        padding: 12px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-input);
        flex-wrap: wrap;
    }

    .ob-profile-form .file-drop-zone__preview-thumb {
        margin-left: 0;
    }

    .ob-profile-form .file-drop-zone__preview-item > .file-drop-zone__preview-thumb {
        display: none;
    }

    .ob-profile-form .file-drop-zone__preview-item::before {
        content: '';
        width: 32px;
        height: 32px;
        border-radius: var(--radius-btn-sm);
        background: transparent;
        flex-shrink: 0;
    }

    .ob-profile-form .file-drop-zone__preview-item:has(> svg[viewBox="0 0 64 64"])::before {
        display: none;
    }

    .ob-profile-form .file-drop-zone__preview-item > svg[viewBox="0 0 64 64"] {
        order: -1;
        width: 32px;
        height: 32px;
        flex-shrink: 0;
    }

    .ob-profile-form .file-drop-zone__preview-info {
        min-width: 0;
        margin-left: 12px;
    }

        .ob-profile-form .file-drop-zone__preview-name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow-wrap: anywhere;
        }

    .ob-profile-form .file-drop-zone__preview-item > div[style] {
        width: auto !important;
        flex: 1 1 132px;
        min-width: 0;
        color: var(--color-text-dark);
        font-family: var(--font-sans);
        font-size: 12px;
        font-weight: 500;
        line-height: 20px;
    }

    .ob-profile-form .file-drop-zone__preview-item .sp-picker {
        width: 100% !important;
    }

        

    

        

    .ob-profile-form .sp-picker__item-btn {
        min-height: 48px;
        padding: 12px 16px;
    }

    .ob-profile-form .file-drop-zone__preview-remove {
        margin-right: 0;
    }

    .ob-profile-actions {
        gap: 12px;
    }

    .ob-profile-actions > * {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
    }

    
}

.onboarding-mobile-header,
.ob-mobile-help-card {
    display: none;
}

.add-elements-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: nowrap;
}

@media (max-width: 420px)
{
    .ob-profile-actions {        
        flex-direction: column-reverse !important;
    }

        .ob-profile-actions > * {
            flex: none;
        }
}

@media (max-width: 375px)
{
    .add-elements-buttons {
        flex-wrap: wrap !important;
    }

    #add-element-btn {
        min-width: 170px !important;
    }

    #add-subelement-btn {
        min-width: 170px !important;
    }
}

@media (min-width: 420px) {
    .nutrition-label {
        margin-left: 20px;
    }
}

@media (max-width: 767px) {
    .onboarding-layout {
        display: block;
        min-height: 100vh;
        padding: 0;
    }

    .onboarding-sidebar {
        display: none;
    }

    .onboarding-mobile-header {
        display: flex;
        flex-direction: column;
        gap: 16px;
        box-sizing: border-box;
        min-height: 108px;
        padding: 16px 10px 12px;
        background: var(--color-bg-green);
        color: var(--color-white);
    }

    .onboarding-mobile-header__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .onboarding-mobile-logo {
        color: var(--color-white);
        font-family: var(--font-serif);
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        text-decoration: none;
    }

    .onboarding-mobile-back {
        display: inline-flex;
        align-items: center;
        height: 24px;
        padding: 0 12px;
        border: 1px solid var(--color-white);
        border-radius: var(--radius-btn-sm);
        color: var(--color-white);
        font-size: 11px;
        font-weight: 400;
        line-height: 18px;
        text-decoration: none;
        white-space: nowrap;
    }

    .onboarding-mobile-progress {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 4px;
    }

    .onboarding-mobile-progress span {
        height: 3px;
        border-radius: var(--radius-xs);
        background: var(--color-green-400);
    }

    .onboarding-mobile-progress .is-active {
        background: var(--color-bg-light);
    }

    .onboarding-mobile-step {
        font-size: 12px;
        font-weight: 500;
        line-height: 20px;
    }

    .onboarding-main {
        display: block;
        margin-left: 0;
    }

    .onboarding-content {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        flex: none;
        margin: 0;
        padding: 12px 10px 0;
    }

    .onboarding-footer {
        display: none;
    }

    .ob-step-header {
        display: block;
        margin-bottom: 0;
    }

    .ob-step-kicker,
    .ob-step-header > .ob-back-btn {
        display: none;
    }

    .ob-step-title {
        font-family: var(--font-serif);
        font-size: 24px;
        font-weight: 400;
        line-height: 32px;
    }

    .ob-step-description {
        margin: 8px 0 0;
        font-size: 14px;
        line-height: 22px;
    }

    .ob-form {
        width: 100%;
    }

    .ob-section {
        gap: 16px;
        margin-top: 32px;
    }

    .ob-section-title {
        font-size: 14px;
        line-height: 22px;
    }

    .ob-row {
        flex-direction: column;
        gap: 16px;
        width: 100%;
    }

    .ob-row-inner {
        width: 100%;
        flex: none;
    }

    .ob-col--postal {
        width: 104px;
    }

    .ob-consent-text {
        display: block;
        min-width: 0;
        font-size: 12px;
        line-height: 20px;
    }

    .ob-toggle-row {
        justify-content: space-between;
    }

    .ob-toggle-label {
        order: -1;
        font-size: 14px;
        line-height: 22px;
    }

    .ob-mobile-help-card {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 32px;
        padding: 16px;
        border-radius: var(--radius-card);
        background: var(--color-bg-help);
        color: var(--color-white);
    }

    .ob-mobile-help-card__title {
        font-size: 14px;
        font-weight: 600;
        line-height: 22px;
    }

    .ob-mobile-help-card__text {
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
    }

    .ob-mobile-help-card__phone {
        align-self: flex-start;
        padding: 4px 14px;
        border: 1px solid var(--color-white);
        border-radius: var(--radius-btn-sm);
        font-size: 12px;
        font-weight: 500;
        line-height: 20px;
    }

    .ob-form-submit {
        width: 100% !important;
        margin-top: 24px !important;
        align-self: stretch !important;
        border-radius: var(--radius-btn-sm);
    }
       

    .ob-product-form .nutrition-table {
        padding: 8px 12px;
    }

    .ob-product-form .nutrition-table > .ob-row {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .ob-product-form .nutrition-table .ob-col {
        min-width: 0;
    }

    .ob-product-form .nutrition-table .ob-col-input {
        
        min-width: 0;
    }

    .ob-product-form .nutrition-label,
    .ob-product-form .nutrition-label-sub {
        padding: 0 12px;
        font-size: 14px;
    }

    .ob-product-form .input-with-suffix {
        min-width: 0;
    }

    .ob-product-form .ob-row > div:has(> #add-element-btn) {
        flex-wrap: wrap;
        width: 100%;
    }

    .ob-product-form #add-element-btn,
    .ob-product-form #add-subelement-btn {
        flex: 1 1 132px;
        min-width: 0;
        padding: 4px 8px;
        white-space: normal;
    }

    .ob-product-actions {
        gap: 12px;
    }

    .ob-product-actions > * {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
    }

    .ob-product-submit {
        width: auto !important;
    }
}

@media (max-width: 419px) {
    .ob-product-form .nutrition-table > .ob-row {
        flex-wrap: wrap;
        min-height: 0;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .ob-product-form .nutrition-table > .ob-row > .ob-col {
        flex: 1 1 calc(100% - 56px);
    }

    

    .ob-product-form .nutrition-table > .ob-row > .toggle-element-btn {
        order: 1;
        flex-shrink: 0;
    }

    .ob-product-form .nutrition-table > .ob-row:first-child .ob-col-input {
        display: flex !important;
        align-items: center;
        gap: 6px;
    }

    .ob-product-form .nutrition-table > .ob-row:first-child .input-with-suffix {
        flex: 1 1 0;
        max-width: none;
    }

    .ob-product-form .nutrition-table > .ob-row:first-child .divider {
        padding: 0;
        line-height: 24px;
    }
}

@media (min-width: 768px) and (max-width: 1631px) {
    .onboarding-layout {
        display: block;
        min-height: 100vh;
        padding: 0;
    }

    .onboarding-sidebar {
        display: none;
    }

    .onboarding-mobile-header {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 20px 32px;
        background: var(--color-bg-green);
        color: var(--color-white);
    }

    .onboarding-mobile-header__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .ob-step-kicker,
    .ob-step-header > .ob-back-btn {
        display: none;
    }

    .onboarding-mobile-logo,
    .onboarding-mobile-back {
        color: var(--color-white);
        text-decoration: none;
    }

    .onboarding-mobile-logo {
        font-family: var(--font-serif);
        font-size: 24px;
        line-height: 32px;
    }

    .onboarding-mobile-back {
        padding: 6px 16px;
        border: 1px solid var(--color-white);
        border-radius: var(--radius-btn-sm);
        font-size: 14px;
        line-height: 22px;
    }

    .onboarding-mobile-progress {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
    }

    .onboarding-mobile-progress span {
        height: 4px;
        background: var(--color-green-400);
        border-radius: var(--radius-xs);
    }

    .onboarding-mobile-progress .is-active {
        background: var(--color-bg-light);
    }

    .onboarding-mobile-step {
        font-size: 14px;
        font-weight: 500;
        line-height: 22px;
    }

    .onboarding-main {
        display: block;
        margin-left: 0;
    }

    .onboarding-content {
        box-sizing: border-box;
        width: min(1088px, calc(100% - 64px));
        margin: 0 auto;
        padding: 32px 0 48px;
    }

    .onboarding-footer {
        display: none;
    }

    .ob-profile-form .image-drop-zone__preview {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        box-sizing: border-box;
        width: 100%;
        gap: 16px;
    }

    .ob-profile-form .image-drop-zone__preview-item {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }

    .ob-profile-form .image-drop-zone__preview-thumb,
    .ob-profile-form .image-drop-zone__preview-img {
        width: 100%;
        height: 100%;
    }

    .ob-profile-form .image-drop-zone__preview-img {
        object-fit: cover;
    }

    .ob-profile-form .file-drop-zone__preview {
        width: 100%;
        box-sizing: border-box;
    }

    .ob-profile-form .file-drop-zone__preview-item {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 72px;
        padding: 12px;
        flex-wrap: wrap;
    }
}

/* ===== PRODUCT FORM STYLES ===== */

/* Product feature list item */
.product-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.product-feature-item {
    display: flex;
    padding: 8px 20px;    
    border-radius: var(--radius-btn-sm);
    border: 1px solid var(--color-border);
    align-items: center;
    gap: 10px;
}

.product-feature-drag,
.product-feature-check {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-feature-btn {
    width: 32px;
    height: 32px;
    padding: 10px;
    border-radius: var(--radius-btn-sm);
    border: 1px solid var(--color-border);
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.product-feature-btn:hover {
    background: var(--color-bg-hover);
}

/* Allergen pills */
.allergen-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.allergen-pill {
    height: 40px;
    padding: 10px 16px;
    border-radius: var(--radius-btn-sm);
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-dark);
    font-size: 14px;
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 22px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.allergen-pill:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-green-500);
}

.allergen-pill.selected {
    background: var(--color-green-500);
    border-color: var(--color-green-500);
    color: var(--color-white);
}
.nutrition-table {    
    
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn-sm);
    padding: 8px 20px 8px 36px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
}

    .nutrition-table > * {
        position: relative;
    }

        .nutrition-table > *:not(:last-child)::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -8px;
            height: 1px;
            margin: auto -20px auto -36px;
            background: var(--color-border);
        }

    .nutrition-row {
        padding: 8px 20px 8px 36px;
        background: var(--bg);
        border-bottom: none;
        display: flex;
        align-items: center;
        gap: 10px;
    }

/* ENERGY has rounded top */
.nutrition-row--energy {
}

/* SUB ROW indentation */
.nutrition-row--sub {
    padding-left: 20px;
}



.sub-dot {
    width: 6px;
    height: 6px;
    background: var(--text);
    border-radius: var(--radius-full);
}

:root {
    --border: var(--color-border);
    --color-text: var(--color-text-dark);
    --color-muted: var(--color-text-muted);
    --radius: 16px;
    --h: 48px;
}

/* LABEL */
.nutrition-label,
.nutrition-label-sub {
    flex: 1;
    height: var(--h);
    display: flex;
    align-items: center;
    padding: 0 24px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--text);
    background: white;
}

input.nutrition-label,
input.nutrition-label-sub{
    width: 100% !important;
    padding-top: 0px;
    padding-bottom: 0px;
    box-sizing: border-box;
    height: var(--h);
}

.nutrition-label-sub {
    margin-left: 20px;
    position: relative;
}

.nutrition-label-sub::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-text-dark);
}
/* UNITS */
.nutrition-units {
    display: flex;
    align-items: center;
    gap: 2px;
}

.unit {
    width: 120px;
    height: var(--h);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 24px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--muted);
}

.unit-separator {
    font-size: 16px;
    color: var(--muted);
}

/* BUTTONS */
.nutrition-btn {
    width: 32px;
    height: 32px;
    padding: 10px;
    border-radius: var(--radius-btn-sm);
    border: 1px solid var(--border);
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* ICONS */
.icon {
    width: 16px;
    height: 16px;
    position: relative;
}

/* UP */
.icon-up::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 6px;
    background: var(--muted);
    top: 5px;
    left: 3px;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* DOWN */
.icon-down::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 6px;
    background: var(--muted);
    top: 5px;
    left: 3px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* DELETE */
.icon-delete::before,
.icon-delete::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 2px;
    background: var(--muted);
    top: 7px;
    left: 2px;
}

.icon-delete::before {
    transform: rotate(45deg);
}

.icon-delete::after {
    transform: rotate(-45deg);
}

.input-with-suffix {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 300px;
    height: var(--h);
}

    .input-with-suffix input {
        width: 100%;
        padding-right: 40px;
        padding-top: 0px;
        padding-bottom: 0px;
        box-sizing: border-box;
        height: var(--h);
    }

    .input-with-suffix .suffix {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--color-text-muted);
            pointer-events: none;
        }

.divider {
    
        font-size: 24px;
        padding: 6px;
    
}

.toggle-btn {
    height: 40px;
    padding: 10px 16px;
    border-radius: var(--radius-btn-sm);
    outline: 1px solid var(--color-border);
    outline-offset: -1px;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: var(--color-text-dark);
    transition: background 0.15s ease, color 0.15s ease;
    width: fit-content;
}

.remove-element-btn {
    padding-right: 0px;
    padding-left: 0px;
    border: 1px solid var(--color-border);
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    width: 40px;
    height: 40px;
    transition: none;
}

.delivery-price-condition-row .remove-element-btn {
    margin-top: 25px;
}

    .remove-element-btn span {
        color: var(--color-text-muted);
        background-image: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M13.9997 2.66667H11.933C11.7783 1.91428 11.3689 1.23823 10.7738 0.752479C10.1788 0.266727 9.43448 0.000969683 8.66634 0L7.33301 0C6.56487 0.000969683 5.82055 0.266727 5.22551 0.752479C4.63046 1.23823 4.22107 1.91428 4.06634 2.66667H1.99967C1.82286 2.66667 1.65329 2.7369 1.52827 2.86193C1.40325 2.98695 1.33301 3.15652 1.33301 3.33333C1.33301 3.51014 1.40325 3.67971 1.52827 3.80474C1.65329 3.92976 1.82286 4 1.99967 4H2.66634V12.6667C2.6674 13.5504 3.01893 14.3976 3.64382 15.0225C4.26871 15.6474 5.11594 15.9989 5.99967 16H9.99967C10.8834 15.9989 11.7306 15.6474 12.3555 15.0225C12.9804 14.3976 13.3319 13.5504 13.333 12.6667V4H13.9997C14.1765 4 14.3461 3.92976 14.4711 3.80474C14.5961 3.67971 14.6663 3.51014 14.6663 3.33333C14.6663 3.15652 14.5961 2.98695 14.4711 2.86193C14.3461 2.7369 14.1765 2.66667 13.9997 2.66667ZM7.33301 1.33333H8.66634C9.07986 1.33384 9.48309 1.46225 9.82075 1.70096C10.1584 1.93967 10.414 2.27699 10.5523 2.66667H5.44701C5.5854 2.27699 5.84094 1.93967 6.1786 1.70096C6.51626 1.46225 6.91949 1.33384 7.33301 1.33333ZM11.9997 12.6667C11.9997 13.1971 11.789 13.7058 11.4139 14.0809C11.0388 14.456 10.5301 14.6667 9.99967 14.6667H5.99967C5.46924 14.6667 4.96053 14.456 4.58546 14.0809C4.21039 13.7058 3.99967 13.1971 3.99967 12.6667V4H11.9997V12.6667Z' fill='%236B7280'/><path d='M6.66667 12.0013C6.84348 12.0013 7.01305 11.9311 7.13807 11.806C7.2631 11.681 7.33333 11.5114 7.33333 11.3346V7.33464C7.33333 7.15782 7.2631 6.98826 7.13807 6.86323C7.01305 6.73821 6.84348 6.66797 6.66667 6.66797C6.48986 6.66797 6.32029 6.73821 6.19526 6.86323C6.07024 6.98826 6 7.15782 6 7.33464V11.3346C6 11.5114 6.07024 11.681 6.19526 11.806C6.32029 11.9311 6.48986 12.0013 6.66667 12.0013Z' fill='%236B7280'/><path d='M9.33366 12.0013C9.51047 12.0013 9.68004 11.9311 9.80506 11.806C9.93009 11.681 10.0003 11.5114 10.0003 11.3346V7.33464C10.0003 7.15782 9.93009 6.98826 9.80506 6.86323C9.68004 6.73821 9.51047 6.66797 9.33366 6.66797C9.15685 6.66797 8.98728 6.73821 8.86225 6.86323C8.73723 6.98826 8.66699 7.15782 8.66699 7.33464V11.3346C8.66699 11.5114 8.73723 11.681 8.86225 11.806C8.98728 11.9311 9.15685 12.0013 9.33366 12.0013Z' fill='%236B7280'/></svg>") !important;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 16px;
        width: 24px;
        height: 24px;
    }

    .remove-element-btn:hover,
    .remove-element-btn.is-hover {
        background: var(--color-green-200) !important;
    }

        .remove-element-btn:hover span,
        .remove-element-btn.is-hover span {
            background-image: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M13.9997 2.66667H11.933C11.7783 1.91428 11.3689 1.23823 10.7738 0.752479C10.1788 0.266727 9.43448 0.000969683 8.66634 0L7.33301 0C6.56487 0.000969683 5.82055 0.266727 5.22551 0.752479C4.63046 1.23823 4.22107 1.91428 4.06634 2.66667H1.99967C1.82286 2.66667 1.65329 2.7369 1.52827 2.86193C1.40325 2.98695 1.33301 3.15652 1.33301 3.33333C1.33301 3.51014 1.40325 3.67971 1.52827 3.80474C1.65329 3.92976 1.82286 4 1.99967 4H2.66634V12.6667C2.6674 13.5504 3.01893 14.3976 3.64382 15.0225C4.26871 15.6474 5.11594 15.9989 5.99967 16H9.99967C10.8834 15.9989 11.7306 15.6474 12.3555 15.0225C12.9804 14.3976 13.3319 13.5504 13.333 12.6667V4H13.9997C14.1765 4 14.3461 3.92976 14.4711 3.80474C14.5961 3.67971 14.6663 3.51014 14.6663 3.33333C14.6663 3.15652 14.5961 2.98695 14.4711 2.86193C14.3461 2.7369 14.1765 2.66667 13.9997 2.66667ZM7.33301 1.33333H8.66634C9.07986 1.33384 9.48309 1.46225 9.82075 1.70096C10.1584 1.93967 10.414 2.27699 10.5523 2.66667H5.44701C5.5854 2.27699 5.84094 1.93967 6.1786 1.70096C6.51626 1.46225 6.91949 1.33384 7.33301 1.33333ZM11.9997 12.6667C11.9997 13.1971 11.789 13.7058 11.4139 14.0809C11.0388 14.456 10.5301 14.6667 9.99967 14.6667H5.99967C5.46924 14.6667 4.96053 14.456 4.58546 14.0809C4.21039 13.7058 3.99967 13.1971 3.99967 12.6667V4H11.9997V12.6667Z' fill='%236B7280'/><path d='M6.66667 12.0013C6.84348 12.0013 7.01305 11.9311 7.13807 11.806C7.2631 11.681 7.33333 11.5114 7.33333 11.3346V7.33464C7.33333 7.15782 7.2631 6.98826 7.13807 6.86323C7.01305 6.73821 6.84348 6.66797 6.66667 6.66797C6.48986 6.66797 6.32029 6.73821 6.19526 6.86323C6.07024 6.98826 6 7.15782 6 7.33464V11.3346C6 11.5114 6.07024 11.681 6.19526 11.806C6.32029 11.9311 6.48986 12.0013 6.66667 12.0013Z' fill='%236B7280'/><path d='M9.33366 12.0013C9.51047 12.0013 9.68004 11.9311 9.80506 11.806C9.93009 11.681 10.0003 11.5114 10.0003 11.3346V7.33464C10.0003 7.15782 9.93009 6.98826 9.80506 6.86323C9.68004 6.73821 9.51047 6.66797 9.33366 6.66797C9.15685 6.66797 8.98728 6.73821 8.86225 6.86323C8.73723 6.98826 8.66699 7.15782 8.66699 7.33464V11.3346C8.66699 11.5114 8.73723 11.681 8.86225 11.806C8.98728 11.9311 9.15685 12.0013 9.33366 12.0013Z' fill='%236B7280'/></svg>") !important;
        }

    .remove-element-btn:active,
    .remove-element-btn.is-active {
        background: var(--color-green-700);        
    }

        .remove-element-btn:active span,
        .remove-element-btn.is-active span {
            background-image: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M13.9997 2.66667H11.933C11.7783 1.91428 11.3689 1.23823 10.7738 0.752479C10.1788 0.266727 9.43448 0.000969683 8.66634 0L7.33301 0C6.56487 0.000969683 5.82055 0.266727 5.22551 0.752479C4.63046 1.23823 4.22107 1.91428 4.06634 2.66667H1.99967C1.82286 2.66667 1.65329 2.7369 1.52827 2.86193C1.40325 2.98695 1.33301 3.15652 1.33301 3.33333C1.33301 3.51014 1.40325 3.67971 1.52827 3.80474C1.65329 3.92976 1.82286 4 1.99967 4H2.66634V12.6667C2.6674 13.5504 3.01893 14.3976 3.64382 15.0225C4.26871 15.6474 5.11594 15.9989 5.99967 16H9.99967C10.8834 15.9989 11.7306 15.6474 12.3555 15.0225C12.9804 14.3976 13.3319 13.5504 13.333 12.6667V4H13.9997C14.1765 4 14.3461 3.92976 14.4711 3.80474C14.5961 3.67971 14.6663 3.51014 14.6663 3.33333C14.6663 3.15652 14.5961 2.98695 14.4711 2.86193C14.3461 2.7369 14.1765 2.66667 13.9997 2.66667ZM7.33301 1.33333H8.66634C9.07986 1.33384 9.48309 1.46225 9.82075 1.70096C10.1584 1.93967 10.414 2.27699 10.5523 2.66667H5.44701C5.5854 2.27699 5.84094 1.93967 6.1786 1.70096C6.51626 1.46225 6.91949 1.33384 7.33301 1.33333ZM11.9997 12.6667C11.9997 13.1971 11.789 13.7058 11.4139 14.0809C11.0388 14.456 10.5301 14.6667 9.99967 14.6667H5.99967C5.46924 14.6667 4.96053 14.456 4.58546 14.0809C4.21039 13.7058 3.99967 13.1971 3.99967 12.6667V4H11.9997V12.6667Z' fill='%23F9FAF7'/><path d='M6.66667 12.0013C6.84348 12.0013 7.01305 11.9311 7.13807 11.806C7.2631 11.681 7.33333 11.5114 7.33333 11.3346V7.33464C7.33333 7.15782 7.2631 6.98826 7.13807 6.86323C7.01305 6.73821 6.84348 6.66797 6.66667 6.66797C6.48986 6.66797 6.32029 6.73821 6.19526 6.86323C6.07024 6.98826 6 7.15782 6 7.33464V11.3346C6 11.5114 6.07024 11.681 6.19526 11.806C6.32029 11.9311 6.48986 12.0013 6.66667 12.0013Z' fill='%23F9FAF7'/><path d='M9.33366 12.0013C9.51047 12.0013 9.68004 11.9311 9.80506 11.806C9.93009 11.681 10.0003 11.5114 10.0003 11.3346V7.33464C10.0003 7.15782 9.93009 6.98826 9.80506 6.86323C9.68004 6.73821 9.51047 6.66797 9.33366 6.66797C9.15685 6.66797 8.98728 6.73821 8.86225 6.86323C8.73723 6.98826 8.66699 7.15782 8.66699 7.33464V11.3346C8.66699 11.5114 8.73723 11.681 8.86225 11.806C8.98728 11.9311 9.15685 12.0013 9.33366 12.0013Z' fill='%23F9FAF7'/></svg>");
        }
        /* --- HOVER --- */
        .toggle-btn:hover,
        .toggle-btn.is-hover {
            background: var(--color-green-200);
        }

    /* --- ACTIVE --- */
    .toggle-btn:active,
    .toggle-btn.is-active {
        background: var(--color-green-700);
        color: var(--color-white);
        outline: none;
    }


.toggle-element-btn {
    width: 48px;
    height: 26px;
    padding: 0;
    border: none;
    background: var(--color-border); /* OFF state background */
    border-radius: 13px;
    position: relative;
    cursor: pointer;
    transition: background 0.25s ease;
}

    /* The circle */
    .toggle-element-btn span {
        position: absolute;
        top: 50%;
        left: 2px;
        transform: translateY(-50%);
        width: 22px;
        height: 22px;
        background: #fff;
        border-radius: 50%;
        transition: left 0.25s ease;
    }

    /* ON state */
    .toggle-element-btn.is-active {
        background: #3E4A29; /* ON state background */
    }

        .toggle-element-btn.is-active span {
            left: calc(100% - 24px); /* Move circle to the right */
        }

/* ===== DELIVERY CARD ===== */

.delivery-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 24px;
    border-radius: var(--radius-card);
    outline: 1px solid var(--color-border);
    outline-offset: -1px;
}

.delivery-card--selected {
    outline-color: var(--color-green-900);
    outline-width: 2px;
}

.delivery-card__check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.delivery-card__check--checked {
    background: var(--color-green-700);
    border-color: var(--color-green-700);
}

.delivery-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;    
}

.delivery-card__header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.delivery-card__title {
    color: var(--color-text-mid);
    font-size: 16px;
    font-family: var(--font-sans);
    font-weight: 600;
    line-height: 24px;
    margin: 0;
}

.delivery-card__desc {
    color: var(--color-text-mid);
    font-size: 16px;
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 24px;
    margin: 0;
    padding-left: 35px;
}

.delivery-card__pricing {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 35px;
}

.delivery-card__subtitle {
    color: var(--color-text-mid);
    font-size: 16px;
    font-family: var(--font-sans);
    font-weight: 600;
    line-height: 24px;
    margin: 0;
    margin-top: 32px;
}

.delivery-card__price-modes {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ===== DELIVERY OPTION (toggle + indented field) ===== */

.delivery-option {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.delivery-indent {
    padding-left: 60px;
}

@media (max-width: 480px) {
    .ob-delivery-form {        
        margin: 0 auto;
    }

    .ob-delivery-form .ob-step-description {
        margin-bottom: 0;
    }

    .ob-delivery-form .ob-section {
        width: 100%;
        gap: 24px;
        margin-top: 40px;
    }

    .ob-delivery-form .ob-section-title {
        margin: 0;
        font-size: 16px;
        line-height: 24px;
    }

    .ob-delivery-form .delivery-card {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        gap: 12px;
        padding: 16px;
        border-radius: var(--radius-input);
    }

    .ob-delivery-form .delivery-card__body,
    .ob-delivery-form .delivery-card__header,
    .ob-delivery-form .delivery-card__pricing {
        min-width: 0;
    }

    .ob-delivery-form .delivery-card__body {
        gap: 24px;
    }

    .ob-delivery-form .delivery-card__header > div:first-child {
        min-width: 0;
    }

    .ob-delivery-form .delivery-card__title,
    .ob-delivery-form .delivery-card__desc,
    .ob-delivery-form .delivery-card__subtitle {
        color: var(--color-text-mid);
        font-size: 16px;
        line-height: 24px;
    }

    /* 20px checkbox + 8px gap keeps the text aligned under the card title. */
    .ob-delivery-form .delivery-card__desc,
    .ob-delivery-form .delivery-card__pricing {
        padding-left: 28px;
    }

    .ob-delivery-form .delivery-card__subtitle {
        margin-top: 0;
    }

    .ob-delivery-form .delivery-card__price-modes {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    .ob-delivery-form .delivery-card__price-modes .toggle-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        width: 100%;
        height: 48px;
        padding: 0;
        border-radius: 0;
        outline: none;
        background: transparent;
        color: var(--color-text-dark);
        text-align: left;
    }

    .ob-delivery-form .delivery-card__price-modes .toggle-btn::after {
        content: '';
        box-sizing: border-box;
        width: 20px;
        height: 20px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-full);
        background: var(--color-white);
        flex-shrink: 0;
    }

    .ob-delivery-form .delivery-card__price-modes .toggle-btn.is-active::after {
        border: 6px solid var(--color-green-700);
    }

    /* Delivery days are multi-select, so they use a checkbox marker instead of a radio. */
    .ob-delivery-form [id^="schedule-group-"] .toggle-btn::after {
        border-radius: var(--radius-sm);
    }

    .ob-delivery-form [id^="schedule-group-"] .toggle-btn.is-active::after {
        border: 1px solid var(--color-green-700);
        background: var(--color-green-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-6' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
    }

    .ob-delivery-form .ob-row {
        width: 100%;
        gap: 16px;
    }

    .ob-delivery-form .ob-col,
    .ob-delivery-form .input-wrapper,
    .ob-delivery-form .ob-field,
    .ob-delivery-form .input-with-suffix,
    .ob-delivery-form .sp-picker {
        width: 100% !important;
        max-width: none;
        min-width: 0;
        box-sizing: border-box;
    }

    .ob-delivery-form .delivery-option {
        width: 100%;
        gap: 12px;
    }

    .ob-delivery-form .delivery-indent {
        padding-left: 16px;
    }

    .ob-delivery-form .sp-picker__dropdown {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 400;
        box-sizing: border-box;
        width: auto;
        padding: 8px 0 16px;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        box-shadow: 0 -4px 16px var(--color-shadow-sm);
        overflow: visible;
    }

    .ob-delivery-form .sp-picker__backdrop {
        display: block;
        position: fixed;
        z-index: 0;
        inset: 0;
        background: rgba(107, 114, 128, 0.25);
        backdrop-filter: blur(5px);
    }

    .ob-delivery-form .sp-picker__panel {
        position: relative;
        z-index: 1;
        max-height: calc(100vh - 112px);
        padding: 0;
        background: var(--color-white);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }

    .ob-delivery-form .sp-picker__item-btn {
        min-height: 48px;
        padding: 12px 16px;
    }

    .ob-delivery-actions {
        flex-direction: column-reverse;
        gap: 8px;
        width: 100%;
        margin-top: 16px;
    }

    .ob-delivery-actions > * {
        box-sizing: border-box;
        width: 100% !important;
        justify-content: center;
    }
}

/* .ob-row is column below 768px, so the 416px flex-basis would become a fixed height. */
@media (max-width: 767px) {
    .delivery-price-condition-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 40px;
        align-items: end;
        gap: 16px;
    }

    .delivery-price-condition-row > :first-child {
        grid-column: 1 / -1;
    }

    .delivery-price-condition-row .remove-element-btn {
        grid-column: 2;
        grid-row: 2;
        margin-top: 0;
    }

    .ob-delivery-form .flex-input-fixed,
    .ob-delivery-form .flex-input-auto {
        flex: 0 0 auto !important;
        width: 100%;
        min-width: 0;
    }

    .ob-delivery-form .flex-input-fixed .input-with-suffix {
        max-width: none;
    }
}

/* Below the desktop rail width the 416px fixed columns overflow the delivery card. */
@media (min-width: 768px) and (max-width: 1131px) {
    .ob-delivery-form .ob-row {
        flex-wrap: wrap;
        max-width: 100% !important;
    }

    .ob-delivery-form .flex-input-fixed {
        flex: 1 1 260px !important;
        min-width: 0;
    }

    .ob-delivery-form .flex-input-fixed .input-with-suffix {
        max-width: none;
    }
}

/* ===== FORM FIELD (label + input) ===== */

.ob-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ob-input {
    height: 48px;
    padding: 0 24px;
    background: var(--color-white);
    border-radius: var(--radius-input);
    border: none;
    outline: 1px solid var(--color-border);
    outline-offset: -1px;
    color: var(--color-text-dark);
    font-size: 16px;
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 24px;
    width: 100%;
    box-sizing: border-box;
}

.ob-input:focus {
    outline-color: var(--color-green-900);
    outline-width: 2px;
}

/* ===== VERIFICATION CARD ===== */

.ob-verification-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    width: 480px;
    padding: 40px;
    background: var(--color-white);
    border-radius: var(--radius-card-lg);
}

.ob-verification-card-text {
    color: var(--color-green-500);
    font-size: 16px;
    font-family: var(--font-sans);
    font-weight: 600;
    line-height: 24px;
    text-align: center;
    margin: 0;
}

.ob-verification-actions {
    position: fixed;
    width: 1088px;
    bottom: 25px;
}

/* The fixed 1088px action bar only fits once the content rail reaches full width. */
@media (max-width: 1179px) {
    .ob-verification-actions {
        position: static;
        box-sizing: border-box;
        width: 100%;
        margin-bottom: 24px;
    }
}

@media (max-width: 480px) {
    .ob-verification-form .ob-verification-card {
        box-sizing: border-box;
        width: 100%;
        gap: 24px;
        padding: 40px 24px;
    }

    .ob-verification-actions {
        flex-direction: column-reverse;
        gap: 8px;
        margin-top: 24px;
    }

    .ob-verification-actions > * {
        box-sizing: border-box;
        width: 100% !important;
        justify-content: center;
        text-align: center;
    }
}

.ob-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M12.4735 5.47259C12.4116 5.4101 12.3378 5.36051 12.2566 5.32666C12.1753 5.29282 12.0882 5.27539 12.0002 5.27539C11.9122 5.27539 11.8251 5.29282 11.7438 5.32666C11.6626 5.36051 11.5888 5.4101 11.5269 5.47259L8.47354 8.52592C8.41156 8.58841 8.33783 8.638 8.25659 8.67185C8.17535 8.7057 8.08821 8.72312 8.0002 8.72312C7.9122 8.72312 7.82506 8.7057 7.74382 8.67185C7.66258 8.638 7.58884 8.58841 7.52687 8.52592L4.47354 5.47259C4.41156 5.4101 4.33783 5.36051 4.25659 5.32666C4.17535 5.29282 4.08821 5.27539 4.0002 5.27539C3.91219 5.27539 3.82506 5.29282 3.74382 5.32666C3.66258 5.36051 3.58884 5.4101 3.52687 5.47259C3.4027 5.5975 3.33301 5.76647 3.33301 5.94259C3.33301 6.11871 3.4027 6.28768 3.52687 6.41259L6.58687 9.47259C6.96187 9.84712 7.4702 10.0575 8.0002 10.0575C8.5302 10.0575 9.03854 9.84712 9.41354 9.47259L12.4735 6.41259C12.5977 6.28768 12.6674 6.11871 12.6674 5.94259C12.6674 5.76647 12.5977 5.5975 12.4735 5.47259Z' fill='%233F3F3C'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 44px;
    cursor: pointer;
    color: var(--color-text-muted);
}

/* ===== CATEGORY TREE PICKER ===== */

/* -- Generic select picker (sp-picker) ------------------------------- */
.sp-picker {
    position: relative;
    width: 100%;
}

.sp-picker__trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    padding: 16px;
    color: var(--color-text-dark);
    font-size: 14px;
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 22px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    cursor: pointer;
    gap: 8px;
}

#products-status-filter-label {
    display: flex;
    align-items: center;
    gap: 6px; /* odstęp między ikoną a tekstem */
}

    #products-status-filter-label::before {
        content: "";
        width: 16px;
        height: 16px;
        background-image: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><g clip-path='url(%23clip0_4036_6560)'><path d='M12.1427 6.06533C12.4007 6.328 12.3967 6.75 12.1333 7.008L9.18267 9.90467C8.66067 10.4167 7.98867 10.672 7.316 10.672C6.65067 10.672 5.98533 10.4213 5.46533 9.91933L4.19933 8.67467C3.93667 8.41667 3.93333 7.99467 4.19133 7.732C4.44867 7.46867 4.872 7.46533 5.134 7.724L6.396 8.96467C6.91333 9.46467 7.73 9.462 8.25 8.95267L11.2 6.05667C11.462 5.798 11.8827 5.80267 12.1427 6.06533ZM16 8C16 12.4113 12.4113 16 8 16C3.58867 16 0 12.4113 0 8C0 3.58867 3.58867 0 8 0C12.4113 0 16 3.58867 16 8ZM14.6667 8C14.6667 4.324 11.676 1.33333 8 1.33333C4.324 1.33333 1.33333 4.324 1.33333 8C1.33333 11.676 4.324 14.6667 8 14.6667C11.676 14.6667 14.6667 11.676 14.6667 8Z' fill='%2321241D'></path></g><defs><clipPath id='clip0_4036_6560'><rect width='16' height='16' fill='white'></rect></clipPath></defs></svg>");
        background-repeat: no-repeat;
        background-size: 16px;
    }







/* -- Category picker (legacy, kept for tree picker in _Product.cshtml) - */
.category-picker {
    position: relative;
    width: 100%;
}

.category-picker-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 48px;
    padding: 16px;
    font-size: 16px;
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    background-color: var(--color-white);
    color: var(--color-text-muted);
    cursor: pointer;
    gap: 8px;
}

    .category-picker-trigger.has-value {
        color: var(--color-text-dark) !important;
    }

.category-picker-trigger.is-open svg {
    transform: rotate(180deg);
}

.category-picker-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    padding: 0 8px 8px 8px;
    background: var(--color-white);
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    z-index: 200;
    overflow: hidden;
}

.category-panel {    
    overflow-y: auto;
    padding: 4px 0;
}

.category-tree-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.category-tree-item {
    display: block;
}

.category-root-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 24px;
    word-wrap: break-word;
    gap: 8px;
    color: var(--color-text-dark)
}

.category-root-btn:hover,
.category-tree-item.is-selected > .category-root-btn {
    background: var(--color-bg-subtle, #f5f5f3);
    color: var(--color-text-dark, #1a1a18);
}

.category-tree-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    cursor: pointer;
    min-width: 0;
}

.category-tree-checkbox {
    accent-color: #3E4A29;
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.category-root-arrow-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    padding: 4px 0;
    cursor: pointer;
    flex-shrink: 1;
    font-weight: 400;
    height: auto !important;
}

.category-root-name.is-bold {
    font-weight: 600;
}

.category-panel-back {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 10x 16px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    font-size: 16px;
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 24px;
    word-wrap: break-word color: var(--color-text-mid);
    text-align: left;
    border-radius: 0px;
    margin-bottom: 10px;
}

.category-panel-back.button:hover {
    color: var(--color-text-dark);
}


#add-feature-btn {
    width: auto !important;
    color: var(--color-text-dark);
    font-size: 14px;
    font-family: var(--font-sans);
    font-weight: 500;
    line-height: 22px;
    word-wrap: break-word
}

#search-input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    font-family: 'DM Sans', sans-serif;
    color: #21241D;
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
}

#search-clear-btn {
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
    flex-basis: auto;
    margin: 0;
    width: auto;
}

.producer-consent {
    display: flex;
    gap: 8px;
}