/* ==========================================================================
   Upgrade Pathways - Shared foundation styles for native upgrade UI
   Task #39015
   ========================================================================== */

/* Locked feature state */
.upgrade-locked {
    opacity: 0.7;
    transition: opacity 0.2s ease;
    position: relative;
    cursor: pointer;
}

.upgrade-locked:hover {
    opacity: 1;
}

/* Tier badge pill */
.upgrade-tier-badge {
    display: inline-block;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 999px;
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: middle;
}

.upgrade-tier-badge--sm {
    padding: 1px 7px;
    font-size: 10px;
}

/* Upgrade CTA card */
.upgrade-cta {
    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
    border: 1px solid #e0e7ff;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    margin-top: 16px;
}

.upgrade-cta__title {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}

.upgrade-cta__description {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 16px;
    line-height: 1.5;
}

.upgrade-cta__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.upgrade-cta__btn {
    display: inline-block;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}

.upgrade-cta__btn--primary {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
}

.upgrade-cta__btn--primary:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.upgrade-cta__btn--secondary {
    background: #fff;
    color: #6366f1;
    border: 1px solid #c7d2fe;
}

.upgrade-cta__btn--secondary:hover {
    background: #eef2ff;
    color: #4f46e5;
    text-decoration: none;
}

/* Feature list */
.upgrade-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.upgrade-feature-list li {
    padding: 6px 0;
    font-size: 14px;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 8px;
}

.upgrade-feature-list li .svg-inline--fa,
.upgrade-feature-list li i {
    color: #22c55e;
    width: 16px;
    flex-shrink: 0;
}

/* Upgrade overlay (frosted glass) */
.upgrade-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: inherit;
}

.upgrade-overlay-card {
    background: #fff;
    border: 1px solid #e0e7ff;
    border-radius: 12px;
    padding: 24px 32px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    max-width: 360px;
    width: 90%;
}

.upgrade-overlay-card__icon {
    font-size: 32px;
    color: #6366f1;
    margin-bottom: 12px;
}

.upgrade-overlay-card__title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 6px;
}

.upgrade-overlay-card__text {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 16px;
    line-height: 1.5;
}

/* Nudge popover */
.upgrade-nudge-popover {
    position: absolute;
    z-index: 1060;
    background: #fff;
    border: 1px solid #e0e7ff;
    border-radius: 10px;
    padding: 16px 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-width: 280px;
    font-size: 13px;
    color: #334155;
    line-height: 1.5;
    display: none;
}

.upgrade-nudge-popover.show {
    display: block;
}

.upgrade-nudge-popover__title {
    font-weight: 700;
    font-size: 14px;
    color: #1e293b;
    margin-bottom: 6px;
}

.upgrade-nudge-popover__arrow {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 6px;
    overflow: hidden;
}

.upgrade-nudge-popover__arrow::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background: #fff;
    border: 1px solid #e0e7ff;
    transform: rotate(45deg) translateY(3px);
    margin: 0 auto;
}

/* Showcase modal */
.upgrade-showcase-modal .modal-content {
    border-radius: 16px;
    border: none;
    overflow: hidden;
}

.upgrade-showcase-modal .modal-header {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    border-bottom: none;
    padding: 20px 24px;
}

.upgrade-showcase-modal .modal-header .modal-title {
    font-weight: 700;
    font-size: 18px;
}

.upgrade-showcase-modal .modal-header .btn-close {
    filter: brightness(0) invert(1);
}

.upgrade-showcase-modal .modal-body {
    padding: 24px;
}

.upgrade-showcase-modal .modal-footer {
    border-top: 1px solid #f1f5f9;
    padding: 16px 24px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* Tier comparison column hover lift */
.settings-sub-pricing-col:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Ice Lock Variant — frosted overlay & ice-themed upgrade UI
   ========================================================================== */

/* Ensure main content is a positioning context for preview chrome */
#main-content {
    position: relative;
}

/* #39614 — On short pages (e.g. Resources) #main-content collapses to its
   content height, so the absolutely-positioned ice overlay ends up tiny and
   the centred modal protrudes above the visible area. Force the wrapper to
   at least the viewport height when the overlay is rendered so the modal
   stays vertically centred and the bottom banner doesn't overlap the CTAs. */
#main-content:has(> .ice-overlay) {
    min-height: 100vh;
}


/* Full-page ice overlay */
.ice-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: linear-gradient(180deg, rgba(236, 245, 255, 0.72) 0%, rgba(220, 238, 255, 0.62) 100%);
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: iceOverlayFadeIn 0.5s ease-out;
    border-radius: inherit;
    overflow: hidden;
}


@keyframes iceOverlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Liquid-glass inspired ice card */
.ice-glass-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: min(520px, calc(100% - 48px));
    min-height: 320px;
    border-radius: 24px;
    box-shadow:
        0 28px 80px rgba(15, 23, 42, 0.18),
        0 8px 24px rgba(14, 165, 233, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.ice-glass-card__glass,
.ice-glass-card__tint,
.ice-glass-card__shine,
.ice-glass-card__content {
    position: absolute;
    inset: 0;
}

.ice-glass-card__glass {
    background: rgba(255, 255, 255, 0.52);
    backdrop-filter: blur(24px) saturate(1.55);
    -webkit-backdrop-filter: blur(24px) saturate(1.55);
    border: 1px solid rgba(255, 255, 255, 0.45);
}

.ice-glass-card__tint {
    background:
        linear-gradient(135deg, rgba(186, 230, 253, 0.34) 0%, rgba(224, 242, 254, 0.06) 42%, rgba(14, 165, 233, 0.08) 100%),
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.28) 0%, transparent 34%);
}

