.lpg-dtc {
display: flex;
flex-direction: column;
gap: 14px;
margin: 0 0 36px;
padding: 24px;
background: #f3f6f9;
border: 1px solid #dce3ea;
border-radius: 14px;
}
.lpg-dtc [hidden],
.lpg-dtc-hidden {
display: none !important;
}
.lpg-dtc__label {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
font-family: Montserrat, Arial, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.3;
color: #0d1722;
}
.lpg-dtc__row {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.lpg-dtc__field {
position: relative;
display: flex;
flex: 1 1 280px;
align-items: center;
min-width: 0;
padding: 0 8px 0 18px;
background: #fff;
border: 2px solid #c5d0db;
border-radius: 50px;
transition: border-color 0.15s;
}
.lpg-dtc__field:focus-within {
border-color: #0072bc;
}
.lpg-dtc__lamba {
width: 1.7em;
height: 1.7em;
flex: 0 0 auto;
fill: none;
stroke: #f2a516;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.lpg-dtc__icon {
flex: 0 0 auto;
width: 20px;
height: 20px;
fill: none;
stroke: #4f5d6d;
stroke-width: 2;
stroke-linecap: round;
} .lpg-dtc #lpg-dtc-q,
.lpg-dtc #lpg-dtc-q:focus {
flex: 1 1 auto;
width: auto;
min-width: 0;
height: 54px;
margin: 0;
padding: 0 10px;
border: 0;
border-radius: 0;
outline: 0;
background: transparent;
box-shadow: none;
font-family: inherit;
font-size: 18px;
line-height: 54px;
color: #0d1722;
-webkit-appearance: none;
appearance: none;
transition: none;
}
.lpg-dtc #lpg-dtc-q::-webkit-search-cancel-button {
display: none;
}
.lpg-dtc .lpg-dtc__clear {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: #eef3f8;
box-shadow: none;
font-size: 22px;
line-height: 1;
color: #0d1722;
text-transform: none;
cursor: pointer;
}
.lpg-dtc .lpg-dtc__btn {
flex: 0 0 auto;
height: 58px;
margin: 0;
padding: 0 34px;
border: 0;
border-radius: 50px;
background: #0072bc;
box-shadow: none;
font-family: Montserrat, Arial, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.02em;
color: #fff;
text-transform: none;
cursor: pointer;
}
.lpg-dtc .lpg-dtc__btn:hover {
background: #005e9b;
}
.lpg-dtc__chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-size: 14px;
color: #4f5d6d;
}
.lpg-dtc .lpg-dtc__chip {
min-height: 36px;
margin: 0;
padding: 0 14px;
border: 1px solid #c5d0db;
border-radius: 50px;
background: #fff;
box-shadow: none;
font-family: ui-monospace, Menlo, Consolas, monospace;
font-size: 14px;
font-weight: 600;
line-height: 1;
color: #0072bc;
text-transform: none;
cursor: pointer;
}
.lpg-dtc .lpg-dtc__chip:hover {
border-color: #0072bc;
}
.lpg-dtc button:focus-visible,
.lpg-dtc a:focus-visible {
outline: 3px solid #f2a516;
outline-offset: 2px;
}
.lpg-dtc__status {
margin: 0;
font-size: 15px;
line-height: 1.5;
color: #33414f;
scroll-margin-top: 140px;
}
.lpg-dtc__empty {
padding: 16px 18px;
background: #fff;
border: 1px dashed #c5d0db;
border-radius: 10px;
font-size: 15px;
line-height: 1.6;
color: #33414f;
}
.lpg-dtc__empty a {
font-weight: 700;
}
.lpg-dtc-item {
scroll-margin-top: 140px;
}
@media (max-width: 480px) {
.lpg-dtc {
padding: 18px;
}
.lpg-dtc__label {
font-size: 18px;
}
.lpg-dtc .lpg-dtc__btn {
flex: 1 1 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.lpg-dtc__field {
transition: none;
}
}