:root { --tp-brand-blue-color: #0085ff;
--tp-hover-blue-color: #005bb5;
--tp-brand-red-color: #ef4a37; --tp-text-dark: #111827;
--tp-text-heading: #212121;
--tp-text-primary: #333;
--tp-text-body: #252b33;
--tp-text-secondary: #334155;
--tp-text-neutral: #374151;
--tp-text-strong: #1f2937;
--tp-text-muted: #666;
--tp-text-placeholder: #7c6d68;
--tp-text-label: #8a5c56; --tp-surface: #fff;
--tp-surface-rose: #fef7f6;
--tp-surface-rose2: #fffefe;
--tp-surface-rose-hover: #ffd9d2; --tp-border: #ddd;
--tp-border-light: #eee;
--tp-border-medium: #999;
--tp-border-warm: #e7e2de;
--tp-border-rose: #f0c3ba;
--tp-border-rose-strong: rgba(239, 143, 126, 0.78); --tp-sp-3xs: 0.35rem;
--tp-sp-2xs: 0.5rem;
--tp-sp-xs: 0.695rem;
--tp-sp-sm: 0.85rem;
--tp-sp-base: 1rem;
--tp-sp-md: 1.39rem;
--tp-sp-lg: 1.5rem; --tp-radius-xs: 0.8rem;
--tp-radius-sm: 0.85rem;
--tp-radius-md: 1rem;
--tp-radius-lg: 1.39rem;
--tp-radius-pill: 999px; --tp-shadow-xs: 0 2px 5px rgba(0, 0, 0, 0.1);
--tp-shadow-sm: 0 8px 24px rgba(16, 24, 40, 0.05);
--tp-shadow-md: 0 12px 28px rgba(128, 69, 59, 0.08);
--tp-shadow-lg: 0 18px 38px rgba(128, 69, 59, 0.1);
--tp-shadow-red-glow: 0 2px 5px rgba(243, 93, 77, 0.2);
--tp-shadow-red-strong: 0 6px 18px rgba(243, 93, 77, 0.4);
--tp-shadow-focus: 0 0 5px rgba(243, 93, 77, 0.3);
--tp-shadow-focus-ring: 0 0 0 3px rgba(243, 93, 77, 0.18); --tp-dt-bg: #f7f6f4;
--tp-dt-surface: #fbfaf8;
--tp-dt-surface-alt: #f4f2ef;
--tp-dt-head-bg: #f1efec;
--tp-dt-head-text: #3f3a36;
--tp-dt-body-text: #2f2b28;
--tp-dt-muted-text: #6f6a66;
--tp-dt-accent: #a84a3a;
--tp-dt-border: #e4dfda;
--tp-dt-border-strong: #d8d0ca;
--tp-dt-row-hover: #f0ece7;
--tp-dt-row-zebra: #f8f5f2;
--tp-dt-shadow: 0 16px 34px rgba(72, 51, 41, 0.08); --tp-duration: 0.3s;
--tp-ease: ease; --tp-touch-min: 44px; --coral-shell: rgba(255, 206, 188, 0.78);
--coral-panel: rgba(255, 255, 255, 0.75);
--coral-soft: rgba(255, 222, 210, 0.78);
--coral-border: rgba(231, 226, 222, 0.99);
--coral-shadow: var(--tp-shadow-lg),
inset 0 1px 0 rgba(255, 255, 255, 0.32),
inset 0 0 0 1px rgba(255, 255, 255, 0.08);
--coral-panel-shadow: var(--tp-shadow-md),
inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 0 0 1px rgba(255, 255, 255, 0.08);
--coral-hover-shadow: 0 14px 30px rgba(128, 69, 59, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.34),
inset 0 0 0 1px rgba(255, 255, 255, 0.08);
--coral-focus: rgba(239, 74, 55, 0.22);
--coral-backdrop: blur(22px) saturate(112%);
--coral-backdrop-light: blur(18px) saturate(118%); --coral-input-border: rgba(243, 192, 180, 0.92);
--coral-input-bg: rgba(255, 255, 255, 0.96);
--coral-input-shadow: var(--tp-shadow-md),
inset 0 1px 0 rgba(255, 255, 255, 0.94);
--coral-input-focus-shadow:
0 0 0 3px var(--coral-focus),
0 14px 32px rgba(128, 69, 59, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.96); --coral-close-bg: linear-gradient(
180deg,
rgba(241, 131, 112, 0.94) 0%,
rgba(221, 98, 81, 0.9) 100%
);
--coral-close-border: rgba(255, 233, 228, 0.34);
--coral-close-shadow: var(--tp-shadow-lg),
inset 0 1px 0 rgba(255, 255, 255, 0.24),
inset 0 -10px 18px rgba(173, 66, 51, 0.16);
} .info-table,
.full,
.card-details-row {
user-select: none;
} .table-context-wrapper {
position: relative;
width: 100%;
margin-bottom: var(--tp-sp-lg);
}
.table-outer-wrapper {
position: relative;
width: 100%;
margin: var(--tp-sp-md) 0;
z-index: 5;
}
.info-table-wr {
overflow: auto !important;
position: relative !important;
max-height: 65vh !important;
scrollbar-width: thin;
scrollbar-color: rgba(135, 117, 107, 0.6) rgba(0, 0, 0, 0);
margin: 0 !important;
border-radius: var(--tp-radius-lg);
border: 1px solid var(--tp-dt-border);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(249, 246, 243, 0.92) 100%);
box-shadow: var(--tp-dt-shadow);
cursor: grab;
scroll-behavior: smooth;
}
.info-table-wr.full {
max-height: none !important;
height: auto !important;
overflow-y: hidden !important;
overflow-x: auto !important;
}
.info-table-wr.active {
cursor: grabbing;
scroll-behavior: auto;
} .info-table-wr::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.info-table-wr::-webkit-scrollbar-thumb {
background-color: rgba(135, 117, 107, 0.6);
border-radius: 4px;
transition: background-color var(--tp-duration);
}
.info-table-wr::-webkit-scrollbar-track {
background: transparent;
}
.info-table:hover::-webkit-scrollbar-thumb {
background-color: rgba(120, 101, 91, 0.75);
} .table-scroll-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--tp-surface);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
border: 1px solid var(--tp-border-light);
color: var(--tp-brand-red-color);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 110;
opacity: 0;
visibility: hidden;
transition: opacity var(--tp-duration), visibility var(--tp-duration),
transform 0.2s, background-color 0.2s;
font-size: 22px;
line-height: 1;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.table-outer-wrapper:hover .table-scroll-btn.visible {
opacity: 1;
visibility: visible;
}
.table-scroll-btn:hover {
background: var(--tp-brand-red-color);
color: var(--tp-surface);
box-shadow: var(--tp-shadow-red-strong);
transform: translateY(-50%) scale(1.1) !important;
}
.tsb-right {
right: 10px;
} .post-rich table:not(.main-flights) {
width: max-content !important;
min-width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 !important;
table-layout: auto !important;
font-size: 14px !important;
color: var(--tp-text-body) !important;
background: #fffdfc !important;
}
.post-rich table:not(.main-flights) colgroup.mysh-colgroup col.mysh-col-slot {
width: auto;
}
.post-rich table:not(.main-flights) th,
.post-rich table:not(.main-flights) td {
min-width: 0 !important;
max-width: none;
box-sizing: border-box;
padding: 0.9rem 0.95rem !important;
text-align: left !important;
vertical-align: top !important;
line-height: 1.56 !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
hyphens: none;
border-bottom: 1px solid rgba(239, 143, 126, 0.2);
background-clip: padding-box;
position: relative;
isolation: isolate;
overflow: hidden;
}
.post-rich table:not(.main-flights) td:empty::before,
.post-rich table:not(.main-flights) th:empty::before {
content: "-";
color: rgba(120, 93, 85, 0.42);
}
.post-rich table:not(.main-flights) th {
background: linear-gradient(180deg, rgba(255, 246, 243, 0.98) 0%, rgba(254, 239, 233, 0.96) 100%) !important;
color: #8a3f33 !important;
font-weight: 700 !important;
font-size: 0.72rem !important;
line-height: 1.32 !important;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer !important;
position: sticky !important;
top: 0 !important;
z-index: 16 !important;
transition: background-color var(--tp-duration), color var(--tp-duration) !important;
border-bottom: 1px solid rgba(239, 143, 126, 0.4) !important;
white-space: normal;
overflow-wrap: anywhere;
text-align: center !important;
vertical-align: middle !important;
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
.post-rich table:not(.main-flights) th:hover,
.post-rich table:not(.main-flights) th.tablesorter-headerAsc,
.post-rich table:not(.main-flights) th.tablesorter-headerDesc {
background: linear-gradient(180deg, rgba(255, 239, 233, 0.98) 0%, rgba(255, 229, 220, 0.96) 100%) !important;
color: var(--tp-brand-red-color) !important;
}
.post-rich table:not(.main-flights) th.tablesorter-header,
.post-rich table:not(.main-flights) th.tablesorter-headerAsc,
.post-rich table:not(.main-flights) th.tablesorter-headerDesc {
position: sticky;
padding-right: 0.95rem !important;
padding-bottom: 1rem !important;
}
.post-rich table:not(.main-flights) th.tablesorter-header::after,
.post-rich table:not(.main-flights) th.tablesorter-headerAsc::after,
.post-rich table:not(.main-flights) th.tablesorter-headerDesc::after {
content: none;
}
.post-rich table:not(.main-flights) th.tablesorter-header {
background-image:
linear-gradient(180deg, rgba(255, 246, 243, 0.98) 0%, rgba(254, 239, 233, 0.96) 100%),
linear-gradient(135deg, transparent 45%, rgba(170, 128, 120, 0.16) 50%, transparent 55%),
linear-gradient(45deg, transparent 45%, rgba(170, 128, 120, 0.16) 50%, transparent 55%);
background-size: auto, 86% 72%, 86% 72%;
background-repeat: no-repeat;
background-position: center center, center center, center center;
box-shadow: none;
}
.post-rich table:not(.main-flights) th.tablesorter-headerAsc {
background-image:
linear-gradient(180deg, rgba(255, 239, 233, 0.98) 0%, rgba(255, 229, 220, 0.96) 100%),
linear-gradient(0deg, rgba(239, 74, 55, 0.38) 0 2px, transparent 2px);
background-size: auto, auto;
background-repeat: no-repeat;
background-position: center center, center 100%;
box-shadow: inset 0 -2px 0 rgba(239, 74, 55, 0.4);
}
.post-rich table:not(.main-flights) th.tablesorter-headerDesc {
background-image:
linear-gradient(180deg, rgba(255, 239, 233, 0.98) 0%, rgba(255, 229, 220, 0.96) 100%),
linear-gradient(0deg, rgba(239, 74, 55, 0.38) 0 2px, transparent 2px);
background-size: auto, auto;
background-repeat: no-repeat;
background-position: center center, center 100%;
box-shadow: inset 0 -2px 0 rgba(239, 74, 55, 0.4);
}
.post-rich table:not(.main-flights) th.tablesorter-headerAsc::before,
.post-rich table:not(.main-flights) th.tablesorter-headerDesc::before {
content: "";
position: absolute;
left: 50%;
top: 52%;
transform: translate(-50%, -50%);
width: min(74%, 150px);
height: 58%;
pointer-events: none;
opacity: 0.5;
filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.34));
}
.post-rich table:not(.main-flights) th.tablesorter-headerAsc::before {
background: linear-gradient(
180deg,
rgba(239, 74, 55, 0.08) 0%,
rgba(239, 74, 55, 0.28) 100%
);
clip-path: polygon(50% 8%, 88% 58%, 70% 58%, 70% 92%, 30% 92%, 30% 58%, 12% 58%);
}
.post-rich table:not(.main-flights) th.tablesorter-headerDesc::before {
background: linear-gradient(
0deg,
rgba(239, 74, 55, 0.08) 0%,
rgba(239, 74, 55, 0.28) 100%
);
clip-path: polygon(12% 42%, 30% 42%, 30% 8%, 70% 8%, 70% 42%, 88% 42%, 50% 92%);
}
.info-table.no-sort th,
.full.no-sort th {
cursor: auto !important;
} .post-rich table:not(.main-flights) td:first-child {
position: sticky !important;
left: 0 !important;
background: linear-gradient(180deg, rgba(255, 250, 248, 0.28) 0%, rgba(255, 243, 238, 0.22) 100%) !important;
backdrop-filter: blur(18px) saturate(126%);
-webkit-backdrop-filter: blur(18px) saturate(126%);
z-index: 12 !important;
font-weight: 700 !important;
color: #56372f !important;
transition: background-color var(--tp-duration) var(--tp-ease) !important;
min-width: 0 !important;
border-right: 1px solid rgba(239, 143, 126, 0.36);
}
.post-rich table:not(.main-flights) thead th:first-child {
position: sticky !important;
left: 0 !important;
z-index: 22 !important;
background: linear-gradient(180deg, rgba(255, 246, 243, 0.34) 0%, rgba(254, 239, 233, 0.28) 100%) !important;
backdrop-filter: blur(18px) saturate(126%);
-webkit-backdrop-filter: blur(18px) saturate(126%);
border-right: 1px solid rgba(239, 143, 126, 0.44);
}
.post-rich table:not(.main-flights) thead th:first-child:hover {
background: linear-gradient(180deg, rgba(255, 239, 233, 0.98) 0%, rgba(255, 229, 220, 0.96) 100%) !important;
color: var(--tp-brand-red-color) !important;
} .info-table-wr.scrolled table:not(.main-flights) td:first-child::after,
.info-table-wr.scrolled table:not(.main-flights) th:first-child::after {
content: "";
position: absolute;
top: 0;
right: -14px;
width: 14px;
height: 100%;
background: linear-gradient(to right, rgba(212, 143, 126, 0.28) 0%, rgba(212, 143, 126, 0) 100%);
z-index: 5;
pointer-events: none;
}
.post-rich table:not(.main-flights) thead tr:first-child th {
border-bottom: 1px solid rgba(239, 143, 126, 0.4) !important;
}
.post-rich table:not(.main-flights) td:last-child,
.post-rich table:not(.main-flights) th:last-child {
padding-right: 1rem !important;
}
.post-rich table:not(.main-flights) td:not(:first-child),
.post-rich table:not(.main-flights) th:not(:first-child) {
border-left: none !important;
}
.post-rich table:not(.main-flights) tbody td {
color: var(--tp-text-body) !important;
background: #fffdfc !important;
font-size: 0.95rem;
}
.post-rich table:not(.main-flights) tbody tr:nth-child(even) td {
background: rgba(255, 247, 244, 0.62) !important;
}
.post-rich table:not(.main-flights) tbody td:nth-child(3),
.post-rich table:not(.main-flights) tbody td:nth-child(4),
.post-rich table:not(.main-flights) tbody td:nth-child(7),
.post-rich table:not(.main-flights) tbody td:nth-child(8),
.post-rich table:not(.main-flights) tbody td:nth-child(9) {
font-variant-numeric: tabular-nums;
}
.post-rich table:not(.main-flights) tbody td:nth-child(5),
.post-rich table:not(.main-flights) tbody td:nth-child(6) {
color: #6c5953 !important;
line-height: 1.6 !important;
}
.post-rich table:not(.main-flights) tbody td *,
.post-rich table:not(.main-flights) thead th * {
max-width: 100%;
white-space: inherit;
overflow-wrap: normal;
word-break: normal;
} .post-rich table:not(.main-flights) th.mysh-col-dynamic,
.post-rich table:not(.main-flights) td.mysh-col-dynamic {
width: auto !important;
}
.post-rich table:not(.main-flights) th.mysh-col-dynamic {
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
hyphens: none;
text-wrap: pretty;
letter-spacing: 0.05em;
}
.post-rich table:not(.main-flights) th.mysh-col-metric,
.post-rich table:not(.main-flights) td.mysh-col-metric,
.post-rich table:not(.main-flights) th.mysh-col-action,
.post-rich table:not(.main-flights) td.mysh-col-action,
.post-rich table:not(.main-flights) th.mysh-col-compact,
.post-rich table:not(.main-flights) td.mysh-col-compact {
text-align: center !important;
}
.post-rich table:not(.main-flights) th.mysh-col-action,
.post-rich table:not(.main-flights) td.mysh-col-action {
padding-left: 0.46rem !important;
padding-right: 0.46rem !important;
}
.post-rich table:not(.main-flights) td.mysh-col-metric {
font-variant-numeric: tabular-nums;
white-space: normal !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
.post-rich table:not(.main-flights) td.mysh-col-wide,
.post-rich table:not(.main-flights) th.mysh-col-wide {
line-height: 1.62 !important;
}
.post-rich table:not(.main-flights) td.mysh-wrap-tight {
white-space: nowrap !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
.post-rich table:not(.main-flights) td.mysh-wrap-balanced {
white-space: normal !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
.post-rich table:not(.main-flights) td.mysh-wrap-relaxed {
white-space: normal !important;
overflow-wrap: break-word !important;
word-break: normal !important;
}
.post-rich table:not(.main-flights).mysh-no-scroll-assist th,
.post-rich table:not(.main-flights).mysh-no-scroll-assist td {
padding: 0.72rem 0.72rem !important;
}
.post-rich table:not(.main-flights).mysh-no-scroll-assist tbody td {
font-size: 0.92rem !important;
box-sizing: border-box;
}
.post-rich table:not(.main-flights).mysh-no-scroll-assist thead th {
font-size: 0.68rem !important;
letter-spacing: 0.055em !important;
line-height: 1.26 !important;
} .post-rich table:not(.main-flights).mysh-fit-no-scroll {
width: 100% !important;
table-layout: fixed !important;
}
.post-rich table:not(.main-flights).mysh-fit-no-scroll th,
.post-rich table:not(.main-flights).mysh-fit-no-scroll td {
overflow-wrap: anywhere !important;
word-break: break-word !important;
hyphens: auto;
padding: 0.6rem 0.55rem !important;
}
.post-rich table:not(.main-flights).mysh-fit-no-scroll tbody td {
font-size: 0.86rem !important;
line-height: 1.48 !important;
}
.post-rich table:not(.main-flights).mysh-fit-no-scroll thead th {
font-size: 0.72rem !important;
letter-spacing: 0.04em !important;
line-height: 1.22 !important;
}
.post-rich table:not(.main-flights).mysh-fit-no-scroll td:first-child {
overflow-wrap: anywhere !important;
word-break: break-word !important;
}
.post-rich table:not(.main-flights).mysh-has-compact-cols td.mysh-col-compact:first-child,
.post-rich table:not(.main-flights).mysh-has-compact-cols th.mysh-col-compact:first-child {
text-align: left !important;
}
.post-rich table:not(.main-flights).mysh-has-compact-cols td.mysh-col-key,
.post-rich table:not(.main-flights).mysh-has-compact-cols th.mysh-col-key {
text-align: left !important;
}
.post-rich table:not(.main-flights) td a,
.post-rich table:not(.main-flights) td code,
.post-rich table:not(.main-flights) td strong,
.post-rich table:not(.main-flights) td span,
.post-rich table:not(.main-flights) th span {
overflow-wrap: normal;
word-break: normal;
}
.post-rich table:not(.main-flights) tbody td:first-child,
.post-rich table:not(.main-flights) tbody td:first-child a,
.post-rich table:not(.main-flights) tbody td:first-child span,
.post-rich table:not(.main-flights) tbody td:first-child strong {
overflow-wrap: normal !important;
word-break: normal !important;
hyphens: none !important;
} .tablesorter-default {
margin: 0 !important;
}
.tablesorter-default td {
border-bottom: 1px solid rgba(239, 143, 126, 0.2);
padding: 4px;
vertical-align: top;
} .post-rich table:not(.main-flights) tbody tr {
transition: background-color var(--tp-duration) var(--tp-ease) !important;
}
.post-rich table:not(.main-flights) tbody tr:hover td {
background-color: rgba(255, 236, 229, 0.85) !important;
}
.post-rich table:not(.main-flights) tbody tr:hover td:first-child,
.post-rich table:not(.main-flights) td:first-child:hover {
background: linear-gradient(180deg, rgba(255, 235, 227, 0.98) 0%, rgba(255, 226, 216, 0.96) 100%) !important;
color: #4a302a !important;
} .post-rich table:not(.main-flights) ::selection {
background: rgba(239, 74, 55, 0.22);
color: #271a18;
}
.info-table-wr.scrolled {
box-shadow: var(--tp-shadow-md), inset 14px 0 16px -16px rgba(182, 109, 92, 0.42);
}
.table-search.ts-sticky + .info-table-wr .post-rich table:not(.main-flights) th,
.table-search.ts-sticky + .info-table-wr table:not(.main-flights) th {
top: 78px !important;
}
@media (max-width: 1180px) {
.post-rich table:not(.main-flights) th,
.post-rich table:not(.main-flights) td {
min-width: 0 !important;
max-width: none;
}
.post-rich table:not(.main-flights) td:first-child,
.post-rich table:not(.main-flights) thead th:first-child {
position: static !important;
min-width: 0 !important;
}
.info-table-wr.scrolled table:not(.main-flights) td:first-child::after,
.info-table-wr.scrolled table:not(.main-flights) th:first-child::after {
content: none;
}
}
@media (min-width: 768px) {
.post-rich table:not(.main-flights) .button-link {
min-width: 0;
border-radius: 999px;
padding: 0.44rem 0.74rem;
font-size: 0.92rem;
font-weight: 650;
color: var(--tp-brand-red-color) !important;
border-color: rgba(239, 143, 126, 0.72);
background: rgba(255, 253, 252, 0.95);
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
max-width: 100%;
box-sizing: border-box;
}
.post-rich table:not(.main-flights) td.mysh-col-action .button-link {
width: 100%;
max-width: 94px;
margin: 0;
}
.post-rich table:not(.main-flights) .button-link:hover {
background: rgba(255, 230, 221, 0.9);
border-color: rgba(239, 74, 55, 0.9);
color: #a83827 !important;
box-shadow: 0 8px 18px rgba(239, 143, 126, 0.28);
}
} .post-rich table:not(.main-flights) .button-link,
:where(.mysh-mobile-records, .mysh-mobile-records-overlay, .expanded-overlay, .card-wrapper, .down-wrapper) .button-link {
display: inline-block;
padding: 0.6rem;
text-decoration: none !important;
border: 1px solid var(--tp-border-rose);
border-radius: 10px;
font-weight: 600;
cursor: pointer;
color: var(--tp-brand-red-color) !important;
background: var(--tp-surface-rose);
margin: 0;
transition: all 0.2s ease-in-out;
min-width: 70px;
text-align: center;
line-height: normal;
}
.post-rich table:not(.main-flights) .button-link:hover,
:where(.mysh-mobile-records, .mysh-mobile-records-overlay, .expanded-overlay, .card-wrapper, .down-wrapper) .button-link:hover {
background-color: var(--tp-brand-red-color);
border-color: #fca8b3;
color: var(--tp-surface) !important;
box-shadow: var(--tp-shadow-red-glow);
} .table-search {
position: relative;
z-index: 105;
background: transparent;
padding: 0;
border-bottom: 0;
margin-bottom: var(--tp-sp-base);
}
.table-search.ts-sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
left: 0;
right: 0;
}
.table-search .mysh-mobile-records-overlay-search-shell,
.mysh-desktop-table-search-shell {
position: relative;
width: 100%;
max-width: 100%;
margin: 0;
border-radius: 1.25rem;
padding: 0.72rem;
}
.table-search .mysh-mobile-records-search,
.mysh-desktop-table-search-input {
min-height: 50px;
}
.table-search .mysh-mobile-records-overlay-search-meta,
.mysh-desktop-table-search-meta {
min-height: 1.1rem;
}
.table-search input[type="search"] {
width: 100%;
box-sizing: border-box;
} .table-search input[type="text"],
.table-search input[type="search"],
.mysh-mobile-records-search,
.mysh-mobile-records-overlay-search {
width: 100%;
box-sizing: border-box;
padding: 12px 16px;
border: 1px solid var(--coral-input-border);
border-radius: var(--tp-radius-lg);
outline: none;
font-size: var(--tp-sp-base);
color: var(--tp-text-dark);
background: var(--coral-input-bg);
box-shadow: var(--coral-input-shadow);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.table-search input[type="text"]:focus,
.table-search input[type="search"]:focus,
.mysh-mobile-records-search:focus,
.mysh-mobile-records-overlay-search:focus {
border-color: var(--tp-brand-red-color);
box-shadow: var(--coral-input-focus-shadow);
background: #fff;
}
.table-search input[type="text"]::placeholder,
.table-search input[type="search"]::placeholder,
.mysh-mobile-records-search::placeholder,
.mysh-mobile-records-overlay-search::placeholder {
color: var(--tp-text-placeholder);
} .card-details-row {
grid-column: 1 / -1;
background: var(--tp-surface);
border: 1px solid var(--tp-border);
padding: var(--tp-sp-xs);
border-radius: var(--tp-radius-lg);
margin-top: var(--tp-sp-md);
position: relative;
}
.card-details-table {
display: table;
width: 100%;
border-collapse: collapse;
}
.card-detail-item {
display: table-row;
}
.card-detail-label,
.card-detail-value {
display: table-cell;
padding: var(--tp-sp-xs);
vertical-align: middle;
transition: background-color var(--tp-duration), color var(--tp-duration);
font-size: 14px;
}
.card-detail-label {
background: var(--tp-surface-rose);
font-weight: 600;
border-right: 1px solid var(--tp-border);
width: 30%;
min-width: 30%;
overflow-wrap: break-word;
}
.card-detail-value {
background: var(--tp-surface);
color: var(--tp-text-primary);
width: 70%;
overflow-wrap: break-word;
}
.card-detail-item:hover .card-detail-label {
background: var(--tp-brand-red-color);
color: var(--tp-surface);
}
.card-detail-item:hover .card-detail-value {
background: var(--tp-surface-rose-hover);
} .mysh-mobile-records {
display: none;
}
.mysh-mobile-records-empty {
display: none;
padding: var(--tp-sp-base);
border: 1px dashed var(--tp-border);
border-radius: var(--tp-radius-md);
text-align: center;
color: var(--tp-text-muted);
background: var(--tp-surface);
}
.mysh-mobile-records-show-more {
display: none;
margin-top: var(--tp-sp-base);
width: 100%;
align-items: center;
justify-content: center;
padding: var(--tp-sp-sm) var(--tp-sp-base);
border-radius: var(--tp-radius-md);
border-color: var(--tp-border-rose);
background: var(--tp-surface-rose);
color: var(--tp-brand-red-color) !important;
box-sizing: border-box;
appearance: none;
-webkit-appearance: none;
} .mysh-mobile-records-actions,
.mysh-mobile-records-bottom-dock,
.mysh-mobile-records-overlay-search-shell,
.mysh-mobile-records-overlay-nav,
.mysh-desktop-table-search-shell {
position: relative;
--mysh-glass-shell-bg: var(--coral-shell);
--mysh-glass-shell-border: var(--coral-border);
--mysh-glass-shell-shadow: var(--coral-shadow);
--mysh-glass-shell-backdrop: var(--coral-backdrop);
border: 1px solid var(--mysh-glass-shell-border);
background: var(--mysh-glass-shell-bg);
box-shadow: var(--mysh-glass-shell-shadow);
backdrop-filter: var(--mysh-glass-shell-backdrop);
-webkit-backdrop-filter: var(--mysh-glass-shell-backdrop);
overflow: hidden;
isolation: auto;
}
.mysh-mobile-records-actions::before,
.mysh-mobile-records-bottom-dock::before,
.mysh-mobile-records-overlay-search-shell::before,
.mysh-mobile-records-overlay-nav::before,
.mysh-desktop-table-search-shell::before {
content: "";
position: absolute;
top: 0;
left: 14%;
width: 72%;
height: 1px;
background: none;
z-index: 0;
} .mysh-mobile-records-actions {
--mysh-glass-shell-bg: rgba(255, 237, 228, 0.2);
--mysh-glass-shell-border: rgba(255, 255, 255, 0.56);
--mysh-glass-shell-backdrop: blur(20px) saturate(134%);
display: none;
grid-template-columns: minmax(0, 1fr);
gap: 0.65rem;
margin-top: var(--tp-sp-base);
padding: var(--tp-sp-sm);
border-radius: 1.25rem;
}
.mysh-mobile-records-actions-label {
position: relative;
z-index: 1;
padding: 0 var(--tp-sp-3xs) 0.1rem;
font-size: 0.82rem;
line-height: 1.35;
color: var(--tp-text-secondary);
text-align: center;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58);
} .mysh-mobile-records-action-button,
.mysh-mobile-records-toolbar-collapse,
.mysh-mobile-records-toolbar-jump,
.mysh-mobile-records-overlay-empty,
.mysh-mobile-records-overlay-nav-button,
.mysh-mobile-records-overlay-nav-counter {
--mysh-glass-panel-bg: rgba(255, 255, 255, 0.9);
--mysh-glass-panel-border: var(--coral-border);
--mysh-glass-panel-shadow: var(--coral-panel-shadow);
--mysh-glass-panel-backdrop: var(--coral-backdrop-light);
background: var(--mysh-glass-panel-bg);
border-color: var(--mysh-glass-panel-border);
box-shadow: var(--mysh-glass-panel-shadow);
backdrop-filter: var(--mysh-glass-panel-backdrop);
-webkit-backdrop-filter: var(--mysh-glass-panel-backdrop);
}
.mysh-mobile-records-action-button {
display: inline-flex;
width: 100%;
margin: 0;
align-items: center;
justify-content: center;
min-height: var(--tp-touch-min);
padding: 0.8rem var(--tp-sp-base);
border-radius: 0.9rem;
border: 1px solid var(--coral-border);
color: var(--tp-text-body) !important;
box-sizing: border-box;
}
.mysh-mobile-records-show-more,
.mysh-mobile-records-show-all,
.mysh-mobile-records-collapse-all {
appearance: none;
-webkit-appearance: none;
box-sizing: border-box;
}
.mysh-mobile-records-show-all,
.mysh-mobile-records-collapse-all {
color: var(--tp-text-body) !important;
}
.mysh-mobile-records-collapse-all {
background: rgba(255, 255, 255, 0.9);
border-color: rgba(244, 210, 201, 0.72);
box-shadow: var(--coral-panel-shadow);
} .mysh-mobile-records-show-more:hover,
.mysh-mobile-records-show-more:focus-visible,
.mysh-mobile-records-show-all:hover,
.mysh-mobile-records-show-all:focus-visible,
.mysh-mobile-records-collapse-all:hover,
.mysh-mobile-records-collapse-all:focus-visible,
.mysh-mobile-records-action-button:hover,
.mysh-mobile-records-action-button:focus-visible {
background: var(--coral-soft);
border-color: var(--tp-border-rose-strong);
box-shadow: var(--coral-hover-shadow);
} .mysh-mobile-records-toolbar {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: var(--tp-sp-base);
position: sticky;
top: 0;
z-index: 20;
background: linear-gradient(
180deg,
rgba(250, 251, 252, 0.32) 0%,
rgba(250, 251, 252, 0.14) 72%,
rgba(250, 251, 252, 0) 100%
);
padding: var(--tp-sp-2xs) 0 0.9rem;
}
.mysh-mobile-records-toolbar-compact {
gap: 0;
}
.mysh-mobile-records-toolbar-search-shell {
flex: 0 0 auto;
width: 100%;
max-width: 100%;
padding-right: var(--tp-sp-sm);
} .mysh-mobile-records-bottom-dock {
position: sticky;
bottom: calc(env(safe-area-inset-bottom, 0px) + 0.8rem);
z-index: 24;
display: none;
align-items: center;
justify-content: center;
gap: 0.45rem;
width: fit-content;
max-width: calc(100% - 1rem);
margin: var(--tp-sp-base) auto 0;
padding: 0.42rem;
border-radius: var(--tp-radius-pill);
} .mysh-mobile-records-toolbar-collapse,
.mysh-mobile-records-toolbar-jump {
display: none;
position: relative;
z-index: 1;
width: auto;
min-width: 0;
min-height: 32px;
padding: 0.48rem 0.78rem;
border-radius: var(--tp-radius-pill);
font-size: 0.76rem;
line-height: 1;
font-weight: 650;
letter-spacing: 0.01em;
gap: 0.3rem;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.52);
}
.mysh-mobile-records-toolbar-collapse span[aria-hidden="true"],
.mysh-mobile-records-toolbar-jump span[aria-hidden="true"] {
font-size: 0.95rem;
line-height: 1;
font-weight: 700;
}
.mysh-mobile-records-toolbar-collapse {
color: var(--tp-text-secondary) !important;
}
.mysh-mobile-records-toolbar-jump {
color: #0f172a !important;
} .mysh-mobile-records-search {
padding: 13px 16px;
border-radius: 1.1rem;
}
.mysh-mobile-records-count {
min-height: 1.1rem;
} .mysh-mobile-records-list {
display: grid;
gap: 0.75rem;
}
.mysh-mobile-record {
display: block;
border: 1px solid var(--tp-border-warm);
border-radius: var(--tp-radius-md);
padding: 0.9rem;
background: var(--tp-surface);
box-shadow: var(--tp-shadow-sm);
cursor: pointer;
outline: none;
}
.mysh-mobile-record:focus-visible {
border-color: var(--tp-brand-red-color);
box-shadow: var(--tp-shadow-focus-ring);
}
.mysh-mobile-record-static {
cursor: default;
}
.mysh-mobile-record-static:focus-visible {
box-shadow: none;
}
.mysh-mobile-record-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.mysh-mobile-record-title-stack,
.mysh-mobile-records-sheet-title-stack {
display: grid;
gap: 0.42rem;
min-width: 0;
flex: 1 1 auto;
}
.mysh-mobile-record-title-stack-has-actions {
position: relative;
}
.mysh-mobile-record-title,
.mysh-mobile-records-sheet-title {
display: flex;
align-items: center;
gap: var(--tp-sp-3xs);
min-width: 0;
font-size: var(--tp-sp-base);
font-weight: 700;
color: var(--tp-text-heading);
line-height: 1.35;
padding-left: var(--tp-sp-2xs);
}
.mysh-mobile-record-title span,
.mysh-mobile-records-sheet-title span {
min-width: 0;
overflow-wrap: anywhere;
}
.mysh-mobile-record-title-badges {
display: flex;
flex-wrap: wrap;
gap: 0.38rem;
padding-left: var(--tp-sp-2xs);
}
.mysh-mobile-record-title-badge {
display: inline-flex;
align-items: center;
min-height: 1.7rem;
padding: 0.24rem 0.58rem;
border-radius: 999px;
border: 1px solid rgba(187, 58, 49, 0.18);
background: linear-gradient(180deg, rgba(255, 251, 249, 0.95) 0%, rgba(255, 244, 240, 0.92) 100%);
color: var(--tp-brand-red-color);
font-size: 0.72rem;
font-weight: 700;
line-height: 1;
letter-spacing: 0.01em;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}
.mysh-mobile-record-title-badge-more {
color: var(--tp-text-secondary);
}
.mysh-mobile-record-chevron {
flex-shrink: 0;
color: var(--tp-brand-red-color);
font-size: 1.35rem;
line-height: 1;
margin-top: 0.1rem;
}
.mysh-mobile-record-summary,
.mysh-mobile-records-sheet-meta {
display: flex;
flex-wrap: wrap;
gap: var(--tp-sp-2xs);
} .mysh-mobile-record-chip,
.mysh-mobile-records-chip {
display: inline-flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
padding: 0.55rem 0.65rem;
border-radius: var(--tp-radius-sm);
background: var(--tp-surface-rose2);
border: 1px solid var(--tp-border-rose);
color: var(--tp-text-primary);
flex: 1 1 calc(50% - 0.5rem);
max-width: 100%;
box-sizing: border-box;
}
.mysh-mobile-record-chip-label {
font-size: 0.72rem;
font-weight: 500;;
line-height: 1.5;
color: var(--tp-text-label);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.mysh-mobile-record-chip-value,
.mysh-mobile-records-chip {
font-size: 0.88rem;
line-height: 1.4;
overflow-wrap: anywhere;
}
.mysh-mobile-record-summary-stacked {
display: grid;
gap: var(--tp-sp-2xs);
}
.mysh-mobile-record-summary-stacked .mysh-mobile-record-chip {
width: 100%;
flex: 1 1 100%;
}
.mysh-mobile-record-summary-stacked .mysh-mobile-record-chip-action {
padding: 0.8rem 0.9rem;
border-radius: var(--tp-radius-md);
border: 1px solid var(--tp-border-rose);
background: var(--tp-surface-rose);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88),
0 10px 22px rgba(15, 23, 42, 0.04);
gap: 0.3rem;
}
.mysh-mobile-record-summary-stacked .mysh-mobile-record-chip-action .mysh-mobile-record-chip-label {
margin-bottom: 0.12rem;
}
.mysh-mobile-record-summary-stacked .mysh-mobile-record-chip-action .mysh-mobile-record-chip-value {
display: flex;
width: 100%;
}
.mysh-mobile-record-summary-stacked .mysh-mobile-record-chip-action-plain {
padding: 0;
border: none;
background: transparent;
box-shadow: none;
gap: 0;
}
.mysh-mobile-record-inline-action {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
margin: 0;
min-height: var(--tp-touch-min);
padding: 0.78rem var(--tp-sp-base);
border-radius: var(--tp-radius-sm);
border-color: var(--tp-border-rose);
background: var(--tp-surface-rose);
color: var(--tp-brand-red-color) !important;
text-align: center;
line-height: 1.2;
text-decoration: none !important;
box-sizing: border-box;
}
.mysh-mobile-record-inline-action:hover {
border-color: var(--tp-brand-red-color);
background: var(--tp-surface-rose-hover);
color: var(--tp-brand-red-color) !important;
} .mysh-mobile-record-footer {
margin-top: var(--tp-sp-sm);
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
.mysh-mobile-record-action {
color: var(--tp-brand-red-color);
font-weight: 600;
font-size: 0.9rem;
}
.mysh-mobile-record-footer-with-ticket {
justify-content: space-between;
}
.mysh-mobile-record-footer-details-only {
justify-content: flex-end;
}
.mysh-mobile-record-footer-details-only .mysh-mobile-record-details-link {
margin-left: auto;
text-align: right;
padding-right: var(--tp-sp-2xs);
}
.mysh-mobile-record-action-group {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
width: 100%;
}
.mysh-mobile-record-details-link {
display: inline-flex;
align-items: center;
justify-content: flex-start;
margin: 0;
padding: 0;
min-width: 0;
border: none;
border-radius: 0;
background: transparent;
color: var(--tp-brand-red-color) !important;
font-size: 0.82rem;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
box-shadow: none;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
padding-left: var(--tp-sp-2xs);
}
.mysh-mobile-record-details-link:hover,
.mysh-mobile-record-details-link:focus-visible {
background: transparent;
color: var(--tp-brand-red-color) !important;
text-decoration: none;
box-shadow: none;
outline: none;
} .mysh-mobile-record-details-button,
.mysh-mobile-record-ticket-button {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
min-width: 84px;
min-height: var(--tp-touch-min);
padding: 0.52rem 0.9rem;
border: 1px solid var(--tp-border-medium);
border-radius: var(--tp-radius-xs);
font-size: 0.88rem;
font-weight: 600;
line-height: 1.2;
font-family: Montserrat, sans-serif;
overflow-wrap: anywhere;
text-decoration: none !important;
cursor: pointer;
text-align: center;
box-shadow: none;
box-sizing: border-box;
appearance: none;
-webkit-appearance: none;
transition: none !important;
animation: none !important;
background-attachment: scroll !important;
}
.mysh-mobile-record-details-button {
width: auto;
text-align: center;
}
.mysh-mobile-record-details-button:hover {
background: var(--tp-brand-red-color);
color: var(--tp-surface) !important;
}
.mysh-mobile-record-ticket-button {
margin-left: auto;
margin-right: 0;
border-color: var(--tp-border-rose);
color: var(--tp-brand-red-color) !important;
background-color: rgba(254, 247, 246, 0.25);
padding-top: calc(0.52rem + 1px);
padding-bottom: calc(0.52rem - 1px);
}
.mysh-mobile-record-ticket-button-compact {
width: 100%;
min-width: 0;
margin-left: 0;
}
.mysh-mobile-record-ticket-button:hover {
border-color: var(--tp-brand-red-color);
background: var(--tp-surface-rose-hover);
color: var(--tp-brand-red-color) !important;
} .mysh-mobile-records-overlay-content {
align-items: stretch;
justify-content: flex-start;
min-height: 100%;
padding-top: var(--tp-sp-base);
padding-bottom: var(--tp-sp-lg);
gap: 0.4rem;
width: 100%;
box-sizing: border-box;
z-index: 1;
overflow-x: hidden;
}
.mysh-mobile-records-overlay-topbar {
position: sticky;
top: 0;
display: block;
align-self: stretch;
flex: 0 0 auto;
min-height: 4.55rem;
width: 100%;
padding: 0 0 var(--tp-sp-2xs);
z-index: 5;
background: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-sizing: border-box;
}
.mysh-mobile-records-overlay {
background: var(--tp-surface);
isolation: isolate;
overflow-x: hidden;
overscroll-behavior: contain;
}
.mysh-mobile-records-overlay::before,
.mysh-mobile-records-overlay::after {
display: none;
}
.mysh-mobile-records-sheet-header {
display: grid;
gap: var(--tp-sp-3xs);
padding: var(--tp-sp-2xs) 0;
width: 100%;
align-self: stretch;
justify-items: stretch;
}
.mysh-mobile-records-sheet-title,
.mysh-mobile-records-sheet-meta,
.mysh-mobile-record-summary {
width: 100%;
align-self: stretch;
box-sizing: border-box;
}
.mysh-mobile-records-sheet-title span {
flex: 1 1 auto;
}
.mysh-mobile-records-sheet-meta .mysh-mobile-record-chip {
flex: 1 1 calc(50% - 0.5rem);
max-width: 100%;
}
.mysh-mobile-records-sheet-details {
display: grid;
gap: var(--tp-sp-sm);
margin-top: 0;
padding: 0;
border: none;
background: transparent;
box-shadow: none;
}
.mysh-mobile-records-sheet-grid {
display: grid;
gap: 0.4rem;
width: 100%;
}
.mysh-mobile-record-footer-overlay {
width: 100%;
margin-top: 0.2rem;
justify-content: stretch;
align-items: stretch;
}
.mysh-mobile-records-sheet-actions {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.55rem;
width: 100%;
}
.mysh-mobile-records-detail-card {
width: 100%;
flex: 1 1 100%;
padding: 0.8rem 0.9rem;
border-radius: var(--tp-radius-md);
border: 1px solid var(--tp-border-rose);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88),
0 10px 22px rgba(15, 23, 42, 0.04);
}
.mysh-mobile-records-detail-card .mysh-mobile-record-chip-label {
margin-bottom: 0.12rem;
}
.mysh-mobile-records-detail-card .mysh-mobile-record-chip-value {
font-size: 0.88rem;
line-height: 1.38;
color: var(--tp-text-strong);
}
.mysh-mobile-record-chip-value a {
color: var(--tp-brand-red-color);
}
.mysh-mobile-records-flag-value {
display: inline-flex;
align-items: center;
gap: 0;
max-width: 100%;
}
.mysh-mobile-records-flag-value-text {
min-width: 0;
}
.mysh-mobile-records-sheet-action {
display: inline-flex;
align-items: center;
width: 100%;
min-height: 48px;
justify-content: center;
margin: 0;
padding: 0.78rem var(--tp-sp-base);
padding-top: calc(0.78rem + 1px);
padding-bottom: calc(0.78rem - 1px);
border-radius: 0.95rem;
font-size: 1.11rem;
line-height: 1.3;
text-align: center;
}
.mysh-mobile-records-sheet-action-compact {
min-height: 46px;
padding: 0.74rem 0.9rem;
padding-top: calc(0.74rem + 1px);
padding-bottom: calc(0.74rem - 1px);
border-radius: 0.88rem;
font-size: 0.94rem;
}
.mysh-mobile-records-sheet-action-primary {
border-color: rgba(187, 58, 49, 0.24);
background: linear-gradient(180deg, rgba(255, 250, 249, 0.98) 0%, rgba(254, 245, 243, 0.94) 100%);
}
@media (min-width: 360px) {
.mysh-mobile-records-sheet-actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mysh-mobile-records-sheet-actions > :only-child {
grid-column: 1 / -1;
}
} .mysh-mobile-records-overlay-search-shell {
display: grid;
gap: 0.55rem;
min-width: 0;
width: 100%;
max-width: 100%;
margin-top: 0;
border-radius: 1.35rem;
opacity: 1;
transform: none;
pointer-events: auto;
z-index: 1;
padding: 0.8rem 4.8rem 0.75rem var(--tp-sp-sm);
--mysh-glass-shell-bg: rgba(255, 244, 238, 0.28);
--mysh-glass-shell-border: rgba(255, 255, 255, 0.58);
--mysh-glass-shell-shadow:
0 14px 30px rgba(96, 57, 49, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.48),
inset 0 0 0 1px rgba(255, 255, 255, 0.18);
--mysh-glass-shell-backdrop: blur(19px) saturate(136%);
}
.mysh-mobile-records-overlay-search-shell.mysh-mobile-records-toolbar-search-shell {
padding: 0.8rem var(--tp-sp-sm) 0.75rem;
}
.mysh-mobile-records-overlay-search-shell::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(
circle at 12% 12%,
rgba(234, 242, 250, 0.34) 0%,
rgba(234, 242, 250, 0.12) 18%,
rgba(232, 239, 248, 0) 40%
),
linear-gradient(
135deg,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 250, 247, 0.04) 38%,
rgba(224, 236, 249, 0.14) 100%
);
pointer-events: none;
z-index: 0;
} .mysh-mobile-records-overlay-search {
margin: 0;
position: relative;
z-index: 1;
background: rgba(255, 255, 255, 0.64);
border-color: rgba(255, 255, 255, 0.62);
backdrop-filter: blur(8px) saturate(120%);
-webkit-backdrop-filter: blur(8px) saturate(120%);
}
.mysh-mobile-records-overlay-search-meta {
font-size: 0.82rem;
line-height: 1.3;
color: rgba(37, 43, 51, 0.88);
padding: 0 0.2rem;
position: relative;
z-index: 1;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.52);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
.mysh-mobile-records-actions,
.mysh-mobile-records-bottom-dock,
.mysh-mobile-records-overlay-search-shell,
.mysh-mobile-records-overlay-nav,
.mysh-desktop-table-search-shell {
background: rgba(255, 244, 238, 0.92);
}
.mysh-mobile-records-overlay-search {
background: rgba(255, 255, 255, 0.94);
}
}
.mysh-mobile-records-overlay-empty {
display: none;
width: 100%;
padding: var(--tp-sp-base) 1.1rem;
border-radius: 1.15rem;
border: 1px solid var(--coral-border);
color: var(--tp-text-neutral);
text-align: center;
box-sizing: border-box;
} .mysh-mobile-records-overlay-nav {
--mysh-glass-shell-bg: rgba(255, 244, 238, 0.28);
--mysh-glass-shell-border: rgba(255, 255, 255, 0.62);
--mysh-glass-shell-backdrop: blur(20px) saturate(136%);
--mysh-glass-panel-bg: rgba(255, 255, 255, 0.58);
--mysh-glass-panel-border: rgba(255, 255, 255, 0.72);
--mysh-glass-panel-shadow:
0 10px 24px rgba(96, 57, 49, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
--mysh-glass-panel-backdrop: blur(12px) saturate(126%);
position: sticky;
bottom: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
gap: 0.65rem;
align-items: center;
margin-top: auto;
padding: var(--tp-sp-sm);
border-radius: 1.25rem;
}
.mysh-mobile-records-overlay-nav-button {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--tp-sp-3xs);
margin: 0;
min-height: var(--tp-touch-min);
padding: 0.75rem 0.95rem;
padding-top: calc(0.75rem + 1px);
padding-bottom: calc(0.75rem - 1px);
border-radius: var(--tp-radius-md);
border: 1px solid var(--coral-border);
color: var(--tp-text-dark) !important;
font-weight: 700;
line-height: 1;
text-align: center;
vertical-align: middle;
box-sizing: border-box;
text-shadow: none;
overflow: visible;
}
.mysh-mobile-records-overlay-nav-button::before {
content: none;
}
.mysh-mobile-records-overlay-nav-button > span,
.mysh-mobile-records-sheet-action > span,
.mysh-mobile-records-overlay .expanded-overlay-close > span {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.mysh-mobile-records-overlay-nav-button[disabled] {
opacity: 0.52;
cursor: default;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84),
0 8px 18px rgba(15, 23, 42, 0.08);
}
.mysh-mobile-records-actions .mysh-mobile-records-overlay-nav-button {
width: 100%;
min-width: 0;
}
.mysh-mobile-records-overlay-nav-counter {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--tp-touch-min);
padding: var(--tp-sp-2xs) 0.95rem;
border-radius: var(--tp-radius-pill);
border: 1px solid var(--coral-border);
color: var(--tp-text-secondary);
font-size: 0.84rem;
font-weight: 700;
white-space: nowrap;
position: relative;
z-index: 1;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58);
} .expanded-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: auto;
height: auto;
background: var(--tp-surface);
z-index: 9999;
opacity: 0;
transform: translateY(100%);
transition: opacity var(--tp-duration) var(--tp-ease),
transform var(--tp-duration) var(--tp-ease);
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
backdrop-filter: blur(18px) saturate(130%);
-webkit-backdrop-filter: blur(18px) saturate(130%);
}
.expanded-overlay.show {
opacity: 1;
transform: translateY(0);
}
.expanded-overlay-content {
position: relative;
padding: var(--tp-sp-base);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100%;
box-sizing: border-box;
}
.expanded-overlay-content.mysh-mobile-records-overlay-content {
justify-content: flex-start;
align-items: stretch;
width: 100%;
}
.expanded-overlay-content.mysh-mobile-records-overlay-content .mysh-mobile-records-sheet-details,
.expanded-overlay-content.mysh-mobile-records-overlay-content .mysh-mobile-records-sheet-grid,
.expanded-overlay-content.mysh-mobile-records-overlay-content .mysh-mobile-records-detail-card {
width: 100%;
max-width: 100%;
align-self: stretch;
}
.expanded-overlay-content.mysh-mobile-records-overlay-content .mysh-mobile-records-detail-card {
flex: 1 1 100%;
} .expanded-overlay-close {
position: absolute;
top: var(--tp-sp-xs);
right: var(--tp-sp-xs);
border-color: var(--coral-close-border);
background: var(--coral-close-bg);
color: #fff7f5;
padding: var(--tp-sp-xs) var(--tp-sp-base);
cursor: pointer;
border-radius: 0.95rem;
z-index: 10000;
box-shadow: var(--coral-close-shadow);
backdrop-filter: blur(16px) saturate(116%);
-webkit-backdrop-filter: blur(16px) saturate(116%);
}
.mysh-mobile-records-overlay .expanded-overlay-close {
top: 0.72rem;
right: 0.72rem;
width: 3.3rem;
height: 3.3rem;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 1.05rem;
border: 1px solid var(--coral-close-border);
background: var(--coral-close-bg);
color: #fff7f5;
font-size: 1.1rem;
line-height: 1;
box-shadow: var(--coral-close-shadow);
backdrop-filter: blur(16px) saturate(116%);
-webkit-backdrop-filter: blur(16px) saturate(116%);
overflow: hidden;
z-index: 2;
}
.mysh-mobile-records-overlay .expanded-overlay-close::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.18) 0%,
rgba(255, 224, 216, 0.08) 42%,
rgba(173, 66, 51, 0.04) 100%
);
pointer-events: none;
}
.mysh-mobile-records-overlay .expanded-overlay-close:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22),
0 18px 38px rgba(15, 23, 42, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.24),
inset 0 -10px 22px rgba(15, 23, 42, 0.16);
} .mysh-mobile-records-overlay .mysh-mobile-records-overlay-nav-button {
line-height: 1.15;
}
.mysh-mobile-records-overlay .mysh-mobile-record-ticket-button:hover,
.mysh-mobile-records-overlay .mysh-mobile-record-ticket-button:focus-visible,
.mysh-mobile-records-overlay .mysh-mobile-records-sheet-action:hover,
.mysh-mobile-records-overlay .mysh-mobile-records-sheet-action:focus-visible {
background: var(--tp-surface-rose-hover);
box-shadow: none;
text-shadow: none;
}
.mysh-mobile-records-overlay .mysh-mobile-records-overlay-nav-button:hover,
.mysh-mobile-records-overlay .mysh-mobile-records-overlay-nav-button:focus-visible {
background: var(--coral-soft);
border-color: var(--tp-border-rose-strong);
box-shadow: var(--coral-hover-shadow);
text-shadow: none;
}  @media (max-width: 768px) {
.table-scroll-btn {
display: none !important;
}
}
html.mysh-viewport-mobile .table-scroll-btn {
display: none !important;
}
@media (min-width: 768px) {
.mysh-mobile-records {
display: none !important;
}
.mysh-desktop-table-context {
display: block !important;
}
.post-rich table.mysh-mobile-records-source {
display: table !important;
}
.post-rich table.mysh-mobile-records-source thead {
display: table-header-group !important;
}
.post-rich table.mysh-mobile-records-source tbody {
display: table-row-group !important;
}
.post-rich table.mysh-mobile-records-source tr {
display: table-row !important;
}
.post-rich table.mysh-mobile-records-source th,
.post-rich table.mysh-mobile-records-source td {
display: table-cell !important;
}
}
@media (max-width: 767px) {
.mysh-mobile-records {
display: block;
}
.mysh-desktop-table-context {
display: none !important;
}
.post-rich table.mysh-mobile-records-source,
.post-rich table.mysh-mobile-records-source thead,
.post-rich table.mysh-mobile-records-source tbody,
.post-rich table.mysh-mobile-records-source th,
.post-rich table.mysh-mobile-records-source td,
.post-rich table.mysh-mobile-records-source tr {
display: none !important;
}
}
@media (max-width: 767px) {
.post-rich table:not(.mysh-mobile-records-source) {
display: block;
width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
} @media (max-width: 767px) { .card-detail-label {
width: 50% !important;
min-width: 50% !important;
padding-right: 10px;
}
.card-detail-value {
width: 50% !important;
} .mysh-mobile-records {
display: block;
margin: var(--tp-sp-base) 0 1.25rem;
} .button-link,
.mysh-mobile-record,
.mysh-mobile-records-show-more,
.mysh-mobile-record-inline-action,
.mysh-mobile-record-details-button,
.mysh-mobile-record-ticket-button,
.mysh-mobile-records-search,
.mysh-mobile-records-action-button,
.mysh-mobile-records-overlay-nav-button,
.expanded-overlay,
.expanded-overlay-close {
transition: none !important;
animation: none !important;
} .button-link:hover,
.mysh-mobile-record-inline-action:hover,
.mysh-mobile-record-details-button:hover,
.mysh-mobile-record-ticket-button:hover,
.mysh-mobile-records-show-more:hover {
box-shadow: none !important;
transform: none !important;
} .button-link:hover {
background: inherit;
color: inherit !important;
border-color: inherit;
}
.mysh-mobile-record-inline-action:hover {
background: var(--tp-surface-rose);
color: var(--tp-brand-red-color) !important;
border-color: var(--tp-border-rose);
}
.mysh-mobile-record-details-button:hover {
background: transparent;
color: var(--tp-brand-red-color) !important;
}
.mysh-mobile-records-show-more:hover,
.mysh-mobile-records-show-all:hover,
.mysh-mobile-records-collapse-all:hover,
.mysh-mobile-records-overlay-nav-button:hover {
background: var(--coral-soft);
color: var(--tp-text-dark) !important;
border-color: var(--tp-border-rose-strong);
}
.mysh-mobile-record-ticket-button:hover,
.mysh-mobile-record-ticket-button:focus-visible {
background: var(--tp-surface-rose-hover);
color: var(--tp-brand-red-color) !important;
border-color: var(--tp-brand-red-color);
}
.mysh-mobile-record:focus-visible,
.mysh-mobile-records-show-more:focus-visible,
.mysh-mobile-records-show-all:focus-visible,
.mysh-mobile-records-collapse-all:focus-visible,
.mysh-mobile-records-search:focus {
box-shadow: none;
} .mysh-desktop-table-context {
display: none !important;
}
.post-rich table.mysh-mobile-records-source,
.post-rich table.mysh-mobile-records-source thead,
.post-rich table.mysh-mobile-records-source tbody,
.post-rich table.mysh-mobile-records-source th,
.post-rich table.mysh-mobile-records-source td,
.post-rich table.mysh-mobile-records-source tr {
display: none !important;
}
.expanded-overlay-content {
align-items: stretch;
}
.expanded-overlay-content table {
margin: 0 var(--tp-sp-base);
}
}.down-wrapper {
position: relative;
margin: 1.39rem 0;
width: 100%;
}
.down-sticky-header {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 105;
background: #fff;
width: 100%;
margin-bottom: 0;
padding-top: 10px;
padding-bottom: 5px;
border-bottom: 1px solid transparent;
}
.down-search-group {
position: relative;
width: 100%;
}
.down-input {
width: 100%;
padding: 12px 16px;
border: 1px solid #ddd;
border-radius: 1.39rem;
font-size: 1rem;
box-sizing: border-box;
outline: none;
transition: border-color 0.3s, box-shadow 0.3s;
}
.down-input:focus {
border-color: #F35D4D;
box-shadow: 0 0 5px rgba(243, 93, 77, 0.3);
}
.down-suggestions {
display: none;
position: absolute;
top: calc(100% + 5px);
left: 0;
width: 100%;
max-height: 300px;
overflow-y: auto;
background: #fff;
border: 1px solid #ddd;
border-radius: 1rem;
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
z-index: 9999;
}
.down-suggestions::-webkit-scrollbar {
width: 6px;
}
.down-suggestions::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 3px;
}
.down-suggestion-item {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
cursor: pointer;
transition: background-color 0.2s;
border-bottom: 1px solid #f0f0f0;
}
.down-suggestion-item:last-child {
border-bottom: none;
}
.down-suggestion-item:hover {
background-color: #fef7f6;
}
.down-result {
margin-top: 1rem;
}
.down-result .card-details-row {
margin-top: 0;
}
.down-popular-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
}
.down-tag {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.45rem 0.85rem;
border-radius: 999px;
background: #fef7f6;
color: #F35D4D;
border: 1px solid #f3d4cf;
cursor: pointer;
font-size: 0.92rem;
line-height: 1.1;
transition: all 0.2s ease;
}
.down-tag:hover {
background: #fde8e6;
border-color: #F35D4D;
}
.down-tag-plus {
width: 2rem;
min-width: 2rem;
padding: 0;
font-size: 1.1rem;
font-weight: 700;
}
.down-tag-plus:hover {
background: #F35D4D;
color: #fff;
}
.down-wrapper .details-more {
display: block;
margin-top: 10px;
text-align: right;
border: 1px solid var(--tp-brand-red-color);
border-radius: var(--tp-sp-xs);
color: var(--tp-brand-red-color) !important;
background: transparent;
}
.down-wrapper .details-more:hover {
background: var(--tp-brand-red-color);
color: var(--tp-surface) !important;
}
@media (max-width: 600px) {
.down-wrapper .details-more {
width: 100%;
text-align: center;
}
}
@media (max-width: 767px) {
.down-wrapper .details-more {
transition: none !important;
animation: none !important;
}
.down-wrapper .details-more:hover {
box-shadow: none !important;
transform: none !important;
background: inherit;
color: inherit !important;
border-color: inherit;
}
}