/* IcePro floating tools: one continuous rail with a premium membership lead. */

.float-right.round:has(> .icepro-membership-shell) {
    box-sizing: border-box;
    width: 54px !important;
    padding: 0 !important;
    overflow: visible;
    border: 0;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 4px 23px rgba(0, 0, 0, 0.08) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Replaced native entries stay out of the rebuilt rail. */
.float-right:has(> .icepro-membership-shell) > .more-btn,
.float-right:has(> .icepro-membership-shell) > a.service-wechat,
.float-right:has(> .icepro-membership-shell) > .qrcode-btn,
.float-right:has(> .icepro-membership-shell) > .icepro-random-resource {
    display: none !important;
}

.float-right.round:has(> .icepro-membership-shell) > .icepro-membership-shell {
    position: relative;
    box-sizing: border-box;
    width: 54px !important;
    height: 40px;
    margin: 0 !important;
}

/* Keep this selector stronger than Zibll's late-loaded .float-btn rules. */
.float-right.round:has(> .icepro-membership-shell) > .icepro-membership-shell > .icepro-primary-float {
    position: relative;
    display: flex !important;
    box-sizing: border-box;
    width: 54px !important;
    height: 40px !important;
    min-height: 40px !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible;
    color: #6b4712 !important;
    border: 0 !important;
    border-radius: 8px 8px 0 0 !important;
    background:
        radial-gradient(circle at 78% 14%, rgba(255, 255, 255, 0.7) 0 2px, transparent 3px),
        linear-gradient(124deg, #fff6dc -16%, #efc276 52%, #c58b31 108%) !important;
    box-shadow: 0 0 10px 5px rgba(222, 170, 90, 0.34) !important;
    text-decoration: none;
    text-shadow: none;
    transform: none !important;
    transition: filter 0.18s ease, color 0.18s ease;
}

.float-right.round:has(> .icepro-membership-shell) > .icepro-membership-shell > .icepro-primary-float:hover,
.float-right.round:has(> .icepro-membership-shell) > .icepro-membership-shell > .icepro-primary-float:focus {
    color: #6b4712 !important;
    filter: brightness(1.025) saturate(1.04);
}

.icepro-membership-icon {
    position: absolute;
    top: -22px;
    left: 50%;
    z-index: 2;
    display: block;
    width: 64px !important;
    height: 32px !important;
    margin: 0 !important;
    overflow: visible;
    transform: translateX(-50%);
    filter:
        drop-shadow(0 2px 1px rgba(255, 255, 255, 0.42))
        drop-shadow(0 3px 4px rgba(95, 60, 8, 0.18));
}

.icepro-membership-icon path {
    fill: #855c02;
}

.icepro-primary-label {
    position: absolute;
    top: 17px;
    left: 50%;
    z-index: 1;
    margin: 0;
    color: #6b4712 !important;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.08;
    white-space: nowrap;
    transform: translateX(-50%);
}

/* The membership panel is a horizontal extension of the gold rail item. */
.icepro-membership-card {
    position: absolute;
    top: 50%;
    right: calc(100% + 10px);
    z-index: 8;
    display: block;
    box-sizing: border-box;
    width: 278px;
    height: 217px;
    padding: 0;
    overflow: visible;
    color: #35302a;
    text-align: left;
    white-space: normal;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    border: 0;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 1px 9px #d6d3d3;
    transform: translate(0, -50%);
    animation: none !important;
    transition: none !important;
}

/* Transparent hover bridge across the ten-pixel gap. */
.icepro-membership-card::before {
    content: "";
    position: absolute;
    top: calc(50% - 43px);
    right: -12px;
    width: 12px;
    height: 86px;
}

.icepro-membership-card::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -6px;
    width: 12px;
    height: 12px;
    background: #fff;
    box-shadow: 2px -2px 3px rgba(108, 86, 51, 0.06);
    transform: translateY(-50%) rotate(45deg);
}

.icepro-membership-shell:hover .icepro-membership-card,
.icepro-membership-shell:focus-within .icepro-membership-card {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translate(0, -50%);
}

.icepro-membership-card__header {
    position: relative;
    display: flex;
    box-sizing: border-box;
    height: 60px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 9px 14px;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
    background:
        linear-gradient(90deg, transparent, rgba(255, 225, 168, 0.72), transparent) center 13px / 74% 1px no-repeat,
        linear-gradient(90deg, transparent, rgba(255, 225, 168, 0.42), transparent) center calc(100% - 13px) / 58% 1px no-repeat,
        linear-gradient(135deg, #6d4814, #9e6d25 55%, #6f4812);
}

.icepro-membership-card__header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 88% 18%, rgba(255, 235, 188, 0.35), transparent 34%);
    pointer-events: none;
}

.icepro-membership-card__eyebrow {
    position: relative;
    z-index: 1;
    color: #f8d999 !important;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.13em;
}

.icepro-membership-card__header strong {
    position: relative;
    z-index: 1;
    color: #fff8e8;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.1;
}

