.retragere {
max-width: 760px;
margin: 2em 0;
}
.retragere-steps {
display: flex;
gap: 1em;
margin: 0 0 2em;
padding: 0;
list-style: none;
}
.retragere-steps li {
display: flex;
flex: 1;
align-items: center;
gap: .6em;
padding-bottom: .6em;
border-bottom: 2px solid #e5e5e5;
color: #999;
font-size: .9em;
}
.retragere-steps li.is-current,
.retragere-steps li.is-done {
border-color: currentColor;
color: inherit;
}
.retragere-steps__number {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 1.8em;
height: 1.8em;
border: 1px solid currentColor;
border-radius: 50%;
}
.retragere-steps li.is-current .retragere-steps__number {
color: #fff;
background: #282828;
border-color: #282828;
}
.retragere-form .form-row {
margin-bottom: 1.2em;
}
.retragere-form::after {
display: table;
clear: both;
content: "";
}
.retragere-hint {
display: block;
margin-top: .3em;
color: #777;
font-size: .85em;
} .retragere-hp {
position: absolute !important;
left: -9999px !important;
width: 1px;
height: 1px;
overflow: hidden;
}
.retragere-order-summary {
font-weight: 600;
}
.retragere-items {
margin: 0 0 1.5em;
padding: 0;
border: 0;
}
.retragere-items legend {
margin-bottom: .8em;
font-weight: 600;
}
.retragere-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
padding: .8em 0;
border-bottom: 1px solid #eee;
}
.retragere-item__check {
display: flex;
flex: 1;
align-items: center;
gap: .8em;
margin: 0;
cursor: pointer;
}
.retragere-item__check input {
flex: none;
}
.retragere-item__thumb img {
display: block;
width: 60px;
height: auto;
}
.retragere-item__info small,
.retragere-summary small {
display: block;
color: #777;
}
.retragere-item__qty {
display: flex;
flex: none;
align-items: center;
gap: .5em;
margin: 0;
}
.retragere-summary th {
width: 35%;
vertical-align: top;
} .retragere.retragere--theme .retragere-summary {
width: 100%;
margin: 0 0 1.5em;
border: 0;
border-top: 1px solid #e5e5e5;
border-collapse: collapse;
}
.retragere.retragere--theme .retragere-summary th,
.retragere.retragere--theme .retragere-summary td {
padding: .9em 0;
border: 0;
border-bottom: 1px solid #e5e5e5;
background: none;
text-align: left;
vertical-align: top;
}
.retragere.retragere--theme .retragere-summary th {
padding-right: 1.5em;
color: #777;
font-weight: 400;
text-transform: none;
}
.retragere.retragere--theme .retragere-summary td {
overflow-wrap: anywhere;
}
.retragere.retragere--theme .retragere-summary__items {
margin: 0;
padding: 0;
list-style: none;
}
.retragere-summary__items {
margin: 0;
padding-left: 1.2em;
}
.retragere-summary__items li + li {
margin-top: .5em;
} .retragere-actions {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
flex-wrap: wrap;
gap: .8em;
clear: both;
}
.retragere-actions .retragere-button-secondary {
background: transparent;
color: inherit;
border: 1px solid currentColor;
}
.retragere-done {
padding: 1.5em;
border: 1px solid #e5e5e5;
} .floating-labels .form-row.float-label.retragere-row-date > label {
top: -10px;
left: 10px;
display: flex;
align-items: center;
height: 20px;
padding: 0 5px;
border-width: 0;
font-size: .95em;
color: currentColor;
opacity: 1;
cursor: default;
}
.el-style-border-bottom.floating-labels .form-row.float-label.retragere-row-date > label {
top: -18px;
padding-left: 0;
}
@media (max-width: 600px) {
.retragere.retragere--theme .retragere-summary th,
.retragere.retragere--theme .retragere-summary td {
display: block;
width: auto;
}
.retragere.retragere--theme .retragere-summary th {
padding: .9em 0 .2em;
border-bottom: 0;
font-size: .85em;
}
.retragere.retragere--theme .retragere-summary td {
padding-top: 0;
}
.retragere-steps__label {
font-size: .8em;
}
.retragere-item {
flex-wrap: wrap;
}
}.retragere--classic {
--retragere-text: #222;
--retragere-muted: #6b6b6b;
--retragere-border: #d0d0d0;
--retragere-accent: #222;
--retragere-accent-text: #fff;
--retragere-error: #b3261e;
--retragere-error-bg: #fdf1f0;
--retragere-info: #1f5fa8;
--retragere-info-bg: #eef4fb;
--retragere-radius: 4px;
color: var(--retragere-text);
font-size: 16px;
line-height: 1.5;
} .retragere--classic .retragere-field {
margin: 0 0 1.25em;
}
.retragere--classic .retragere-field > label {
display: block;
margin: 0 0 .35em;
font-weight: 600;
font-size: .95em;
}
.retragere--classic .retragere-input,
.retragere--classic .retragere-item__qty select {
box-sizing: border-box;
width: 100%;
min-height: 44px;
margin: 0;
padding: .6em .8em;
border: 1px solid var(--retragere-border);
border-radius: var(--retragere-radius);
background: #fff;
box-shadow: none;
color: inherit;
font: inherit;
line-height: 1.4;
}
.retragere--classic textarea.retragere-input {
min-height: 110px;
resize: vertical;
}
.retragere--classic .retragere-item__qty select {
width: auto;
min-width: 4.5em;
}
.retragere--classic .retragere-input:focus,
.retragere--classic .retragere-item__qty select:focus {
border-color: var(--retragere-accent);
outline: 2px solid color-mix(in srgb, var(--retragere-accent) 25%, transparent);
outline-offset: 0;
}
.retragere--classic abbr.required {
border: 0;
color: var(--retragere-error);
text-decoration: none;
}
.retragere--classic .retragere-hint {
color: var(--retragere-muted);
} .retragere--classic .retragere-checkbox {
display: flex;
align-items: flex-start;
gap: .6em;
font-weight: 400;
cursor: pointer;
}
.retragere--classic input[type="checkbox"] {
flex: none;
width: 18px;
height: 18px;
margin: .15em 0 0;
accent-color: var(--retragere-accent);
}
.retragere--classic .retragere-items legend {
padding: 0;
} .retragere--classic .retragere-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
margin: 0;
padding: .65em 1.6em;
border: 1px solid var(--retragere-accent);
border-radius: var(--retragere-radius);
background: var(--retragere-accent);
box-shadow: none;
color: var(--retragere-accent-text);
font: inherit;
font-weight: 600;
line-height: 1.2;
text-transform: none;
letter-spacing: normal;
cursor: pointer;
}
.retragere--classic .retragere-btn:hover,
.retragere--classic .retragere-btn:focus-visible {
background: color-mix(in srgb, var(--retragere-accent) 85%, #fff);
}
.retragere--classic .retragere-btn:focus-visible {
outline: 2px solid var(--retragere-accent);
outline-offset: 2px;
}
.retragere--classic .retragere-btn.retragere-button-secondary {
background: transparent;
color: var(--retragere-accent);
}
.retragere--classic .retragere-btn.retragere-button-secondary:hover {
background: color-mix(in srgb, var(--retragere-accent) 8%, transparent);
} .retragere--classic .retragere-notice {
margin: 0 0 1.5em;
padding: .9em 1.1em;
border-left: 4px solid;
border-radius: var(--retragere-radius);
list-style: none;
}
.retragere--classic .retragere-notice li {
margin: 0;
}
.retragere--classic .retragere-notice li + li {
margin-top: .3em;
}
.retragere--classic .retragere-notice--error {
border-color: var(--retragere-error);
background: var(--retragere-error-bg);
color: var(--retragere-error);
}
.retragere--classic .retragere-notice--info {
border-color: var(--retragere-info);
background: var(--retragere-info-bg);
color: var(--retragere-info);
} .retragere--classic .retragere-table {
width: 100%;
margin: 0 0 1.5em;
border: 1px solid var(--retragere-border);
border-collapse: collapse;
}
.retragere--classic .retragere-table th,
.retragere--classic .retragere-table td {
padding: .7em .9em;
border-bottom: 1px solid var(--retragere-border);
text-align: left;
vertical-align: top;
}
.retragere--classic .retragere-table th {
background: #f7f7f7;
font-weight: 600;
}
.retragere--classic .retragere-done {
border-color: var(--retragere-border);
border-radius: var(--retragere-radius);
}
@media (max-width: 600px) {
.retragere--classic .retragere-table th,
.retragere--classic .retragere-table td {
display: block;
border-bottom: 0;
}
.retragere--classic .retragere-table tr {
border-bottom: 1px solid var(--retragere-border);
}
.retragere--classic .retragere-btn {
flex: 1 1 auto;
}
}