/* Metrova shop page (mg-gaming.net/shop) */
.contentArea h3 { margin-top: 1.4em; }
.hl { color: #FFD700; }
.small { font-size: 12px; color: #8f8f8f; }
.fine { margin-top: 2em; }
code { background: #050505; border: 1px solid #2a2a2a; border-radius: 3px; padding: 1px 5px; color: #9fdcff; font-size: 12px; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0 8px; }
.step { position: relative; padding: 16px 14px 12px; background: rgba(10,10,10,.72); border: 1px solid #262626; border-radius: 4px; }
.step .num { position: absolute; top: -12px; left: 12px; width: 26px; height: 26px; border-radius: 50%; background: #1E90FF; color: #fff;
	font: 700 14px/26px "Oswald", Arial, sans-serif; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.7); }
.step h4 { margin: 4px 0 6px; color: #fff; font-size: 14px; }
.step p { margin: 0; font-size: 12px; }

.packs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 10px 0 10px; }
.pack { text-align: center; padding: 16px 10px 14px; background: linear-gradient(135deg, #1b1b1b, #050505); border: 1px solid #262626; border-radius: 4px; }
.pack-cr { font: 700 30px/1 "Oswald", Impact, sans-serif; color: #FFD700; }
.pack-lbl { text-transform: uppercase; font-size: 11px; letter-spacing: 1.5px; color: #8f8f8f; margin: 2px 0 8px; }
.pack-usd { font: 500 20px/1 "Oswald", Arial, sans-serif; color: #fff; margin-bottom: 10px; }
.btn.disabled { opacity: .55; cursor: default; font-size: 11px; }

table.price { width: 100%; border-collapse: collapse; margin: 6px 0 14px; background: rgba(10,10,10,.6); }
table.price th { text-align: left; font-weight: normal; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; color: #8f8f8f; padding: 7px 10px; border-bottom: 1px solid #333; }
table.price td { padding: 7px 10px; border-bottom: 1px dotted #2a2a2a; color: #cfcfcf; }
table.price td.cr { color: #FFD700; font-weight: bold; white-space: nowrap; width: 110px; }
table.price td.usd { color: #9a9a9a; white-space: nowrap; width: 90px; }
table.price tr:hover td { background: rgba(30,144,255,.06); }
table.price .note { display: block; font-size: 11px; color: #7a7a7a; }
table.price th:nth-child(2), table.price th:nth-child(3) { width: 1%; white-space: nowrap; }

.restricted-box { margin: 14px 0 16px; padding: 14px 16px 6px; border: 2px solid #d12b2b; border-radius: 4px;
	background: linear-gradient(135deg, rgba(120,10,10,.45), rgba(10,10,10,.8)); box-shadow: 0 0 22px rgba(209,43,43,.25); }
.restricted-head { display: flex; align-items: center; gap: 10px; }
.restricted-head h3 { margin: 0; color: #fff; }
.restricted-head small { font-size: .6em; color: #d9a3a3; }
.badge { background: #d12b2b; color: #fff; font: 700 12px/1 "Oswald", Arial, sans-serif; letter-spacing: 1.5px; padding: 5px 8px; border-radius: 3px; }
.restricted-box p { margin: 10px 0; color: #e2c8c8; }
.restricted-box .rules { margin: 10px 0 8px; padding-left: 18px; font-size: 12px; color: #c9a9a9; }

.chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.chip { background: #111; border: 1px solid #2c2c2c; border-radius: 3px; padding: 3px 8px; font-size: 12px; color: #cfcfcf; }
.chip.restricted { background: #3a0d0d; border-color: #7a1f1f; color: #ffdede; font-weight: bold; }

details.veh-list { margin: 6px 0; background: rgba(10,10,10,.6); border: 1px solid #262626; border-radius: 4px; padding: 8px 12px; }
details.veh-list summary { cursor: pointer; color: #cfcfcf; font-weight: bold; }

@media (max-width: 1000px) {
	.steps, .packs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
	.steps, .packs { grid-template-columns: 1fr; }
	table.price td.usd, table.price th:nth-child(3) { display: none; }
}