.icepro-membership-card__benefits {
    display: grid;
    box-sizing: border-box;
    height: 92px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, 1fr);
    gap: 4px 8px;
    margin: 10px 10px 5px;
    padding: 10px 12px;
    background: #fffcf8;
}

.icepro-membership-card__benefits > span {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    padding: 0;
    color: #3f3a34 !important;
    font-size: 12px;
    line-height: 1.25;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.icepro-membership-card__benefits i {
    width: 15px;
    flex: 0 0 15px;
    color: #bc812d;
    font-size: 13px;
    text-align: center;
}

.icepro-membership-card__cta {
    display: flex;
    box-sizing: border-box;
    width: 250px;
    height: 32px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 auto 10px;
    color: #fff !important;
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
    border-radius: 3px;
    background: linear-gradient(131deg, #ffcc85, #b67418 100%);
}

/* Secondary actions share one surface; only the rail owns the shape. */
.float-right.round:has(> .icepro-membership-shell) > .icepro-labeled-float,
.float-right.round:has(> .icepro-membership-shell) > .icepro-more-shell,
.float-right.round:has(> .icepro-membership-shell) > .ontop {
    position: relative;
    box-sizing: border-box;
    width: 54px !important;
    min-height: 62px !important;
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(67, 63, 57, 0.065) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.float-right.round:has(> .icepro-membership-shell) > .icepro-labeled-float,
.float-right.round:has(> .icepro-membership-shell) > .icepro-more-shell > .icepro-more-toggle,
.float-right.round:has(> .icepro-membership-shell) > .ontop {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 0 !important;
    color: #4e5358 !important;
    text-shadow: none;
    transition: color 0.16s ease, background-color 0.16s ease;
}

.float-right.round:has(> .icepro-membership-shell) > .icepro-more-shell > .icepro-more-toggle {
    box-sizing: border-box;
    width: 54px !important;
    height: 61px !important;
    min-height: 61px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.float-right.round:has(> .icepro-membership-shell) > .icepro-labeled-float:hover,
.float-right.round:has(> .icepro-membership-shell) > .icepro-labeled-float:focus,
.float-right.round:has(> .icepro-membership-shell) > .icepro-more-shell > .icepro-more-toggle:hover,
.float-right.round:has(> .icepro-membership-shell) > .icepro-more-shell > .icepro-more-toggle:focus,
.float-right.round:has(> .icepro-membership-shell) > .ontop:hover,
.float-right.round:has(> .icepro-membership-shell) > .ontop:focus {
    color: #a66d1c !important;
    background: rgba(196, 138, 50, 0.055) !important;
}

.float-right:has(> .icepro-membership-shell) .icepro-float-icon,
.float-right:has(> .icepro-membership-shell) .icepro-labeled-float > i,
.float-right:has(> .icepro-membership-shell) .icepro-labeled-float > svg,
.float-right:has(> .icepro-membership-shell) .icepro-top-float > i {
    display: block;
    flex: 0 0 auto;
    margin: 0 !important;
    color: currentColor !important;
    font-size: 22px !important;
    line-height: 1 !important;
}

.icepro-float-label {
    display: block;
    color: currentColor !important;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.12;
    white-space: nowrap;
}

/* Match the reference behavior: TOP joins the rail only when Zibll shows it. */
.float-right.round:has(> .icepro-membership-shell) > .ontop:not(.show) {
    display: none !important;
}

.float-right.round:has(> .icepro-membership-shell) > .ontop.show {
    display: flex !important;
    border-radius: 0 0 8px 8px !important;
}

.float-right.round:has(> .icepro-membership-shell):has(> .ontop:not(.show)) > .icepro-more-shell,
.float-right.round:has(> .icepro-membership-shell):has(> .ontop:not(.show)) > .icepro-more-shell > .icepro-more-toggle {
    border-radius: 0 0 8px 8px !important;
}

/* Small native-style labels for direct secondary actions. */
.float-right:has(> .icepro-membership-shell) .icepro-float-banner {
    position: absolute;
    top: 50%;
    right: calc(100% + 10px);
    left: auto;
    z-index: 7;
    display: flex !important;
    width: max-content;
    max-width: calc(100vw - 84px);
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 8px 10px;
    color: var(--main-color);
    font-size: 12px;
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    border: 1px solid rgba(87, 94, 116, 0.08);
    border-radius: 5px;
    background: var(--main-bg-color);
    box-shadow: 0 4px 18px rgba(38, 43, 61, 0.12);
    transform: translate(6px, -50%);
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
}

.float-right:has(> .icepro-membership-shell) .hover-show:hover > .icepro-float-banner,
.float-right:has(> .icepro-membership-shell) .hover-show:focus > .icepro-float-banner,
.float-right:has(> .icepro-membership-shell) .hover-show:focus-within > .icepro-float-banner {
    visibility: visible;
    opacity: 1;
    transform: translate(0, -50%);
}

.icepro-float-banner strong {
    color: var(--main-color);
    font-size: 12px;
    font-weight: 650;
}

.icepro-float-banner span {
    color: var(--muted-color);
    font-size: 11px;
    font-weight: 400;
}

/* More uses the same quiet, rectangular popup language as the member panel. */
.icepro-more-panel {
    position: absolute;
    top: 50%;
    right: calc(100% + 10px);
    z-index: 8;
    box-sizing: border-box;
    width: 238px;
    padding: 10px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    border: 0;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.99);
    box-shadow: 0 1px 9px rgba(91, 86, 80, 0.24);
    transform: translate(7px, -50%);
    transition: opacity 0.16s ease, visibility 0.16s ease, transform 0.16s ease;
}

.icepro-more-panel::before {
    content: "";
    position: absolute;
    top: calc(50% - 35px);
    right: -12px;
    width: 12px;
    height: 70px;
}

.icepro-more-shell.is-open .icepro-more-panel,
.icepro-more-shell:hover .icepro-more-panel,
.icepro-more-shell:focus-within .icepro-more-panel {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translate(0, -50%);
}

.icepro-more-action,
.icepro-more-qr {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 9px;
    color: #4c5564 !important;
    text-align: left;
    text-decoration: none !important;
}

.icepro-more-action:hover,
.icepro-more-action:focus {
    color: #9d681c !important;
    background: #fffcf8;
}

.icepro-more-action > i:first-child {
    color: #ae7626;
    font-size: 18px;
    text-align: center;
}

.icepro-more-action > i:last-child {
    color: #a4aab5;
}

.icepro-more-action span,
.icepro-more-qr > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.icepro-more-action strong,
.icepro-more-qr strong {
    color: #444d5c;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.icepro-more-action small,
.icepro-more-qr small {
    color: #9298a5;
    font-size: 10px;
    line-height: 1.2;
}

.icepro-more-qr {
    grid-template-columns: 92px minmax(0, 1fr);
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid rgba(87, 94, 116, 0.1);
}

.icepro-more-qr .qrcode,
.icepro-more-qr .qrcode canvas,
.icepro-more-qr .qrcode img {
    width: 92px !important;
    height: 92px !important;
}

.float-right:has(> .icepro-membership-shell) :is(a, button):focus-visible {
    outline: 2px solid rgba(177, 118, 34, 0.78);
    outline-offset: -2px;
}

body.dark-theme .float-right.round:has(> .icepro-membership-shell) {
    background: rgba(31, 32, 39, 0.98) !important;
    box-shadow: 0 4px 23px rgba(0, 0, 0, 0.32) !important;
}

body.dark-theme .float-right.round:has(> .icepro-membership-shell) > .icepro-labeled-float,
body.dark-theme .float-right.round:has(> .icepro-membership-shell) > .icepro-more-shell,
body.dark-theme .float-right.round:has(> .icepro-membership-shell) > .ontop {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-theme .float-right.round:has(> .icepro-membership-shell) > .icepro-labeled-float,
body.dark-theme .float-right.round:has(> .icepro-membership-shell) > .icepro-more-shell > .icepro-more-toggle,
body.dark-theme .float-right.round:has(> .icepro-membership-shell) > .ontop {
    color: #c8c9cc !important;
}

body.dark-theme .float-right.round:has(> .icepro-membership-shell) > .icepro-labeled-float:hover,
body.dark-theme .float-right.round:has(> .icepro-membership-shell) > .icepro-more-shell > .icepro-more-toggle:hover,
body.dark-theme .float-right.round:has(> .icepro-membership-shell) > .ontop:hover {
    color: #e4bd78 !important;
    background: rgba(217, 165, 81, 0.08) !important;
}

body.dark-theme .icepro-membership-card,
body.dark-theme .icepro-more-panel {
    color: #d5d8df;
    background: #25262c;
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.48);
}

body.dark-theme .icepro-membership-card::after {
    background: #25262c;
}

body.dark-theme .icepro-membership-card__benefits {
    background: rgba(255, 255, 255, 0.055);
}

body.dark-theme .icepro-membership-card__benefits > span,
body.dark-theme .icepro-more-action strong,
body.dark-theme .icepro-more-qr strong {
    color: #e2e3e6 !important;
}

body.dark-theme .icepro-more-action:hover,
body.dark-theme .icepro-more-action:focus {
    background: rgba(255, 255, 255, 0.06);
}

body.dark-theme .icepro-more-qr {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Desktop placement follows the reference rail; Zibll owns scroll hiding. */
@media (min-width: 769px) {
    .float-right.round:has(> .icepro-membership-shell) {
        top: auto !important;
        right: 1% !important;
        bottom: 20% !important;
        transform: none;
    }
}

/* The complete desktop utility rail is intentionally absent on mobile. */
@media (max-width: 768px) {
    .float-right.round:has(> .icepro-membership-shell) {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .float-right:has(> .icepro-membership-shell),
    .float-right:has(> .icepro-membership-shell) *,
    .float-right:has(> .icepro-membership-shell) *::before,
    .float-right:has(> .icepro-membership-shell) *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}