/* CakePOS WP — additions on top of app.css */

/* ── Notification bell ── */
.cpos-bell { position: relative; display: inline-block; }
.cpos-bell .ico-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 50%;
	background: rgba(255, 255, 255, 0.18); color: #fff;
	text-decoration: none; font-size: 18px; position: relative;
}
.cpos-bell-count {
	position: absolute; top: -2px; right: -2px;
	background: var(--red, #e91e63); color: #fff;
	min-width: 18px; height: 18px; border-radius: 9px;
	font-size: 11px; line-height: 18px; text-align: center;
	padding: 0 5px; font-weight: 800;
}
.cpos-bell-drop {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: auto;
	min-width: 320px;
	width: max-content;
	max-width: min(420px, calc(100vw - 24px));
	max-height: 70vh; overflow-y: auto;
	background: #fff; border: 1px solid #f3e2ea;
	border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	z-index: 9999;
}
[dir="rtl"] .cpos-bell-drop { left: auto; right: 0; }
@media (max-width: 600px) {
	.cpos-bell-drop {
		position: fixed;
		top: 60px;
		left: 12px;
		right: 12px;
		width: auto;
		max-width: none;
	}
}
.cpos-notif-item { transition: background .15s; }
.cpos-notif-item:hover { background: var(--pink-light, #fce8ef); }
.cpos-notif-item.unread { font-weight: 600; }
.cpos-notif-item.unread:hover { background: #f9dde6; }

/* ── Settings tab pills (data-attr based) ── */
[data-cpos-tab] {
	background: var(--gray-light, #f5f5f5);
	border: 1px solid var(--gray-border, #e0e0e0);
	color: var(--text2, #666);
	padding: 8px 14px; border-radius: 20px;
	font-family: inherit; font-weight: 700; font-size: 13px;
	cursor: pointer; margin: 0 2px;
}
[data-cpos-tab].on {
	background: var(--pink, #7B2D3E); color: #fff;
	border-color: var(--pink, #7B2D3E);
}

/* ── Admin notice flash inside CakePOS pages (non-WP) ── */
.cpos-flash {
	padding: 10px 14px; border-radius: 10px;
	margin: 0 12px 12px; font-size: 14px;
}
.cpos-flash.success { background: #d6f0e0; color: #217a49; }
.cpos-flash.error   { background: #ffe0e0; color: #c0392b; }
.cpos-flash.info    { background: #dbeeff; color: #2E86AB; }

/* -- single-page order form -- */
.order-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;align-items:start}
@media (max-width:900px){.order-layout{grid-template-columns:1fr}}
.order-catalog,.order-side{min-width:0}
.cat-bar{position:sticky;top:0;background:#fff;padding:8px 0;z-index:5;margin-bottom:10px}
.cat-bar .form-control{margin-bottom:8px}
.cat-chips{display:flex;flex-wrap:wrap;gap:6px;overflow-x:auto;padding-bottom:4px}
.cat-chip{background:#f5e8eb;color:#7B2D3E;border:1px solid transparent;border-radius:18px;padding:6px 14px;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}
.cat-chip.on{background:#7B2D3E;color:#fff;border-color:#7B2D3E}
.pcost{font-size:11px;color:#888;margin-top:2px}
.size-cost{font-size:11px;color:#888;font-weight:600;margin-right:4px}

/* cart */
.cart-box{background:#fff;border-radius:14px;padding:12px;margin-bottom:14px;box-shadow:0 2px 8px rgba(0,0,0,.06);border:1px solid #f0e0ec}
.cart-box .card-title{font-weight:800;font-size:14px;color:#7B2D3E;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.badge-pk{background:#7B2D3E;color:#fff;font-size:11px;padding:1px 8px;border-radius:10px;font-weight:700}
.cart-empty{text-align:center;color:#aaa;font-size:13px;padding:14px}
.cart-item{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #f5e8eb}
.cart-item:last-child{border-bottom:none}
.cart-thumb{width:44px;height:44px;border-radius:8px;overflow:hidden;background:#f5e8eb;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:22px}
.cart-thumb img{width:100%;height:100%;object-fit:cover}
.cart-info{flex:1;min-width:0}
.cart-name{font-weight:700;font-size:13px;color:#222;overflow:hidden;text-overflow:ellipsis}
.cart-name small{font-weight:600;color:#888;font-size:11px}
.cart-price{font-size:12px;color:#555;margin-top:2px}
.cart-cost{font-size:11px;color:#999;margin-top:1px}
.cart-x{background:#ffe0e0;color:#c0392b;border:none;border-radius:6px;width:26px;height:26px;cursor:pointer;font-size:16px;font-weight:800;line-height:1;flex-shrink:0}
.cart-x:hover{background:#ffc8c8}

/* size modal */
.size-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:14px}
.size-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.size-modal-card{position:relative;background:#fff;border-radius:14px;width:100%;max-width:480px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.size-modal-head{padding:12px 14px;border-bottom:1px solid #f0e0ec;display:flex;align-items:center;gap:8px;background:#fff}
.size-modal-title{flex:1;font-weight:800;color:#7B2D3E;font-size:15px}
.size-modal-close{background:transparent;border:none;font-size:24px;cursor:pointer;color:#666;line-height:1;padding:0 6px}
.size-modal-body{padding:12px 14px;overflow-y:auto}
.size-modal-body #smImg{width:100%;max-height:180px;object-fit:cover;border-radius:10px;margin-bottom:10px;cursor:zoom-in}
.size-modal-foot{padding:10px 14px;border-top:1px solid #f0e0ec;background:#fff}

/* driver thumbnail + hero */
.dorder-card .card-thumb{width:74px;flex-shrink:0;background:#f5e8eb;display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:1.8rem}
.dorder-card .card-thumb img{width:100%;height:100%;object-fit:cover}
.hero-img{display:block;width:calc(100% - 24px);max-height:220px;object-fit:cover;border-radius:14px;margin:12px;cursor:zoom-in;box-shadow:0 2px 10px rgba(0,0,0,.1)}


.cart-foot{margin-top:8px;padding-top:8px;border-top:1px dashed #f0d4dd}
.cart-foot-row{display:flex;justify-content:space-between;font-size:13px;color:#7B2D3E;font-weight:700}
.cart-foot-row b{color:#7B2D3E;font-size:15px}


/* ── Toast notifications ── */
.cpos-toast-host{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:99998;display:flex;flex-direction:column;gap:8px;pointer-events:none;width:min(420px,calc(100vw - 24px))}
.cpos-toast{pointer-events:auto;background:#fff;border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.22);padding:12px 14px;display:flex;gap:10px;align-items:flex-start;border-right:5px solid #7B2D3E;transform:translateY(-20px);opacity:0;transition:transform .28s ease,opacity .28s ease}
.cpos-toast.show{transform:translateY(0);opacity:1}
.cpos-toast-ico{font-size:24px;line-height:1;flex-shrink:0;width:38px;height:38px;border-radius:50%;background:#F5E8EB;display:flex;align-items:center;justify-content:center}
.cpos-toast-body{flex:1;min-width:0}
.cpos-toast-title{font-weight:800;font-size:14px;color:#7B2D3E;margin-bottom:2px}
.cpos-toast-msg{font-size:12.5px;color:#444;line-height:1.45;word-wrap:break-word}
.cpos-toast-x{background:transparent;border:none;font-size:20px;line-height:1;color:#999;cursor:pointer;padding:0;width:24px;height:24px;flex-shrink:0}
.cpos-toast-x:hover{color:#7B2D3E}
.cpos-toast-driver{border-right-color:#2E86AB}.cpos-toast-driver .cpos-toast-ico{background:#dbeeff}.cpos-toast-driver .cpos-toast-title{color:#2E86AB}
.cpos-toast-success{border-right-color:#2a9d5c}.cpos-toast-success .cpos-toast-ico{background:#d6f0e0}.cpos-toast-success .cpos-toast-title{color:#217a49}
@keyframes cpos-toast-flash{0%,100%{background:#fff}50%{background:#fff7e0}}
.cpos-toast{animation:cpos-toast-flash 1.2s ease-in-out 2}