.car-root {
position: fixed;
bottom: 1.25rem;
z-index: 999990;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, sans-serif;
font-size: 14px;
line-height: 1.4;
} .car-root.car-over-featherlight {
z-index: 2147483647;
} .featherlight .car-mec-read-inline {
display: block;
width: 100%;
box-sizing: border-box;
margin: 0 0 0.75rem 0;
padding: 0.55rem 0.85rem;
border: 1px solid #2d3748;
border-radius: 8px;
background: #2d3748;
color: #fff;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
text-align: center;
}
.featherlight .car-mec-read-inline:hover {
background: #1a202c;
border-color: #1a202c;
}
.featherlight .car-mec-read-inline:focus {
outline: 2px solid #4299e1;
outline-offset: 2px;
}
.car-position-right {
right: 1.25rem;
left: auto;
}
.car-position-left {
left: 1.25rem;
right: auto;
}
@media (max-width: 782px) {
.car-root {
bottom: 1rem;
}
.car-position-right {
right: 1rem;
}
.car-position-left {
left: 1rem;
}
}
.car-trigger {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
padding: 0;
border: none;
border-radius: 50%;
background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
color: #fff;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.car-trigger:hover {
transform: scale(1.05);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.car-trigger:focus {
outline: 2px solid #4299e1;
outline-offset: 2px;
}
.car-trigger[aria-disabled="true"] {
opacity: 0.7;
cursor: not-allowed;
}
.car-trigger-icon {
width: 24px;
height: 24px;
background: currentColor;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M12 2a3 3 0 0 1 3 3v8a3 3 0 0 1-6 0V5a3 3 0 0 1 3-3z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cpath d='M12 19v3'/%3E%3Cpath d='M9 22h6'/%3E%3C/svg%3E") no-repeat center;
mask-size: contain;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M12 2a3 3 0 0 1 3 3v8a3 3 0 0 1-6 0V5a3 3 0 0 1 3-3z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cpath d='M12 19v3'/%3E%3Cpath d='M9 22h6'/%3E%3C/svg%3E") no-repeat center;
-webkit-mask-size: contain;
}
.car-panel {
position: absolute;
bottom: 100%;
margin-bottom: 10px;
width: 280px;
max-width: calc(100vw - 2rem);
padding: 1rem;
background: #fff;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
border: 1px solid #e2e8f0;
}
.car-position-right .car-panel {
right: 0;
left: auto;
}
.car-position-left .car-panel {
left: 0;
right: auto;
}
.car-panel[hidden] {
display: none !important;
}
.car-panel-title {
margin: 0 0 0.75rem 0;
font-size: 1rem;
font-weight: 600;
color: #2d3748;
}
.car-btn {
display: block;
width: 100%;
margin-bottom: 0.5rem;
padding: 0.5rem 0.75rem;
border: 1px solid #cbd5e0;
border-radius: 8px;
background: #fff;
color: #2d3748;
font-size: 0.875rem;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.car-btn:hover:not(:disabled) {
background: #f7fafc;
border-color: #a0aec0;
}
.car-btn:focus {
outline: 2px solid #4299e1;
outline-offset: 1px;
}
.car-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.car-btn-primary {
background: #2d3748;
border-color: #2d3748;
color: #fff;
}
.car-btn-primary:hover:not(:disabled) {
background: #1a202c;
border-color: #1a202c;
}
.car-btn-close {
margin-top: 0.75rem;
margin-bottom: 0;
}
.car-label {
display: block;
margin: 0.5rem 0 0.25rem 0;
font-size: 0.8125rem;
color: #4a5568;
}
.car-select {
margin-left: 0.25rem;
padding: 0.25rem 0.5rem;
border: 1px solid #cbd5e0;
border-radius: 6px;
font-size: 0.875rem;
min-width: 80px;
}
.car-select:focus {
outline: 2px solid #4299e1;
outline-offset: 0;
}
.car-lang-debug {
margin: 0 0 0.65rem 0;
padding: 0.45rem 0.5rem;
font-size: 0.7rem;
line-height: 1.35;
color: #4a5568;
background: #f7fafc;
border: 1px solid #e2e8f0;
border-radius: 6px;
word-break: break-word;
}
.car-select-lang {
max-width: 100%;
}
.car-lang-label {
margin-bottom: 0.5rem;
}