.hdpc-page {
    padding: 40px 0 60px;
}
.hdpc-page .container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

/* Tabs */
.hdpc-tabs {
    display: flex;
    gap: 4px;
    background: #f1f2f6;
    border-radius: 16px;
    padding: 4px;
    margin-bottom: 32px;
    overflow-x: auto;
    flex-wrap: nowrap;
}
.hdpc-tab {
    padding: 12px 24px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #5c5e6e;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}
.hdpc-tab:hover {
    color: #5c5e6e;
    background: rgba(126, 202, 29, 0.08);
}
.hdpc-tab.active {
    background: #fff;
    color: #7eca1d;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.hdpc-tab .badge {
    display: inline-block;
    background: #7eca1d;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 10px;
    border-radius: 20px;
    margin-left: 6px;
}

.hdpc-tab-content {
    display: none;
    animation: hdpcFadeIn 0.3s ease;
}
.hdpc-tab-content.active {
    display: block;
}

@keyframes hdpcFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Dashboard Cards */
.hdpc-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}
.hdpc-dash-card {
    background: #fff;
    border: 1px solid #dcdfe8;
    border-radius: 16px;
    padding: 24px;
    transition: all 0.3s;
}
.hdpc-dash-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    transform: translateY(-2px);
}
.hdpc-dash-card .value {
    font-size: 28px;
    font-weight: 700;
    color: #5c5e6e;
}
.hdpc-dash-card .label {
    font-size: 14px;
    color: #9699a8;
    margin-top: 4px;
}
.hdpc-dash-card .status-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}
.hdpc-dash-card .status-badge.active {
    background: #e8f5e9;
    color: #2e7d32;
}
.hdpc-dash-card .status-badge.inactive {
    background: #fce4ec;
    color: #c62828;
}
.hdpc-dash-card .status-badge.pending {
    background: #fff3e0;
    color: #e65100;
}

/* Subscription Card */
.hdpc-subscription-card {
    background: #fff;
    border: 1px solid #dcdfe8;
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
}
.hdpc-subscription-card .plan-info {
    flex: 1;
}
.hdpc-subscription-card .plan-name {
    font-size: 24px;
    font-weight: 700;
    color: #5c5e6e;
}
.hdpc-subscription-card .plan-price {
    font-size: 20px;
    color: #7eca1d;
    font-weight: 700;
}
.hdpc-subscription-card .plan-details {
    color: #5c5e6e;
    font-size: 14px;
    margin-top: 4px;
}
.hdpc-subscription-card .plan-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Tables */
.hdpc-table-wrap {
    background: #fff;
    border: 1px solid #dcdfe8;
    border-radius: 16px;
    overflow: hidden;
}
.hdpc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}
.hdpc-table thead {
    background: #f8f9fa;
}
.hdpc-table th {
    padding: 14px 20px;
    text-align: left;
    font-weight: 600;
    color: #5c5e6e;
    border-bottom: 2px solid #dcdfe8;
	text-align: center;
}
.hdpc-table td {
    padding: 14px 20px;
    border-bottom: 1px solid #f1f2f6;
    color: #5c5e6e;
	text-align: center;
}
.hdpc-table tbody tr:hover {
    background: #f8faf5;
}
.hdpc-table .status {
    display: inline-block;
    padding: 3px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.hdpc-table .status.completed,
.hdpc-table .status.paid,
.hdpc-table .status.active {
    background: #e8f5e9;
    color: #2e7d32;
}
.hdpc-table .status.pending {
    background: #fff3e0;
    color: #e65100;
}
.hdpc-table .status.cancelled,
.hdpc-table .status.failed {
    background: #fce4ec;
    color: #c62828;
}
.hdpc-table .status.processing {
    background: #e3f2fd;
    color: #0d47a1;
}
.hdpc-table .status.expired {
    background: #f5f5f5;
    color: #616161;
}
.hdpc-table .status.stopped {
    background: #fff8e1;
    color: #e65100;
}
.hdpc-table .status.refunded {
    background: #e8eaf6;
    color: #283593;
}
.hdpc-table .status.delivered {
    background: #e8f5e9;
    color: #2e7d32;
}
.hdpc-table .status.tomorrow {
    background: #e3f2fd;
    color: #0d47a1;
}

.delivery-time-group {
	display: flex;
    gap: 20px;
}

/* ============================================================
   ОТМЕНЕННЫЕ ЗАКАЗЫ
   ============================================================ */
.hdpc-table tr.order-cancelled {
    opacity: 0.5;
    background: #fafafa;
}
.hdpc-table tr.order-cancelled:hover {
    background: #fafafa !important;
}
.hdpc-table tr.order-cancelled td {
    color: #b0b0b0;
}
.hdpc-table tr.order-cancelled .status {
    opacity: 0.7;
}

/* Empty State */
.hdpc-empty {
    text-align: center;
    padding: 60px 20px;
    color: #9699a8;
}
.hdpc-empty .icon {
    font-size: 48px;
    margin-bottom: 16px;
}
.hdpc-empty h3 {
    font-size: 20px;
    color: #5c5e6e;
    margin-bottom: 8px;
}
.hdpc-empty p {
    font-size: 16px;
    color: #9699a8;
}

/* Profile Form */
.hdpc-profile-form {
    max-width: 600px;
}
.hdpc-profile-form .form-group {
    margin-bottom: 20px;
}
.hdpc-profile-form label {
    display: block;
    font-weight: 500;
    color: #5c5e6e;
    margin-bottom: 6px;
}
.hdpc-profile-form .input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #dcdfe8;
    border-radius: 8px;
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;
    transition: all 0.3s;
    background: #f8f9fa;
}
.hdpc-profile-form .input:focus {
    outline: none;
    border-color: #7eca1d;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(126, 202, 29, 0.1);
}
.hdpc-profile-form textarea.input {
    resize: vertical;
    min-height: 80px;
}

