---
title: "Cyclingnews"
url: https://stacklist.com/card/c90313b7-6b10-4292-81fe-e6148085c25d
source_url: "https://www.cyclingnews.com/"
stack: https://stacklist.com/stack/6d32f438-76aa-438f-a692-f817e890cd02
summary: "Cyclingnews is a cycling media website whose source code reveals extensive CSS styling for UI components including smart tooltips, paywall settings modals, and responsive layout adjustments. The content consists primarily of frontend stylesheet definitions rather than editorial cycling content."
tags: "cycling, css, web-design, paywall, tooltip, modal, frontend"
key_entities: "Cyclingnews (organization), CSS (technology), paywall (concept), tooltip (concept), responsive-design (concept)"
classification: "code"
content_hash: "sha256:bb653582d33be3ca52bdecf0fc318a9179a65e174e1cbb9e6a2176c20aa9e0b0"
acp_version: "0.2"
token_counts_approximate: 11438
visibility: public
agent_accessible: true
status: "final"
---

# Cyclingnews

Cyclingnews | Cycling News, Race Results and Bike Reviews @layer legacy {/* Smart Tooltip Styles */ .tooltip-container { position: relative; display: inline-block; } .smart-tooltip { position: absolute; background-color: var(--flexi-brand_color_2, #333); color: #fff; padding: 6px 8px; border-radius: 4px; font-size: 12px; z-index: 11000; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,0.2); max-width: 25em; opacity: 0; transition: opacity 0.2s ease-in-out; word-wrap: break-word; white-space: normal; line-height: 1.4; text-wrap: auto; } .smart-tooltip.visible { display: block; opacity: 1; } .smart-tooltip.hidden { display: none; opacity: 0; } .tooltip-arrow { position: absolute; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; } .tooltip-arrow.top { border-top: 4px solid var(--flexi-brand_color_2, #333); bottom: -4px; } .tooltip-arrow.bottom { border-bottom: 4px solid var(--flexi-brand_color_2, #333); top: -4px; } /* Prevent tooltip interference with modals */ .paywall-settings-overlay .tooltip-container, #kiosq-modal-portal .tooltip-container { pointer-events: auto; } .paywall-settings-overlay .smart-tooltip, #kiosq-modal-portal .smart-tooltip { z-index: 10011; /* Higher than modal content */ } /* Paywall Height Input Styles */ .paywall-height-input { & ul { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; margin: 0; & li { display: flex; align-items: center; gap: 10px; & label { min-width: 100px; font-weight: 500; } & input[type="range"] { display: block; flex: 1; } & .indicator { width: 40px; padding: 2px 4px; border: 1px solid #ccc; border-radius: 3px; background-color: #f5f5f5; color: #666; font-size: 1.2em; text-align: center; } } } } /* Paywall Settings Modal Styles */ .paywall-settings-overlay { position: fixed; top: 50px; /* Position below the paywall button (button at top: 10px + height ~40px) */ right: 10px; /* Align with the paywall button */ width: auto; height: auto; background-color: transparent; z-index: 10010; transition: all 0.3s ease-in-out; /* Smooth transitions */ } .paywall-settings-modal { background-color: #fff; border-radius: 8px; padding: 0.5em; min-width: 400px; max-width: 500px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); position: relative; transform-origin: top right; /* Scale from top right corner */ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth easing */ opacity: 1; transform: scale(1); & p { font-size: small; margin-bottom: 0.5em; & svg { display: inline-block; width: 20px; height: 20px; } } /* Animation states */ &.entering { opacity: 0; transform: scale(0.8); } &.entered { opacity: 1; transform: scale(1); } &.exiting { opacity: 0; transform: scale(0.8); } & .paywall-settings-header { display: flex; justify-content: space-between; align-items: center; margin:0; margin-bottom: 15px; border-bottom: 1px solid #eee; transition: all 0.3s ease; & h3 { margin: 0; transition: all 0.3s ease; } } & .paywall-settings-content { margin-bottom: 20px; transition: all 0.3s ease; font-size: small; & h5 { margin-bottom: 10px; transition: all 0.3s ease; } } & .paywall-settings-actions { text-align: center; transition: all 0.3s ease; } } /* Responsive adjustments */ @media (max-width: 768px) { .paywall-settings-overlay { bottom: 5px; right: 5px; } .paywall-settings-modal { min-width: 300px; max-width: 350px; padding: 15px; } } /* Ensure modal stays above debug wrapper */ .campaign-debug-wrapper.collapsed ~ .paywall-settings-overlay, .campaign-debug-wrapper ~ .paywall-settings-overlay { z-index: 10011; /* Higher than debug wrapper */ } /* SmartTooltip styles moved to SmartTooltip.css */ /* Button styles for all anchor tags with btn class */ .btn, .btn:visited { display: inline-flex; align-items: center; justify-content: center; color: var(--flexi-brand_color_2, #333); text-decoration: none !important; border-radius: 4px; font-size: 12px; font-weight: 500; transition: all 0.2s ease-in-out; cursor: pointer; border: 1px solid transparent; min-height: 24px; } .btn.alone { background-color: hsl(from var(--flexi-brand_color_2) h s calc(l + 30)); } .btn:hover, .btn:visited:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); text-decoration: none !important; background-color: var(--flexi-brand_color_2, #333); color: white; } .btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } /* Special styling for buttons with SVG icons */ .btn svg { width: 16px; height: 16px; fill: currentColor; } /* Adjust spacing for icon-only buttons */ .btn:has(svg):not(:has(text)) { padding: 8px; min-width: 32px; } .loader { border: 16px solid #f3f3f3; /* Light grey */ border-top: 16px solid var(--flexi-brand_color_2); /* Site brand color */ border-radius: 50%; width: 120px; height: 120px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loader-content { display: flex; justify-content: center; align-items: center; } .loader-content.show-kiosq-loader { display: flex !important; margin: auto; width: max-content; } .loader-content.hide-kiosq-loader { display: none; } .overlay { background-color: #fff; opacity: 0.5; } .wrapper-template{ position:relative; } .override-loader-position { position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 10; } .responsive .override-loader-position{ height: auto; } .loader-content-debug{ height: auto; background: transparent; } .loader-debug{ width: 60px; height: 60px; } @media (min-width: 1024px){ .progressive .kiosq-main-layer+.override-loader-position { float: left; width: calc(100% - 320px); margin-bottom: 20px; margin-top: -120px; } } #kiosq-app-paywall-js { width: 100%; z-index: +1; position: relative; } .hasBarrier ._cm-video { display: none; } .hasBarrier .paywall-locker { height: var(--desktop-content-limit); overflow-y: clip; overflow-x: visible; display: flow-root; } .hasBarrier .paywall-locker + .paywall-locker { clear: none; } /* target when paywall-locker doesn't have height:auto */ .hasBarrier .paywall-locker:not([style*="height: auto"]) { user-select: none; } @media (max-width: 991px) { .responsive.hasBarrier .paywall-locker { height: var(--mobile-content-limit); } } @media (max-width: 1024px) { .progressive.hasBarrier .paywall-locker { height: var(--mobile-content-limit); } } #kiosq { z-index: 10; position: relative; top: -100px; width: 100%; } .kiosq-main-layer .kiosq-gradient { height: 100px; position: relative; background: linear-gradient( 180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 85% ); } .kiosq-main-layer.kiosq-sticky-layer .kiosq-gradient { height: 50px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 110% ); } .hasBarrier{ --desktop-content-limit:96px; --mobile-content-limit:96px; } .wrapper-main-template{ height: 550px; margin-top: -150px; } .paywall-locker .wrapper-main-template.is-visible{ margin-top: -120px; } .is-not-visible{ visibility: hidden; height: inherit; margin-top: inherit; } .kiosq-main-layer { /* max-height: 550px; overflow: scroll; */ border-bottom: 1px solid #333; margin-bottom: 20px; position: relative; } .disable-scrollbars::-webkit-scrollbar { background: transparent; width: 0px; } .disable-scrollbars { scrollbar-width: none; -ms-overflow-style: none; } .kiosq-main-layer.kiosq-sticky-layer { position: fixed; margin-top: 0; border-bottom: none; bottom: 0; z-index: 1000; margin-bottom: 0px; height: inherit; } .responsive .kiosq-main-layer.kiosq-sticky-layer { width: 602px; } @media (min-width: 991px) { .responsive.no-sidebar .kiosq-main-layer.kiosq-sticky-layer { width: 922px; } } @media (min-width: 991px) { .progressive .kiosq-main-layer.kiosq-sticky-layer { width: 940px; } } @media (min-width: 1024px) { .progressive .kiosq-main-layer { float: left; width: calc(100% - 320px); } .article__container-sidebar .article__body.paywall-locker ~ #kiosq-app-paywall-js .wrapper-main-template { height: unset; margin-top: unset; } .article__container-sidebar .article__body.paywall-locker ~ #kiosq-app-paywall-js .kiosq-main-layer { margin-top: -100px; } } @media (min-width: 1281px) { .progressive .kiosq-main-layer.kiosq-sticky-layer { width: 1070px; } .progressive .kiosq-main-layer.kiosq-sticky-layer { margin-left: -50px; } } .kiosq-main-layer .kiosq-main-layer-container { margin-bottom: 30px; padding: 20px; background-color:#ededed; } .kiosq-main-layer.kiosq-sticky-layer .kiosq-main-layer-container { border-top: 1px solid #333; padding-top: 10px; margin-bottom: 0px; } .kiosq-main-layer .kiosq-logo.rowLeft { margin-bottom: 20px; display: flex; justify-content: flex-start; } .kiosq-main-layer .kiosq-logo.rowCenter { margin-bottom: 20px; display: flex; justify-content: center; order: 2; } .kiosq-main-layer .kiosq-logo.rowRight { margin-bottom: 20px; display: flex; justify-content: flex-end; order: 2; } .element_at_the_same_line_space_around { display: flex; justify-content: space-around; } .element_at_the_same_line_space_between { display: flex; justify-content: space-between; } .kiosq-main-layer .kiosq-logo img { width: 140px !important; } .kiosq-main-layer.kiosq-sticky-layer .kiosq-sticky-logo.rowLeft { margin: 0px; display: flex; justify-content: flex-start; } .kiosq-main-layer.kiosq-sticky-layer .kiosq-sticky-logo.rowCenter { margin: 0px; display: flex; justify-content: center; } .kiosq-main-layer.kiosq-sticky-layer .kiosq-sticky-logo.rowRight { margin: 0px; display: flex; justify-content: flex-end; } .kiosq-main-layer.kiosq-sticky-layer .kiosq-sticky-logo img { width: 70px; /*float: right;*/ } .kiosq-main-layer .kiosq-title { font-size: 30px; font-weight: bold; line-height: 38px; margin-bottom: 20px; } .kiosq-main-layer.kiosq-sticky-layer .kiosq-title { font-size: 18px; line-height: 24px; margin-bottom: 10px; } .kiosq-main-layer .kiosq-subtitle { font-size: 16px; font-weight: bold; line-height: 24px; margin-bottom: 10px; } .kiosq-main-layer.kiosq-sticky-layer .kiosq-subtitle { font-size: 14px; line-height: 22px; } .kiosq-main-layer .kiosq-description { font-size: 14px; line-height: 22px; margin-bottom: 25px; } #main_layer_regwall .kiosq-description { margin-bottom: 0px; } .kiosq-main-layer.kiosq-sticky-layer .kiosq-description { margin-bottom: 10px; } .kiosq-main-layer .kiosq-description .custom_h4 { font-size: 100%; font-weight: bold; } .kiosq-main-layer .kiosq-description .custom_h3 { font-size: 16px; font-weight: bold; line-height: 24px; margin-bottom: 10px; } .kiosq-main-layer .kiosq-description .custom_h2 { font-size: 18px; font-weight: bold; line-height: 24px; margin-bottom: 10px; } .kiosq-main-layer .kiosq-description .custom_h1 { margin-top: 0px; font-weight: bold; font-size: 28px; line-height: 34px; } .kiosq-main-layer .kiosq-description p { margin-bottom: 1em; } #main_layer_regwall .kiosq-description p { margin-bottom: 0px; } .kiosq-main-layer .kiosq-login-button > div { width: 100%; } .kiosq-main-layer .kiosq-login-button.rowLeft { font-size: 13px; margin-bottom: 25px; display: flex; flex-direction: column; align-items: flex-start; } .kiosq-main-layer .kiosq-login-button.rowCenter { font-size: 13px; margin-bottom: 25px; display: flex; flex-direction: column; align-items: center; order: 2; } .kiosq-main-layer .kiosq-login-button.rowRight { font-size: 13px; margin-bottom: 25px; display: flex; flex-direction: column; align-items: flex-end; order: 2; } .kiosq-main-layer.kiosq-sticky-layer .kiosq-login-button { margin-bottom: 0; font-size: 13px; } .kiosq-main-layer .kiosq-login-button button { height: 44px; width: 360px; text-align: center; color: #fff; margin-bottom: 10px; border: none; font-weight: 700; text-transform: uppercase; cursor: pointer; background-color:var(--flexi-brand_color_2); } .kiosq-main-layer.kiosq-sticky-layer .kiosq-login-button button { height: 34px; width: 310px; margin-right: 10px; } .kiosq-main-layer .kiosq-login-button a { color: #000000; text-decoration: underline; } .kiosq-main-layer .kiosq-conditions { font-size: 14px; line-height: 22px; } .kiosq-main-layer ul.kiosq-conditions, .kiosq-main-layer .kiosq-conditions ul { list-style-type: disc; list-style-position: outside; margin-bottom: 25px; margin-left: 20px; } .kiosq-main-layer ul.kiosq-conditions li, .kiosq-main-layer .kiosq-conditions ul li { font-size: 14px; line-height: 20px; } /* Menu header layer */ .kiosq-main-layer.kiosq-header-menu-layer { display: none; position: absolute; background-color: #333; width: 100%; left: 0; z-index: 1; top: 60px; color: #fff; margin-top: 0; } .kiosq-main-layer.kiosq-header-menu-layer a { color: #fff; } .kiosq-main-layer.kiosq-header-menu-layer .kiosq-main-layer-container { background: #333; display: flex; flex-wrap: wrap; margin: 20px; padding: 0px; } #kiosq-dropdown-checkbox { display: none; } .kiosq-dropdown-checkbox-img { font-size: medium; line-height: normal; } #kiosq-dropdown-checkbox:checked + .kiosq-main-layer.kiosq-header-menu-layer { display: block; } .kiosq-main-layer.kiosq-header-menu-layer .kiosq-title { width: 67%; } .kiosq-main-layer.kiosq-header-menu-layer .kiosq-subtitle { width: 33%; text-align: center; margin-bottom: 15px; } .kiosq-main-layer.kiosq-header-menu-layer .kiosq-description { width: 67%; font-size: 16px; line-height: 24px; } .kiosq-main-layer.kiosq-header-menu-layer .kiosq-login-button { width: 33%; text-align: center; line-height: 30px; margin: 0; font-size: 13px; } .kiosq-main-layer.kiosq-header-menu-layer .kiosq-login-button button { line-height: 24px; width: 90%; background-color: var(--flexi-brand_color_2); } .kiosq-main-layer.kiosq-button-layer { margin-top: 10px; border-bottom: none; margin-bottom: 0; } .kiosq-main-layer.kiosq-button-layer .kiosq-main-layer-container { padding: 0px; background-color: inherit; } .kiosq-main-layer.kiosq-button-layer .kiosq-login-button { margin-bottom: 0; } .kiosq-main-layer .kiosq-login-button button , .kiosq-main-layer.kiosq-sticky-layer .kiosq-login-button button { background-color: var(--flexi-brand_color_2); } .kiosq-main-layer.kiosq-button-layer .kiosq-login-button a { display: inherit; } /* Menu header drop down button */ .kiosq-dropdown { float: right; height: 60px; display: flex; flex-direction: column; justify-content: center; } .kiosq-dropdown label { line-height: 0; margin: 0; cursor: pointer; } .kiosq-dropdown label img { width: 67px; display: inline-block; } .kiosq-dropdown label svg { width: 7px; height: auto; fill: #333; margin-bottom: 9px; display: inline-block; } .hasBarrier #in-article, .hasBarrier #desktop-in-article, .hasBarrier #mobile-in-article, .hasBarrier .in-article { display: none; } @media screen and (max-width: 990px) { .responsive .kiosq-main-layer.kiosq-sticky-layer, .progressive .kiosq-main-layer.kiosq-sticky-layer { width: calc(100% - 40px); left: 20px; } } @media screen and (max-width: 699px) { #kiosq-app-paywall-js .kiosq-main-layer{ float:left } .kiosq-main-layer.kiosq-header-menu-layer .kiosq-main-layer-container { display: flex; flex-direction: column; margin: 15px 20px; } .kiosq-main-layer .kiosq-logo.rowLeft { margin-bottom: 10px; display: flex; justify-content: flex-start; } .kiosq-main-layer .kiosq-logo.rowCenter { margin-bottom: 10px; display: flex; justify-content: center; } .kiosq-main-layer .kiosq-logo.rowRight { margin-bottom: 10px; display: flex; justify-content: flex-end; } .kiosq-main-layer .kiosq-logo img { width: 120px !important; } .kiosq-dropdown label { position: absolute; top: 0; right: 95px; line-height: 60px; } .kiosq-main-layer.kiosq-sticky-layer { width: calc(100% - 20px); left: 10px; } .kiosq-main-layer.kiosq-header-menu-layer .kiosq-title { width: 100%; font-size: 22px; line-height: 30px; text-align: center; margin-bottom: 10px; order: 1; } .kiosq-main-layer.kiosq-header-menu-layer .kiosq-subtitle { width: 100%; font-size: 14px; line-height: 22px; text-align: center; order: 3; } .kiosq-main-layer.kiosq-header-menu-layer .kiosq-description { width: 100%; text-align: center; margin-bottom: 10px; order: 2; } .kiosq-main-layer.kiosq-header-menu-layer .kiosq-login-button { width: 100%; text-align: center; display: flex; flex-direction: column; order: 4; } .kiosq-main-layer.kiosq-header-menu-layer .kiosq-login-button button { width: 100%; } } @media screen and (max-width: 460px) { .kiosq-main-layer .kiosq-title { font-size: 22px; line-height: 30px; margin-bottom: 10px; } .kiosq-main-layer .kiosq-login-button { width: 100%; margin-bottom: 5px; } .kiosq-main-layer .kiosq-login-button button { width: 100%; margin-bottom: 0px; } .kiosq-main-layer .kiosq-login-button a { line-height: 33px; } .kiosq-main-layer .kiosq-description { margin-bottom: 10px; } .kiosq-main-layer ul.kiosq-conditions, .kiosq-main-layer .kiosq-conditions ul { margin-bottom: 20px; } .kiosq-main-layer.kiosq-sticky-layer .kiosq-main-layer-container { border-top: 1px solid #333; border-bottom: 1px solid #333; padding-top: 10px; padding-bottom: 110px; margin-left: -20px; margin-right: -20px; padding-left: 30px; padding-right: 30px; text-align: center; } .kiosq-main-layer.kiosq-sticky-layer .kiosq-sticky-logo { display: none; } .kiosq-main-layer.kiosq-sticky-layer .kiosq-login-button button { width: 100%; margin-right: 0px; margin-left: 0px; margin-right: 0px; } .kiosq-main-layer.kiosq-sticky-layer .kiosq-login-button a { color: #000000; text-decoration: underline; display: inherit; } .kiosq-main-layer.kiosq-sticky-layer .kiosq-subtitle { font-size: 12px; line-height: 18px; margin-bottom: 5px; } } /* MY account */ .kiosq-my-account-title { font-weight: 700; font-size: 26px; line-height: 44px; } .kiosq-my-account-col-content { display: flex; gap: 30px; } .kiosq-my-account { margin-top: 20px; } .kiosq-my-account .show { display: block; } .kiosq-my-account .hide { display: none; } .kiosq-my-account-user-infos-widget { display: flex; align-items: center; padding: 20px 10px; background-color: #ededed; gap: 5px; height: 60px; box-sizing: content-box; } .kiosq-my-account-left { min-width: 600px; } .kiosq-my-account-right { min-width: 300px; } .kiosq-my-account-user-infos { margin-left: 15px; } .kiosq-my-account-user-infos-img-content { width: 72px; height: 72px; border-radius: 50%; background-color: var(--flexi-brand_color_2); display: flex; justify-content: center; align-items: flex-end; } .kiosq-my-account-user-infos-img { fill: #ededed; margin-bottom: 5px; } .kiosq-my-account-user-name { font-weight: 700; font-size: 20px; line-height: 23px; margin-bottom: 10px; margin-top: 10px; } .kiosq-my-account-user-info-content { display: flex; align-items: center; } .kiosq-my-account-user-info-text-img-content { width: 24px; height: 24px; border-radius: 50%; background-color: var(--flexi-brand_color_2); display: flex; justify-content: center; align-items: center; } .kiosq-my-account-user-info-text-img { fill: #ededed; } .kiosq-my-account-user-info-text { font-weight: 400; font-size: 16px; line-height: 18px; margin-left: 10px; } .kiosq-my-account-title-widget { margin-top: calc(20px + 0.5rem); font-weight: 700; font-size: 24px; line-height: 30px; } .kiosq-my-account-subscription-widget { display: flex; align-items: flex-start; gap: 20px; border: 1px solid #cccccc; margin-top: 12px; margin-bottom: 20px; } .kiosq-my-account-subscription-widget-mobile { display: none; } .kiosq-my-account-subscription-img { box-sizing: border-box; min-width: 180px; height: 230px; background-size: cover; border-width: 1px 0px 1px 1px; border-style: solid; border-color: #cccccc; } .kiosq-my-account-subscription-datas-block { padding-top: 20px; padding-bottom: 10px; width: 100%; } .kiosq-my-account-subscription-datas { display: flex; } .kiosq-my-account-subscription-content { flex: 1; } .kiosq-my-account-bluebird-in-process-content { display: flex; width: 100%; height: 190px; justify-content: center; align-items: center; } .kiosq-my-account-bluebird-in-process { font-weight: 700; font-size: 16px; line-height: 20px; } .kiosq-my-account-subscription-title { font-weight: 700; font-size: 20px; line-height: 24px; margin-bottom: 15px; } .kiosq-my-account-subscription-data { font-weight: 400; font-size: 16px; line-height: 20px; margin-bottom: 5px; } .kiosq-my-account-subscription-data .kiosq-my-account-subscription-subtitle { font-weight: 700; } .kiosq-my-account-subscription-data .custom_h1 { display: none; } .kiosq-my-account-manage-button-block { display: flex; justify-content: center; } .kiosq-my-account-manage-button-anchor { text-decoration: none !important; } .kiosq-my-account-manage-button-content { display: flex; flex-direction: column; width: 188px; margin-top: 15px; } .kiosq-my-account-manage-button-content.no-subscriptions { width: 280px; } .kiosq-my-account-manage-button, .kiosq-my-account-manage-button-cb { display: flex; justify-content: center; align-items: center; padding: 2px 20px; width: 188px; height: 40px; background-color: var(--flexi-brand_color_2); border: 1px solid var(--flexi-brand_color_2); border-radius: 2px; } .kiosq-my-account-manage-button.no-subscriptions { width: 280px; } .kiosq-my-account-manage-button-text { font-weight: 700; font-size: 12px; line-height: 14px; text-transform: uppercase; color: #ffffff; } .kiosq-my-account-manage-button-sublink-content { font-weight: 400; font-size: 12px; line-height: 14px; text-align: center; color: #333333; margin-top: 5px; } .kiosq-my-account-manage-button-sublink { text-decoration-line: underline !important; color: #333333 !important; } #kiosq-link-account-input { height: 30px; padding-left: 4px; } #kiosq-link-account-button { display: flex; justify-content: center; align-items: center; padding: 2px 20px; width: 188px; height: 35px; background-color: var(--flexi-brand_color_2); border: 1px solid var(--flexi-brand_color_2); border-radius: 2px; margin-left: 20px; color: white; } #kiosq-link-account-button.processing:hover { filter: brightness(85%); cursor: wait !important; } .kiosq-my-account .input-mapping-error { border: 1px solid red; } .kiosq-my-account .input-mapping-success { border: 1px solid green; } .kiosq-my-account .message-div-error { color: red; font-size: 13px; } .kiosq-my-account .message-div-success { color: green; font-size: 13px; } #kiosq-link-account-button:hover { cursor: pointer; } .kiosq-link-account-div { display: flex; flex-direction: row; justify-content: start; margin: 10px 0; align-items: center; } .linking-account-description-text { margin-top: 15px; line-height: 20px; } .kiosq-my-account-subscription-status-content { position: relative; margin-right: 20px; margin-left: auto; display: flex; flex-direction: column; } @media screen and (min-width: 699px) { .kiosq-my-account-cancel-sub { position: absolute; bottom: 0; } .kiosq-main-layer .kiosq-logo { width: 250px; height: 30px; } } @media screen and (max-width: 699px) { .kiosq-my-account-cancel-sub { margin-top: 15px; } .kiosq-main-layer .kiosq-logo { height: 30px; } } .kiosq-my-account-cancel-sub { text-decoration: underline; } .kiosq-my-account-cancel-sub a, .kiosq-my-account-cancel-sub a:visited, .kiosq-my-account-cancel-sub a:hover { color: black !important; } .kiosq-my-account-subscription-status-flag-content { display: flex; justify-content: center; align-items: center; padding: 0px 10px; width: 77px; height: 20px; border-radius: 2px; margin-bottom: 6px; } .kiosq-my-account-subscription-status-flag-content.active { background-color: #0fa958; } .kiosq-my-account-subscription-status-flag-content.trial { background-color: #0f7ca9; } .kiosq-my-account-subscription-status-flag-content.future { background-color: #6c757d; } .kiosq-my-account-subscription-status-flag-content.non-renewing { background-color: #ff9800; } .kiosq-my-account-subscription-status-flag-content.paused { background-color: #9e9e9e; } .kiosq-my-account-subscription-status-flag-content.cancelled { background-color: #a90f0f; } .kiosq-my-account-subscription-status-flag-content.expired { background-color: #a90f0f; } .kiosq-my-account-subscription-status-flag-content.unknown { background-color: #cccccc; } .kiosq-my-account-subscription-status-flag-text { font-weight: 700; font-size: 14px; line-height: 20px; color: #ffffff; } .kiosq-my-account-subscription-status-title { font-weight: 700; font-size: 12px; line-height: 15px; margin-bottom: 3px; text-align: center; } .kiosq-my-account-subscription-status-data { font-size: 12px; line-height: 15px; margin-bottom: 3px; text-align: center; } .kiosq-my-account-stay-in-touch-widget { min-height: 400px; } .kiosq-my-account-stay-in-touch-title-content { display: flex; justify-content: flex-start; align-items: center; gap: 10px; width: 280px; height: 56px; background: #ffffff; border-width: 1px 0px; border-style: solid; border-color: #cccccc; padding: 0px 10px; } .kiosq-my-account-stay-in-touch-title-img-content { width: 38px; height: 38px; border-radius: 50%; background-color: var(--flexi-brand_color_2); display: flex; justify-content: center; align-items: center; } .kiosq-my-account-stay-in-touch-title-img { fill: #ededed; margin-right: 2px; } .kiosq-my-account-stay-in-touch-title { font-weight: 700; font-size: 18px; line-height: 21px; } .kiosq-my-account-stay-in-touch-subtitle { font-weight: 700; font-size: 14px; line-height: 21px; margin: 14px 0; } .kiosq-my-account-stay-in-touch-content { padding: 20px 15px; height: 102px; } .kiosq-my-account-stay-in-touch { font-weight: 400; font-size: 14px; line-height: 16px; margin-bottom: 15px; } .kiosq-my-account-stay-in-touch-link { /* text-decoration-line: underline; */ color: var(--flexi-brand_color_2); } .kiosq-my-account-stay-in-touch-social-content { display: flex; justify-content: flex-start; align-items: center; gap: 15px; } .kiosq-my-account-stay-in-touch-social-link { display: block; } .kiosq-my-account-proposal-widget { margin-top: 15px; display: block; } .kiosq-my-account-proposal-widget-mobile { margin-top: 15px; display: none; } .kiosq-my-account-proposal-slider { min-width: 600px; position: relative; min-height: 390px; overflow: hidden; } .kiosq-my-account-proposal-slide { width: 100%; position: absolute; transition: all 0.5s; gap: 30px; display: flex; } .kiosq-my-account-proposal-slide-mobile { width: 100%; position: absolute; transition: all 0.5s; gap: 30px; display: flex; } .kiosq-my-account-proposal-slide-widget { width: 180px; } .kiosq-my-account-proposal-slide-widget-img { width: 180px; height: 230px; background-size: cover; } .kiosq-my-account-proposal-slide-widget-title { font-weight: 700; font-size: 18px; line-height: 24px; margin-top: 10px; } .kiosq-my-account-proposal-slide-widget-infos-content { display: flex; justify-content: flex-start; margin-top: 11.5px; margin-bottom: 10px; } .kiosq-my-account-proposal-slide-widget-infos-img-content { display: flex; justify-content: center; align-items: center; width: 15px; height: 15px; border-radius: 50%; background-color: #0fa958; margin-right: 5px; } .kiosq-my-account-proposal-slide-widget-infos-img { fill: #ededed; } .kiosq-my-account-proposal-slide-widget-infos { font-weight: 400; font-size: 12px; line-height: 15px; } .kiosq-my-account-proposal-slide-widget-link { font-weight: 700; font-size: 14px; line-height: 16px; text-decoration-line: underline; color: var(--flexi-brand_color_2); } .kiosq-my-account-proposal-btn { position: absolute; width: 40px; height: 40px; padding: 10px; border: none; border-radius: 50%; z-index: 10px; cursor: pointer; background-color: #fff; font-size: 18px; } .kiosq-my-account-proposal-btn:active { transform: scale(1.1); } .kiosq-my-account-proposal-slide-btn-prev { top: 45%; left: 2%; } .kiosq-my-account-proposal-slide-btn-next { top: 45%; right: 2%; } .kiosq-my-account-proposal-slide-btn-prev-mobile { top: 45%; left: 2%; } .kiosq-my-account-proposal-slide-btn-next-mobile { top: 45%; right: 2%; } .kiosq-my-account-no-subscriptions-text { margin-top: 20px; margin-bottom: 5px; font-weight: 400; font-size: 20px; line-height: 25px; } .kiosq-my-account-current-site-header { margin-top: 20px; font-weight: 700; font-size: 20px; display: block; } .kiosq-my-account-current-site-header-mobile { display: none; } .kiosq-my-account-subscription-history-button-content { display: flex; height: 100%; align-items: flex-end; } .kiosq-my-account-subscription-history-button { display: flex; justify-content: center; background-color: #cccccc; align-items: center; padding: 0px 10px; width: 77px; height: 20px; border-radius: 2px; } .kiosq-my-account-subscription-history-button:hover { cursor: pointer; } .kiosq-my-account-subscription-history-button-mobile { display: flex; justify-content: center; background-color: #cccccc; align-items: center; padding: 0px 10px; width: 77px; height: 20px; border-radius: 2px; margin-top: 10px; } .kiosq-my-account-subscription-history-button-mobile:hover { cursor: pointer; } .kiosq-my-account-subscription-history-button-text { font-weight: 700; font-size: 14px; line-height: 20px; margin-right: 5px; } .kiosq-my-account-subscription-history-icon-content { display: flex; align-items: center; } .kiosq-my-account-subscription-history-content { max-height: 0; transition: max-height 0.25s ease-out; overflow: hidden; } .kiosq-my-account-subscription-history-content-mobile { max-height: 0; transition: max-height 0.25s ease-out; overflow: hidden; } .kiosq-my-account-subscription-history-button-icon-down { display: block; } .kiosq-my-account-subscription-history-button-icon-up { display: none; } .kiosq-complete-setup-title { font-weight: 700; margin: 15px 0px; } .kiosq-complete-setup-p { margin: 15px 0px; } .kiosq-complete-setup-button { display: flex; justify-content: center; align-items: center; height: 44px; width: 360px; background-color: var(--flexi-brand_color_2); margin: 30px auto; } .kiosq-complete-setup-button-text { font-weight: 700; color: #fff; } .kiosq-complete-setup-button:hover { cursor: pointer; } .kiosq-restricted-access-title { font-weight: 700; margin: 15px 0px; } .kiosq-restricted-access-p { margin: 15px 0px; } .kiosq-restricted-access-button { display: flex; justify-content: center; align-items: center; height: 44px; width: 360px; background-color: var(--flexi-brand_color_2); margin: 30px auto; } .kiosq-restricted-access-button-text { font-weight: 700; color: #fff; } .kiosq-restricted-access-button:hover { cursor: pointer; } @media screen and (max-width: 699px) { .flexi-page.responsive .widget-area { padding: 0px !important; } .kiosq-my-account-left { min-width: auto; } .kiosq-my-account-right { /*min-width: 375px;*/ } .kiosq-my-account-col-content { flex-direction: column; } .kiosq-my-account-title { font-size: 22px; padding-left: 15px; } .kiosq-my-account-user-infos-widget { min-width: 355px; } .kiosq-my-account-user-infos-img-content { width: 50px; height: 50px; } .kiosq-my-account-user-infos-img { width: 50px; height: 50px; margin-bottom: 2px; } .kiosq-my-account-user-info-text { font-size: 14px; line-height: 16px; } .kiosq-my-account-title-widget { font-size: 20px; line-height: 20px; padding-left: 15px; } .kiosq-my-account-subscription-widget { display: none; } .kiosq-my-account-subscription-widget-mobile { display: block; padding: 15px; border-top: 1px solid #cccccc; margin-top: 12px; } .kiosq-my-account-subscription-title-content-mobile { display: flex; margin-bottom: 20px; } .kiosq-my-account-subscription-img-mobile { box-sizing: border-box; min-width: 117px; height: 150px; background-size: cover; border-width: 1px 0px 1px 1px; border-style: solid; border-color: #cccccc; } .kiosq-my-account-subscription-datas-block-mobile { margin-bottom: 10px; display: flex; align-items: flex-start; gap: 15px; } .kiosq-my-account-subscription-title-mobile { font-weight: 700; font-size: 18px; line-height: 21px; } .kiosq-my-account-subscription-content-mobile { flex: 1; } .kiosq-my-account-bluebird-in-process-content { height: 150px; } .kiosq-my-account-subscription-data-mobile { font-weight: 400; font-size: 14px; line-height: 20px; margin-bottom: 5px; } .kiosq-my-account-subscription-data-mobile .kiosq-my-account-subscription-subtitle-mobile { font-weight: 700; } .kiosq-my-account-subscription-data-mobile .custom_h1 { display: none; } .kiosq-my-account-manage-button-content-mobile { display: flex; flex-direction: column; margin-top: 20px; align-items: center; width: 100%; } .kiosq-my-account-manage-button-mobile, .kiosq-my-account-manage-button-mobile-cb { display: flex; justify-content: center; align-items: center; padding: 2px 20px; height: 40px; background-color: var(--flexi-brand_color_2); border: 1px solid var(--flexi-brand_color_2); border-radius: 2px; width: 100%; } .kiosq-my-account-manage-button-text-mobile { font-weight: 700; font-size: 12px; line-height: 14px; text-transform: uppercase; color: #ffffff; } .kiosq-my-account-manage-button-sublink-content-mobile { font-weight: 400; font-size: 12px; line-height: 14px; text-align: center; color: #333333; margin-top: 5px; } .kiosq-my-account-manage-button-sublink-mobile { text-decoration-line: underline !important; color: #333333 !important; } .kiosq-my-account-subscription-status-flag-content-mobile { display: flex; justify-content: center; align-items: center; padding: 0px 10px; width: 63px; height: 21px; border-radius: 2px; margin-right: 0px; margin-left: auto; } .kiosq-my-account-subscription-status-flag-content-mobile.active { background-color: #0fa958; } .kiosq-my-account-subscription-status-flag-content-mobile.trial { background-color: #0f7ca9; } .kiosq-my-account-subscription-status-flag-content-mobile.future { background-color: #6c757d; } .kiosq-my-account-subscription-status-flag-content-mobile.non-renewing { background-color: #ff9800; } .kiosq-my-account-subscription-status-flag-content-mobile.paused { background-color: #9e9e9e; } .kiosq-my-account-subscription-status-flag-content-mobile.cancelled { background-color: #a90f0f; } .kiosq-my-account-subscription-status-flag-content-mobile.expired { background-color: #a90f0f; } .kiosq-my-account-subscription-status-flag-content-mobile.unknown { background-color: #cccccc; } .kiosq-my-account-subscription-status-flag-text-mobile { font-weight: 700; font-size: 14px; line-height: 16px; color: #ffffff; } .kiosq-my-account-block-link-in-widget-mobile { display: block; font-weight: 700; font-size: 14px; line-height: 16px; text-decoration-line: underline; color: var(--flexi-brand_color_2); } .kiosq-my-account-block-link-img-mobile { margin-left: 7px; fill: var(--flexi-brand_color_2); width: 15px; height: 15px; } .kiosq-my-account-stay-in-touch-title-content { width: 355px; border-width: 0px 0px 1px 0px; } .kiosq-my-account-proposal-widget { display: none; } .kiosq-my-account-proposal-widget-mobile { display: block; padding-left: 15px; padding-right: 15px; } .kiosq-my-account-proposal-slider { min-width: 345px; min-height: 360px; } .kiosq-my-account-proposal-slide-widget { width: 155px; } .kiosq-my-account-proposal-slide-widget-img { width: 155px; height: 198.05px; } .kiosq-my-account-proposal-slide-widget-title { line-height: 22px; } .kiosq-my-account-no-subscriptions-text { font-size: 14px; } .kiosq-my-account-current-site-header { display: none; } .kiosq-my-account-current-site-header-mobile { margin-top: 20px; font-weight: 700; font-size: 14px; display: block; padding-left: 15px; } .kiosq-my-account-no-subscriptions-widget .kiosq-my-account-current-site-header-mobile { padding: 15px 0px; } .kiosq-my-account-manage-button-content.no-subscriptions { width: 100%; } .kiosq-my-account-manage-button.no-subscriptions { width: 100%; } .kiosq-my-account-manage-button-anchor { width: 100%; } .paywall-locker:not(.paywall-locker:not(.paywall-locker ~ .paywall-locker)) { display: none; } } .dismiss-barrier { position: absolute; right: 27px; width: 25px; } /* Metered banner */ .kiosq-metered-message-content { display: none; padding-bottom: 20px; } .kiosq-metered-banner { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 14px 24px; background-color: #FEF9C3; flex-wrap: wrap; } .kiosq-metered-banner__message { display: flex; align-items: center; gap: 8px; } .kiosq-metered-banner__icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 2px solid #1a1a1a; border-radius: 50%; font-size: 13px; font-weight: 700; flex-shrink: 0; color: #1a1a1a; } .kiosq-metered-banner__text { font-size: 15px; color: #1a1a1a; } .kiosq-metered-banner__cta { display: inline-block; padding: 10px 20px; background-color: var(--flexi-brand_color_2); color: #ffffff; font-size: 14px; font-weight: 600; border: none; border-radius: 4px; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color 0.2s ease; } .kiosq-metered-banner__cta:hover { background-color: var(--flexi-brand_color_2); } @media (max-width: 600px) { .kiosq-metered-banner { flex-direction: column; gap: 10px; text-align: center; } } #kiosq-modal-portal{ position: fixed; top: 75px; right: 12px; z-index: 10000; font-size: 12px; box-shadow: 0px 0px 10px #000000; border-radius: 15px; background-color: white; max-width: 50%; } #kiosq-modal-container{ padding: 0 15px 15px 15px; } /* .modal-button-close,.modal-title{ display: inline-block; } */ /* .modal-wrapper{ width: auto; border-radius: 15px; padding: 15px; } */ .modal-header{ display: flex; flex-direction: row; font-size: 1.1rem; font-weight: 600; height: 2.5em; align-items: center; } .modal-title{ align-content: center; margin: auto; } .modal-content { overflow-y: scroll; max-height: 40em; } .button-header-debug-wrapper-close{ background: none; border: none; cursor: pointer; width: 2rem; height: 2rem; color: #333; background-color: lightgray; border-radius: 10%; } .button-header-debug-wrapper-close svg{ margin: auto; } /*# sourceMappingURL=bundle.paywall.css.map*//* =========================== CHARGEBEE CHECKOUT WRAPPER =========================== */ /* Overlay */ .chargebee-checkout-overlay { position: fixed; inset: 0; /* top:0; right:0; bottom:0; left:0 */ display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(6px); z-index: 100000; opacity: 0; animation: chargebee-checkout-fadeIn 0.3s ease forwards; } @keyframes chargebee-checkout-fadeIn { to { opacity: 1; } } /* Modal Box */ .chargebee-checkout-box { height: 90%; max-height: 573px; display: flex; flex-direction: column; background: #fff; border-radius: 3px; max-width: 400px; width: 90%; position: relative; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); transform: scale(0.9) translateY(20px); animation: chargebee-checkout-slideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; font-family: 'Open Sans', sans-serif; font-weight: normal; &.result { height: auto; } } @keyframes chargebee-checkout-slideIn { to { transform: scale(1) translateY(0); } } /* =========================== CHARGEBEE CHECKOUT EMAIL MODAL =========================== */ .chargebee-checkout-email-icon { max-width: 80%; animation: chargebee-checkout-bounce 0.6s ease; width: 60%; max-height: 70px; } @keyframes chargebee-checkout-bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .chargebee-checkout-email-title { font-size: 14px; color: darkred; background: white; text-align: center; color: var(--brand-color-1); font-family: 'Open Sans', sans-serif; font-weight: normal; } .chargebee-checkout-email-subtitle { color: #666; text-align: center; font-size: 15px; line-height: 1.5; } /* OTP Modal specific styles */ .chargebee-checkout-otp-subtitle { color: #666; text-align: center; margin-top: 12px; margin-bottom: 10px; font-size: 14px; line-height: 1.5; } .chargebee-checkout-otp-input { text-align: center; font-size: 24px; letter-spacing: 8px; font-weight: 600; } .chargebee-checkout-otp-resend { display: flex; justify-content: center; margin-bottom: 6px; } .chargebee-checkout-otp-resend-btn { background: none; border: none; color: var(--brand-color-1, #007bff); font-size: 14px; cursor: pointer; text-decoration: underline; padding: 0; } .chargebee-checkout-otp-resend-btn:hover { opacity: 0.8; } .chargebee-checkout-otp-resend-btn:disabled { opacity: 0.5; cursor: not-allowed; } .chargebee-checkout-otp-resend-timer { color: #999; font-size: 14px; } .chargebee-checkout-email-message.success { color: #28a745; } /* End OTP Modal specific styles */ .chargebee-checkout-email-input-wrapper { width: 100%; } .chargebee-checkout-email-input { width: 100%; padding: 16px 16px 16px 16px; border: 1px solid darkslategrey !important; background-color: #fff; border-radius: 2px; font-size: 16px; transition: all 0.3s ease; outline: none; font-family: inherit; background-repeat: no-repeat; background-position: 16px center; background-size: 20px 20px; height: 50px; } .chargebee-checkout-email-input::placeholder { color: #1B1B1B; font-size: 14px; } .chargebee-checkout-email-message { color: #e63946; font-size: 0.9rem; margin-top: 0.5rem; text-align: center; min-height: 1.2em; margin-bottom: 4px; } .chargebee-checkout-email-cta-button { width: 234px; height: 40px; line-height: 22px; padding: 0px; display: block; border: none; border-radius: 1px; cursor: pointer; transition: all 0.3s ease; background: var(--flexi-brand_color_1, white); font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: 0.5px; text-transform: capitalize; color: white; } .chargebee-checkout-email-cta-button:hover { transform: translateY(-2px); box-shadow: 2px 0px 5px #00000099; } .chargebee-checkout-email-cta-button:active { transform: translateY(0); } /* =========================== CHARGEBEE CHECKOUT LOGIN MODAL =========================== */ .chargebee-checkout-login-modal-content { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; padding: 25px 40px 20px 40px; align-items: center; } .chargebee-checkout-success-content { padding: 25px 40px 20px 40px; } .chargebee-checkout-login-title { font-size: 24px; font-weight: 700; margin-bottom: 8px; text-align: center; } .chargebee-checkout-login-subtitle { font-size: 15px; color: #666; text-align: center; margin-bottom: 16px; } .chargebee-checkout-login-payment-details { background-color: #f9fafb; border-radius: 8px; padding: 16px; margin-bottom: 24px; width: 100%; } .chargebee-checkout-login-payment-details div { margin-bottom: 4px; font-size: 14px; color: #333; } .chargebee-checkout-login-cta-button { width: 100%; line-height: 3em; border: none; border-radius: 1px; font-size: 16px; font-weight: 600; cursor: pointer; background: linear-gradient(135deg, var(--flexi-brand_color_1, #006edc), color-mix(in srgb, var(--flexi-brand_color_1, #006edc) 70%, white)); color: white; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); transition: all 0.3s ease; } .chargebee-checkout-login-notice { background-color: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 16px; margin-bottom: 24px; display: flex; align-items: flex-start; gap: 12px; } .chargebee-checkout-login-info-icon { width: 20px; height: 20px; color: #3b82f6; margin-top: 2px; flex-shrink: 0; } .chargebee-checkout-login-notice-title { font-weight: 600; color: #1e40af; margin-bottom: 4px; font-size: 14px; text-align: left; } .chargebee-checkout-login-notice-text { color: #1d4ed8; font-size: 14px; line-height: 1.4; text-align: left; } .chargebee-checkout-login-success-icon { width: 64px; height: 64px; background-color: #dcfce7; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; animation: post-purchase-login-v2-pulse 2s infinite; } .chargebee-checkout-login-success-icon svg { width: 32px; height: 32px; color: #16a34a; } .post-purchase-login-payment-details { background-color: #eff6ff; border-radius: 8px; padding: 16px; margin-bottom: 24px; } .chargebee-checkout-login-detail-row { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 14px; } .chargebee-checkout-login-detail-row:last-child { margin-bottom: 0; } .chargebee-checkout-login-detail-label { color: #6b7280; } .chargebee-checkout-login-detail-value { color: #111827; font-weight: 500; } .chargebee-checkout-login-cta-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5); } .chargebee-checkout-login-cta-button:active { transform: translateY(0); } .chargebee-checkout-close-btn { position: absolute; top: -12px; right: -12px; background: black; border: none; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: white; transition: all 0.3s ease; } /* =========================== CHARGEBEE CHECKOUT SUCCESS MODAL =========================== */ .chargebee-checkout-checkmark { color: white; font-size: 35px; font-weight: bold; } .chargebee-checkout-success-icon { display: flex; align-items: center; justify-content: center; margin-bottom: 24px; } .chargebee-checkout-checkmark { font-size: 48px; color: #667eea; } .chargebee-checkout-success-title { font-size: 24px; font-weight: 700; margin-bottom: 12px; text-align: center; } .chargebee-checkout-success-message { text-align: center; color: #666; margin-bottom: 24px; } .chargebee-checkout-success-button { width: 100%; padding: 8px; line-height: 2em; border-radius: 3px; font-weight: 600; font-size: 16px; border: none; background: linear-gradient(135deg, var(--flexi-brand_color_1, #006edc), color-mix(in srgb, var(--flexi-brand_color_1, #006edc) 70%, white)); color: white; cursor: pointer; transition: all 0.3s ease; } .chargebee-checkout-success-button:hover { transform: translateY(-2px); } .chargebee-checkout-feature-list { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); border-radius: 16px; padding: 20px; margin: 25px 0; text-align: left; } .chargebee-checkout-feature-item { display: flex; align-items: center; margin-bottom: 12px; color: #374151; font-size: 14px; } .cha