/* P2B Phone Case Designer — brand-token styling (logo blue system). */
.p2b-cases { max-width: 1040px; margin: 0 auto; padding: 8px 14px 40px; font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; color: #101828; }

.p2b-cases__pick { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.p2b-cases__pick label { font-weight: 700; font-size: 13px; color: #667085; }
.p2b-cases__pick select {
	border: 1.5px solid #D0D5DD; border-radius: 12px; background: #fff; padding: 9px 14px;
	font: inherit; font-weight: 600; min-width: 150px;
}
.p2b-cases__pick select:focus { outline: none; border-color: #2563EB; box-shadow: 0 0 0 4px rgba(37, 99, 235, .16); }
.p2b-cases__price { margin-inline-start: auto; font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; }

.p2b-cases__stage { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 22px; align-items: start; }
@media (max-width: 760px) { .p2b-cases__stage { grid-template-columns: 1fr; } }

.p2b-cases__canvaswrap { position: sticky; top: 12px; text-align: center; }
#p2b-case-preview { max-width: 100%; height: auto; touch-action: none; cursor: grab; }
#p2b-case-preview:active { cursor: grabbing; }
.p2b-cases__cutnote { font-size: 12px; color: #667085; margin: 6px 0 0; }
.p2b-cases__quality { display: inline-block; margin-top: 6px; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.p2b-cases__quality.is-good { background: #ECFDF3; color: #067647; }
.p2b-cases__quality.is-ok { background: #FFFAEB; color: #B54708; }
.p2b-cases__quality.is-low { background: #FEF3F2; color: #B42318; }

.p2b-cases__panel { background: #fff; border: 1px solid #EAECF0; border-radius: 18px; padding: 16px; box-shadow: 0 4px 20px rgba(16, 24, 40, .05); }

.p2b-cases__tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.p2b-cases__tabs button {
	border: 1.5px solid #EAECF0; background: #fff; border-radius: 999px; padding: 8px 16px;
	font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; color: #667085;
}
.p2b-cases__tabs button.is-on { background: #2563EB; border-color: #2563EB; color: #fff; }

.p2b-cases__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; max-height: 300px; overflow: auto; }
.p2b-cases__thumb { border: 2px solid transparent; border-radius: 12px; overflow: hidden; padding: 0; background: #F8FAFC; cursor: pointer; aspect-ratio: 1; }
.p2b-cases__thumb:hover { border-color: #2563EB; }
.p2b-cases__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.p2b-cases__searchbar { display: flex; gap: 8px; margin-bottom: 10px; }
.p2b-cases__searchbar input {
	flex: 1; border: 1.5px solid #D0D5DD; border-radius: 12px; padding: 9px 14px; font: inherit;
}
.p2b-cases__searchbar input:focus { outline: none; border-color: #2563EB; box-shadow: 0 0 0 4px rgba(37, 99, 235, .16); }

.p2b-cases__drop { display: block; border: 2px dashed #D0D5DD; border-radius: 14px; padding: 26px 14px; text-align: center; font-weight: 700; color: #667085; cursor: pointer; }
.p2b-cases__drop:hover { border-color: #2563EB; color: #1D4ED8; background: #EFF4FF; }

.p2b-cases__tab input[type="text"] { width: 100%; border: 1.5px solid #D0D5DD; border-radius: 12px; padding: 10px 14px; font: inherit; margin-bottom: 8px; }
.p2b-cases__row { display: flex; gap: 8px; align-items: center; }
.p2b-cases__row select { flex: 1; border: 1.5px solid #D0D5DD; border-radius: 12px; padding: 8px 12px; font: inherit; }

.p2b-cases__controls { border-top: 1px solid #EAECF0; margin-top: 14px; padding-top: 12px; display: grid; gap: 8px; }
.p2b-cases__controls label { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: #667085; }
.p2b-cases__controls input[type="range"] { flex: 1; accent-color: #2563EB; }
.p2b-cases__hint { font-size: 12px; color: #98A2B3; margin: 2px 0 0; }

.p2b-btn {
	display: inline-block; border: 1.5px solid #D0D5DD; background: #fff; color: #1D4ED8;
	border-radius: 999px; padding: 10px 20px; font: inherit; font-weight: 700; cursor: pointer;
}
.p2b-btn--primary {
	width: 100%; margin-top: 14px; background: #2563EB; border-color: #2563EB; color: #fff;
	padding: 13px 20px; font-size: 15.5px; box-shadow: 0 6px 18px rgba(37, 99, 235, .28);
}
.p2b-btn--primary:hover { background: #1D4ED8; }
.p2b-btn--primary:disabled { background: #98A2B3; border-color: #98A2B3; box-shadow: none; cursor: not-allowed; }
.p2b-cases__note { min-height: 1.3em; font-size: 13px; margin: 8px 0 0; text-align: center; }

.p2b-cases *, .p2b-cases *::before, .p2b-cases *::after { box-sizing: border-box; }
.p2b-cases [hidden] { display: none !important; }
.p2b-cases__panel, .p2b-cases__row, .p2b-cases__tab, .p2b-cases__searchbar { min-width: 0; }
.p2b-cases__searchbar input, .p2b-cases__row select { min-width: 0; }
.p2b-cases__availability { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; background: #F2F4F7; color: #475467; font-size: 13px; line-height: 1.7; }
.p2b-cases__availability.is-unavailable { background: #FFFAEB; color: #93370D; }
.p2b-cases button:focus-visible, .p2b-cases input:focus-visible, .p2b-cases select:focus-visible { outline: 3px solid #84ADFF; outline-offset: 3px; }
@media (max-width: 760px) {
	.p2b-cases__stage { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.p2b-cases__canvaswrap { position: static; }
	#p2b-case-preview { max-height: 330px; width: auto; }
	.p2b-cases__pick { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; }
	.p2b-cases__pick select { min-width: 0; max-width: 100%; width: 100%; }
	.p2b-cases__price { grid-column: 1 / -1; margin-inline-start: 0; }
}