:root { --color-bg: #fff; --color-text: #111; --color-text-secondary: #6E6E6E; --color-text-muted: #333; --color-border: rgba(17, 17, 17, 0.15); --color-border-light: rgba(17, 17, 17, 0.10); --color-sidebar-bg: #F7F7FA; --color-primary: #205EFF; --color-success: #3CC83C; --color-danger: #FA4655; --color-warning: #FFAE50; --color-info-border: rgba(101, 121, 227, 0.50); --color-info-bg: #F0F2FF; --color-danger-border: rgba(250, 70, 85, 0.30); --color-danger-bg: rgba(250, 70, 85, 0.07); --color-warning-border: rgba(255, 174, 80, 0.30); --color-warning-bg: rgba(255, 174, 80, 0.07); --space-xs: 4px; --space-sm: 6px; --space-md: 8px; --space-lg: 12px; --space-xl: 16px; --space-2xl: 24px; --space-3xl: 28px; --font-size-xs: 11px; --font-size-sm: 12px; --font-size-md: 14px; --font-size-base: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --content-block-padding: 144px 0 80px; --sidebar-width: 386px; --border-radius-sm: 4px; --border-radius-md: 6px; --border-radius-lg: 16px; --loader-background: rgba(255, 255, 255, 0.7); --loader-size: min(400px, min(100vh, 100vw)); --transition-fast: 0.3s ease; --transition-base: 0.35s ease; --icon-size-sm: 12px; --icon-size-md: 14px; --icon-size-lg: 16px; } @-webkit-keyframes blurLoading { from { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } to { -webkit-transform: translateX(10%); -moz-transform: translateX(10%); -o-transform: translateX(10%); -ms-transform: translateX(10%); transform: translateX(10%); } } @-moz-keyframes blurLoading { from { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } to { -webkit-transform: translateX(10%); -moz-transform: translateX(10%); -o-transform: translateX(10%); -ms-transform: translateX(10%); transform: translateX(10%); } } @-o-keyframes blurLoading { from { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } to { -webkit-transform: translateX(10%); -moz-transform: translateX(10%); -o-transform: translateX(10%); -ms-transform: translateX(10%); transform: translateX(10%); } } @keyframes blurLoading { from { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } to { -webkit-transform: translateX(10%); -moz-transform: translateX(10%); -o-transform: translateX(10%); -ms-transform: translateX(10%); transform: translateX(10%); } } .d-none { display: none !important; } .d-flex { display: flex !important; } .mt-0 { margin-top: 0 !important; } .wrap, .wrap .content-block { overflow: visible; } .content-block { padding: var(--content-block-padding); } #app-loader { position: fixed; inset: 0; display: flex; padding-top: calc(50vh - 120px); flex-direction: column; align-items: center; justify-items: center; text-align: center; background: var(--color-bg); z-index: 1001; } #app-loader .logo { display: inline-block; width: 116px; height: 116px; margin-bottom: 48px; } #app-loader .spinner:before { width: 40px; height: 40px; display: block; content: ''; background-image: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/mac/checkout/icon-loading.svg?1774272321"); background-repeat: no-repeat; background-size: contain; background-position: center; } #app-loader p { display: block; padding-top: 14px; color: var(--color-text-secondary); font-size: 0.875rem; line-height: 1.5; text-align: center; } #page-loader { position: fixed; inset: 0; background: var(--loader-background); z-index: 1000; } #page-loader::before { display: block; position: absolute; top: calc(50% - var(--loader-size) / 2); left: calc(50% - var(--loader-size) / 2); width: var(--loader-size); height: var(--loader-size); content: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/mac/checkout/icon-spin.svg?1774272321"); background-repeat: no-repeat; background-size: contain; background-position: center; } .top-menu .menu .secure-checkout { position: relative; display: flex; align-items: center; gap: var(--space-xs); color: var(--color-text-secondary); font-size: var(--font-size-md); line-height: 1.5; font-weight: 400; margin-right: var(--space-lg); } .top-menu .menu .secure-checkout::before { content: ''; display: block; width: 24px; height: 24px; background: center / cover no-repeat url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/mac/stripe/icons/secured.svg?1774272321"); } .checkout-container { display: flex; flex-direction: row; justify-content: center; gap: var(--space-2xl); } .checkout-container .checkout-content, .checkout-container .checkout-sidebar-container { display: flex; flex-direction: column; gap: var(--space-xl); width: var(--sidebar-width); line-height: 1.5; } .checkout-container .info, .checkout-container .alert, .checkout-container .warning { border-radius: var(--border-radius-sm); display: flex; gap: var(--space-md); flex-wrap: nowrap; flex-direction: row; align-items: start; font-size: var(--font-size-md); color: var(--color-text); } .checkout-container .info { gap: var(--space-xs); align-items: center; line-height: 1.25; border: 1px solid var(--color-info-border); background: var(--color-info-bg); } .checkout-container .alert { padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-danger-border); background: var(--color-danger-bg); } .checkout-container .warning { padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-warning-border); background: var(--color-warning-bg); } .checkout-container .alert-text { color: var(--color-danger); } .checkout-container .alert i, .checkout-container .warning i, .checkout-container .info i { margin: var(--space-xs) 0; pointer-events: none; } .checkout-container .info span, .checkout-container .alert span, .checkout-container .warning span { overflow: hidden; text-overflow: ellipsis; } .checkout-container i[class^="icon-"] { display: inline-flex; background-repeat: no-repeat; background-position: center; background-size: contain; width: var(--icon-size-sm); height: var(--icon-size-sm); flex-shrink: 0; } .checkout-container i.icon-md { width: var(--icon-size-md); height: var(--icon-size-md); } .checkout-container i.icon-lg { width: var(--icon-size-lg); height: var(--icon-size-lg); } .checkout-container .icon-close { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/mac/checkout/icon-close.svg?1774272321"); } .checkout-container .icon-alert { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/mac/checkout/icon-alert.svg?1774272321"); } .checkout-container .icon-arrow-left { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/mac/checkout/icon-arrow-left.svg?1774272321"); } .checkout-container .icon-arrow-up { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/mac/checkout/icon-arrow-up.svg?1774272321"); } .checkout-container .icon-arrow-down { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/mac/checkout/icon-arrow-down.svg?1774272321"); } .checkout-container .icon-arrow-circle { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/mac/checkout/icon-arrow-circle.svg?1774272321"); } .checkout-container .icon-cancel { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/mac/checkout/icon-cancel.svg?1774272321"); } .checkout-container .icon-info { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/mac/checkout/icon-info.svg?1774272321"); } .checkout-container .icon-success { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/mac/checkout/icon-success.svg?1774272321"); } .checkout-container .icon-warning { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/mac/checkout/icon-warning.svg?1774272321"); } .checkout-container .icon-loading { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/mac/checkout/icon-loading.svg?1774272321"); } .checkout-container .icon-mark { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/mac/checkout/icon-mark.svg?1774272321"); } .checkout-container .icon-plus { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/mac/checkout/icon-plus.svg?1774272321"); } .checkout-container .icon-shield { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/mac/checkout/icon-shield.svg?1774272321"); } .checkout-container .icon-lock { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/mac/checkout/icon-lock.svg?1774272321"); } .checkout-container .icon-apple { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/mac/checkout/icon-apple.svg?1774272321"); } .checkout-container [data-tooltip] { position: relative; cursor: pointer; font-style: normal; } .checkout-container [data-tooltip]::before, .checkout-container [data-tooltip]::after { visibility: hidden; opacity: 0; -webkit-transition: var(--transition-base); -moz-transition: var(--transition-base); -o-transition: var(--transition-base); -ms-transition: var(--transition-base); transition: var(--transition-base); position: absolute; top: 50%; } .checkout-container [data-tooltip]::before { content: attr(data-tooltip); left: calc(100% + 14px); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-weight: 400; font-size: var(--font-size-sm); color: var(--color-text-secondary); -webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.10); -moz-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.10); -o-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.10); -ms-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.10); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.10); padding: var(--space-md) 10px; white-space: nowrap; border-radius: var(--border-radius-sm); background: var(--color-bg); } .checkout-container [data-tooltip]::after { content: ''; left: calc(100% + 6px); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid var(--color-bg); } .checkout-container [data-tooltip][data-tooltip-top]::before { left: unset; right: -15px; top: -10px; width: 200px; white-space: unset; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } .checkout-container [data-tooltip][data-tooltip-top]::after { border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid var(--color-bg); border-bottom: 0; right: -2px; left: unset; top: -6px; } .checkout-container [data-tooltip]:hover::before, .checkout-container [data-tooltip]:hover::after { visibility: visible; opacity: 1; } .checkout-container .btn { min-width: auto; white-space: nowrap; font-size: var(--font-size-base); } .checkout-container .btn-paypal { background-color: #ffc439 !important; border-color: #ffc439 !important; background-image: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/mac/checkout/paypal.svg?1774272321"); } .checkout-container .btn-paypal:hover { background-color: #f3ba38 !important; } .checkout-container .btn-paypal:active { background-color: #e5b034 !important; } .checkout-container .btn-alipay { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/mac/checkout/alipay.svg?1774272321"); } .checkout-container .btn-card { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/mac/checkout/card.svg?1774272321"); min-height: 14px; } .checkout-container .btn-sepa { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/mac/checkout/sepa.svg?1774272321"); min-height: 16px; } .three-d-secure { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .7); z-index: 1000; } .three-d-secure iframe { display: block; width: 100%; min-width: 250px; height: 100%; min-height: 400px; border: 0; } .checkout-container .form-collapse label { display: flex; gap: var(--space-md); align-items: center; color: var(--color-primary); font-size: var(--font-size-md); font-weight: 600; cursor: pointer; } .checkout-container .input-group { display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--space-md); width: 100%; position: relative; } .checkout-container .form-group { display: flex; flex-direction: column; position: relative; width: 100%; } .checkout-container .input-group .form-group { margin-bottom: 0; } .checkout-container .form-group label { display: flex; font-weight: 600; margin-bottom: var(--space-sm); font-size: var(--font-size-md); color: var(--color-text); } .checkout-container .form-control { padding: 10px var(--space-2xl); border-radius: var(--border-radius-sm); border: 1px solid var(--color-border); background: var(--color-bg); width: 100%; color: var(--color-text); min-height: 44px; font-size: var(--font-size-base); font-weight: 400; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .checkout-container .form-control:disabled, .checkout-container .form-control:read-only { color: var(--color-text-secondary); } .checkout-container .form-control.is-valid { border-color: var(--color-success); -webkit-box-shadow: inset 0 0 0 1px var(--color-success); -moz-box-shadow: inset 0 0 0 1px var(--color-success); -o-box-shadow: inset 0 0 0 1px var(--color-success); -ms-box-shadow: inset 0 0 0 1px var(--color-success); box-shadow: inset 0 0 0 1px var(--color-success); } .checkout-container .form-control.is-invalid { border-color: var(--color-danger); } .checkout-container .form-control.is-incorrect { border-color: var(--color-warning); } .checkout-container .form-control ~ [class^="icon-"] { position: absolute; right: var(--space-md); bottom: 36px; display: none; } .checkout-container .form-control:has(~ .form-feedback) ~ [class^="icon-"] { bottom: 61px; } .checkout-container .form-control ~ .icon-loading { width: 20px; height: 20px; bottom: 12px; right: var(--space-2xl); } .checkout-container .form-control.is-valid ~ .icon-success, .checkout-container .form-control.is-invalid ~ .icon-alert, .checkout-container .form-control.is-incorrect ~ .icon-warning, .checkout-container .form-control.is-loading ~ .icon-loading { display: flex; } .checkout-container .form-feedback { margin-top: var(--space-xs); color: var(--color-text-secondary); font-size: var(--font-size-md); gap: var(--space-xs); display: flex; align-items: center; } .checkout-container .form-feedback.sm { font-size: var(--font-size-sm); } .checkout-container .form-feedback.center { justify-content: center; } .checkout-container .form-feedback.is-invalid { color: var(--color-danger); } .checkout-container .form-feedback.is-incorrect { color: var(--color-warning); font-weight: 400; } .checkout-container .collapse-item { display: flex; flex-direction: column; } .checkout-container .collapse-header { cursor: pointer; } .checkout-container .collapse-body { max-height: 0; opacity: 0; overflow: hidden; -webkit-transition: max-height var(--transition-base), opacity var(--transition-base); -moz-transition: max-height var(--transition-base), opacity var(--transition-base); -o-transition: max-height var(--transition-base), opacity var(--transition-base); -ms-transition: max-height var(--transition-base), opacity var(--transition-base); transition: max-height var(--transition-base), opacity var(--transition-base); } .checkout-container .collapse-item.active .collapse-body { max-height: 1000px; opacity: 1; } .checkout-container .legal-info { font-size: var(--font-size-sm); color: var(--color-text-muted); } .checkout-container .legal-info .form-feedback { font-weight: 600; margin: 0; color: var(--color-text); } .checkout-container .legal-info i { -webkit-transition: var(--transition-base); -moz-transition: var(--transition-base); -o-transition: var(--transition-base); -ms-transition: var(--transition-base); transition: var(--transition-base); } .checkout-container .legal-info.active i { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .checkout-container .legal-info .collapse-body { display: flex; flex-direction: column; } .checkout-container .legal-info h5 { margin: var(--space-xl) 0 var(--space-xs); font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: 600; } .checkout-container .legal-info p { color: var(--color-text-secondary); } .checkout-container .legal-info ul { position: relative; padding-left: var(--space-xl); } .checkout-container .legal-info ul li:not(:last-child) { margin-bottom: var(--space-xs); } .checkout-container .legal-info mark { background-color: transparent; color: var(--color-primary); } .checkout-sidebar-container .back-link { display: none; } .checkout-container a.back-link { align-items: center; gap: var(--space-sm); color: var(--color-primary); } .checkout-container .checkout-sidebar { background: var(--color-sidebar-bg); border-radius: var(--border-radius-lg); padding: var(--space-2xl); display: flex; flex-direction: column; gap: var(--space-lg); position: sticky; top: 100px; align-self: flex-start; width: 100%; } .checkout-sidebar .sidebar-header { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: start; justify-content: space-between; gap: var(--space-xl); margin-bottom: var(--space-lg); } .checkout-sidebar .sidebar-header h3 { font-size: var(--font-size-xl); color: var(--color-text); max-width: 60%; } .checkout-sidebar .sidebar-header .guarantee { padding: 2px var(--space-xs); max-width: 40%; } .checkout-sidebar .sidebar-header .guarantee .icon { width: 30px; height: 30px; position: relative; display: flex; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; background-position: center; background-size: contain; background-repeat: no-repeat; line-height: 0.95; color: #fff; } .checkout-sidebar .sidebar-header .guarantee .icon i { width: 14px; height: 14px; margin: -3px 0 0; } .checkout-sidebar .sidebar-header .guarantee .icon span:first-child { font-size: 12px; font-weight: 500; margin-top: -2px; } .checkout-sidebar .sidebar-header .guarantee .icon span:last-child { font-size: 6px; font-weight: 400; } .checkout-sidebar .sidebar-header .guarantee .title { font-size: var(--font-size-xs); font-weight: 600; color: var(--color-text); white-space: nowrap; } .checkout-sidebar .sidebar-product { display: flex; flex-direction: row; gap: var(--space-lg); margin-bottom: var(--space-3xl); } .checkout-sidebar .sidebar-product .icon { width: 48px; height: 48px; background-image: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/common/pdfexpert-logo.svg?1770636111"); background-repeat: no-repeat; background-size: contain; background-position: center; flex-shrink: 0; } .checkout-sidebar .sidebar-product .title { display: flex; flex-direction: column; } .checkout-sidebar .sidebar-product .title h4 { font-weight: 700; font-size: var(--font-size-base); white-space: nowrap; } .checkout-sidebar .sidebar-product .title sub { color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: 400; } .checkout-sidebar .sidebar-product .price { font-weight: 700; margin-left: auto; } .checkout-sidebar .sidebar-trial { padding: 10px var(--space-lg); justify-content: space-between; } .checkout-sidebar .sidebar-trial .title { font-weight: 600; } .checkout-sidebar .sidebar-trial .deadline { color: var(--color-text-secondary); font-size: var(--font-size-sm); } .checkout-sidebar .sidebar-lines { display: flex; flex-direction: column; gap: var(--space-sm); list-style: none; } .checkout-sidebar .sidebar-lines li { font-size: var(--font-size-md); color: var(--color-text-secondary); display: flex; justify-content: space-between; align-items: center; } .checkout-sidebar .sidebar-lines .label { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--space-sm); } .checkout-sidebar .sidebar-lines .is-loading { background-color: rgba(0, 0, 0, 0.075); border-radius: var(--border-radius-sm); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.025); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.025); -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.025); -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.025); box-shadow: 0 0 10px rgba(0, 0, 0, 0.025); color: transparent; height: fit-content; overflow: hidden; position: relative; } .checkout-sidebar .sidebar-lines .is-loading::after { content: ''; -webkit-animation: blurLoading 1.5s linear infinite; -moz-animation: blurLoading 1.5s linear infinite; -o-animation: blurLoading 1.5s linear infinite; animation: blurLoading 1.5s linear infinite; background: radial-gradient(circle at 80% -20%, rgba(255, 255, 255, .6) 0, transparent 20%), radial-gradient(circle at 50% 150%, rgba(255, 255, 255, .6) 0, transparent 50%), radial-gradient(circle at 20% -20%, rgba(255, 255, 255, .6) 0, transparent 20%); display: block; height: 100%; left: 0; position: absolute; top: 0; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); width: 800%; } .checkout-sidebar .sidebar-promo-code { border-top: 1px solid var(--color-border-light); } .checkout-sidebar .sidebar-promo-code .form-collapse { padding: var(--space-xl) 0; border-bottom: 1px solid var(--color-border-light); } .checkout-sidebar .sidebar-promo-code .form-collapse.active { border-bottom: 0; padding-bottom: 0; } .checkout-sidebar .sidebar-promo-code .form-collapse.active label { margin-bottom: var(--space-lg); } .checkout-sidebar .sidebar-sticky { display: flex; flex-direction: column; gap: var(--space-lg); } .checkout-sidebar .sidebar-summary { color: var(--color-text); font-weight: 600; display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .checkout-sidebar .sidebar-summary .price { display: flex; align-items: center; gap: var(--space-xs); } .checkout-sidebar .sidebar-summary .price span { font-size: var(--font-size-lg); } .checkout-sidebar .sidebar-summary .price sub { font-size: var(--font-size-base); text-decoration: line-through; color: var(--color-text-secondary); } .checkout-sidebar .sidebar-disclaimer, .checkout-sidebar .sidebar-trial-info { display: flex; align-items: self-start; flex-wrap: nowrap; flex-direction: row; font-size: var(--font-size-sm); color: var(--color-text-secondary); } .checkout-sidebar .sidebar-disclaimer { margin-top: -12px; justify-content: space-between; } .checkout-sidebar .sidebar-disclaimer .text { display: flex; flex-direction: column; } .checkout-sidebar .sidebar-disclaimer .period { white-space: nowrap; margin-left: var(--space-xl); } .checkout-sidebar .sidebar-trial-info { justify-content: start; align-items: start; gap: var(--space-md); } .checkout-sidebar .sidebar-trial-info i { margin: var(--space-xs) 0; } .checkout-content { display: flex; flex-direction: column; gap: var(--space-xl); } .checkout-content h2 { margin: var(--space-md) 0; font-weight: 700; font-size: var(--font-size-2xl); color: var(--color-text); } .checkout-content .customer-info, .checkout-content .payment-info { display: flex; flex-direction: column; gap: var(--space-xl); } .checkout-content .tax-number-info .form-collapse.active label { margin-bottom: var(--space-xl); } .checkout-content .tax-number-info .form-group { margin-top: var(--space-xl); } .checkout-content .tax-number-info .input-group .form-group { margin-top: 0; } .checkout-content .payment-info h2 { margin: var(--space-2xl) 0 var(--space-md); } .checkout-content .payment-method-list { display: flex; flex-direction: column; gap: var(--space-lg); } .checkout-content .payment-card { border: 1px solid var(--color-border); background-color: var(--color-bg); background-size: auto; background-repeat: no-repeat; background-position: center; border-radius: var(--border-radius-md); -webkit-transition: background-color var(--transition-fast); -moz-transition: background-color var(--transition-fast); -o-transition: background-color var(--transition-fast); -ms-transition: background-color var(--transition-fast); transition: background-color var(--transition-fast); width: 100%; } .checkout-content .payment-card:not(.active):hover { background-color: #f8fafc; } .checkout-content .payment-card .collapse-header { display: flex; align-items: center; justify-content: center; box-sizing: border-box; position: relative; padding: var(--space-lg) var(--space-xl); min-height: 44px; } .checkout-content .payment-card .collapse-header .close { position: absolute; right: var(--space-xl); display: none; -webkit-transition: var(--transition-base); -moz-transition: var(--transition-base); -o-transition: var(--transition-base); -ms-transition: var(--transition-base); transition: var(--transition-base); } .checkout-content .payment-card .collapse-header .close:hover { opacity: 0.7; } .checkout-content .payment-card.active .collapse-header .close { display: flex; } .checkout-content .payment-card .collapse-body { padding: 0 var(--space-xl); -webkit-transition: var(--transition-base); -moz-transition: var(--transition-base); -o-transition: var(--transition-base); -ms-transition: var(--transition-base); transition: var(--transition-base); } .checkout-content .payment-card.active .collapse-body { padding-bottom: var(--space-xl); overflow: visible; } .checkout-content .payment-card .btn { margin: 20px 0; width: 100%; } .checkout-content .payment-card .btn:last-child { margin-bottom: 0; } .checkout-content .payment-card .btn-img { background-position: center; background-size: auto; background-repeat: no-repeat; margin: 0; } .checkout-content .payment-card .input-group { gap: 0; } .checkout-content .payment-card .form-control-container { width: 50%; position: relative; } .checkout-content .payment-card .number { border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0; margin-top: var(--space-xs); } .checkout-content .payment-card .expiry { border-radius: 0 0 0 var(--border-radius-sm); border-top: 0; } .checkout-content .payment-card .expiry.is-valid { -webkit-box-shadow: inset 1px 0 0 0 var(--color-success), inset -1px 0 0 0 var(--color-success), inset 0 -1px 0 0 var(--color-success); -moz-box-shadow: inset 1px 0 0 0 var(--color-success), inset -1px 0 0 0 var(--color-success), inset 0 -1px 0 0 var(--color-success); -o-box-shadow: inset 1px 0 0 0 var(--color-success), inset -1px 0 0 0 var(--color-success), inset 0 -1px 0 0 var(--color-success); -ms-box-shadow: inset 1px 0 0 0 var(--color-success), inset -1px 0 0 0 var(--color-success), inset 0 -1px 0 0 var(--color-success); box-shadow: inset 1px 0 0 0 var(--color-success), inset -1px 0 0 0 var(--color-success), inset 0 -1px 0 0 var(--color-success); } .checkout-content .payment-card .cvc { border-radius: 0 0 var(--border-radius-sm) 0; border-top: 0; border-left: 0; } .checkout-content .payment-card .cvc.is-valid { -webkit-box-shadow: inset -1px 0 0 0 var(--color-success), inset 0 -1px 0 0 var(--color-success); -moz-box-shadow: inset -1px 0 0 0 var(--color-success), inset 0 -1px 0 0 var(--color-success); -o-box-shadow: inset -1px 0 0 0 var(--color-success), inset 0 -1px 0 0 var(--color-success); -ms-box-shadow: inset -1px 0 0 0 var(--color-success), inset 0 -1px 0 0 var(--color-success); box-shadow: inset -1px 0 0 0 var(--color-success), inset 0 -1px 0 0 var(--color-success); } .checkout-content .payment-card .icon-mark { display: flex; top: var(--space-xl); right: var(--space-2xl); } @media (max-width: 1199px) { .checkout-container .checkout-content, .checkout-container .checkout-sidebar-container { width: 436px; } .checkout-sidebar .sidebar-header h3 { font-size: var(--font-size-lg); } } @media (max-width: 991px) { .checkout-container .checkout-content, .checkout-container .checkout-sidebar-container { width: 340px; } .checkout-content h2 { font-size: var(--font-size-xl); } .checkout-container .checkout-content { display: flex; } } @media (max-width: 767px) { .checkout-container { flex-direction: column; } .checkout-container .checkout-content, .checkout-container .checkout-sidebar-container { width: 100%; } .checkout-container .checkout-content { order: 2; } .checkout-container .checkout-sidebar-container { order: 1; } .checkout-container .checkout-sidebar-container .back-link { display: flex; } .checkout-container .checkout-content .back-link { display: none; } .checkout-container .checkout-sidebar { position: relative; top: 0; } .checkout-sidebar .sidebar-header h3 { font-size: var(--font-size-base); max-width: 100%; } .checkout-sidebar .sidebar-header .guarantee { max-width: 100%; } .checkout-sidebar.fixed .sidebar-sticky { position: fixed; top: 79px; left: 0; background: var(--color-bg); border-bottom: 1px solid var(--color-border-light); -webkit-box-shadow: 2px 2px 15px rgba(0, 0, 0, .05), 0 -30px 20px 10px var(--color-bg); -moz-box-shadow: 2px 2px 15px rgba(0, 0, 0, .05), 0 -30px 20px 10px var(--color-bg); -o-box-shadow: 2px 2px 15px rgba(0, 0, 0, .05), 0 -30px 20px 10px var(--color-bg); -ms-box-shadow: 2px 2px 15px rgba(0, 0, 0, .05), 0 -30px 20px 10px var(--color-bg); box-shadow: 2px 2px 15px rgba(0, 0, 0, .05), 0 -30px 20px 10px var(--color-bg); width: 100%; padding: var(--space-xl) 20px; } .checkout-sidebar.fixed .sidebar-sticky .sidebar-summary { flex-direction: row; align-items: center; } } @media (max-width: 375px) { .top-menu a.product-choice span.name { display: flex; } .top-menu .menu .secure-checkout span { display: none; } .checkout-sidebar .sidebar-summary { flex-direction: column; align-items: start; } .checkout-sidebar .sidebar-product .title h4 { white-space: unset; font-size: var(--font-size-md); } .checkout-sidebar .sidebar-product .icon { width: 40px; height: 40px; } .checkout-container [data-tooltip]::before { width: 150px; white-space: unset; } .fr .checkout-sidebar .sidebar-header, .es .checkout-sidebar .sidebar-header, .pl .checkout-sidebar .sidebar-header { flex-direction: column; } } @media (max-width: 335px) { .checkout-sidebar .sidebar-header { flex-direction: column; } } @media (prefers-color-scheme: dark) { :root { --color-bg: #333; --color-text: #fff; --text-color: #fff; --color-text-secondary: rgba(255, 255, 255, 0.60); --color-text-muted: rgba(255, 255, 255, 0.80); --color-border: rgba(255, 255, 255, 0.15); --color-border-light: rgba(255, 255, 255, 0.10); --color-sidebar-bg: #333; --color-primary: #3B79FF; --color-info-bg: rgba(101, 121, 227, 0.10); --top-menu-product-choice: #fff; } body { background-color: #282828; } .top-menu::before { border: 1px solid rgba(255, 255, 255, 0.10); background: rgba(40, 40, 40, 0.95); -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05); -moz-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05); -o-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05); -ms-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05); box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05); } .checkout-content .payment-card:not(.active):hover { background-color: rgba(40, 40, 40, 0.95); } .checkout-container .legal-info .form-feedback { color: var(--color-text-muted); } .checkout-container .icon-arrow-down { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(invert=1)"; -moz-filter: invert(1); -webkit-filter: invert(1); filter: invert(1); } #app-loader .spinner:before { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/mac/checkout/icon-loading-light.svg?1774272321"); } .checkout-container .btn-alipay { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/mac/checkout/alipay-light.svg?1774272321"); } .checkout-container .btn-card { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/mac/checkout/card-light.svg?1774272321"); } .checkout-container .btn-sepa { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/mac/checkout/sepa-light.svg?1774272321"); } .checkout-container .icon-loading { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/mac/checkout/icon-loading-light.svg?1774272321"); } .checkout-container .icon-mark { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/mac/checkout/icon-mark-light.svg?1774272321"); } }