.ice-glass-card__shine {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.22) 18%, transparent 38%),
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.65) 0%, transparent 24%),
        radial-gradient(circle at 82% 78%, rgba(255, 255, 255, 0.18) 0%, transparent 30%);
    border-top: 1px solid rgba(255, 255, 255, 0.72);
    border-left: 1px solid rgba(255, 255, 255, 0.38);
}

.ice-glass-card__content {
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 44px 44px;
}

.ice-glass-card__icon {
    font-size: 38px;
    color: #0ea5e9;
    margin-bottom: 16px;
    text-shadow: 0 4px 18px rgba(14, 165, 233, 0.22);
}

.ice-glass-card__title {
    font-size: 18px;
    font-weight: 700;
    color: #082f49;
    margin-bottom: 8px;
}

.ice-glass-card__text {
    font-size: 14px;
    color: #475569;
    margin-bottom: 16px;
    line-height: 1.5;
    max-width: 360px;
}

.ice-glass-card__tier {
    display: inline-block;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #0369a1;
    background: rgba(224, 242, 254, 0.92);
    border: 1px solid rgba(14, 165, 233, 0.14);
    border-radius: 999px;
    margin-bottom: 20px;
}

.ice-glass-card__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.ice-glass-card__btn-primary {
    display: inline-block;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: #fff;
}

.ice-glass-card__btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
    color: #fff;
    text-decoration: none;
}

/* Close button on the ice card — positioned top-right, transparent so the
   frosted layers show through. Visible focus ring for keyboard nav.
   Used when the card sits inside a modal-dialog (#39552). */
.ice-glass-card__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    color: #075985;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.ice-glass-card__close:hover {
    background: rgba(255, 255, 255, 0.85);
    color: #0c4a6e;
    transform: scale(1.05);
}

.ice-glass-card__close:focus-visible {
    outline: 2px solid #0ea5e9;
    outline-offset: 2px;
}

/* Feature-locked teaser — used wherever a sub-feature is gated above the
   customer's tier and we want a clickable preview that opens the ice-glass
   upgrade modal. Replaces older passive "disabled checkbox + form-text"
   treatments which looked dead. Visual cues: lock icon + LOCKED badge +
   ice-blue tint. */
.upgrade-teaser {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px dashed #7dd3fc;
    border-radius: 10px;
    color: #0c4a6e;
    cursor: pointer;
    font: inherit;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.upgrade-teaser:hover {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    border-color: #38bdf8;
    border-style: solid;
    transform: translateY(-1px);
}

.upgrade-teaser:focus-visible {
    outline: 2px solid #0ea5e9;
    outline-offset: 2px;
}

.upgrade-teaser__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.7);
    color: #0284c7;
    font-size: 14px;
}

.upgrade-teaser__body {
    flex-grow: 1;
    min-width: 0;
}

.upgrade-teaser__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    color: #075985;
    margin-bottom: 2px;
}

.upgrade-teaser__desc {
    font-size: 0.8125rem;
    color: #0369a1;
    opacity: 0.85;
}

.upgrade-teaser__cta {
    flex-shrink: 0;
    color: #0284c7;
    font-size: 0.875rem;
    transition: transform 0.15s ease;
}

.upgrade-teaser:hover .upgrade-teaser__cta {
    transform: translateX(2px);
}

/* Ice locked badge */
.badge-ice-locked {
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
}

@media (max-width: 767.98px) {
    .preview-slide-banner-content {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .ice-glass-card {
        width: calc(100% - 24px);
        min-height: 0;
    }

    .ice-glass-card__content {
        padding: 32px 24px;
    }
}


/* ==========================================================================
   Tier comparison tagline — premium pill with icon + gradient
   ========================================================================== */
.settings-sub-pricing-tagline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    margin: 10px 0 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    animation: taglineFadeIn 0.5s ease-out;
}

.settings-sub-pricing-tagline .tagline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 12px;
}

.settings-sub-pricing-tagline .tagline-text {
    white-space: nowrap;
}

/* Shimmer sweep effect */
.settings-sub-pricing-tagline::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
    animation: taglineShimmer 3.5s ease-in-out infinite;
}

@keyframes taglineFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes taglineShimmer {
    0%, 100% { left: -100%; }
    50% { left: 100%; }
}

/* Current plan variant — green active feel */
.settings-sub-pricing-tagline--current {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
    border: 1px solid rgba(34, 197, 94, 0.35);
}

.settings-sub-pricing-tagline--current .tagline-icon {
    color: #16a34a;
}

/* Upgrade plan variant — ice-blue premium feel */
.settings-sub-pricing-tagline--upgrade {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #e0f2fe 100%);
    color: #075985;
    border: 1px solid rgba(14, 165, 233, 0.4);
    background-size: 200% 100%;
    animation: taglineFadeIn 0.5s ease-out, taglineGradientShift 6s ease-in-out infinite;
}

.settings-sub-pricing-tagline--upgrade .tagline-icon {
    color: #0284c7;
    animation: taglinePulse 2s ease-in-out infinite;
}

@keyframes taglineGradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes taglinePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}