@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;600;700;800&display=swap');

:root {
    --bs-body-font-family: 'DM Sans', sans-serif;
    --bs-body-color: #20332d;
    --bs-body-bg: #f4f6f2;
}

/* Respect Stimulus visibility even when Bootstrap display utilities are present. */
[hidden] {
    display: none !important;
}

svg {
    width: 1.2em;
    height: 1.2em;
    vertical-align: -.2em;
}

.page-shell {
    max-width: 1480px;
}

.brand {
    color: #153d31;
    font: 800 25px Manrope, sans-serif;
    letter-spacing: -1.2px;
}

.brand-mark {
    width: 38px;
    height: 38px;
}

.language-switch svg {
    width: 24px;
    height: 24px;
}

.language-switch a[aria-current=page] {
    background: var(--bs-success-bg-subtle);
}

.intro-panel {
    background: radial-gradient(circle at 5% 95%, #276b4b 0, transparent 40%), linear-gradient(145deg, #103d2d, #174b37 72%, #215f42);
}

.intro-panel::after {
    content: '';
    position: absolute;
    width: 310px;
    height: 310px;
    border: 1px solid #ffffff21;
    border-radius: 50%;
    right: -115px;
    bottom: -120px;
    box-shadow: 0 0 0 52px #ffffff08, 0 0 0 104px #ffffff05;
    pointer-events: none;
}

.eyebrow, .section-step {
    font-weight: 800;
    letter-spacing: .16em;
    font-size: 11px;
    color: var(--bs-success-text-emphasis);
}

.intro-panel .eyebrow {
    color: #9be4a9;
}

.intro-panel h1 {
    font: 800 clamp(38px, 3.8vw, 59px)/1.12 Manrope, sans-serif;
    letter-spacing: -.055em;
}

.intro-panel h1 em {
    color: #a7ecab;
}

.steps {
    margin-top: 75px;
}

.step-number {
    width: 36px;
    height: 36px;
}

.intro-foot {
    margin-top: 94px;
    color: #b9dcc3;
}

.form-heading h2, .section-heading h3 {
    font-family: Manrope, sans-serif;
    letter-spacing: -.04em;
}

.takeback-form label.required::after {
    content: ' *';
    color: var(--bs-danger);
}

.category-tree:empty {
    display: none;
}

.category-field {
    --treeselectjs-border-color: var(--bs-border-color);
    --treeselectjs-border-focus: #86b7fe;
    --treeselectjs-bg: var(--bs-body-bg);
    --treeselectjs-item-focus-bg: var(--bs-success-bg-subtle);
    --treeselectjs-item-selected-bg: var(--bs-success-bg-subtle);
}

.category-field .treeselect-input {
    min-height: 38px;
    border-radius: var(--bs-border-radius);
}

.address-suggestions {
    max-height: 250px;
}

/* UX Dropzone generates its markup, so its integration needs scoped styles. */
.takeback-form .dropzone-container {
    min-height: 118px;
    padding: 18px;
    border: 1px dashed #b2d2b8;
    border-radius: 11px;
    background: #f5faf4;
    transition: border-color .2s, background .2s, box-shadow .2s
}

.takeback-form .dropzone-container:hover {
    border-color: #419d62;
    background: #eef8ee
}

.takeback-form .dropzone-container:focus-within {
    border-color: #419d62;
    box-shadow: 0 0 0 3px #81d49a33
}

.takeback-form .dropzone-input {
    padding: 0;
    border: 0
}

.takeback-form .dropzone-placeholder {
    color: #43815a;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5
}

.takeback-form .dropzone-preview-list {
    margin: 12px 0 0;
    padding: 0;
    color: #40544a
}

.takeback-form .dropzone-preview-list-item {
    min-width: 0;
    border-top: 1px solid #dcebdd;
    font-size: 12px
}

.takeback-form .dropzone-preview-filename {
    min-width: 0;
    overflow-wrap: anywhere
}

.takeback-form .dropzone-preview-list-remove {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    color: #a36c61
}

.takeback-form .dropzone-preview-list-remove:hover {
    background: #f7e9e5;
    color: #873f36
}

.takeback-form .dropzone-preview-list-remove:focus-visible {
    outline: 2px solid #419d62;
    outline-offset: 2px
}