/* Buttons */
.hdpc-btn {
    display: inline-block;
    padding: 12px 32px;
    border: 0;
    border-radius: 32px;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    text-decoration: none;
}
.hdpc-btn-primary {
    background: #7eca1d;
    color: #fff;
}
.hdpc-btn-primary:hover {
    background: #65a217;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(126, 202, 29, 0.3);
}
.hdpc-btn-secondary {
    background: none!important;
    color: #5c5e6e;
}
.hdpc-btn-secondary:hover {
    background: #e5e7eb;
}
.hdpc-btn-danger {
    background: #ff4f4f;
    color: #fff;
}
.hdpc-btn-danger:hover {
    background: #e04444;
}
.hdpc-btn-success {
    background: #2e7d32;
    color: #fff;
}
.hdpc-btn-success:hover {
    background: #1b5e20;
}
.hdpc-btn-sm {
    padding: 0px;
    font-size: 14px;
    border-radius: 20px;
}
.hdpc-btn-block {
    display: block;
    width: 100%;
}

/* Billing */
.hdpc-invoice-total {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.form-group {
    margin-bottom: 10px;
    font-size: 16px;
}
.input {
    margin-top:5px
}
.hdpc-invoice-total .total-label {
    font-weight: 500;
    color: #5c5e6e;
}
.hdpc-invoice-total .total-value {
    font-size: 24px;
    font-weight: 700;
    color: #7eca1d;
}

/* Notifications */
.hdpc-notice {
    padding: 14px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-weight: 500;
}
.hdpc-notice-success {
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    color: #2e7d32;
}
.hdpc-notice-error {
    background: #fce4ec;
    border: 1px solid #ef9a9a;
    color: #c62828;
}
.hdpc-notice-info {
    background: #e3f2fd;
    border: 1px solid #90caf9;
    color: #0d47a1;
}

/* Login Form */
.hdpc-login-form {
    max-width: 400px;
    margin: 0 auto;
}
.hdpc-login-form .input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #dcdfe8;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 16px;
}
.hdpc-login-form .button {
    width: 100%;
    padding: 14px;
    background: #7eca1d;
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
}
.hdpc-login-form .button:hover {
    background: #65a217;
}

/* Modal */
.hdpc-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    animation: hdpcFadeIn 0.3s ease;
}
.hdpc-modal-overlay.active {
    display: flex;
}

.hdpc-modal-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f1f2f6;
}
.hdpc-modal-row:last-child {
    border-bottom: none;
}
.hdpc-modal-label {
    font-weight: 500;
    color: #5c5e6e;
}
.hdpc-modal-value {
    font-weight: 600;
    color: #5c5e6e;
    text-align: right;
}


/* Delivery status badge */
.delivery-status-badge {
    display: inline-block;
    padding: 6px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}
.delivery-status-badge.delivered-today {
    background: #e8f5e9;
    color: #2e7d32;
}
.delivery-status-badge.delivered-today::before {
    content: "✅ ";
}
.delivery-status-badge.tomorrow {
    background: #e3f2fd;
    color: #0d47a1;
}
.delivery-status-badge.tomorrow::before {
    content: "📦 ";
}
.delivery-status-badge.waiting {
    background: #fff3e0;
    color: #e65100;
}
.delivery-status-badge.waiting::before {
    content: "⏳ ";
}

/* Dish Modal */
.dish-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}
.dish-modal-overlay.active {
    display: flex;
}
.dish-modal-box {
    background: #fff;
    border-radius: 16px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: hdpcFadeIn 0.3s ease;
}
.dish-modal-box .no-padding {
    padding: 0;
}
.dish-modal-box .dish-detail-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
}
.dish-modal-box .dish-detail-body {
    padding: 20px;
}
.dish-modal-box .dish-detail-name {
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 8px;
    color: #5c5e6e;
}
.dish-modal-box .dish-detail-description {
    color: #5c5e6e;
    margin-bottom: 24px;
}
.dish-modal-box .dish-detail-nutrition {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 24px;
    border: 1px solid #dcdfe8;
    border-radius: 8px;
    overflow: hidden;
}
.dish-modal-box .dish-detail-nutrition .nutri-item {
    flex: 1;
    min-width: 60px;
    text-align: center;
    padding: 12px 8px;
    border-right: 1px solid #dcdfe8;
}
.dish-modal-box .dish-detail-nutrition .nutri-item:last-child {
    border-right: none;
}
.dish-modal-box .dish-detail-nutrition .nutri-value {
    font-weight: 700;
    color: #5c5e6e;
}
.dish-modal-box .dish-detail-nutrition .nutri-label {
    font-size: 12px;
    color: #9699a8;
}
.dish-modal-box .dish-detail-actions {
    display: flex;
    gap: 8px;
}
.dish-modal-box .dish-detail-actions .btn {
    flex: 1;
    text-align: center;
}

