та
теги від wpautop() */
.vp-shortcode-locked p:empty,
.vp-shortcode-purchase p:empty,
.vp-shortcode-locked br,
.vp-shortcode-purchase br,
.vp-promo-banner p:empty,
.vp-promo-banner br,
.vp-pricing-tiers-grid p:empty,
.vp-pricing-tiers-grid br,
.vp-tier-card p:empty,
.vp-tier-card br {
display: none !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
height: 0 !important;
}
/* Контент до покупки */
.vp-shortcode-preview {
padding: 0px 25px 0;
}
/* Блок покупки (під превью) — padding як .vp-file-content */
.vp-shortcode-purchase {
display: block;
padding: 24px;
}
.vp-purchase-info {
flex: 1;
}
.vp-purchase-title {
font-size: 16px;
font-weight: 600;
color: var(--vp-sales-text);
margin: 0 0 8px;
}
.vp-purchase-price {
font-size: 14px;
}
/* Розблокований контент */
.vp-unlocked-content {
padding: 0;
}
/* Responsive */
@media (max-width: 600px) {
.vp-shortcode-purchase {
padding: 16px;
}
.vp-shortcode-purchase .vp-btn {
width: 100%;
}
}
/* ==========================================================================
Demo Section (inside shortcode locked block)
========================================================================== */
/* Контейнер демо-секції */
.vp-demo-section {
padding: 0 24px;
}
/* Кнопки "Дивитись демо" та "Підтримати проект" */
.vp-demo-controls {
display: flex;
gap: 12px;
margin: 16px 0;
flex-wrap: wrap;
}
.vp-demo-toggle-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
font-size: 15px;
font-weight: 600;
color: #fff;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
border: none;
border-radius: var(--vp-sales-radius);
cursor: pointer;
transition: all 0.25s ease;
text-decoration: none;
flex: 1;
justify-content: center;
min-width: 160px;
}
.vp-demo-toggle-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
color: #fff;
text-decoration: none;
}
.vp-demo-toggle-btn:active {
transform: translateY(0);
}
.vp-demo-toggle-btn.vp-demo-active {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
}
.vp-demo-toggle-btn svg {
flex-shrink: 0;
}
.vp-support-project-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
font-size: 15px;
font-weight: 600;
color: #fff;
background: linear-gradient(135deg, var(--vp-sales-primary) 0%, var(--vp-sales-primary-hover) 100%);
border: none;
border-radius: var(--vp-sales-radius);
cursor: pointer;
transition: all 0.25s ease;
flex: 1;
justify-content: center;
min-width: 160px;
}
.vp-support-project-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}
.vp-support-project-btn:active {
transform: translateY(0);
}
.vp-support-project-btn svg {
flex-shrink: 0;
}
/* Demo Layout — два блоки в ряд */
.vp-demo-layout {
display: flex;
gap: 16px;
margin: 16px 0;
}
.vp-demo-col-left,
.vp-demo-col-right {
flex: 1;
min-width: 0;
}
/* Demo Card — прямокутник із закругленими кутами */
.vp-demo-card {
border: 1px solid #e2e8f0;
border-radius: 12px;
overflow: hidden;
background: #fafbfc;
height: 100%;
display: flex;
flex-direction: column;
transition: box-shadow 0.25s ease;
}
.vp-demo-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
/* Кнопка зверху картки — зливається з закругленням */
.vp-demo-card .vp-demo-toggle-btn,
.vp-demo-card .vp-support-project-btn {
border-radius: 0;
flex: none;
width: 100%;
min-width: auto;
}
/* Тіло картки — текст знизу */
.vp-demo-card-body {
padding: 12px 16px;
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
/* Інформаційний текст в демо-картці */
.vp-demo-info-text {
font-size: 13px;
color: #4a5568;
line-height: 1.4;
}
/* Соціальний доказ — компактний (в картці) */
.vp-social-proof-compact {
font-size: 13px;
color: #6b7280;
font-weight: 500;
border-top: 1px solid #edf2f7;
padding-top: 8px;
margin-top: auto;
}
.vp-social-proof-compact span {
color: #6b7280;
}
/* Лічильник демо-переглядів */
.vp-demo-limit-notice {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 10px 16px;
background: #f8fbf7;
border: 1px solid #94a3b8;
border-radius: var(--vp-sales-radius);
color: #6b8077;
font-size: 13px;
}
.vp-demo-limit-notice.vp-demo-limit-exhausted {
background: #fef2f2;
border-color: #fecaca;
color: #991b1b;
}
.vp-demo-limit-notice svg {
flex-shrink: 0;
}
.vp-demo-remaining {
font-weight: 700;
color: inherit;
}
/* Демо-контент (toggle) */
.vp-demo-content {
overflow: hidden;
padding: 0;
margin: 12px 0;
border-radius: var(--vp-sales-radius);
background: var(--vp-sales-bg-alt);
border: 1px solid var(--vp-sales-border);
transition: max-height 0.4s ease;
}
.vp-demo-content>* {
padding: 16px;
}
/* Модальне вікно (popup) */
.vp-demo-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
}
.vp-demo-modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.vp-demo-modal-body {
position: relative;
background: #fff;
border-radius: var(--vp-sales-radius-lg);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
width: 90%;
max-width: 900px;
max-height: 85vh;
overflow-y: auto;
padding: 32px;
animation: vpDemoModalIn 0.3s ease;
}
@keyframes vpDemoModalIn {
from {
opacity: 0;
transform: scale(0.95) translateY(10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.vp-demo-modal-close {
position: absolute;
top: 12px;
right: 16px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
font-size: 24px;
color: var(--vp-sales-text-muted);
cursor: pointer;
border-radius: 50%;
transition: all 0.2s ease;
}
.vp-demo-modal-close:hover {
background: var(--vp-sales-bg-alt);
color: var(--vp-sales-text);
}
.vp-demo-modal-content {
margin-top: 8px;
}
/* Соціальний доказ */
.vp-social-proof {
display: flex;
align-items: center;
gap: 8px;
margin: 16px 0 0;
padding: 10px 16px;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: var(--vp-sales-radius);
color: #166534;
font-size: 13px;
}
.vp-social-proof svg {
flex-shrink: 0;
color: #16a34a;
}
.vp-social-proof strong {
font-weight: 700;
}
/* Бонус за підтримку */
.vp-bonus-block {
margin: 12px 0 0;
padding: 16px;
background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
border: 1px solid #bfdbfe;
border-radius: var(--vp-sales-radius);
}
.vp-bonus-title {
font-size: 13px;
font-weight: 600;
color: var(--vp-sales-text);
margin-bottom: 8px;
}
.vp-bonus-list {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
}
.vp-bonus-item {
font-size: 13px;
color: var(--vp-sales-text);
white-space: nowrap;
}
/* Контент після [/Demo] — завжди видимий, стилізований як частина блоку */
.vp-after-demo-content {
padding: 0 24px 12px;
}
/* wpautop cleanup */
.vp-demo-section p:empty,
.vp-demo-section br,
.vp-demo-controls p:empty,
.vp-demo-controls br,
.vp-demo-content p:empty,
.vp-demo-card p:empty,
.vp-demo-card br,
.vp-demo-card-body p:empty,
.vp-demo-card-body br,
.vp-social-proof p:empty,
.vp-social-proof br,
.vp-bonus-block p:empty,
.vp-bonus-block br,
.vp-after-demo-content p:empty,
.vp-after-demo-content br {
display: none !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
height: 0 !important;
}
/* ======================== */
/* Bonus Content Block */
/* ======================== */
.vp-bonus-content {
margin: 16px 0;
border-radius: var(--vp-sales-radius, 8px);
}
.vp-bonus-unlocked {
/* Контент доступний — без обгортки */
}
.vp-bonus-locked {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border: 1px dashed #cbd5e1;
padding: 20px;
text-align: center;
}
.vp-bonus-locked-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.vp-bonus-locked-icon {
font-size: 24px;
opacity: 0.6;
}
.vp-bonus-locked-message {
font-size: 13px;
color: #64748b;
margin: 0;
line-height: 1.5;
}
/* ======================== */
/* Closed Content Block */
/* ======================== */
.vp-closed-content {
margin: 16px 0;
border-radius: var(--vp-sales-radius, 8px);
}
.vp-closed-visible {
/* Контент видимий до покупки — без обгортки */
}
.vp-closed-hidden {
background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
border: 1px dashed #86efac;
padding: 20px;
text-align: center;
}
.vp-closed-hidden-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.vp-closed-hidden-icon {
font-size: 24px;
color: #22c55e;
}
.vp-closed-hidden-message {
font-size: 13px;
color: #16a34a;
margin: 0;
line-height: 1.5;
}
/* wpautop cleanup для bonus/closed */
.vp-bonus-content p:empty,
.vp-bonus-content br,
.vp-closed-content p:empty,
.vp-closed-content br {
display: none !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
height: 0 !important;
}
/* Responsive */
@media (max-width: 600px) {
.vp-demo-section {
padding: 0 16px;
}
.vp-after-demo-content {
padding: 0 16px 8px;
}
.vp-demo-layout {
flex-direction: column;
}
.vp-demo-controls {
flex-direction: column;
}
.vp-demo-toggle-btn,
.vp-support-project-btn {
width: 100%;
min-width: auto;
}
.vp-demo-modal-body {
width: 95%;
padding: 20px;
max-height: 90vh;
}
.vp-bonus-list {
flex-direction: column;
gap: 4px;
}
}
/* ==========================================================================
Locked Content Block (legacy/fallback)
========================================================================== */
.vp-locked-content {
padding: 40px;
text-align: center;
background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
border: 2px dashed var(--vp-sales-border);
border-radius: var(--vp-sales-radius-lg);
margin: 20px 0;
}
.vp-locked-icon {
font-size: 48px;
margin-bottom: 16px;
}
.vp-locked-content h3 {
font-size: 20px;
font-weight: 600;
color: var(--vp-sales-text);
margin: 0 0 12px 0;
}
.vp-locked-description {
font-size: 14px;
color: var(--vp-sales-text-muted);
margin-bottom: 20px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.vp-locked-price {
margin-bottom: 20px;
}
.vp-old-price {
font-size: 16px;
color: var(--vp-sales-text-muted);
text-decoration: line-through;
margin-right: 8px;
}
.vp-sale-price,
.vp-price {
font-size: 24px;
font-weight: 700;
color: var(--vp-sales-primary);
}
.vp-discount-badge {
display: inline-block;
padding: 2px 8px;
font-size: 12px;
font-weight: 600;
color: #fff;
background: var(--vp-sales-error);
border-radius: 4px;
margin-left: 8px;
vertical-align: super;
}
/* ==========================================================================
Bonus Content Block — [bonus] shortcode
========================================================================== */
/* Заблокований бонус */
.vp-bonus-content.vp-bonus-locked {
margin: 20px 0;
padding: 32px 0;
text-align: center;
background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
border: 1px solid var(--vp-sales-border);
border-radius: var(--vp-sales-radius-lg);
}
.vp-bonus-locked-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.vp-bonus-locked-icon {
font-size: 32px;
line-height: 1;
opacity: 0.7;
}
.vp-bonus-locked-message {
font-size: 14px;
color: var(--vp-sales-text-muted);
margin: 0;
max-width: 500px;
line-height: 1.5;
}
/* Адаптивність */
@media (max-width: 768px) {
.vp-bonus-content.vp-bonus-locked {
padding: 24px 16px;
}
}
/* ==========================================================================
Bonus Badge — бейдж на превʼю продукту
========================================================================== */
.vp-bonus-badge {
position: absolute;
bottom: 12px;
left: 12px;
z-index: 10;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
background: rgba(220, 38, 38, 0.85);
color: #fff;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
line-height: 1;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease, background 0.2s ease;
pointer-events: auto;
}
.vp-bonus-badge:hover {
transform: scale(1.05);
background: rgba(220, 38, 38, 0.95);
}
.vp-bonus-badge-icon {
font-size: 14px;
line-height: 1;
animation: vp-bonus-pulse 2s ease-in-out infinite;
}
.vp-bonus-badge-text {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
@keyframes vp-bonus-pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.15);
}
}
/* ==========================================================================
Cabinet Bonus Alert — сповіщення в кабінеті
========================================================================== */
.vp-cabinet-bonus-alert {
margin-bottom: 24px;
padding: 16px 20px;
background: linear-gradient(145deg, #fef2f2 0%, #fee2e2 100%);
border: 1px solid #fecaca;
border-left: 4px solid #dc2626;
border-radius: var(--vp-sales-radius, 8px);
}
.vp-cabinet-bonus-alert-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.vp-cabinet-bonus-alert-icon {
font-size: 20px;
line-height: 1;
color: #dc2626;
}
.vp-cabinet-bonus-alert h4 {
margin: 0;
font-size: 15px;
font-weight: 600;
color: #991b1b;
}
.vp-cabinet-bonus-list {
list-style: none;
margin: 0;
padding: 0;
}
.vp-cabinet-bonus-list li {
padding: 6px 0;
font-size: 14px;
line-height: 1.5;
}
.vp-cabinet-bonus-list li+li {
border-top: 1px solid rgba(220, 38, 38, 0.1);
}
.vp-cabinet-bonus-list a {
color: #1d4ed8;
text-decoration: none;
font-weight: 500;
}
.vp-cabinet-bonus-list a:hover {
text-decoration: underline;
}
.vp-cabinet-bonus-meta {
color: #6b7280;
font-size: 13px;
}
@media (max-width: 768px) {
.vp-cabinet-bonus-alert {
padding: 12px 16px;
}
.vp-bonus-badge-text {
display: none;
}
.vp-bonus-badge {
padding: 6px 8px;
}
}
/* ==========================================================================
Modal Windows
========================================================================== */
.vp-sales-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.vp-sales-modal.vp-active {
opacity: 1;
visibility: visible;
}
.vp-sales-modal .vp-modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.vp-sales-modal .vp-modal-dialog {
position: relative;
width: 90%;
max-width: 480px;
background: var(--vp-sales-bg);
border-radius: var(--vp-sales-radius-lg);
box-shadow: var(--vp-sales-shadow-lg);
transform: scale(0.9) translateY(20px);
transition: transform 0.3s ease;
}
.vp-sales-modal.vp-active .vp-modal-dialog {
transform: scale(1) translateY(0);
}
.vp-sales-modal .vp-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid var(--vp-sales-border);
}
.vp-sales-modal .vp-modal-header h3 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: var(--vp-sales-text);
}
.vp-sales-modal .vp-modal-close {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: none;
background: transparent;
color: var(--vp-sales-text-muted);
cursor: pointer;
border-radius: var(--vp-sales-radius-sm);
transition: all var(--vp-sales-transition);
}
.vp-sales-modal .vp-modal-close:hover {
background: var(--vp-sales-bg-alt);
color: var(--vp-sales-text);
}
.vp-sales-modal .vp-modal-body {
padding: 24px;
}
/* Modal Position Classes */
.vp-modal-pos-TL .vp-modal-dialog {
margin: 20px auto auto 20px;
}
.vp-modal-pos-TC .vp-modal-dialog {
margin: 20px auto auto auto;
}
.vp-modal-pos-TR .vp-modal-dialog {
margin: 20px 20px auto auto;
}
.vp-modal-pos-CL .vp-modal-dialog {
margin: auto auto auto 20px;
}
.vp-modal-pos-CC .vp-modal-dialog {
margin: auto;
}
.vp-modal-pos-CR .vp-modal-dialog {
margin: auto 20px auto auto;
}
.vp-modal-pos-BL .vp-modal-dialog {
margin: auto auto 20px 20px;
}
.vp-modal-pos-BC .vp-modal-dialog {
margin: auto auto 20px auto;
}
.vp-modal-pos-BR .vp-modal-dialog {
margin: auto 20px 20px auto;
}
/* Modal Content Types */
.vp-modal-success {
text-align: center;
}
.vp-modal-success p:first-child,
.vp-modal-error p:first-child,
.vp-modal-warning p:first-child {
font-size: 18px;
font-weight: 600;
margin-bottom: 16px;
}
.vp-modal-success p:first-child {
color: var(--vp-sales-success);
}
.vp-modal-error p:first-child {
color: var(--vp-sales-error);
}
.vp-modal-warning p:first-child {
color: var(--vp-sales-warning);
}
/* ==========================================================================
Notifications
========================================================================== */
.vp-notification {
position: fixed;
top: 20px;
right: 20px;
max-width: 380px;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
background: var(--vp-sales-bg);
border-radius: var(--vp-sales-radius);
box-shadow: var(--vp-sales-shadow-lg);
z-index: 999999;
transform: translateX(120%);
transition: transform 0.3s ease;
}
.vp-notification.vp-active {
transform: translateX(0);
}
.vp-notification-icon {
flex-shrink: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 600;
border-radius: 50%;
color: #fff;
}
.vp-notification-success .vp-notification-icon {
background: var(--vp-sales-success);
}
.vp-notification-error .vp-notification-icon {
background: var(--vp-sales-error);
}
.vp-notification-warning .vp-notification-icon {
background: var(--vp-sales-warning);
}
.vp-notification-info .vp-notification-icon {
background: var(--vp-sales-info);
}
.vp-notification-message {
flex: 1;
font-size: 14px;
color: var(--vp-sales-text);
}
.vp-notification-close {
flex-shrink: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
border: none;
background: transparent;
color: var(--vp-sales-text-muted);
cursor: pointer;
border-radius: var(--vp-sales-radius-sm);
}
.vp-notification-close:hover {
background: var(--vp-sales-bg-alt);
color: var(--vp-sales-text);
}
/* ==========================================================================
Buttons
========================================================================== */
.vp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 24px;
font-size: 14px;
font-weight: 600;
border: none;
border-radius: var(--vp-sales-radius);
cursor: pointer;
transition: all var(--vp-sales-transition);
text-decoration: none;
}
.vp-btn-primary {
color: #fff;
background: var(--vp-sales-primary);
}
.vp-btn-primary:hover {
background: var(--vp-sales-primary-hover);
}
.vp-btn-secondary {
color: var(--vp-sales-text);
background: var(--vp-sales-bg-alt);
border: 1px solid var(--vp-sales-border);
}
.vp-btn-secondary:hover {
background: var(--vp-sales-border);
}
.vp-btn-success {
color: #fff;
background: var(--vp-sales-success);
}
.vp-btn-danger {
color: #fff;
background: var(--vp-sales-error);
}
.vp-btn-sm {
padding: 8px 16px;
font-size: 13px;
}
.vp-btn-lg {
padding: 16px 32px;
font-size: 16px;
}
.vp-btn:disabled,
.vp-btn.vp-loading {
opacity: 0.7;
cursor: not-allowed;
}
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 768px) {
.vp-cart-item {
flex-wrap: wrap;
}
.vp-cart-item-info {
order: 1;
width: calc(100% - 56px);
}
.vp-cart-item-checkbox {
order: 0;
}
.vp-cart-remove {
order: 2;
margin-left: auto;
}
.vp-cabinet-tabs {
flex-wrap: wrap;
}
.vp-cabinet-tab {
flex: 1 1 auto;
text-align: center;
}
.vp-order-card-header {
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
.vp-products-grid {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
Loading States
========================================================================== */
.vp-loading-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
.vp-loading-spinner {
width: 40px;
height: 40px;
border: 3px solid var(--vp-sales-border);
border-top-color: var(--vp-sales-primary);
border-radius: 50%;
animation: vp-spin 0.8s linear infinite;
}
/* ==========================================================================
Countdown Timer
========================================================================== */
.vp-countdown {
display: flex;
gap: 8px;
justify-content: center;
margin: 16px 0;
}
.vp-countdown-item {
display: flex;
flex-direction: column;
align-items: center;
min-width: 50px;
padding: 8px 12px;
background: var(--vp-sales-bg-alt);
border-radius: var(--vp-sales-radius);
}
.vp-countdown-value {
font-size: 24px;
font-weight: 700;
color: var(--vp-sales-primary);
}
.vp-countdown-label {
font-size: 14px;
/*color: var(--vp-sales-text-muted);*/
text-transform: uppercase;
}
/* ==========================================================================
Video Player Watermark
========================================================================== */
.vp-video-container {
position: relative;
}
.vp-video-watermark {
position: absolute;
padding: 8px 12px;
font-size: 13px;
background: rgba(0, 0, 0, 0.5);
color: rgba(255, 255, 255, 0.8);
border-radius: var(--vp-sales-radius-sm);
pointer-events: none;
font-family: monospace;
animation: vp-watermark-pulse 3s ease-in-out infinite;
}
.vp-watermark-static,
.vp-watermark-visible {
opacity: 0.7;
}
.vp-watermark-stroboscopic {
animation: vp-strobe 0.5s ease-in-out;
}
@keyframes vp-watermark-pulse {
0%,
100% {
opacity: 0.7;
}
50% {
opacity: 0.4;
}
}
@keyframes vp-strobe {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
/* Watermark positions */
.vp-watermark-TL {
top: 20px;
left: 20px;
}
.vp-watermark-TC {
top: 20px;
left: 50%;
transform: translateX(-50%);
}
.vp-watermark-TR {
top: 20px;
right: 20px;
}
.vp-watermark-CL {
top: 50%;
left: 20px;
transform: translateY(-50%);
}
.vp-watermark-CC {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.vp-watermark-CR {
top: 50%;
right: 20px;
transform: translateY(-50%);
}
.vp-watermark-BL {
bottom: 20px;
left: 20px;
}
.vp-watermark-BC {
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.vp-watermark-BR {
bottom: 20px;
right: 20px;
}
/* ==========================================================================
File Shortcode Blocks [file], [c_file]
========================================================================== */
/* Базовий контейнер файлу */
.vp-file-block {
display: flex;
align-items: center;
gap: 16px;
padding: 16px;
margin: 16px 0;
background: var(--vp-sales-bg);
border: 1px solid var(--vp-sales-border);
border-radius: var(--vp-sales-radius);
transition: all var(--vp-sales-transition);
}
.vp-file-block:hover {
box-shadow: var(--vp-sales-shadow);
}
/* Іконка файлу */
.vp-file-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
background: var(--vp-sales-bg-alt);
border-radius: var(--vp-sales-radius);
}
.vp-file-icon-locked {
opacity: 0.5;
}
/* Мініатюра файлу */
.vp-file-thumbnail {
flex-shrink: 0;
width: 64px;
height: 64px;
border-radius: var(--vp-sales-radius);
overflow: hidden;
position: relative;
}
.vp-file-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.vp-file-thumbnail-locked {
opacity: 0.7;
}
.vp-file-thumbnail .vp-lock-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
/* Контент файлу */
.vp-file-content {
flex: 1;
min-width: 0;
}
.vp-file-title {
font-size: 15px;
font-weight: 600;
color: var(--vp-sales-text);
margin-bottom: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vp-file-meta {
font-size: 13px;
color: var(--vp-sales-text-muted);
margin-bottom: 8px;
}
.vp-file-size {
background: var(--vp-sales-bg-alt);
padding: 2px 8px;
border-radius: 4px;
}
.vp-file-price {
margin-bottom: 8px;
}
.vp-file-price .vp-old-price {
font-size: 13px;
color: var(--vp-sales-text-muted);
text-decoration: line-through;
margin-right: 6px;
}
.vp-file-price .vp-current-price {
font-size: 16px;
font-weight: 600;
color: var(--vp-sales-primary);
}
.vp-file-locked-message {
font-size: 13px;
color: var(--vp-sales-text-muted);
font-style: italic;
}
/* Кнопка завантаження */
.vp-download-btn,
.vp-course-download-btn {
flex-shrink: 0;
}
.vp-btn-icon {
font-size: 16px;
}
/* Файл в курсі — компактніший вигляд */
.vp-file-course {
padding: 12px 16px;
background: var(--vp-sales-bg-alt);
}
.vp-file-course .vp-file-icon {
width: 40px;
height: 40px;
font-size: 22px;
background: var(--vp-sales-bg);
}
/* ==========================================================================
Video Shortcode Blocks [video], [c_video]
========================================================================== */
/* Базовий контейнер відео */
.vp-video-block {
margin: 20px 0;
/*border-radius: var(--vp-sales-radius-lg);*/
overflow: hidden;
background: var(--vp-sales-bg);
/*border: 1px solid var(--vp-sales-border);*/
}
/* Обгортка плеєра */
.vp-video-player-wrapper {
position: relative;
width: 100%;
aspect-ratio: 16/9;
background: #000;
}
.vp-video-player {
width: 100%;
height: 100%;
object-fit: contain;
}
.vp-video-embed {
width: 100%;
height: 100%;
}
.vp-video-embed iframe {
width: 100%;
height: 100%;
border: none;
}
/* Прев'ю заблокованого відео */
.vp-video-preview {
position: relative;
width: 100%;
aspect-ratio: 16/9;
background: var(--vp-sales-bg-alt);
display: flex;
align-items: center;
justify-content: center;
}
.vp-video-thumbnail {
width: 100%;
height: 100%;
object-fit: cover;
}
.vp-video-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}
.vp-placeholder-icon {
font-size: 64px;
opacity: 0.3;
}
.vp-video-lock-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
}
.vp-lock-icon {
font-size: 64px;
color: rgba(255, 255, 255, 0.8);
}
.vp-video-duration-badge {
position: absolute;
bottom: 12px;
right: 12px;
padding: 4px 10px;
font-size: 12px;
font-weight: 600;
color: #fff;
background: rgba(0, 0, 0, 0.7);
border-radius: 4px;
}
/* Інформація про відео */
.vp-video-info {
padding: 16px;
}
.vp-video-title {
font-size: 16px;
font-weight: 600;
color: var(--vp-sales-text);
margin-bottom: 8px;
}
.vp-video-duration {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
color: var(--vp-sales-text-muted);
}
.vp-duration-icon {
font-size: 14px;
}
.vp-video-price {
margin: 12px 0;
}
.vp-video-price .vp-old-price {
font-size: 14px;
color: var(--vp-sales-text-muted);
text-decoration: line-through;
margin-right: 8px;
}
.vp-video-price .vp-current-price {
font-size: 20px;
font-weight: 700;
color: var(--vp-sales-primary);
}
.vp-video-locked-message {
font-size: 13px;
color: var(--vp-sales-text-muted);
font-style: italic;
}
/* Відео в курсі */
.vp-video-course {
border: none;
box-shadow: var(--vp-sales-shadow);
}
.vp-video-course .vp-video-info {
background: var(--vp-sales-bg-alt);
}
/* ==========================================================================
Purchase Options (Multi-level pricing)
========================================================================== */
.vp-purchase-options {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
.vp-purchase-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 18px;
background: var(--vp-sales-bg);
border: 1px solid var(--vp-sales-border);
border-radius: var(--vp-sales-radius);
transition: all var(--vp-sales-transition);
}
.vp-purchase-option:hover {
border-color: var(--vp-sales-primary);
box-shadow: var(--vp-sales-shadow);
}
.vp-purchase-option-book {
border-color: var(--vp-sales-primary);
background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(37, 99, 235, 0.02) 100%);
}
.vp-option-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.vp-option-label {
font-size: 14px;
font-weight: 600;
color: var(--vp-sales-text);
}
.vp-option-price {
font-size: 13px;
color: var(--vp-sales-text-muted);
}
.vp-option-price .vp-old-price {
text-decoration: line-through;
margin-right: 6px;
}
.vp-option-price .vp-sale-price {
color: var(--vp-sales-error);
font-weight: 600;
}
/* Hierarchy Options (Chapters/Sections) */
.vp-hierarchy-options {
margin-top: 24px;
}
.vp-hierarchy-divider {
text-align: center;
margin: 16px 0;
position: relative;
z-index: 1;
}
.vp-hierarchy-divider span {
position: relative;
background: var(--vp-sales-bg, #fff);
padding: 0 12px;
font-size: 12px;
color: var(--vp-sales-text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.vp-hierarchy-divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: var(--vp-sales-border);
z-index: -1;
}
.vp-purchase-options-hierarchy {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.vp-purchase-option-mini {
display: flex;
align-items: center;
gap: 12px;
background: var(--vp-sales-bg-alt);
border: 1px solid var(--vp-sales-border);
border-radius: var(--vp-sales-radius);
padding: 10px 16px;
transition: all 0.2s ease;
}
.vp-purchase-option-mini:hover {
border-color: var(--vp-sales-primary);
box-shadow: var(--vp-sales-shadow);
}
.vp-btn-outline-sm {
background: transparent;
border: 1px solid var(--vp-sales-primary);
color: var(--vp-sales-primary);
padding: 6px 12px;
font-size: 13px;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
}
.vp-btn-outline-sm:hover {
background: var(--vp-sales-primary);
color: #fff;
}
/* Responsive для блоків файлів/відео */
@media (max-width: 600px) {
.vp-file-block {
flex-wrap: wrap;
}
.vp-file-block .vp-file-content {
width: calc(100% - 64px);
}
.vp-file-block .vp-download-btn,
.vp-file-block .vp-add-to-cart-btn {
width: 100%;
margin-top: 8px;
}
.vp-purchase-option {
flex-direction: column;
align-items: stretch;
text-align: center;
}
.vp-purchase-option .vp-option-info {
margin-bottom: 12px;
}
}
/* ==========================================================================
Cart Page Table
========================================================================== */
.vp-cart-wrapper {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
.vp-cart-empty {
text-align: center;
padding: 60px 20px;
}
.vp-cart-empty-icon {
font-size: 64px;
margin-bottom: 16px;
}
/* Force table structure reset - override theme styles */
.vp-cart-wrapper {
width: 100% !important;
overflow-x: auto !important;
}
.vp-cart-table {
display: table !important;
width: 100% !important;
max-width: 100% !important;
min-width: 600px !important;
border-collapse: collapse !important;
border-spacing: 0 !important;
table-layout: fixed !important;
background: #fff !important;
border-radius: 8px !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
margin: 0 !important;
padding: 0 !important;
}
.vp-cart-table thead {
display: table-header-group !important;
background: #f8fafc !important;
}
.vp-cart-table thead tr {
display: table-row !important;
}
.vp-cart-table tbody {
display: table-row-group !important;
}
.vp-cart-table tfoot {
display: table-footer-group !important;
}
.vp-cart-table tr {
display: table-row !important;
}
.vp-cart-table th,
.vp-cart-table td {
display: table-cell !important;
padding: 8px 4px !important;
text-align: left !important;
vertical-align: middle !important;
border: none !important;
border-bottom: 1px solid #e2e8f0 !important;
background: transparent !important;
font-size: 14px;
}
.vp-cart-table th {
font-weight: 600 !important;
font-size: 13px !important;
color: #64748b !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
white-space: nowrap !important;
background: #f8fafc !important;
text-align: center !important;
}
.vp-cart-table tbody tr {
background: #fff !important;
}
.vp-cart-table tbody tr:last-child td {
border-bottom: none !important;
}
.vp-cart-table tbody tr:hover {
background: #f8fafc !important;
}
/* Column widths - fixed layout */
.vp-cart-col-active {
width: 50px !important;
min-width: 50px !important;
max-width: 50px !important;
text-align: center !important;
}
.vp-cart-col-product {
width: auto !important;
min-width: 150px !important;
}
.vp-cart-col-price {
width: 100px !important;
min-width: 100px !important;
max-width: 100px !important;
text-align: right !important;
white-space: nowrap !important;
}
.vp-cart-col-qty {
width: 130px !important;
min-width: 130px !important;
max-width: 130px !important;
text-align: center !important;
}
.vp-cart-col-subtotal {
width: 100px !important;
min-width: 100px !important;
max-width: 100px !important;
text-align: right !important;
white-space: nowrap !important;
}
.vp-cart-col-remove {
width: 60px !important;
min-width: 60px !important;
max-width: 60px !important;
text-align: center !important;
}
/* Product info */
.vp-cart-product-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.vp-cart-product-title {
font-weight: 600;
color: var(--vp-sales-text);
}
.vp-cart-product-type {
font-size: 12px;
color: var(--vp-sales-text-muted);
}
/* Quantity controls */
.vp-qty-control {
display: inline-flex !important;
align-items: center !important;
gap: 0 !important;
border: 1px solid #e2e8f0 !important;
border-radius: 8px !important;
overflow: hidden !important;
background: #fff !important;
white-space: nowrap !important;
}
.vp-qty-minus,
.vp-qty-plus {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #f8fafc !important;
border: none !important;
cursor: pointer !important;
font-size: 18px !important;
font-weight: 600 !important;
color: #1e293b !important;
padding: 0 !important;
margin: 0 !important;
line-height: 1 !important;
transition: background 0.2s ease, color 0.2s ease !important;
}
.vp-qty-minus:hover,
.vp-qty-plus:hover {
background: #2563eb !important;
color: #fff !important;
}
.vp-qty-input {
width: 45px !important;
height: 36px !important;
border: none !important;
border-left: 1px solid #e2e8f0 !important;
border-right: 1px solid #e2e8f0 !important;
text-align: center !important;
font-size: 16px !important;
font-weight: 600 !important;
color: #1e293b !important;
background: #fff !important;
padding: 0 !important;
margin: 0 !important;
-moz-appearance: textfield !important;
appearance: textfield !important;
}
.vp-qty-input::-webkit-outer-spin-button,
.vp-qty-input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0 !important;
}
/* Remove button */
.vp-cart-remove-btn {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: #fff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 8px !important;
cursor: pointer !important;
color: #64748b !important;
padding: 0 !important;
margin: 0 !important;
transition: all 0.2s ease !important;
}
.vp-cart-remove-btn:hover {
background: #ef4444 !important;
border-color: #ef4444 !important;
color: #fff !important;
}
.vp-cart-remove-btn svg {
display: block !important;
width: 20px !important;
height: 20px !important;
flex-shrink: 0 !important;
}
.vp-cart-remove-btn svg path {
stroke: currentColor !important;
}
/* Inactive item */
.vp-cart-item-inactive {
opacity: 0.5;
}
.vp-cart-item-inactive .vp-cart-product-title {
text-decoration: line-through;
}
/* Checkbox styling */
.vp-item-active-toggle {
width: 20px;
height: 20px;
cursor: pointer;
margin: 10px;
}
/* Total row */
.vp-cart-total-row {
background: #f8fafc !important;
}
.vp-cart-total-row td,
.vp-cart-total-cell {
padding: 20px 16px !important;
border-top: 2px solid #e2e8f0 !important;
border-bottom: none !important;
text-align: right !important;
}
.vp-cart-total-cell {
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
gap: 16px !important;
}
.vp-cart-total-label {
font-size: 16px !important;
font-weight: 600 !important;
color: #1e293b !important;
}
.vp-total-amount {
font-size: 18px !important;
font-weight: 700 !important;
color: #0b5580 !important;
white-space: nowrap !important;
margin-left: 10px;
}
/* Cart actions */
.vp-cart-actions {
display: flex !important;
justify-content: center !important;
align-items: stretch !important;
gap: 16px !important;
margin-top: 30px !important;
padding-top: 0 !important;
border-top: none !important;
}
.vp-cart-actions .vp-btn,
.vp-cart-actions .vp-clear-cart,
.vp-cart-actions a.vp-btn {
flex: 1 !important;
max-width: 300px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 16px 32px !important;
font-size: 15px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
text-decoration: none !important;
border: none !important;
}
.vp-cart-actions .vp-btn-secondary,
.vp-cart-actions .vp-clear-cart {
background: #e2e8f0 !important;
color: #1e293b !important;
}
.vp-cart-actions .vp-btn-secondary:hover,
.vp-cart-actions .vp-clear-cart:hover {
background: #cbd5e1 !important;
}
.vp-cart-actions .vp-btn-primary {
background: #2563eb !important;
color: #fff !important;
}
.vp-cart-actions .vp-btn-primary:hover {
background: #1d4ed8 !important;
}
/* =============================================
Order Actions in Cabinet
============================================= */
.vp-order-actions-cell {
text-align: center !important;
}
.vp-order-actions {
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
}
.vp-order-no-actions {
color: #94a3b8;
font-size: 14px;
}
/* Button danger style */
.vp-btn-danger {
background: #ef4444 !important;
color: #fff !important;
border: none !important;
}
.vp-btn-danger:hover {
background: #dc2626 !important;
}
/* Small button improvements */
.vp-btn-sm {
padding: 6px 12px !important;
font-size: 12px !important;
font-weight: 600 !important;
border-radius: 6px !important;
white-space: nowrap !important;
transition: all 0.2s ease !important;
}
/* Payment gateway modal */
.vp-payment-options {
display: flex;
flex-direction: column;
gap: 12px;
margin: 20px 0;
}
.vp-payment-option {
display: block;
cursor: pointer;
}
.vp-payment-option input[type="radio"] {
display: none;
}
.vp-payment-option-content {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border: 2px solid #e2e8f0;
border-radius: 8px;
transition: all 0.2s ease;
}
.vp-payment-option input[type="radio"]:checked+.vp-payment-option-content {
border-color: #2563eb;
background: #eff6ff;
}
.vp-payment-option-content img {
width: 40px;
height: 40px;
object-fit: contain;
}
.vp-payment-option-title {
font-weight: 500;
color: #1e293b;
}
.vp-confirm-payment-btn {
width: 100%;
margin-top: 10px;
}
.vp-confirm-payment-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Orders table responsive */
.vp-orders-table {
width: 100%;
border-collapse: collapse;
}
.vp-orders-table th,
.vp-orders-table td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid #e2e8f0;
}
.vp-orders-table th {
background: #f8fafc;
font-weight: 600;
color: #475569;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.vp-orders-table tbody tr:hover {
background: #f8fafc;
}
/* Order status badges */
.vp-order-status {
display: inline-block;
padding: 4px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.vp-status-success {
background: #dcfce7;
color: #166534;
}
.vp-status-pending {
background: #fef3c7;
color: #92400e;
}
.vp-status-failed {
background: #fee2e2;
color: #991b1b;
}
.vp-status-cancelled,
.vp-status-expired {
background: #f1f5f9;
color: #64748b;
}
.vp-status-processing {
background: #dbeafe;
color: #1e40af;
}
.vp-status-refunded {
background: #f3e8ff;
color: #7c3aed;
}
/* Responsive */
@media (max-width: 768px) {
.vp-cart-table thead {
display: none;
}
.vp-cart-table,
.vp-cart-table tbody,
.vp-cart-table tr,
.vp-cart-table td {
display: block;
}
.vp-cart-table tr {
padding: 16px;
margin-bottom: 16px;
border: 1px solid var(--vp-sales-border);
border-radius: var(--vp-sales-radius);
}
.vp-cart-table td {
padding: 8px 0;
text-align: left !important;
border: none;
}
.vp-cart-col-active {
position: absolute;
right: 60px;
top: 16px;
width: auto;
}
.vp-cart-col-remove {
position: absolute;
right: 16px;
top: 16px;
width: auto;
}
.vp-cart-item {
position: relative;
padding-right: 100px;
}
.vp-cart-col-price::before,
.vp-cart-col-qty::before,
.vp-cart-col-subtotal::before {
content: attr(data-label);
font-weight: 600;
margin-right: 8px;
color: var(--vp-sales-text-muted);
}
.vp-cart-actions {
flex-direction: column !important;
gap: 12px !important;
}
.vp-cart-actions .vp-btn,
.vp-cart-actions .vp-clear-cart,
.vp-cart-actions a.vp-btn {
width: 100% !important;
max-width: 100% !important;
}
/* Orders table mobile */
.vp-orders-table thead {
display: none;
}
.vp-orders-table,
.vp-orders-table tbody,
.vp-orders-table tr,
.vp-orders-table td {
display: block;
}
.vp-orders-table tr {
padding: 16px;
margin-bottom: 16px;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #fff;
}
.vp-orders-table td {
padding: 8px 0;
text-align: left !important;
border: none;
}
.vp-orders-table td::before {
content: attr(data-label) ": ";
font-weight: 600;
color: #64748b;
}
.vp-order-actions-cell {
padding-top: 16px !important;
border-top: 1px solid #e2e8f0;
margin-top: 8px;
}
.vp-order-actions-cell::before {
display: none;
}
.vp-order-actions {
justify-content: flex-start;
}
}
/* =============================================
Token Countdown Timer — unified with cabinet style
============================================= */
.vp-token-countdown {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: var(--vp-cab-bg-subtle, #f7f8fa);
border-radius: 8px;
font-size: 14px;
color: var(--vp-cab-text-muted, #64748b);
width: fit-content;
margin: 0 auto;
}
.vp-countdown-label {
font-weight: 400;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.5px;
}
.vp-countdown-timer {
font-weight: 400;
color: var(--vp-cab-text, #1e293b);
font-variant-numeric: tabular-nums;
font-size: 14px;
}
.vp-countdown-warning {
color: #d97706;
background: #fef3c7;
}
.vp-countdown-warning .vp-countdown-timer {
animation: vp-pulse 1s infinite;
}
.vp-countdown-is-expired {
color: #dc2626;
background: #fee2e2;
}
.vp-countdown-expired {
font-weight: 600;
}
@keyframes vp-pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.vp-token-expired-date {
display: block;
margin-top: 6px;
font-size: 12px;
color: #dc2626;
font-style: italic;
}
/* Button outline style */
.vp-btn-outline {
background: transparent !important;
color: #2563eb !important;
border: 1px solid #2563eb !important;
}
.vp-btn-outline:hover {
background: #eff6ff !important;
}
/* File/Video actions layout */
.vp-file-actions,
.vp-video-actions {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.vp-file-item {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
margin-bottom: 12px;
transition: all 0.2s ease;
}
.vp-file-item:hover {
border-color: #cbd5e1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.vp-file-expired {
opacity: 0.7;
background: #f8fafc;
}
.vp-file-icon {
font-size: 32px;
line-height: 1;
flex-shrink: 0;
}
.vp-file-info {
flex: 1;
min-width: 0;
}
.vp-file-name {
display: block;
font-weight: 600;
font-size: 15px;
color: #1e293b;
margin-bottom: 4px;
}
.vp-file-meta {
display: block;
font-size: 13px;
color: #64748b;
}
/* Video card base — unified with catalog cards (vp-cabinet.css is primary source) */
/* These rules provide fallback values; .vp-catalog-card overrides with !important */
.vp-video-expired {
opacity: 0.6;
}
.vp-videos-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
}
/* Regenerate button compact */
.vp-regenerate-token-btn {
padding: 6px 10px !important;
font-size: 12px !important;
}
@media (max-width: 768px) {
.vp-file-item {
flex-direction: column;
align-items: stretch;
}
.vp-file-actions {
margin-top: 12px;
}
.vp-videos-grid {
grid-template-columns: 1fr;
}
}
/* ================================
Video Modal
================================ */
.vp-video-modal-content {
width: 100%;
max-width: 900px;
}
.vp-video-player {
position: relative;
width: 100%;
background: #000;
border-radius: 8px;
overflow: hidden;
}
.vp-video-element {
display: block;
width: 100%;
max-height: 70vh;
outline: none;
}
.vp-video-embed {
position: relative;
width: 100%;
padding-bottom: 56.25%;
/* 16:9 */
height: 0;
overflow: hidden;
background: #000;
border-radius: 8px;
}
.vp-video-embed iframe,
.vp-video-embed video,
.vp-video-embed object,
.vp-video-embed embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
.vp-video-remaining {
margin-top: 12px;
text-align: center;
color: #666;
font-size: 14px;
}
/* Modal size for video */
.vp-modal.vp-modal-large .vp-modal-dialog {
max-width: 950px;
width: 95%;
}
.vp-modal.vp-modal-large .vp-modal-body {
padding: 16px;
}
.vp-modal.vp-modal-large .vp-modal-header {
padding: 16px 20px;
}
@media (max-width: 768px) {
.vp-video-modal-content {
padding: 0;
}
.vp-video-element {
max-height: 50vh;
}
.vp-modal.vp-modal-large .vp-modal-dialog {
width: 100%;
max-width: 100%;
margin: 0;
border-radius: 0;
min-height: 100vh;
}
}
/* ==========================================================================
Video Protection - Захист від скачування
========================================================================== */
/* Приховати кнопку завантаження та меню */
.vp-protected-video::-webkit-media-controls-download-button,
.vp-video-element::-webkit-media-controls-download-button {
display: none !important;
-webkit-appearance: none !important;
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Приховати меню з трьома крапками */
.vp-protected-video::-webkit-media-controls-overflow-button,
.vp-video-element::-webkit-media-controls-overflow-button {
display: none !important;
-webkit-appearance: none !important;
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Приховати picture-in-picture */
.vp-protected-video::-webkit-media-controls-picture-in-picture-button,
.vp-video-element::-webkit-media-controls-picture-in-picture-button {
display: none !important;
-webkit-appearance: none !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Firefox */
.vp-protected-video::-moz-media-controls-download-button,
.vp-video-element::-moz-media-controls-download-button {
display: none !important;
}
/* Приховуємо native fullscreen кнопку - використовуємо свою */
.vp-protected-video::-webkit-media-controls-fullscreen-button,
.vp-video-element::-webkit-media-controls-fullscreen-button,
.vp-video-player::-webkit-media-controls-fullscreen-button {
display: none !important;
}
/* Кастомна кнопка розгортання — верхній правий кут */
.vp-expand-btn {
position: absolute;
top: 10px;
right: 10px;
width: 36px;
height: 36px;
background: rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 6px;
cursor: pointer;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
padding: 0;
font-size: 18px;
color: rgba(255, 255, 255, 0.8);
line-height: 1;
}
.vp-expand-btn:hover {
background: rgba(0, 0, 0, 0.7);
color: #fff;
}
/* В expanded режимі — менш яскрава кнопка закриття */
.vp-video-expanded .vp-expand-btn {
background: rgba(0, 0, 0, 0.4);
border-color: rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.6);
}
.vp-video-expanded .vp-expand-btn:hover {
background: rgba(0, 0, 0, 0.6);
color: #fff;
}
/* Приховати overflow меню */
.vp-protected-video::-webkit-media-controls-enclosure,
.vp-video-element::-webkit-media-controls-enclosure {
overflow: hidden !important;
}
/* Розширити панель контролів щоб приховати overflow */
.vp-protected-video::-webkit-media-controls-panel,
.vp-video-element::-webkit-media-controls-panel {
width: calc(100% + 35px) !important;
}
/* Заборона виділення */
.vp-video-protected,
.vp-video-player {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* ==========================================================================
Watermark - Водяний знак
========================================================================== */
/* Контейнер для водяних знаків — на відео, не в рамці */
.vp-watermark-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
overflow: visible;
}
/* Watermark має бути в зоні відео */
.vp-video-player-wrapper .vp-watermark-container,
.vp-video-player .vp-watermark-container {
/* Центруємо watermark на відео */
display: flex;
align-items: center;
justify-content: center;
}
/* Базові стилі водяного знаку */
.vp-watermark {
position: absolute;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
font-weight: 500;
text-shadow:
1px 1px 2px rgba(0, 0, 0, 0.8),
-1px -1px 2px rgba(0, 0, 0, 0.8),
1px -1px 2px rgba(0, 0, 0, 0.8),
-1px 1px 2px rgba(0, 0, 0, 0.8);
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
letter-spacing: 0.5px;
}
/* Статичний watermark - стилі керуються через JS */
.vp-watermark-static,
.vp-watermark-visible {
position: absolute !important;
z-index: 9999 !important;
transition: opacity 0.2s ease;
/* font-size, color, opacity, position - керуються JS */
}
/* Стробоскопічний watermark - приховуємо, показуємо через JS */
.vp-watermark-strobe {
display: none;
position: absolute !important;
z-index: 9999 !important;
/* font-size, color, opacity, position - керуються JS */
}
/* Wrapper для відео з watermark */
.vp-video-player-wrapper {
position: relative !important;
}
/* Wrapper всередині теж */
.vp-video-player-wrapper .vp-video-wrapper {
position: relative !important;
}
/* Заборона копіювання тексту watermark */
.vp-watermark::selection {
background: transparent;
}
.vp-watermark::-moz-selection {
background: transparent;
}
/* Fullscreen підтримка для watermark */
/* Wrapper в fullscreen - відео займає весь екран */
.vp-video-player-wrapper:fullscreen,
.vp-video-player-wrapper:-webkit-full-screen,
.vp-video-player-wrapper:-moz-full-screen,
.vp-video-player-wrapper:-ms-fullscreen,
.vp-video-wrapper:fullscreen,
.vp-video-wrapper:-webkit-full-screen,
.vp-video-wrapper:-moz-full-screen,
.vp-video-wrapper:-ms-fullscreen,
.vp-video-player:fullscreen,
.vp-video-player:-webkit-full-screen,
.vp-video-player:-moz-full-screen,
.vp-video-player:-ms-fullscreen {
width: 100vw !important;
height: 100vh !important;
max-width: 100vw !important;
max-height: 100vh !important;
background: #000 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
}
.vp-video-player-wrapper:fullscreen video,
.vp-video-player-wrapper:-webkit-full-screen video,
.vp-video-wrapper:fullscreen video,
.vp-video-wrapper:-webkit-full-screen video,
.vp-video-player:fullscreen video,
.vp-video-player:-webkit-full-screen video {
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
}
/* Watermark контейнер в fullscreen */
.vp-video-player-wrapper:fullscreen .vp-watermark-container,
.vp-video-player-wrapper:-webkit-full-screen .vp-watermark-container,
.vp-video-wrapper:fullscreen .vp-watermark-container,
.vp-video-wrapper:-webkit-full-screen .vp-watermark-container,
.vp-video-player:fullscreen .vp-watermark-container,
.vp-video-player:-webkit-full-screen .vp-watermark-container,
:fullscreen .vp-watermark-container,
:-webkit-full-screen .vp-watermark-container {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 2147483647 !important;
pointer-events: none !important;
}
/* Fullscreen watermark стилі */
.vp-video-player-wrapper:fullscreen .vp-watermark,
.vp-video-player-wrapper:-webkit-full-screen .vp-watermark,
.vp-video-wrapper:fullscreen .vp-watermark,
.vp-video-wrapper:-webkit-full-screen .vp-watermark,
.vp-video-player:fullscreen .vp-watermark,
.vp-video-player:-webkit-full-screen .vp-watermark,
:fullscreen .vp-watermark,
:-webkit-full-screen .vp-watermark {
position: fixed !important;
z-index: 2147483647 !important;
}
/* Watermark коли переміщений в body для fullscreen */
body>.vp-watermark {
position: fixed !important;
z-index: 2147483647 !important;
pointer-events: none !important;
}
/* ==========================================================================
Expanded Video Mode (90% екрану замість fullscreen)
========================================================================== */
/* Overlay через псевдо-елемент body — гарантовано ПІД відео */
body.vp-video-expanded-mode::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.9);
z-index: 999990;
}
body.vp-video-expanded-mode {
overflow: hidden;
}
/* Старий overlay — на випадок якщо ще використовується */
.vp-video-expanded-overlay {
display: none;
}
/* Expanded контейнер — по центру екрану */
.vp-video-expanded {
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
z-index: 999999 !important;
background: transparent !important;
/* Розмір автоматично по вмісту */
width: auto !important;
height: auto !important;
}
/* Wrapper рівно по розміру video */
.vp-video-expanded .vp-video-player-wrapper,
.vp-video-expanded .vp-video-player {
position: relative !important;
display: inline-block !important;
background: transparent !important;
line-height: 0;
}
/* Video задає розмір */
.vp-video-expanded video {
max-width: 90vw !important;
max-height: 85vh !important;
width: auto !important;
height: auto !important;
display: block !important;
}
/* Watermark точно по video */
.vp-video-expanded .vp-watermark-container {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 10;
pointer-events: none;
}
/* Блокування скролу body */
body.vp-no-scroll {
overflow: hidden !important;
}
/* ===== Придбане відео на сторінці [vp_lock] ===== */
/* Блок придбаного відео */
.vp-video-block.vp-video-purchased {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Активний превью (замість заблокованого) */
.vp-video-preview-active {
position: relative;
cursor: pointer;
transition: transform 0.2s ease;
}
.vp-video-preview-active:hover {
transform: scale(1.01);
}
.vp-video-preview-active::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.1) 50%,
rgba(0, 0, 0, 0.3) 100%);
z-index: 1;
pointer-events: none;
transition: opacity 0.2s ease;
}
.vp-video-preview-active:hover::before {
opacity: 0.7;
}
/* Overlay з іконкою відтворення */
.vp-video-play-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
pointer-events: none;
}
.vp-play-icon {
width: 56px;
height: 56px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
color: #ffffff9c;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
.vp-video-preview-active:hover .vp-play-icon {
transform: scale(1.1);
}
/* Інформація про доступ */
.vp-video-access-info {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 15px;
}
.vp-remaining-views {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 10px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
background: #e3f2fd;
color: #1565c0;
}
/* .vp-access-expires — стилі через .vp-token-countdown (unified з кабінетом) */
/* Блок інфо придбаного продукту — центрування лічильника і кнопки */
.vp-video-purchased .vp-video-info {
display: flex;
flex-direction: column;
align-items: center;
}
.vp-video-purchased .vp-video-access-info {
display: flex;
justify-content: center;
width: 100%;
}
/* Кнопка і лічильник — однакова ширина */
.vp-video-purchased .vp-token-countdown,
.vp-video-purchased .vp-watch-video,
.vp-video-purchased .vp-download-btn {
min-width: 220px;
max-width: 280px;
width: fit-content;
justify-content: center;
text-align: center;
}
/* Кнопка "Дивитися" / "Завантажити" в блоці придбаного продукту */
.vp-video-purchased .vp-watch-video,
.vp-video-purchased .vp-download-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
color: #fff;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
text-decoration: none;
text-transform: uppercase;
}
.vp-video-purchased .vp-watch-video:hover,
.vp-video-purchased .vp-download-btn:hover {
background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(25, 118, 210, 0.4);
color: #fff;
}
.vp-video-purchased .vp-watch-video:active,
.vp-video-purchased .vp-download-btn:active {
transform: translateY(0);
}
/* Помилка доступу */
.vp-access-error {
color: #dc3545;
font-size: 13px;
margin: 0;
padding: 10px;
background: #fff5f5;
border-radius: 6px;
border-left: 3px solid #dc3545;
}
/* Адаптив для мобільних */
@media (max-width: 480px) {
.vp-play-icon {
width: 48px;
height: 48px;
font-size: 28px;
}
.vp-video-access-info {
flex-direction: column;
}
.vp-remaining-views,
.vp-access-expires {
width: 100%;
justify-content: center;
}
.vp-video-purchased .vp-watch-video {
width: 100%;
justify-content: center;
}
}
/* ==========================================
PRICING TIERS - Цінові тарифи
========================================== */
.vp-pricing-tiers {
display: flex;
justify-content: center;
align-items: stretch;
gap: 40px;
margin: 0 auto 24px;
padding: 16px 0;
}
.vp-tier-card {
flex: 1;
min-width: 180px;
max-width: 250px;
background: #fff;
border: 2px solid #e5e7eb;
border-radius: 16px;
padding: 40px 24px 28px;
text-align: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
display: flex;
flex-direction: column;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
cursor: pointer;
}
.vp-tier-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
}
.vp-tier-card.vp-tier-featured,
.vp-tier-card.vp-tier-popular {
border-color: #8b5cf6;
box-shadow: 0 8px 30px rgba(139, 92, 246, 0.25);
}
.vp-tier-card.vp-tier-selected {
border-color: #729cd7;
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
box-shadow: 0 8px 30px rgba(14, 165, 233, 0.25);
}
.vp-tier-card.vp-tier-featured:hover,
.vp-tier-card.vp-tier-popular:hover {
transform: translateY(-6px);
box-shadow: 0 16px 40px rgba(139, 92, 246, 0.3);
}
.vp-tier-header {
margin-bottom: 16px;
}
.vp-tier-label {
display: block;
font-weight: 700;
font-size: 14px;
color: #374151;
text-transform: uppercase;
letter-spacing: 1px;
}
.vp-tier-card.vp-tier-featured .vp-tier-label,
.vp-tier-card.vp-tier-popular .vp-tier-label {
color: #7c3aed;
}
.vp-tier-badge {
display: inline-block;
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 6px 20px;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}
.vp-tier-price {
margin-bottom: 16px;
}
.vp-tier-price .vp-old-price {
display: block;
text-decoration: line-through;
color: #9ca3af;
font-size: 15px;
font-weight: 500;
margin-bottom: 4px;
}
.vp-tier-price .vp-current-price {
display: block;
font-size: 38px;
font-weight: 800;
color: #059669;
line-height: 1.1;
}
.vp-tier-card.vp-tier-featured .vp-tier-price .vp-current-price,
.vp-tier-card.vp-tier-popular .vp-tier-price .vp-current-price {
color: #7c3aed;
}
.vp-tier-price .vp-discount-badge {
display: inline-block;
background: #ff5722;
color: #fff;
font-size: 11px;
font-weight: 600;
padding: 2px 6px;
border-radius: 4px;
margin-left: 6px;
}
.vp-tier-features {
list-style: none;
margin: 0;
padding: 16px 0 0;
text-align: center;
border-top: 1px solid #f3f4f6;
margin-top: auto;
}
.vp-tier-card.vp-tier-featured .vp-tier-features,
.vp-tier-card.vp-tier-popular .vp-tier-features {
border-top-color: rgba(139, 92, 246, 0.2);
}
.vp-tier-features li {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px 0;
font-size: 14px;
color: #6b7280;
}
.vp-tier-features li:last-child {
border-bottom: none;
}
.vp-feature-icon {
font-size: 14px;
width: 20px;
text-align: center;
}
/* Дочірні елементи картки не блокують кліки */
.vp-tier-card>* {
pointer-events: none;
}
.vp-tier-card .vp-add-to-cart-btn {
pointer-events: auto;
width: 100%;
padding: 10px 16px;
font-size: 13px;
margin-top: 16px;
}
.vp-tier-card.vp-tier-featured .vp-add-to-cart-btn {
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}
/* Адаптив для тарифів на мобільних */
@media (max-width: 768px) {
.vp-pricing-tiers {
flex-direction: column;
align-items: center;
gap: 20px;
}
.vp-tier-card {
max-width: 100%;
width: 100%;
}
.vp-tier-card.vp-tier-featured,
.vp-tier-card.vp-tier-popular {
order: -1;
}
}
/* Компактний вигляд тарифів (в списку продуктів) */
.vp-pricing-tiers.vp-tiers-compact {
gap: 8px;
}
.vp-pricing-tiers.vp-tiers-compact .vp-tier-card {
padding: 12px;
min-width: 120px;
}
.vp-pricing-tiers.vp-tiers-compact .vp-tier-price .vp-current-price {
font-size: 18px;
}
.vp-pricing-tiers.vp-tiers-compact .vp-tier-features {
margin-bottom: 12px;
}
.vp-pricing-tiers.vp-tiers-compact .vp-tier-features li {
padding: 4px 0;
font-size: 12px;
}
/* Опції ієрархії (розділи/глави) */
.vp-hierarchy-options {
margin-top: 20px;
}
.vp-hierarchy-divider {
text-align: center;
margin: 16px 0;
position: relative;
}
.vp-hierarchy-divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #e0e0e0;
}
.vp-hierarchy-divider span {
position: relative;
background: #fff;
padding: 0 12px;
font-size: 12px;
color: #888;
text-transform: uppercase;
}
.vp-purchase-options-hierarchy {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
.vp-purchase-options-hierarchy .vp-purchase-option {
display: flex;
align-items: center;
gap: 12px;
background: #f9f9f9;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 10px 16px;
}
.vp-purchase-options-hierarchy .vp-option-label {
font-weight: 500;
color: #333;
}
.vp-purchase-options-hierarchy .vp-option-price {
font-weight: 600;
color: #1976d2;
}
.vp-purchase-options-hierarchy .vp-btn-outline {
background: transparent;
border: 1px solid #1976d2;
color: #1976d2;
padding: 6px 12px;
font-size: 13px;
}
.vp-purchase-options-hierarchy .vp-btn-outline:hover {
background: #1976d2;
color: #fff;
}
/* Адаптив для опцій ієрархії */
@media (max-width: 640px) {
.vp-purchase-options-hierarchy {
flex-direction: column;
}
.vp-purchase-options-hierarchy .vp-purchase-option {
justify-content: space-between;
}
}
/* ==========================================
RENEWAL SECTION - Продовження доступу
========================================== */
.vp-renewal-section {
background: linear-gradient(135deg, #fff3e0 0%, #fff 100%);
border: 1px solid #ffb74d;
border-radius: 8px;
padding: 16px;
margin: 16px 0;
}
.vp-renewal-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.vp-renewal-icon {
font-size: 24px;
}
.vp-renewal-title {
font-weight: 600;
font-size: 15px;
color: #e65100;
}
.vp-renewal-price {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 12px;
}
.vp-renewal-price .vp-old-price {
text-decoration: line-through;
color: #999;
font-size: 14px;
}
.vp-renewal-price .vp-current-price {
font-size: 20px;
font-weight: 700;
color: #e65100;
}
.vp-renewal-price .vp-discount-label {
background: #ff9800;
color: #fff;
font-size: 11px;
padding: 2px 6px;
border-radius: 4px;
}
.vp-renewal-btn {
background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
color: #fff;
border: none;
padding: 12px 24px;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.vp-renewal-btn:hover {
background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
}
/* ===========================================
Продажі закриті
=========================================== */
.vp-sales-closed .vp-video-lock-overlay,
.vp-sales-closed .vp-file-lock-overlay {
background: rgba(214, 54, 56, 0.85);
}
.vp-sales-closed-message {
text-align: center;
padding: 30px 20px;
background: linear-gradient(135deg, #ffebe9 0%, #fff5f5 100%);
border: 1px solid #f8d7da;
border-radius: 12px;
margin-top: 15px;
}
.vp-sales-closed-message .vp-closed-icon {
font-size: 48px;
display: block;
margin-bottom: 12px;
}
.vp-sales-closed-message p {
margin: 0;
font-size: 16px;
color: #842029;
font-weight: 500;
line-height: 1.5;
}
/* ==========================================================================
Product Row Shortcode [dsh_product_row]
========================================================================== */
.vp-product-slider-container {
margin: 40px 0;
}
.dsh-category-breadcrumbs {
margin: 20px;
}
.vp-slider-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}
.vp-slider-title {
font-size: 24px;
font-weight: 400;
color: var(--vp-sales-text);
margin: 0;
}
.vp-view-all {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 600;
color: var(--vp-sales-primary, #2563eb);
text-decoration: none;
padding: 8px 18px;
border: 2px solid var(--vp-sales-primary, #2563eb);
border-radius: 8px;
background: transparent;
transition: all 0.25s ease;
white-space: nowrap;
}
.vp-view-all:hover {
background: var(--vp-sales-primary, #2563eb);
color: #fff;
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.vp-view-all:hover .dashicons {
color: #fff;
}
.vp-product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
@media (max-width: 1024px) {
.vp-product-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.vp-product-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.vp-product-grid {
grid-template-columns: 1fr;
}
}
.vp-product-grid .vp-product-card {
height: 100%;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
}
.vp-product-link {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
}
.vp-product-image {
position: relative;
aspect-ratio: 16/9;
background: var(--vp-sales-bg-alt);
border-radius: var(--vp-sales-radius-lg) var(--vp-sales-radius-lg) 0 0;
overflow: hidden;
/* Fix for border-radius overflow in some browsers */
transform: translateZ(0);
}
.vp-product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.vp-product-card:hover .vp-product-image img {
transform: scale(1.05);
}
.vp-product-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--vp-sales-text-muted);
}
.vp-product-placeholder .dashicons {
font-size: 48px;
width: 48px;
height: 48px;
opacity: 0.3;
}
.vp-product-type-badge {
position: absolute;
top: 12px;
right: 12px;
padding: 4px 8px;
font-size: 11px;
font-weight: 700;
color: #fff;
background: rgba(0, 0, 0, 0.6);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.vp-product-content {
flex: 1;
display: flex;
flex-direction: column;
padding: 16px;
background: var(--vp-sales-bg);
border: 1px solid var(--vp-sales-border);
border-top: none;
border-radius: 0 0 var(--vp-sales-radius-lg) var(--vp-sales-radius-lg);
}
.vp-product-title {
font-size: 16px;
font-weight: 600;
color: var(--vp-sales-text);
margin: 0 0 12px;
line-height: 1.4;
/* Limit to 2 lines */
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.vp-product-footer {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.vp-product-price {
font-size: 16px;
font-weight: 700;
color: var(--vp-sales-text);
}
.vp-free {
color: var(--vp-sales-success);
}
.vp-btn-details {
font-size: 13px;
font-weight: 500;
color: var(--vp-sales-primary);
}
/* ==========================================================================
Catalog Cards — Override vp-cabinet.css .vp-video-card styles
Uses .vp-video-card.vp-catalog-card for higher specificity
========================================================================== */
/* Base card — fixed width, does not depend on content */
.vp-video-card.vp-catalog-card {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
background: var(--vp-sales-bg, #ffffff) !important;
border-radius: var(--vp-sales-radius-lg, 12px) !important;
overflow: hidden !important;
box-shadow: var(--vp-sales-shadow, 0 1px 3px rgba(0, 0, 0, 0.1)) !important;
transition: all 0.3s ease !important;
border: 1px solid #e5e7eb !important;
}
/* Neutralize wpautop
wrappers: display: contents removes the
from layout but keeps its children visible. This handles cases where wpautop wraps buttons, spans, and links in
tags */
.vp-video-card.vp-catalog-card>p,
.vp-video-card.vp-catalog-card .vp-video-info p {
display: contents !important;
margin: 0 !important;
padding: 0 !important;
}
/* Kill
tags injected by wpautop */
.vp-video-card.vp-catalog-card>br,
.vp-video-card.vp-catalog-card .vp-video-info br,
.vp-video-card.vp-catalog-card .vp-video-actions br,
.vp-video-card.vp-catalog-card .vp-catalog-price-info br,
.vp-video-card.vp-catalog-card .vp-btn br {
display: none !important;
}
.vp-video-card.vp-catalog-card:hover {
box-shadow: var(--vp-sales-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1)) !important;
transform: translateY(-4px) !important;
}
/* Thumbnail — aspect-ratio зберігає пропорції незалежно від ширини картки */
.vp-video-card.vp-catalog-card .vp-video-thumb {
position: relative !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9 !important;
background-color: #f9fafb !important;
background-size: cover !important;
background-position: center !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
overflow: hidden !important;
}
.vp-video-card.vp-catalog-card .vp-video-thumb-default {
background: linear-gradient(135deg, var(--vp-sales-primary, #2563eb) 0%, var(--vp-sales-primary-hover, #1d4ed8) 100%) !important;
}
/* Play / File icon */
.vp-video-card.vp-catalog-card .vp-video-play,
.vp-video-card.vp-catalog-card .vp-file-play {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 56px !important;
height: 56px !important;
font-size: 36px !important;
color: #ffffff9c !important;
background: rgba(255, 255, 255, 0.2) !important;
border-radius: 50% !important;
box-shadow: 0 0 10px #0000009e !important;
transition: all 0.2s ease !important;
}
.vp-video-card.vp-catalog-card .vp-video-thumb-default .vp-video-play,
.vp-video-card.vp-catalog-card .vp-video-thumb-default .vp-file-play {
color: #fff !important;
background: rgba(0, 0, 0, 0.3) !important;
}
.vp-video-card.vp-catalog-card:hover .vp-video-play,
.vp-video-card.vp-catalog-card:hover .vp-file-play {
transform: scale(1.1) !important;
}
/* Thumb link — fills entire thumbnail area */
.vp-video-card.vp-catalog-card .vp-video-thumb-link {
display: block !important;
text-decoration: none !important;
color: inherit !important;
width: 100% !important;
}
/* Info block */
.vp-video-card.vp-catalog-card .vp-video-info {
padding: 12px 16px 8px !important;
}
.vp-video-card.vp-catalog-card .vp-video-info h4 {
margin: 0 0 6px 0 !important;
font-size: var(--vp-sales-product-title-size, 15px) !important;
font-weight: var(--vp-sales-product-title-weight, 500) !important;
color: var(--vp-sales-text, #1e293b) !important;
line-height: 1.4 !important;
padding: 0 !important;
/* Fixed height for exactly 2 lines — card size does not depend on font size */
min-height: calc(2 * 1.4em) !important;
max-height: calc(2 * 1.4em) !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.vp-video-card.vp-catalog-card .vp-video-info h4 a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
.vp-video-card.vp-catalog-card .vp-video-info h4 a:hover {
color: var(--vp-sales-primary, #2563eb);
}
/* Actions block */
.vp-video-card.vp-catalog-card .vp-video-actions {
padding: 8px 16px 14px !important;
text-align: center !important;
margin: 0 auto !important;
max-width: 270px !important;
min-width: 200px !important;
text-transform: uppercase !important;
}
/* Button */
.vp-video-card.vp-catalog-card .vp-btn {
display: block !important;
width: 100% !important;
padding: 10px 20px !important;
font-size: var(--vp-sales-button-size, 13px) !important;
font-weight: var(--vp-sales-button-weight, 600) !important;
border-radius: var(--vp-sales-radius, 8px) !important;
text-align: center !important;
text-decoration: none !important;
cursor: pointer !important;
transition: var(--vp-sales-transition, 0.2s ease) !important;
border: none !important;
}
.vp-video-card.vp-catalog-card .vp-btn-primary {
background: var(--vp-sales-primary, #2563eb) !important;
color: #fff !important;
}
.vp-video-card.vp-catalog-card .vp-btn-primary:hover {
background: var(--vp-sales-primary-hover, #1d4ed8) !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}
/* Grid layout for [dsh_products] */
.vp-catalog-grid {
display: grid;
grid-template-columns: repeat(var(--dsh-columns, 3), 1fr);
gap: 24px;
}
@media (max-width: 1024px) {
.vp-catalog-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.vp-catalog-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.vp-catalog-grid {
grid-template-columns: 1fr;
}
}
/* Neutralize wpautop
in slider/catalog wrappers */
.vp-product-slider-container>p,
.vp-slider-wrapper>p,
.vp-slider-track>p,
.vp-slider-header>p,
.vp-catalog-grid>p {
display: contents !important;
margin: 0 !important;
padding: 0 !important;
}
/* Kill wpautop
in slider/catalog wrappers */
.vp-product-slider-container>br,
.vp-slider-wrapper>br,
.vp-slider-track>br,
.vp-slider-header>br,
.vp-catalog-grid>br {
display: none !important;
}
/* ==========================================================================
Sale Ribbon — 45° ribbon in bottom-right corner of thumbnail
========================================================================== */
.vp-sale-ribbon {
position: absolute !important;
bottom: 23px !important;
right: -32px !important;
width: 140px !important;
padding: 4px 0 !important;
background: linear-gradient(135deg, #db0000 0%, #dccf26 100%) !important;
color: #fff !important;
font-size: 16px !important;
font-weight: 700 !important;
text-align: center !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
transform: rotate(-45deg) !important;
transform-origin: center center !important;
box-shadow: 6px 6px 8px rgb(0 0 0 / 77%) !important;
z-index: 2 !important;
line-height: 1.4 !important;
pointer-events: none !important;
}
/* Access ribbon «ВІЛЬНО» — зелений градієнт */
.vp-access-ribbon {
position: absolute !important;
bottom: 23px !important;
right: -32px !important;
width: 140px !important;
padding: 4px 0 !important;
background: linear-gradient(135deg, #7c3aed 0%, #00c9a7 100%) !important;
color: #fff !important;
font-size: 16px !important;
font-weight: 700 !important;
text-align: center !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
transform: rotate(-45deg) !important;
transform-origin: center center !important;
box-shadow: 6px 6px 8px rgb(0 0 0 / 77%) !important;
z-index: 2 !important;
line-height: 1.4 !important;
pointer-events: none !important;
}
/* Price info block */
.vp-catalog-price-info {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 6px 14px;
background: var(--vp-cab-bg-subtle, #f7f8fa);
border-radius: 8px;
font-size: 13px;
margin: 0 auto;
}
.vp-catalog-price {
font-weight: var(--vp-sales-price-weight, 700);
color: var(--vp-sales-text, #1e293b);
font-size: var(--vp-sales-price-size, 16px);
}
/* Price prefix ("від") */
.vp-price-prefix {
font-size: 12px !important;
font-weight: 400 !important;
color: var(--vp-sales-text-muted, #94a3b8) !important;
font-style: italic !important;
}
/* Old price — crossed out */
.vp-catalog-price.vp-price-old {
text-decoration: line-through !important;
color: var(--vp-sales-text-muted, #94a3b8) !important;
font-size: calc(var(--vp-sales-price-size, 16px) * 0.85) !important;
font-weight: 400 !important;
opacity: 0.7 !important;
}
/* Sale price — highlighted */
.vp-catalog-price.vp-price-sale {
color: #dc2626 !important;
font-weight: var(--vp-sales-price-weight, 700) !important;
font-size: var(--vp-sales-price-size, 16px) !important;
}
/* ==========================================================================
Product Row Slider — Horizontal Scroll with Arrows
========================================================================== */
.vp-slider-wrapper {
position: relative;
overflow: visible;
padding: 0 8px;
}
.vp-slider-track {
display: flex;
gap: 24px;
overflow-x: auto;
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* IE */
padding: 4px 0;
outline: none;
-webkit-tap-highlight-color: transparent;
caret-color: transparent;
}
.vp-slider-track::-webkit-scrollbar {
display: none;
/* Chrome, Safari */
}
.vp-slider-track .vp-slider-card {
width: 280px;
min-width: 280px;
max-width: 320px;
flex-shrink: 0;
}
/* Arrows */
.vp-slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border: 3px solid #ff6900;
border-radius: 50%;
background: rgba(255, 255, 255, 0.8);
color: #ff6900;
font-size: 40px;
font-weight: 400;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
outline: none;
-webkit-tap-highlight-color: transparent;
}
.vp-slider-arrow::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
border: 2px solid #ff6900;
border-radius: 50%;
transform: translate(-50%, -50%) scale(1);
opacity: 1;
animation: vp-arrow-ripple 3s ease-out infinite;
pointer-events: none;
}
.vp-slider-arrow:hover::before {
animation: none;
opacity: 0;
}
@keyframes vp-arrow-ripple {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.8;
}
70% {
transform: translate(-50%, -50%) scale(1.8);
opacity: 0;
}
100% {
transform: translate(-50%, -50%) scale(1.8);
opacity: 0;
}
}
.vp-slider-arrow:hover {
background: #ff6900;
color: #fff;
border-color: #ff6900;
box-shadow: 0 4px 16px rgba(255, 105, 0, 0.3);
}
.vp-slider-prev {
left: -20px;
}
.vp-slider-next {
right: -20px;
}
.vp-slider-arrow.vp-hidden {
display: none;
}
@media (max-width: 768px) {
.vp-slider-wrapper {
padding: 0 20px;
}
.vp-slider-track .vp-slider-card {
min-width: 240px;
}
.vp-slider-arrow {
width: 36px;
height: 36px;
font-size: 20px;
}
.vp-slider-prev {
left: -16px;
}
.vp-slider-next {
right: -16px;
}
}
@media (max-width: 480px) {
.vp-slider-track .vp-slider-card {
min-width: 220px;
}
}
/* ==========================================================================
Сторінка архіву таксономії каталогу (taxonomy-dsh_product_category)
Картки продуктів використовують існуючі класи .vp-video-card / .vp-catalog-card
========================================================================== */
.dsh-taxonomy-archive {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
}
/* Breadcrumbs */
.dsh-taxonomy-breadcrumbs {
margin-bottom: 32px;
font-size: 14px;
color: #6b7280;
}
.dsh-taxonomy-breadcrumbs .dsh-breadcrumb-link {
color: #6b7280;
text-decoration: none;
transition: color 0.2s;
}
.dsh-taxonomy-breadcrumbs .dsh-breadcrumb-link:hover {
color: var(--vp-sales-primary, #2563eb);
}
.dsh-taxonomy-breadcrumbs .dsh-breadcrumb-sep {
margin: 0 8px;
color: #d1d5db;
}
.dsh-taxonomy-breadcrumbs .dsh-breadcrumb-current {
color: #1a1a1a;
font-weight: 600;
}
/* Заголовок категорії */
.dsh-taxonomy-header {
margin-bottom: 40px;
}
.dsh-taxonomy-title {
font-size: 32px;
font-weight: 700;
color: #1a1a1a;
margin: 0 0 12px;
}
.dsh-taxonomy-description {
font-size: 16px;
color: #6b7280;
margin: 0;
max-width: 700px;
line-height: 1.6;
}
/* Заголовки секцій */
.dsh-section-title {
font-size: 20px;
font-weight: 600;
color: #374151;
margin: 0 0 20px;
}
.dsh-products-count {
font-weight: 400;
color: #9ca3af;
font-size: 16px;
margin-left: 8px;
}
/* Підкатегорії */
.dsh-subcategories {
margin-bottom: 40px;
}
.dsh-subcategories-grid {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.dsh-subcategory-card {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 10px;
text-decoration: none;
transition: all 0.2s;
white-space: nowrap;
}
.dsh-subcategory-card:hover {
background: #f0f9ff;
border-color: var(--vp-sales-primary, #0ea5e9);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.dsh-subcategory-icon {
font-size: 24px;
flex-shrink: 0;
}
.dsh-subcategory-info {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.dsh-subcategory-name {
display: block;
font-weight: 600;
color: #1a1a1a;
font-size: 15px;
}
.dsh-subcategory-count {
display: block;
font-size: 13px;
color: #6b7280;
}
/* Товари */
.dsh-taxonomy-products {
margin-bottom: 40px;
}
/* Пагінація */
.dsh-pagination {
margin-top: 40px;
text-align: center;
}
.dsh-pagination .page-numbers {
display: inline-block;
padding: 8px 16px;
margin: 0 4px;
border-radius: 8px;
text-decoration: none;
color: #374151;
background: #f3f4f6;
transition: all 0.2s;
}
.dsh-pagination .page-numbers.current {
background: var(--vp-sales-primary, linear-gradient(135deg, #0ea5e9, #06b6d4));
color: #fff;
}
.dsh-pagination .page-numbers:hover:not(.current) {
background: #e5e7eb;
}
/* Порожній стан */
.dsh-no-products {
text-align: center;
padding: 60px 20px;
color: #6b7280;
}
.dsh-no-products-icon {
font-size: 48px;
display: block;
margin-bottom: 16px;
}
.dsh-no-products p {
font-size: 18px;
margin: 0;
}
/* Адаптивність */
@media (max-width: 768px) {
.dsh-taxonomy-archive {
padding: 24px 16px;
}
.dsh-taxonomy-title {
font-size: 24px;
}
}
/* ==========================================================================
Catalog Tree — [dsh_catalog] hierarchical category tree
========================================================================== */
.dsh-catalog-tree {
margin-top: 20px;
}
/* Reset list styles */
.dsh-catalog-tree ul {
list-style: none;
margin: 0;
padding: 0;
}
/* Root-level list */
.dsh-catalog-tree .dsh-tree-root {
border: 1px solid var(--vp-sales-border, #e5e7eb);
border-radius: var(--vp-sales-radius-lg, 12px);
background: var(--vp-sales-bg, #ffffff);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
overflow: hidden;
}
/* Children list — indented */
.dsh-catalog-tree .dsh-tree-children {
padding-left: 28px;
border-top: 1px solid var(--vp-sales-border, #e5e7eb);
overflow: hidden;
transition: max-height 0.3s ease, opacity 0.2s ease;
}
/* Individual tree item */
.dsh-catalog-tree .dsh-tree-item {
border-bottom: 1px solid var(--vp-sales-border, #e5e7eb);
}
.dsh-catalog-tree .dsh-tree-item:last-child {
border-bottom: none;
}
/* Row layout */
.dsh-cat-row {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 20px;
transition: background-color 0.15s ease;
cursor: default;
}
.dsh-cat-row:hover {
background-color: rgba(37, 99, 235, 0.04);
}
/* Root-level items are bolder */
.dsh-tree-root-item>.dsh-cat-row {
padding: 16px 20px;
}
.dsh-tree-root-item>.dsh-cat-row .dsh-cat-name {
font-weight: 600;
font-size: 16px;
}
/* Toggle button */
.dsh-cat-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
min-width: 24px;
border: none;
background: var(--vp-sales-bg-alt, #f3f4f6);
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
padding: 0;
font-size: 11px;
color: var(--vp-sales-text-muted, #6b7280);
}
.dsh-cat-toggle:hover {
background: var(--vp-sales-primary, #2563eb);
color: #fff;
}
.dsh-cat-toggle-icon {
line-height: 1;
transition: transform 0.2s ease;
}
/* Spacer for items without children — keeps alignment */
.dsh-cat-toggle-spacer {
display: inline-block;
width: 24px;
min-width: 24px;
}
/* Category icon */
.dsh-cat-icon {
font-size: 20px;
line-height: 1;
flex-shrink: 0;
}
/* Category name (link) */
.dsh-cat-name {
flex: 1;
font-size: 15px;
font-weight: 500;
color: var(--vp-sales-text, #1e293b);
text-decoration: none;
transition: color 0.15s ease;
line-height: 1.4;
}
.dsh-cat-name:hover {
color: var(--vp-sales-primary, #2563eb);
text-decoration: underline;
}
/* Product count badge */
.dsh-cat-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 24px;
padding: 0 8px;
font-size: 12px;
font-weight: 600;
color: var(--vp-sales-primary, #2563eb);
background: rgba(37, 99, 235, 0.08);
border-radius: 12px;
flex-shrink: 0;
line-height: 1;
}
.dsh-cat-count:empty {
display: none;
}
/* Category description */
.dsh-cat-description {
padding: 0 20px 12px 78px;
font-size: 13px;
color: var(--vp-sales-text-muted, #6b7280);
line-height: 1.5;
}
/* Search match highlight */
.dsh-tree-item.dsh-search-match>.dsh-cat-row {
background-color: rgba(37, 99, 235, 0.08);
margin: 15px;
border-radius: 10px;
}
.dsh-tree-item.dsh-search-match>.dsh-cat-row .dsh-cat-name {
color: var(--vp-sales-primary, #2563eb);
font-weight: 600;
}
/* Search form styling inside catalog */
.dsh-catalog .dsh-search-form {
display: flex;
align-items: center;
gap: 0;
margin-bottom: 20px;
border: 2px solid var(--vp-sales-border, #e5e7eb);
border-radius: var(--vp-sales-radius-lg, 12px);
overflow: hidden;
background: var(--vp-sales-bg, #ffffff);
transition: border-color 0.2s ease;
}
.dsh-catalog .dsh-search-form:focus-within {
border-color: var(--vp-sales-primary, #2563eb);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.dsh-catalog .dsh-search-input {
flex: 1;
border: none;
padding: 12px 16px;
font-size: 15px;
outline: none;
background: transparent;
color: var(--vp-sales-text, #1e293b);
}
.dsh-catalog .dsh-search-input::placeholder {
color: var(--vp-sales-text-muted, #9ca3af);
}
.dsh-catalog .dsh-search-button {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 44px;
border: none;
background: var(--vp-sales-primary, #2563eb);
color: #fff;
cursor: pointer;
transition: background 0.2s ease;
}
.dsh-catalog .dsh-search-button:hover {
background: var(--vp-sales-primary-hover, #1d4ed8);
}
.dsh-catalog .dsh-search-button .dashicons {
font-size: 20px;
width: 20px;
height: 20px;
}
/* Neutralize WordPress wpautop */
.dsh-catalog-tree>p,
.dsh-catalog-tree p {
display: contents !important;
margin: 0 !important;
padding: 0 !important;
}
.dsh-catalog-tree br {
display: none !important;
}
/* ---- Responsive ---- */
@media (max-width: 768px) {
.dsh-cat-row {
padding: 12px 14px;
gap: 8px;
}
.dsh-tree-root-item>.dsh-cat-row .dsh-cat-name {
font-size: 15px;
}
.dsh-cat-name {
font-size: 14px;
}
.dsh-cat-description {
padding-left: 56px;
}
.dsh-catalog-tree .dsh-tree-children {
padding-left: 18px;
}
}
@media (max-width: 480px) {
.dsh-cat-row {
padding: 10px 12px;
gap: 6px;
}
.dsh-cat-icon {
font-size: 18px;
}
.dsh-cat-description {
padding-left: 48px;
font-size: 12px;
}
.dsh-catalog-tree .dsh-tree-children {
padding-left: 12px;
}
}
/* Shortcode Content block (margin moved to primary definition above) */
.vp-shortcode-block {
margin-bottom: 24px;
}
/* ==========================================================================
Promo Banner & Countdown Timer
========================================================================== */
.vp-promo-banner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: #fff;
padding: 10px 30px;
border-radius: 12px;
margin-bottom: 20px;
box-shadow: 0 4px 15px rgba(239, 68, 68, 0.25);
}
.vp-promo-header {
display: flex;
align-items: center;
gap: 8px;
}
.vp-promo-icon {
font-size: 22px;
}
.vp-promo-discount {
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.vp-promo-date {
font-size: 11px;
opacity: 0.9;
margin-top: 1px;
}
.vp-countdown {
display: flex;
gap: 4px;
align-items: center;
margin-left: auto;
}
.vp-countdown-box {
text-align: center;
background: rgba(255, 255, 255, 0.15);
padding: 3px 6px;
border-radius: 6px;
min-width: 36px;
}
.vp-countdown-number {
font-size: 15px;
font-weight: 700;
line-height: 1;
}
.vp-countdown-label {
font-size: 9px;
text-transform: uppercase;
opacity: 0.85;
margin-top: 1px;
}
.vp-countdown-separator {
font-size: 15px;
font-weight: 700;
opacity: 0.6;
}
/* Mobile styles for Promo Banner */
@media (max-width: 480px) {
.vp-promo-banner {
flex-direction: column;
align-items: center;
text-align: center;
padding: 10px;
}
.vp-promo-header {
justify-content: center;
width: 100%;
flex-direction: column;
gap: 4px;
}
.vp-promo-icon {
font-size: 20px;
}
.vp-promo-discount {
font-size: 15px;
}
.vp-countdown {
margin-top: 6px;
margin-left: 0;
justify-content: center;
gap: 3px;
}
.vp-countdown-box {
min-width: 32px;
padding: 4px 2px;
}
.vp-countdown-number {
font-size: 14px;
}
.vp-countdown-separator {
font-size: 14px;
}
}
/* ==========================================================================
Access Banner — лічильник допуску (безкоштовний доступ)
========================================================================== */
.vp-access-banner {
background: linear-gradient(135deg, #7c3aed 0%, #00c9a7 100%) !important;
box-shadow: 0 4px 15px rgba(124, 58, 237, 0.25);
}
.vp-access-banner .vp-countdown-box {
background: rgba(255, 255, 255, 0.2);
}
/* wpautop cleanup */
.vp-access-banner p:empty,
.vp-access-banner br {
display: none !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
height: 0 !important;
}
/* ==========================================================================
Pricing Tiers Grid
========================================================================== */
.vp-pricing-tiers-grid {
display: flex;
justify-content: center;
align-items: stretch;
gap: 12px;
margin: 0 auto 24px;
padding: 5px 0;
}
.vp-tier-card {
position: relative;
flex: 1;
max-width: 200px;
min-width: 150px;
border-radius: 14px;
padding: 20px 12px 16px;
text-align: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: #fff;
border: 2px solid #e5e7eb;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
display: flex;
flex-direction: column;
}
.vp-tier-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
.vp-tier-popular {
border-color: #8b5cf6;
box-shadow: 0 8px 30px rgba(139, 92, 246, 0.2);
}
.vp-tier-selected {
border-color: #0ea5e9;
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
box-shadow: 0 8px 30px rgba(14, 165, 233, 0.2);
}
.vp-tier-card .vp-tier-check {
display: none;
}
.vp-tier-selected .vp-tier-check {
display: flex;
}
.vp-tier-details {
margin-top: auto;
}
/* Tablet: картки в рядок, але вужчі */
@media (max-width: 768px) and (min-width: 481px) {
.vp-pricing-tiers-grid {
gap: 8px;
}
.vp-tier-card {
max-width: 180px;
min-width: 120px;
padding: 16px 8px 12px;
}
.vp-tier-price {
font-size: 28px;
}
.vp-tier-label {
font-size: 12px;
}
.vp-tier-currency {
font-size: 14px;
}
}
/* Phone: картки один під одним */
@media (max-width: 480px) {
.vp-pricing-tiers-grid {
flex-direction: column;
align-items: center;
gap: 16px;
}
.vp-tier-card {
max-width: 100%;
width: 100%;
min-width: 0;
}
}
/* Tiers Inner Elements */
.vp-tier-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
color: #fff;
padding: 4px 16px;
border-radius: 16px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
z-index: 1;
}
.vp-tier-spacer {
min-height: 20px;
}
.vp-tier-label {
font-size: 13px;
font-weight: 700;
margin-bottom: 12px;
color: #374151;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.vp-tier-popular .vp-tier-label {
color: #7c3aed;
}
.vp-tier-price-box {
margin-bottom: 12px;
flex-grow: 0;
}
.vp-tier-old-price-box {
min-height: 20px;
margin-bottom: 2px;
}
.vp-tier-old-price {
text-decoration: line-through;
color: #9ca3af;
font-size: 13px;
font-weight: 500;
}
.vp-tier-price {
font-size: 30px;
font-weight: 800;
color: #059669;
line-height: 1.1;
}
.vp-tier-popular .vp-tier-price {
color: #7c3aed;
}
.vp-tier-currency {
font-size: 16px;
font-weight: 600;
opacity: 0.7;
}
.vp-tier-details {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 12px;
border-top: 1px solid #a7c9e0;
}
.vp-tier-popular .vp-tier-details {
border-top-color: rgba(139, 92, 246, 0.2);
}
.vp-tier-access-title {
font-size: 13px;
font-weight: 700;
color: #059669;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.vp-tier-popular .vp-tier-access-title {
color: #7c3aed;
}
.vp-tier-access-value {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 13px;
color: #6b7280;
}
.vp-tier-infinity {
font-size: 24px;
font-weight: 200;
}
.vp-tier-check {
position: absolute;
top: 10px;
right: 10px;
width: 24px;
height: 24px;
border-radius: 50%;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #729cd7 0%, #315b95 100%);
color: #fff;
box-shadow: 0 2px 8px rgba(14, 165, 233, 0.4);
}
/* Button styles fix for mobile */
.vp-add-to-cart-btn {
width: 100%;
padding: 16px 28px;
border-radius: 12px;
font-size: 17px;
font-weight: 700;
margin-top: 20px;
}
@media (max-width: 480px) {
.vp-tier-price {
font-size: 32px;
}
}
/* ==========================================================================
Gutenberg Grid
Зображення залишаються в один ряд, зменшені. Lightbox для збільшення.
!important потрібен для перевизначення inline стилів processGutenbergGrid()
========================================================================== */
@media (max-width: 1024px) {
.is-layout-grid.wp-block-group-is-layout-grid {
grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)) !important;
gap: 6px !important;
}
.is-layout-grid.wp-block-group-is-layout-grid .wp-block-image img {
width: 100%;
height: auto;
border-radius: 4px;
}
}
.is-layout-grid.wp-block-group-is-layout-grid .wp-block-image {
cursor: zoom-in;
}
/* Cursor zoom-in для desktop також */
.is-layout-grid.wp-block-group-is-layout-grid .wp-block-image {
cursor: zoom-in;
}
/* ==========================================================================
Grid Lightbox
========================================================================== */
.vp-lightbox-overlay {
position: fixed;
inset: 0;
z-index: 99999;
background: rgba(0, 0, 0, 0.92);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
-webkit-tap-highlight-color: transparent;
}
.vp-lightbox-overlay.vp-lightbox-active {
opacity: 1;
visibility: visible;
}
.vp-lightbox-overlay img {
max-width: 92vw;
max-height: 88vh;
object-fit: contain;
border-radius: 6px;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: transform 0.3s ease;
}
/* Close button */
.vp-lightbox-close {
position: absolute;
top: 16px;
right: 16px;
width: 44px;
height: 44px;
border: 2px solid transparent;
background: rgba(255, 255, 255, 0.15);
color: #fff;
font-size: 28px;
line-height: 1;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
outline: none;
-webkit-tap-highlight-color: transparent;
z-index: 2;
}
.vp-lightbox-close:hover {
background: rgba(255, 255, 255, 0.3);
}
/* Navigation arrows - style match */
.vp-lightbox-prev,
.vp-lightbox-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 56px;
height: 56px;
border: 2px solid #eb5a28;
/* Акцентний помаранчевий */
background: #ffffff;
color: #eb5a28;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
outline: none;
-webkit-tap-highlight-color: transparent;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 2;
}
/* Стрілки через псевдоелементи для піксель-перфект збігу із загальним дизайном */
.vp-lightbox-prev::before,
.vp-lightbox-next::before {
content: '';
display: block;
width: 14px;
height: 14px;
border-top: 3px solid currentColor;
border-right: 3px solid currentColor;
border-radius: 2px;
}
.vp-lightbox-prev::before {
transform: rotate(-135deg);
margin-left: 6px;
}
.vp-lightbox-next::before {
transform: rotate(45deg);
margin-right: 6px;
}
.vp-lightbox-prev {
left: 24px;
}
.vp-lightbox-next {
right: 24px;
}
.vp-lightbox-prev:hover,
.vp-lightbox-next:hover {
background: #f8f8f8;
transform: translateY(-50%) scale(1.05);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.vp-lightbox-prev:active,
.vp-lightbox-next:active {
transform: translateY(-50%) scale(0.95);
}
/* Counter */
.vp-lightbox-counter {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
color: rgba(255, 255, 255, 0.9);
font-size: 15px;
font-weight: 500;
letter-spacing: 1px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
background: rgba(0, 0, 0, 0.4);
padding: 6px 16px;
border-radius: 20px;
backdrop-filter: blur(4px);
}
/* Mobile arrow adjustment */
@media (max-width: 680px) {
.vp-lightbox-prev,
.vp-lightbox-next {
width: 44px;
height: 44px;
border-width: 2px;
}
.vp-lightbox-prev::before,
.vp-lightbox-next::before {
width: 10px;
height: 10px;
border-width: 2px;
}
.vp-lightbox-prev {
left: 12px;
}
.vp-lightbox-next {
right: 12px;
}
.vp-lightbox-close {
top: 12px;
right: 12px;
width: 40px;
height: 40px;
font-size: 26px;
}
}