﻿.lt-sp { position: fixed; right: 30px; bottom: 30px; z-index: 1040; color: #1A2B3C; }
.lt-sp-btn { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 50%; background: #FF6F0F; box-shadow: 0 8px 24px rgba(255, 111, 15, .32); color: #fff; cursor: pointer; transition: background-color .15s ease, transform .15s ease; }
.lt-sp-btn i { font-size: 26px; line-height: 1; }
.lt-sp-btn:hover { background: #E56000; transform: translateY(-2px); }
.lt-sp-btn:focus-visible { outline: 3px solid rgba(255, 111, 15, .35); outline-offset: 3px; }
.lt-sp-btn[aria-expanded="true"] { background: #E56000; }

.lt-sp-panel { position: absolute; right: 0; bottom: 76px; display: flex; flex-direction: column; width: 400px; max-height: calc(100vh - 200px); overflow: hidden; border: 1px solid #E3E7ED; border-radius: 14px; background: #fff; box-shadow: 0 16px 48px rgba(15, 23, 42, .16); transform-origin: bottom right; animation: lt-sp-open .2s ease; }
.lt-sp-panel[hidden] { display: none; }
@keyframes lt-sp-open { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

.lt-sp-head { display: flex; align-items: center; gap: 14px; padding: 18px 18px 16px; background: #FFF8F3; box-shadow: inset 0 -1px 0 #F6E3D3; }
.lt-sp-head-icon { display: inline-flex; flex: 0 0 48px; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #FFE6D3; color: #E56000; }
.lt-sp-head-icon i { font-size: 22px; }
.lt-sp-head > div { flex: 1 1 auto; min-width: 0; }
.lt-sp-title { display: block; color: #1A2B3C; font-size: 18px; font-weight: inherit; line-height: 1.25; }
.lt-sp-sub { display: block; margin-top: 2px; color: #4A5568; font-size: 14px; }
.lt-sp-close { display: inline-flex; flex: 0 0 32px; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: #E53935; color: #fff; cursor: pointer; }
.lt-sp-close i { font-size: 16px; }
.lt-sp-close:hover { background: #C62828; }
.lt-sp-close:focus-visible { outline: 3px solid rgba(229, 57, 53, .3); outline-offset: 2px; }

.lt-sp-body { flex: 1 1 auto; min-height: 0; padding: 16px 16px 6px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #C9D1DC transparent; }

.lt-sp-section { margin: 2px 2px 10px; }
.lt-sp-section strong { display: block; color: #1A2B3C; font-size: 16px; font-weight: inherit; }
.lt-sp-section span { display: block; margin-top: 2px; color: #6B7280; font-size: 13.5px; }

.lt-sp-list, .lt-sp-sublist { margin: 0; padding: 0; list-style: none; }
.lt-sp-list > li + li { margin-top: 8px; }
.lt-sp-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid #E3E7ED; border-radius: 12px; background: #fff; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: border-color .15s ease; }
.lt-sp-item:hover { border-color: #FFD2B3; color: inherit; }
.lt-sp-item:focus-visible, .lt-sp-center:focus-visible { outline: 2px solid rgba(255, 111, 15, .4); outline-offset: 1px; }
.lt-sp-ic { display: inline-flex; flex: 0 0 40px; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; }
.lt-sp-ic i { font-size: 18px; }
.lt-sp-txt { flex: 1 1 auto; min-width: 0; }
.lt-sp-txt b { display: block; color: #1A2B3C; font-size: 15px; font-weight: inherit; line-height: 1.3; }
.lt-sp-txt small { display: block; margin-top: 2px; color: #6B7280; font-size: 13px; line-height: 1.35; }
.lt-sp-txt em { display: block; margin-top: 2px; color: #E56000; font-size: 12.5px; font-style: normal; }
.lt-sp-go { flex: 0 0 auto; color: #9AA3AF; font-size: 17px; transition: transform .2s ease; }
.lt-sp-toggle[aria-expanded="true"] .lt-sp-go { transform: rotate(180deg); }
.lt-sp-sublist { margin: 4px 0 0; }
.lt-sp-sublist[hidden] { display: none; }
.lt-sp-sublist a { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 8px; color: inherit; text-decoration: none; }
.lt-sp-sublist a:hover { background: #FFF1E6; color: inherit; }
.lt-sp-sublist a > i { flex: 0 0 18px; color: #6B7280; font-size: 16px; text-align: center; }
.lt-sp-sublist a > .lt-sp-x { flex: 0 0 18px; width: 15px; height: 15px; color: #6B7280; }
.lt-sp-sublist b { display: block; color: #1A2B3C; font-size: 14px; font-weight: inherit; }
.lt-sp-sublist small { display: block; color: #6B7280; font-size: 12.5px; }

.lt-sp-webmail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 6px 4px 2px; color: #4A5568; font-size: 13px; }
.lt-sp-webmail a { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid #FFD2B3; border-radius: 8px; background: #FFF1E6; color: #E56000; font-size: 13px; text-decoration: none; }
.lt-sp-webmail a:hover { border-color: #FFB27A; color: #C2410C; }

.lt-sp-tone-orange { background: #FFF1E6; color: #E56000; }
.lt-sp-tone-yellow { background: #FEF6E0; color: #B7791F; }
.lt-sp-tone-green { background: #E8F7EE; color: #1E9E5A; }
.lt-sp-tone-red { background: #FDECEC; color: #E53935; }
.lt-sp-tone-purple { background: #F3EDFE; color: #7C3AED; }
.lt-sp-tone-blue { background: #EAF1FE; color: #2563EB; }
.lt-sp-tone-pink { background: #FCE7F3; color: #DB2777; }

.lt-sp-foot { display: flex; align-items: stretch; gap: 12px; padding: 12px 16px 14px; box-shadow: inset 0 1px 0 #EDF0F4; }
.lt-sp-hours, .lt-sp-center { display: flex; flex: 1 1 50%; align-items: center; gap: 8px; min-width: 0; }
.lt-sp-center { padding-left: 12px; box-shadow: inset 1px 0 0 #EDF0F4; color: inherit; text-decoration: none; }
.lt-sp-center:hover { color: inherit; }
.lt-sp-center:hover b { color: #E56000; }
.lt-sp-hours b, .lt-sp-center b { display: block; color: #1A2B3C; font-size: 13.5px; font-weight: inherit; }
.lt-sp-hours small, .lt-sp-center small { display: block; color: #6B7280; font-size: 12px; line-height: 1.35; }

@media (max-width: 575.98px) {
    .lt-sp { right: 16px; bottom: 16px; }
    .lt-sp-btn { width: 54px; height: 54px; }
    .lt-sp-panel { position: fixed; right: 12px; bottom: 82px; left: 12px; width: auto; max-height: calc(100vh - 110px); }
    .lt-sp-foot { flex-direction: column; }
    .lt-sp-center { padding: 10px 0 0; box-shadow: inset 0 1px 0 #EDF0F4; }
}

@media (prefers-reduced-motion: reduce) {
    .lt-sp-panel { animation: none; }
    .lt-sp-btn, .lt-sp-go { transition: none; }
}