/* Delivery info header */
.delivery-info-header {
    background: #fff;
    border: 1px solid #dcdfe8;
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    align-items: center;
}
.delivery-info-header .info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #5c5e6e;
    font-size: 15px;
}
.delivery-info-header .info-item .icon {
    font-size: 20px;
}
.delivery-info-header .info-item strong {
    font-weight: 600;
}

/* ============================================================
   МОБИЛЬНЫЕ КАРТОЧКИ ЗАКАЗОВ
   ============================================================ */
.hdpc-orders-mobile {
    display: none;
    flex-direction: column;
    gap: 12px;
}

.hdpc-order-card {
    background: #fff;
    border: 1px solid #dcdfe8;
    border-radius: 16px;
    padding: 16px;
    transition: all 0.3s;
}

.hdpc-order-card.order-cancelled {
    opacity: 0.5;
    background: #fafafa;
}

.hdpc-order-card .order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.hdpc-order-card .order-card-number {
    font-weight: 700;
    font-size: 16px;
    color: #5c5e6e;
}

.user-menu-block-none {
    display: none!important;
}

.hdpc-order-card .order-card-status {
    font-size: 12px;
    padding: 3px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

.hdpc-order-card .order-card-plan {
    font-size: 14px;
    color: #5c5e6e;
    margin-bottom: 4px;
}

.hdpc-order-card .order-card-amount {
    font-weight: 700;
    font-size: 18px;
    color: #7eca1d;
}

.hdpc-order-card .order-card-address {
    font-size: 13px;
    color: #9699a8;
    margin-top: 6px;
}

.hdpc-order-card .order-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
	    justify-content: center;
}

.hdpc-order-card .order-card-actions .action-btn {
    background: none;
    border: none;
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
    color: #5c5e6e;
    display: flex;
    align-items: center;
    gap: 4px;
}

.hdpc-order-card .order-card-actions .action-btn:hover {
    background: #f1f2f6;
}

.hdpc-order-card .order-card-actions .action-btn.danger {
    color: #c62828;
}

.hdpc-order-card .order-card-actions .action-btn.danger:hover {
    background: #fce4ec;
}

.hdpc-order-card .order-card-actions .action-btn.success {
    color: #2e7d32;
}

.hdpc-order-card .order-card-actions .action-btn.success:hover {
    background: #e8f5e9;
}

.hdpc-order-card .order-card-actions .action-btn.warning {
    color: #e65100;
}

.hdpc-order-card .order-card-actions .action-btn.warning:hover {
    background: #fff3e0;
}

.hdpc-order-card .order-card-actions .action-btn .icon {
    font-size: 18px;
}

/* ============================================================
   МОБИЛЬНЫЕ КАРТОЧКИ ТРАНЗАКЦИЙ
   ============================================================ */
.hdpc-transactions-mobile {
    display: none;
    flex-direction: column;
    gap: 12px;
}

.hdpc-transaction-card {
    background: #fff;
    border: 1px solid #dcdfe8;
    border-radius: 16px;
    padding: 16px;
    transition: all 0.3s;
}

.hdpc-transaction-card .tx-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.hdpc-transaction-card .tx-card-id {
    font-size: 13px;
    color: #9699a8;
    font-weight: 500;
}

.hdpc-transaction-card .tx-card-status {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

.hdpc-transaction-card .tx-card-amount {
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 4px;
}

.hdpc-transaction-card .tx-card-amount.credit {
    color: #2e7d32;
}

.hdpc-transaction-card .tx-card-amount.debit {
    color: #c62828;
}

.hdpc-transaction-card .tx-card-method {
    font-size: 14px;
    color: #5c5e6e;
    margin-bottom: 2px;
}

.hdpc-transaction-card .tx-card-description {
    font-size: 13px;
    color: #9699a8;
    margin-top: 4px;
    word-break: break-word;
}

.hdpc-transaction-card .tx-card-date {
    font-size: 12px;
    color: #b0b2c0;
    margin-top: 6px;
}

/* ============================================================
   СТАТУС ДОСТАВКИ — БЛОК
   ============================================================ */
.delivery-status-block {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border: 1px solid #f1f2f6;
}

.delivery-status-block {
    display: none;
}

.delivery-status-block.active {
    display: block;
}

.status-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 20px;
    align-items: center;
}

.status-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4px 0;
}

.status-col-timer .status-icon {
    font-size: 32px;
    margin-bottom: 4px;
}

.status-col-timer .status-label, .client-label {
    font-size: 15px;
    font-weight: 500;
    color: #5c5e6e;
}

.status-col-timer .status-timer {
    font-size: 20px;
    font-weight: 700;
    color: #7eca1d;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.status-col-timer .status-order-time {
    font-size: 11px;
    color: #9699a8;
    margin-top: 2px;
}

.status-col-timer .status-arrived-notice, .client-arrived-badge {
    font-size: 12px;
    color: #ffffff;
    background: #7ECA1D;
    padding: 4px 14px;
    border-radius: 20px;
    margin-top: 6px;
}

.status-col-route {
    padding: 0;
}

.route-svg {
    width: 100%;
}

#route-dot {
    transition: cx 1.5s ease;
    animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { r: 4; }
    50% { r: 8; }
}

.client-icon {
    font-size: 32px;
    margin-bottom: 2px;
}


