/*
 * Visual polish for hardware/plugin add-on rows — keeps the existing
 * full-width, stacked row layout (.page-item-plugin width: 100% untouched),
 * just refines spacing, borders, icon sizing and typography. Scoped under
 * .op-combo-style so nothing in product_details.css is edited.
 */

.op-combo-style {
	--op-addon-accent: #c97a1f;
}

.op-combo-style .op-combo-group-description {
	color: #6b7280;
	font-size: 13px;
	line-height: 1.45;
	margin: 2px 0 12px;
}

.op-combo-before .op-combo-group-description {
	flex-basis: 100%;
}

.op-combo-style .page-plugin-content {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 20px 24px !important;
	border: 1px solid #e7e9ef !important;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.op-combo-style .page-plugin-content:hover {
	box-shadow: 0 6px 16px rgba(16, 24, 40, 0.07) !important;
	border-color: #d7dbe6 !important;
}

.op-combo-style .imageVerticalLayout {
	width: 52px !important;
	flex: 0 0 52px !important;
}

.op-combo-style .itemImage {
	width: 52px;
	height: 52px;
	margin-top: 0 !important;
	border-radius: 10px;
	background-color: #f4f6f9;
}

.op-combo-style .imageVerticalLayout {
	align-items: flex-start;
}

.op-combo-style .op-addon-text {
	flex: 1 1 0%;
	min-width: 0;
}

/* Vaadin's setVisible(false)/hidden attribute is cancelled out by
   .select-button-layout / .slider forcing `display: flex` unconditionally
   (see the analogous fix already applied to
   .checkout-form .fieldset-layout[hidden] in styles.css) — the off-screen
   twin (whichever of the two states isn't current) leaks through as
   unstyled text instead of actually being hidden. Restoring real hidden
   behavior inside our scope fixes it without touching that shared rule. */
.op-combo-style [hidden] {
	display: none !important;
}

.op-combo-style .lbl-plugin-name {
	font-size: 17px !important;
	padding-top: 0 !important;
	margin-bottom: 2px;
}

.op-combo-style .lbl-description {
	font-size: 13px;
	color: #6b7280;
	line-height: 1.45;
	margin-bottom: 6px;
}

.op-combo-style .addon-action-cell {
	flex: none;
	align-self: flex-start;
	align-items: center;
	gap: 8px;
}

.op-combo-style .itemPrice {
	font-size: 20px !important;
	font-weight: 700;
	color: #1b1f2a;
	margin-top: 6px;
	display: inline-block;
}

.op-combo-style .itemDescription.styleSmall {
	color: #9aa1ad;
	font-size: 12px;
}

.op-combo-style .select-button-layout {
	border-radius: 999px !important;
	font-weight: 700;
}

.op-combo-style .select-button-layout.theme-background-color {
	background-color: #ffffff !important;
	color: #1b1f2a !important;
	border: 1.5px solid #1b1f2a !important;
}

.op-combo-style .select-button-layout .cart-icon {
	filter: invert(1);
}

.op-combo-style .page-plugin-content {
	border-radius: 12px !important;
}

@media (max-width: 620px) {
	.op-combo-style .page-plugin-content {
		flex-wrap: wrap;
	}
}

/* ---------- selected state: ring highlight + compact "check chip" ----------
   Replaces the full-size toggle-switch look (.switch/.slider from styles.css)
   with a small check chip once an add-on is picked. The unselected "Select"
   button (.op-combo-style .page-plugin-content already styles it) is
   untouched — .slider only renders at all when checked (see
   CloudAddToCartButton.setChecked), so re-skinning it here can't affect the
   unselected look, and the underlying toggle input stays clickable to
   deselect. */

/* product_details.css's own .plugin-selected rule puts a blue !important
   border directly on this same element (the root ComboItemDiv) — neutralize
   it here instead of touching that shared rule, then draw our ring on the
   inner .page-plugin-content so there's only ever one visible border. */
.op-combo-style .page-item-plugin.plugin-selected {
	border: none !important;
	margin-left: 0 !important;
	margin-top: 0 !important;
}

.op-combo-style .page-item-plugin.plugin-selected .page-plugin-content {
	border: 2px solid var(--op-addon-accent, #c97a1f) !important;
	box-shadow: none !important;
}

.op-combo-style .switch-layout {
	flex-direction: row !important;
	align-items: center;
	height: auto !important;
	gap: 8px;
}

/* The original toggle-track visual (.switch/.slider, absolutely positioned
   internals from styles.css) isn't used for the selected look any more — a
   plain Icon placed directly in switchBox (ProductSelectionView.java) next
   to the caption replaces it, avoiding the shared component's internal
   absolute-positioning quirks entirely. */
.op-combo-style .switch {
	display: none !important;
}

.op-combo-style .addon-selected-icon {
	color: var(--op-addon-accent, #c97a1f);
	margin-right: 4px;
}

.op-combo-style .switch-caption {
	padding: 0 !important;
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--op-addon-accent, #c97a1f);
}

/* ---------- device-choice group shown above the pricing plan (e.g. "BYOD" /
   "15\" Touch terminal") — a row of compact pill cards instead of the
   full-width stacked rows used below the plan selector. Reuses the same
   .page-item-plugin/.page-plugin-content markup and selection wiring; only
   the layout is overridden here. ---------- */

.op-combo-before {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.op-combo-before .titled-div {
	flex-basis: 100%;
}

.op-combo-before .page-item-plugin {
	display: flex;
	width: auto;
	flex: 1 1 200px;
	max-width: 280px;
	margin-bottom: 0;
}

.op-combo-before .page-plugin-content {
	flex: 1;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	padding: 18px 16px !important;
}

.op-combo-before .imageVerticalLayout {
	display: none;
}

.op-combo-before .op-addon-text {
	align-items: center;
	text-align: center;
	padding: 0 !important;
}

.op-combo-before .lbl-plugin-name {
	font-size: 1.05rem !important;
	font-weight: 800;
}

.op-combo-before .lbl-description {
	font-size: 13px;
	color: #6b7280;
	line-height: 1.4;
	margin-top: 2px;
}

.op-combo-before .itemPrice {
	font-size: 14px !important;
	margin-top: 2px !important;
}

/* No Select control on these tiles (see ComboItemDiv's wholeCardClickable) — the whole
   card is the click target, and selection reads via border + a corner checkmark badge,
   the same convention .plan-selected::after already uses for the pricing plan cards. */
.op-combo-before .page-item-plugin.plugin-selected .page-plugin-content::after {
	content: "\2713";
	position: absolute;
	top: 12px;
	right: 12px;
	width: 24px;
	height: 24px;
	background: var(--op-addon-accent, #c97a1f);
	color: #ffffff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	box-shadow: 0 2px 8px rgba(201, 122, 31, 0.35);
}

.op-combo-before .page-plugin-content {
	position: relative;
}