.client-address {
    font-size: 11px;
    color: #9699a8;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}


/* ============================================================
   СТАТУС ДОСТАВКИ — БЕЙДЖИ
   ============================================================ */
.delivery-status {
    font-size: 14px;
    padding: 4px 16px;
    border-radius: 20px;
    display: inline-block;
	color: #7eca1d;
}
.delivery-status.delivered {
    background: #e8f5e9;
    color: #2e7d32;
}
.delivery-status.tomorrow {
    background: #7eca1d;
    color: #ffffff;
    padding: 10px 15px;
}
.delivery-status.waiting {
    background: #fff3e0;
    color: #e65100;
}
.delivery-status.stopped {
    background: #f5f5f5;
    color: #616161;
}

/* ============================================================
   АДАПТИВНОСТЬ
   ============================================================ */
@media (max-width: 768px) {
    .hdpc-page { padding: 20px 0 40px; }
    .hdpc-tabs { gap: 2px; padding: 2px; }
    .hdpc-tab { padding: 10px 16px; font-size: 18px; }
    .hdpc-dashboard-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .hdpc-dash-card { padding: 16px; }
    .hdpc-dash-card .value { font-size: 22px; }
    .hdpc-subscription-card { flex-direction: column; align-items: stretch; text-align: center; }
    .hdpc-subscription-card .plan-actions { justify-content: center; }
    .hdpc-table-wrap { overflow-x: auto; }
    .hdpc-table { font-size: 13px; }
    .hdpc-table th, .hdpc-table td { padding: 10px 12px; }
    .hdpc-profile-form { max-width: 100%; }
    .dish-grid { grid-template-columns: 1fr 1fr; }
    
    /* Скрываем таблицы на мобильных */
    .hdpc-table-wrap {
        display: none;
    }
    .hdpc-orders-mobile {
        display: flex;
    }
    .hdpc-transactions-mobile {
        display: flex;
    }

    /* Статус доставки — адаптив */
    .status-grid {
        grid-template-columns: 1fr;
        gap: 0px;
    }
    .status-col {
        padding: 0;
    }
    .status-col-timer .status-timer {
        font-size: 18px;
    }
}

@media (min-width: 769px) {
    .hdpc-orders-mobile {
        display: none !important;
    }
    .hdpc-transactions-mobile {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .hdpc-dashboard-grid { grid-template-columns: 1fr; }
    .hdpc-tab { font-size: 18px; padding: 8px 12px; }
    .hdpc-table th, .hdpc-table td { padding: 8px 8px; font-size: 12px; }
    .hdpc-btn { padding: 10px 20px; font-size: 14px; }
    .dish-grid { grid-template-columns: 1fr 1fr; }
    .hdpc-order-card .order-card-actions .action-btn {
        display: flex;
        gap: 8px;
        margin-top: 12px;
        flex-wrap: wrap;
        border-top: 1px solid #f1f2f6;
        font-size: 10px;
        background: #f2f2f2;
    }
    .hdpc-order-card .order-card-actions {
        display: flex;
        justify-content: center;
    }
}

/* Utility */
.hdpc-text-center { text-align: center; }
.hdpc-mt-16 { margin-top: 16px; }
.hdpc-mb-16 { margin-bottom: 16px; }
.hdpc-gap-8 { gap: 8px; }
.hdpc-flex { display: flex; }
.hdpc-flex-center { display: flex; align-items: center; justify-content: center; }
.hdpc-flex-wrap { flex-wrap: wrap; }

/* Scrollbar */
.hdpc-table-wrap::-webkit-scrollbar { height: 6px; }
.hdpc-table-wrap::-webkit-scrollbar-track { background: #f1f2f6; border-radius: 3px; }
.hdpc-table-wrap::-webkit-scrollbar-thumb { background: #dcdfe8; border-radius: 3px; }
.hdpc-table-wrap::-webkit-scrollbar-thumb:hover { background: #c0c4cc; }

/* FlowMaps styles */
.flowmaps-container {
    position: relative;
}
.flowmaps-field-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
}
.flowmaps-field-wrapper .flowmaps-address-input {
    flex: 1;
    padding: 12px 16px;
    font-size: 14px;
    transition: border-color 0.3s;
    box-sizing: border-box;
}
.flowmaps-field-wrapper .flowmaps-address-input:focus {
    outline: none;
    border-color: #7eca1d;
}
.flowmaps-open-map-btn {
    background: #7eca1d;
    border: none;
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    transition: background 0.3s;
}
.flowmaps-open-map-btn:hover {
    background: #65a217;
}
.flowmaps-open-map-btn svg {
    width: 24px;
    height: 24px;
}

/* Edit FlowMaps Modal */
#edit-flowmaps-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}
#edit-flowmaps-modal.active {
    display: flex;
}
#edit-flowmaps-modal .flowmaps-modal-content {
    background: #fff;
    border-radius: 16px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    position: relative;
    z-index: 10001;
}
#edit-flowmaps-modal .flowmaps-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #dcdfe8;
}
#edit-flowmaps-modal .flowmaps-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #5c5e6e;
}
#edit-flowmaps-modal .flowmaps-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #9699a8;
    padding: 0 8px;
    line-height: 1;
}
#edit-flowmaps-modal .flowmaps-modal-close:hover {
    color: #5c5e6e;
}
#edit-flowmaps-modal .flowmaps-modal-body {
    padding: 16px;
}
#edit-flowmaps-modal #edit-flowmaps-map {
    height: 400px;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #f1f2f6;
    position: relative;
    z-index: 1;
}
#edit-flowmaps-modal .flowmaps-crosshair {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    pointer-events: none;
    z-index: 10;
}

#edit-flowmaps-modal .flowmaps-btn-primary:hover {
    background: #65a217;
}

#edit-flowmaps-modal .flowmaps-btn-secondary:hover {
    background: #e5e7eb;
}
#edit-flowmaps-modal .flowmaps-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
}

/* Leaflet CSS - обязательно для карты */
.leaflet-container {
    height: 100%;
    width: 100%;
    z-index: 1;
}
.leaflet-control-zoom {
    z-index: 2 !important;
}
.leaflet-pane {
    z-index: 1 !important;
}
.leaflet-top {
    z-index: 2 !important;
}


/* ============================================================
   КАРТОЧКИ ЗАКАЗОВ - УНИКАЛЬНЫЕ КЛАССЫ
   Префикс: hdc- (Healthy Delivery Cabinet)
   ============================================================ */

/* МОБИЛЬНЫЕ КАРТОЧКИ ЗАКАЗОВ */
.hdc-orders-mobile {
    display: none;
    flex-direction: column;
    gap: 12px;
}

.hdc-order-card {
    background: #fff;
    border: 1px solid #dcdfe8;
    border-radius: 16px;
    padding: 16px;
    transition: all 0.3s;
}

.hdc-order-card.order-cancelled {
    opacity: 0.5;
    background: #fafafa;
}

.hdc-order-card .order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.hdc-order-card .order-card-number {
    font-weight: 700;
    font-size: 16px;
    color: #5c5e6e;
}

.hdc-order-card .order-card-status {
    font-size: 12px;
    padding: 3px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

.hdc-order-card .order-card-plan {
    font-size: 14px;
    color: #5c5e6e;
    margin-bottom: 4px;
}

.hdc-order-card .order-card-amount {
    font-weight: 700;
    font-size: 18px;
    color: #7eca1d;
}

.hdc-order-card .order-card-address {
    font-size: 13px;
    color: #9699a8;
    margin-top: 6px;
}

.hdc-order-card .order-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.hdc-order-card .order-card-actions .action-btn {
    background: none;
    border: none;
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
    color: #5c5e6e;
    display: flex;
    align-items: center;
    gap: 4px;
}

.hdc-order-card .order-card-actions .action-btn:hover {
    background: #f1f2f6;
}

.hdc-order-card .order-card-actions .action-btn.danger {
    color: #c62828;
}

.hdc-order-card .order-card-actions .action-btn.danger:hover {
    background: #fce4ec;
}

.hdc-order-card .order-card-actions .action-btn.success {
    color: #2e7d32;
}

.hdc-order-card .order-card-actions .action-btn.success:hover {
    background: #e8f5e9;
}

.hdc-order-card .order-card-actions .action-btn.warning {
    color: #e65100;
}

.hdc-order-card .order-card-actions .action-btn.warning:hover {
    background: #fff3e0;
}

.hdc-order-card .order-card-actions .action-btn .icon {
    font-size: 18px;
}

/* ============================================================
   КАРТОЧКИ ТРАНЗАКЦИЙ - УНИКАЛЬНЫЕ КЛАССЫ
   Префикс: hdc- (Healthy Delivery Cabinet)
   ============================================================ */

.hdc-transactions-mobile {
    display: none;
    flex-direction: column;
    gap: 12px;
}

.hdc-transaction-card {
    background: #fff;
    border: 1px solid #dcdfe8;
    border-radius: 16px;
    padding: 16px;
    transition: all 0.3s;
}

.hdc-transaction-card .tx-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.hdc-transaction-card .tx-card-id {
    font-size: 13px;
    color: #9699a8;
    font-weight: 500;
}

.hdc-transaction-card .tx-card-status {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

.hdc-transaction-card .tx-card-amount {
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 4px;
}

.hdc-transaction-card .tx-card-amount.credit {
    color: #2e7d32;
}

.hdc-transaction-card .tx-card-amount.debit {
    color: #c62828;
}

.hdc-transaction-card .tx-card-method {
    font-size: 14px;
    color: #5c5e6e;
    margin-bottom: 2px;
}

.hdc-transaction-card .tx-card-description {
    font-size: 13px;
    color: #9699a8;
    margin-top: 4px;
    word-break: break-word;
}

.hdc-transaction-card .tx-card-date {
    font-size: 12px;
    color: #b0b2c0;
    margin-top: 6px;
}

/* ============================================================
   АДАПТИВНОСТЬ ДЛЯ КАРТОЧЕК
   ============================================================ */
@media (max-width: 768px) {
    /* Скрываем таблицы на мобильных */
    .hdc-table-wrap {
        display: none;
    }
    .hdc-orders-mobile {
        display: flex;
    }
    .hdc-transactions-mobile {
        display: flex;
    }
}

@media (min-width: 769px) {
    .hdc-orders-mobile {
        display: none !important;
    }
    .hdc-transactions-mobile {
        display: none !important;
    }
}

.hdc-dish-grid-mob {
	display: grid; 
	gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
 
 
@media (max-width: 480px) {
    .hdc-order-card .order-card-actions .action-btn {
        display: flex;
        gap: 8px;
        margin-top: 12px;
        flex-wrap: wrap;
        border-top: 1px solid #f1f2f6;
        font-size: 10px;
        background: #f2f2f2;
    }
    .hdc-order-card .order-card-actions {
        display: flex;
        justify-content: center;
    }
	.hdc-dish-grid-mob {
		grid-auto-flow: column;
		grid-template-columns: none;
	}
} 

/* ============================================================
   КАРТОЧКИ БЛЮД - УНИКАЛЬНЫЕ КЛАССЫ
   Префикс: hdc- (Healthy Delivery Cabinet)
   ============================================================ */

.hdc-dish-grid {
	display: grid; 
	gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}


.hdc-dish-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #dcdfe8;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.hdc-dish-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.hdc-dish-card .dish-image-wrap {
    position: relative;
    padding-top: 100%;
}

.hdc-dish-card .dish-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hdc-dish-card .dish-info {
    padding: 16px;
}

.hdc-dish-card .dish-name {
    margin-bottom: 8px;
    min-height: 44px;
	font-size: 16px;
	line-height: 1.1;
}

.hdc-dish-card .dish-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.hdc-dish-card .dish-slot {
	color: #5c5e6e;
    font-size: 10px;
    background: #f1f2f6;
    border-radius: 8px;
    padding: 2px 12px;
	
}

.hdc-dish-card .dish-calories {
    color: #5c5e6e;
    font-size: 10px;
}

/* Dish Card - упрощенный для доставленных (без описания) */
.hdc-dish-card.delivered .dish-name {
    font-weight: 400;
    color: #5c5e6e;
}

.hdc-dish-card.delivered .dish-info {
    padding: 12px 16px;
}

.hdc-dish-card.delivered .dish-meta {
    display: none;
}

.hdc-dish-card.delivered .dish-name {
    min-height: auto;
    font-size: 14px;
}

.flow-delivery {
  display: inline-block;
  width: 25px;
  height: 25px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%235c5e6e' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M42,6H18c-2.2,0-4,1.8-4,4v4C7.4,14,2,19.4,2,26v12h4c0,3.314,2.686,6,6,6s6-2.686,6-6h8c0,3.314,2.686,6,6,6s6-2.686,6-6h4c2.2,0,4-1.8,4-4V10C46,7.8,44.2,6,42,6z M12,40c-1.103,0-2-0.897-2-2s0.897-2,2-2s2,0.897,2,2S13.103,40,12,40z M14,32.349C13.374,32.127,12.702,32,12,32c-1.775,0-3.365,0.775-4.463,2H6v-6h8V32.349z M14,24H6.263c0.892-3.445,4.017-6,7.737-6V24z M32,40c-1.103,0-2-0.897-2-2s0.897-2,2-2s2,0.897,2,2S33.103,40,32,40z M42,34h-5.537c-1.099-1.225-2.688-2-4.463-2s-3.365,0.775-4.463,2H18V10h24V34z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin-right: 5px; 
}

.flow-orders {
  display: inline-block;
  width: 23px;
  height: 23px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%235c5e6e' d='M11.196.232a1.376 1.376 0 0 1 1.528 0 33.157 33.157 0 0 1 3.384 2.438s.293.203.301-.14a5.367 5.367 0 0 1 .079-1.329.606.606 0 0 1 .562-.39s1.329.066 2.173.179c.377.05.671.352.711.73 0 0 .543 3.62.665 4.925 0 0 .105.664 1.067 1.79 0 0 1.953 2.735 2.18 3.259 0 0 .454.946-.523 1.074 0 0-1.783.18-1.955.22a.446.446 0 0 0-.39.484s-.094 6.296-.555 9.32c0 0-.121 1.2-.782 1.173 0 0-1.833-.059-2.259-.047 0 0-.183 0-.156-.246 0 0 .934-9.817.301-14.78 0 0-.028-.64-.516-.782 0 0-.445-.18-.871.391a15.574 15.574 0 0 0-2.9 8.86s-.05 1.563.188 1.953c0 0 .148.274.907.336l.96.13s.176 0 .16.233c0 0-.218 2.88-.28 3.393a1.018 1.018 0 0 1-.071.34s-.035.098-.336.086c0 0-4.236-.03-4.713 0 0 0-.2 0-.242-.105-.043-.106-.294-3.717-.286-4.229a.255.255 0 0 1 .149-.25 2.548 2.548 0 0 0 1.172-1.871c.052-.548.06-1.098.024-1.646 0 0 .156-5.522.195-6.41 0 0 .031-.3-.36-.355a.364.364 0 0 0-.437.27v.03c0 .032-.274 3.643-.223 5.081 0 0 .094.942-.558.961 0 0-.634.095-.665-.69 0 0 .047-3.542.203-5.292a.39.39 0 0 0-.348-.391.39.39 0 0 0-.437.316.065.065 0 0 0 0 .031s-.274 3.39-.223 5.179c0 0 .078.868-.614.836 0 0-.578.066-.61-.704 0 0 .157-4.85.2-5.224A.39.39 0 0 0 6.647 9h-.039a.391.391 0 0 0-.418.325.167.167 0 0 0 0 .035s-.258 5.8-.223 7.503c0 0-.023 1.751 1.27 2.462 0 0 .192.11.196.277 0 0 .145 3.076.277 4.069 0 0 .047.238-.164.238L4.291 24a.67.67 0 0 1-.665-.633 72.876 72.876 0 0 1-.601-9.829.5.5 0 0 0-.391-.535S.969 12.85.566 12.749a.692.692 0 0 1-.422-1.02A33.497 33.497 0 0 1 11.197.232z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin-right: 5px; 
}

.flow-card {
  display: inline-block;
  width: 25px;
  height: 25px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%235c5e6e' d='M28 5.25h-24c-1.518 0.002-2.748 1.232-2.75 2.75v16c0.002 1.518 1.232 2.748 2.75 2.75h24c1.518-0.002 2.748-1.232 2.75-2.75v-16c-0.002-1.518-1.232-2.748-2.75-2.75h-0zM2.75 10.75h26.5v2.5h-26.5zM4 6.75h24c0.69 0.001 1.249 0.56 1.25 1.25v1.25h-26.5v-1.25c0.001-0.69 0.56-1.249 1.25-1.25h0zM28 25.25h-24c-0.69-0.001-1.249-0.56-1.25-1.25v-9.25h26.5v9.25c-0.001 0.69-0.56 1.249-1.25 1.25h-0zM10 21.25h-4c-0.414 0-0.75 0.336-0.75 0.75s0.336 0.75 0.75 0.75v0h4c0.414 0 0.75-0.336 0.75-0.75s-0.336-0.75-0.75-0.75v0zM20 21.25h-6c-0.414 0-0.75 0.336-0.75 0.75s0.336 0.75 0.75 0.75v0h6c0.414 0 0.75-0.336 0.75-0.75s-0.336-0.75-0.75-0.75v0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin-right: 5px;
}

.flow-chat {
  display: inline-block;
  width: 25px;
  height: 25px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg id='Communication / Chat_Remove'%3E%3Cpath id='Vector' d='M9 11H15M7.12357 18.7012L5.59961 19.9203C4.76744 20.5861 4.35115 20.9191 4.00098 20.9195C3.69644 20.9198 3.40845 20.7813 3.21846 20.5433C3 20.2696 3 19.7369 3 18.6712V7.2002C3 6.08009 3 5.51962 3.21799 5.0918C3.40973 4.71547 3.71547 4.40973 4.0918 4.21799C4.51962 4 5.08009 4 6.2002 4H17.8002C18.9203 4 19.4796 4 19.9074 4.21799C20.2837 4.40973 20.5905 4.71547 20.7822 5.0918C21 5.5192 21 6.07899 21 7.19691V14.8036C21 15.9215 21 16.4805 20.7822 16.9079C20.5905 17.2842 20.2843 17.5905 19.908 17.7822C19.4806 18 18.921 18 17.8031 18H9.12207C8.70603 18 8.49877 18 8.2998 18.0408C8.12328 18.0771 7.95216 18.1368 7.79168 18.2188C7.61281 18.3101 7.45249 18.4384 7.13478 18.6926L7.12357 18.7012Z' stroke='%235c5e6e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin-right: 5px;
}

.flow-profile {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='365 1955 25 28'%3E%3Cpath fill='%235c5e6e' d='M378.083123,1964.99998 C378.083123,1962.79398 376.251842,1960.99998 374,1960.99998 C371.748158,1960.99998 369.916877,1962.79398 369.916877,1964.99998 C369.916877,1967.20598 371.748158,1968.99998 374,1968.99998 C376.251842,1968.99998 378.083123,1967.20598 378.083123,1964.99998 M381.945758,1978.99998 L380.124685,1978.99998 C379.561214,1978.99998 379.103904,1978.55198 379.103904,1977.99998 C379.103904,1977.44798 379.561214,1976.99998 380.124685,1976.99998 L380.5626,1976.99998 C381.26898,1976.99998 381.790599,1976.30298 381.523154,1975.66198 C380.286989,1972.69798 377.383888,1970.99998 374,1970.99998 C370.616112,1970.99998 367.713011,1972.69798 366.476846,1975.66198 C366.209401,1976.30298 366.73102,1976.99998 367.4374,1976.99998 L367.875315,1976.99998 C368.438786,1976.99998 368.896096,1977.44798 368.896096,1977.99998 C368.896096,1978.55198 368.438786,1978.99998 367.875315,1978.99998 L366.054242,1978.99998 C364.778266,1978.99998 363.773818,1977.85698 364.044325,1976.63598 C364.787453,1973.27698 367.107688,1970.79798 370.163906,1969.67298 C368.769519,1968.57398 367.875315,1966.88998 367.875315,1964.99998 C367.875315,1961.44898 371.023403,1958.61898 374.733941,1959.04198 C377.422678,1959.34798 379.650022,1961.44698 380.05323,1964.06998 C380.400296,1966.33098 379.456073,1968.39598 377.836094,1969.67298 C380.892312,1970.79798 383.212547,1973.27698 383.955675,1976.63598 C384.226182,1977.85698 383.221734,1978.99998 381.945758,1978.99998 M377.185857,1974.46398 C377.584982,1974.85498 377.584982,1975.48798 377.185857,1975.87898 L374,1978.99998 L371.834924,1976.87898 C371.435799,1976.48798 371.435799,1975.85498 371.834924,1975.46398 L371.834924,1975.46398 C372.233028,1975.07398 372.879183,1975.07398 373.278308,1975.46398 L374,1976.17198 L375.742473,1974.46398 C376.141598,1974.07398 376.787752,1974.07398 377.185857,1974.46398'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
}

.flow-list {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%235c5e6e' d='M23 6V4h-6V2h-2v2H9v2H4v24h24V6H23zM11 6h10v2H11V6zM26 28H6V8h3v2h14V8h3V28z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
}

.flow-edit {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg id='style=stroke'%3E%3Cg id='edit'%3E%3Cpath id='vector (Stroke)' fill-rule='evenodd' clip-rule='evenodd' d='M4.3367 16.071L3.94269 19.6888C3.9081 20.0064 4.17624 20.2746 4.49389 20.24L8.11161 19.846C8.45133 19.809 8.76823 19.6571 9.00986 19.4154L20.0011 8.42417C20.5869 7.83838 20.5869 6.88863 20.0011 6.30285L17.8798 4.18153C17.294 3.59574 16.3443 3.59574 15.7585 4.18153L4.76722 15.1728C4.52559 15.4144 4.3737 15.7313 4.3367 16.071ZM18.9405 3.12087L21.0618 5.24219C22.2334 6.41376 22.2334 8.31325 21.0618 9.48483L10.0705 20.4761C9.58725 20.9594 8.95345 21.2631 8.27401 21.3371L4.65629 21.7311C3.38571 21.8695 2.31313 20.7969 2.45151 19.5264L2.84552 15.9086C2.91952 15.2292 3.22329 14.5954 3.70656 14.1121L14.6978 3.12087C15.8694 1.94929 17.7689 1.94929 18.9405 3.12087Z' fill='%235c5e6e'/%3E%3Cpath id='vector (Stroke)_2' fill-rule='evenodd' clip-rule='evenodd' d='M20.0011 6.30285L17.8798 4.18153C17.294 3.59574 16.3443 3.59574 15.7585 4.18153L14.4857 5.45432L18.7283 9.69696L20.0011 8.42417C20.5869 7.83838 20.5869 6.88863 20.0011 6.30285ZM18.7283 11.8183L12.3644 5.45432L14.6978 3.12087C15.8694 1.94929 17.7689 1.94929 18.9405 3.12087L21.0618 5.24219C22.2334 6.41376 22.2334 8.31326 21.0618 9.48483L18.7283 11.8183Z' fill='%235c5e6e'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
}

.flow-stop {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath fill='%235c5e6e' d='M 27.9999 51.9063 C 41.0546 51.9063 51.9063 41.0781 51.9063 28 C 51.9063 14.9453 41.0312 4.0937 27.9765 4.0937 C 14.8983 4.0937 4.0937 14.9453 4.0937 28 C 4.0937 41.0781 14.9218 51.9063 27.9999 51.9063 Z M 27.9999 47.9219 C 16.9374 47.9219 8.1014 39.0625 8.1014 28 C 8.1014 16.9609 16.9140 8.0781 27.9765 8.0781 C 39.0155 8.0781 47.8983 16.9609 47.9219 28 C 47.9454 39.0625 39.0390 47.9219 27.9999 47.9219 Z M 19.7265 34.0469 C 19.7265 35.4531 20.5702 36.2968 21.9999 36.2968 L 33.9999 36.2968 C 35.4062 36.2968 36.2733 35.4531 36.2733 34.0469 L 36.2733 21.9531 C 36.2733 20.5703 35.4062 19.7266 33.9999 19.7266 L 21.9999 19.7266 C 20.5702 19.7266 19.7265 20.5703 19.7265 21.9531 Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
}

.flow-play {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cpath fill='%235c5e6e' d='M99.05,183.5v-107L190,130L99.05,183.5z M130,258C59.42,258,2,200.579,2,130C2,59.42,59.42,2,130,2c70.579,0,128,57.42,128,128C258,200.579,200.579,258,130,258z M130,28C73.757,28,28,73.757,28,130s45.757,102,102,102s102-45.757,102-102S186.243,28,130,28z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
}

.flow-check {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='256 1035 32 32'%3E%3Cpath fill='%237eca1d' d='M286,1063 C286,1064.1 285.104,1065 284,1065 L260,1065 C258.896,1065 258,1064.1 258,1063 L258,1039 C258,1037.9 258.896,1037 260,1037 L284,1037 C285.104,1037 286,1037.9 286,1039 L286,1063 L286,1063 Z M284,1035 L260,1035 C257.791,1035 256,1036.79 256,1039 L256,1063 C256,1065.21 257.791,1067 260,1067 L284,1067 C286.209,1067 288,1065.21 288,1063 L288,1039 C288,1036.79 286.209,1035 284,1035 L284,1035 Z M278.027,1044.07 C277.548,1043.79 276.937,1043.96 276.661,1044.43 L270.266,1055.51 L266.688,1052.21 C266.31,1051.81 265.677,1051.79 265.274,1052.17 C264.871,1052.54 264.85,1053.18 265.228,1053.58 L269.8,1057.8 C270.177,1058.2 270.81,1058.22 271.213,1057.84 C271.335,1057.73 278.393,1045.43 278.393,1045.43 C278.669,1044.96 278.505,1044.34 278.027,1044.07 L278.027,1044.07 Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin-right: 5px;
}

.flow-back {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffffff' d='M0,512h139.6V372.4H0V512z M0,325.8h139.6V186.2H0V325.8z M46.5,232.7h46.5v46.5H46.5V232.7z M0,139.6h139.6V0H0V139.6z M46.5,46.5h46.5v46.5H46.5V46.5z M360.7,81.5L442.2,0h-256v256l81.5-81.5C453.8,290.9,372.4,418.9,209.5,512 C372.4,512,605.1,325.8,360.7,81.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
}