/* ==========================================================================
   Account area: desktop side menu + screens (profile, vouchers, reviews, returns)
   ========================================================================== */

body.mb.mb-is-account { background: #f3f4f7 !important; }
.mb-accside, .mb-dhead, .mb-only-d { display: none; }
.mb-muted { color: var(--mb-faint); }

/* cards used by all account screens */
.mb-dcard { background: #fff; border-radius: var(--mb-radius-lg); padding: 16px; }
.mb-dcard + .mb-dcard, .mb-dcard + .mb-vpane, .mb-vtabs + .mb-dcard { margin-top: 12px; }
.mb-dcard__title { font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: #1f2433; padding-bottom: 14px; border-bottom: 1px solid var(--mb-line); }
.mb-dcard__title--sub { margin-top: 26px; }
.mb-dcard--narrow { max-width: 520px; margin-left: auto; margin-right: auto; }

/* tabs (vouchers, reviews) */
.mb-vtabs { display: flex; gap: 22px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
.mb-vtabs::-webkit-scrollbar { display: none; }
.mb-vtabs > * { position: relative; padding: 16px 4px 13px; font-size: 15px; font-weight: 600; color: #262b3b; white-space: nowrap; background: none; border: 0; cursor: pointer; }
.mb-vtabs > * sup { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; margin-left: 3px; border-radius: 99px; background: #eceef3; color: #262b3b; font-size: 10px; font-weight: 700; vertical-align: 8px; }
.mb-vtabs > .is-active { color: var(--mb-primary); }
.mb-vtabs > .is-active sup { background: var(--mb-primary); color: #fff; }
.mb-vtabs > .is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--mb-primary); }

/* link tabs inside a card (returns) */
.mb-ltabs { display: flex; gap: 22px; border-bottom: 1px solid var(--mb-line); overflow-x: auto; scrollbar-width: none; }
.mb-ltabs a { position: relative; padding: 14px 0 12px; font-size: 14px; color: #7b8094; white-space: nowrap; }
.mb-ltabs a.is-active { color: var(--mb-primary); }
.mb-ltabs a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--mb-primary); }

/* empty states */
.mb-dempty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 10px 34px; }
.mb-dempty__art { width: 170px; height: auto; margin-bottom: 18px; }
.mb-dempty__ico { color: #c9cbd2; margin-bottom: 8px; }
.mb-dempty h2 { font-size: 18px; font-weight: 600; color: #1f2433; }
.mb-dempty p { font-size: 14px; color: var(--mb-muted); max-width: 440px; }
.mb-dempty .mb-btn--grad { max-width: 320px; min-height: 40px; font-size: 15px; margin-top: 6px; }
.mb-dempty__rate { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 14px; }
.mb-dempty__rate b { display: grid; place-items: center; width: 86px; height: 86px; border-radius: 50%; border: 3px solid #e3e5eb; border-top-color: #b9bcc7; font-size: 32px; font-weight: 700; color: #1f2433; }
.mb-dempty__rate span { display: flex; gap: 6px; color: #f5a524; }
.mb-dempty__rate .mb-i { fill: currentColor; stroke: none; }

/* desktop dashboard */
.mb-manage__cols { display: grid; grid-template-columns: 1fr 1fr; padding-top: 18px; }
.mb-manage__col { display: flex; flex-direction: column; gap: 4px; padding-right: 20px; font-size: 14px; color: var(--mb-muted); }
.mb-manage__col + .mb-manage__col { padding: 0 0 0 20px; border-left: 1px solid var(--mb-border); }
.mb-manage__col b { color: #1f2433; font-size: 15px; font-weight: 600; margin-top: 8px; }
.mb-manage__col small { font-size: 12px; color: var(--mb-faint); margin-top: 8px; }
.mb-manage__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mb-manage__head h2 { font-size: 15px; font-weight: 600; color: #1f2433; }
.mb-manage__head a { font-size: 13px; font-weight: 600; color: #1a73e8; }
.mb-otable-wrap { overflow-x: auto; }
.mb-otable { width: 100%; border-collapse: collapse; font-size: 13px; }
.mb-otable th { padding: 14px 12px; text-align: left; font-weight: 600; color: #1f2433; border-bottom: 1px solid var(--mb-line); white-space: nowrap; }
.mb-otable td { padding: 12px; border-bottom: 1px solid var(--mb-line); color: #4b5063; vertical-align: middle; }
.mb-otable__imgs { white-space: nowrap; }
.mb-otable__imgs img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; margin-right: 4px; background: var(--mb-soft); vertical-align: middle; }
.mb-otable__empty { padding: 26px 12px; text-align: center; font-size: 14px; color: var(--mb-muted); }
.mb-otable .mb-link { color: #1a73e8; }

/* profile view */
.mb-pview__cols { display: grid; grid-template-columns: 1fr 1fr; }
.mb-pview__col { display: grid; gap: 18px; align-content: start; padding: 8px 20px 8px 0; }
.mb-pview__col + .mb-pview__col { padding: 8px 0 8px 20px; border-left: 1px solid var(--mb-border); }
.mb-pview dt { font-size: 15px; font-weight: 600; color: #1f2433; }
.mb-pview dd { margin: 2px 0 0; font-size: 15px; color: var(--mb-muted); word-break: break-word; }
.mb-pview__btns { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; padding-top: 34px; }
.mb-obtn { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid #e3e5eb; border-radius: 99px; font-size: 13px; font-weight: 600; color: #1f2433; background: #fff; }
.mb-obtn:hover { border-color: var(--mb-primary); color: var(--mb-primary); }

/* vouchers */
.mb-vsec__title { font-size: 16px; font-weight: 600; color: #1f2433; padding: 4px 4px 12px; margin-bottom: 14px; border-bottom: 1px solid var(--mb-line); }
.mb-vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.mb-vcard { position: relative; display: flex; align-items: stretch; gap: 10px; min-height: 86px; padding: 10px 10px 10px 0; border-radius: 8px; background: #e3f5fb; border: 1px solid #cdebf5; overflow: hidden; }
.mb-vcard::before, .mb-vcard::after { content: ""; position: absolute; left: 86px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transform: translateX(-50%); }
.mb-vcard::before { top: -7px; }
.mb-vcard::after { bottom: -7px; }
.mb-vcard__side { flex: none; width: 86px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; border-right: 1px dashed #b9dfeb; padding: 0 4px; }
.mb-vcard__side b { font-size: 11px; font-weight: 700; color: var(--mb-primary); line-height: 1.1; }
.mb-vcard__side small { font-size: 9px; color: #6b7185; }
.mb-vcard__ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; object-fit: contain; }
.mb-vcard__ico--brand { background: var(--mb-primary); color: #fff; }
.mb-vcard__ico--truck { color: var(--mb-primary); width: auto; height: auto; }
.mb-vcard__body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding-right: 74px; }
.mb-vcard__body strong { font-size: 16px; font-weight: 700; color: #1b2a6b; line-height: 1.2; margin-bottom: 2px; }
.mb-vcard__body p { font-size: 10.5px; color: #4b5063; line-height: 1.35; }
.mb-vcard__code b { color: #1f2433; letter-spacing: .04em; }
.mb-vcard__soon { position: absolute; top: 8px; right: 10px; padding: 2px 7px; border-radius: 4px; background: #fde7ef; color: var(--mb-primary); font-size: 9.5px; font-weight: 600; }
.mb-vbtn { position: absolute; right: 8px; bottom: 8px; min-width: 66px; height: 24px; padding: 0 12px; border: 0; border-radius: 99px; background: linear-gradient(90deg, #6d4fc2, #8f47c9); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.mb-vbtn:hover { filter: brightness(1.08); }
.mb-vbtn.is-got { background: #c8ccd6; cursor: default; filter: none; }

/* review / return rows */
.mb-rlist { list-style: none; margin: 0; padding: 0; }
.mb-dcard.mb-rlist { padding: 4px 16px; }
.mb-rlist__row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--mb-line); }
.mb-rlist__row:last-child { border-bottom: 0; }
.mb-rlist__row img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--mb-soft); flex: none; }
.mb-rlist__row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--mb-muted); }
.mb-rlist__row b { color: #1f2433; font-size: 14px; font-weight: 600; }
.mb-rlist__row p { color: #4b5063; }
.mb-rlist__stars { display: flex; gap: 2px; color: #f5a524; }
.mb-rlist__stars .mb-i { fill: currentColor; stroke: none; }

@media (max-width: 767px) {
	.mb-manage__cols, .mb-pview__cols { grid-template-columns: 1fr; }
	.mb-pview__col + .mb-pview__col { padding: 18px 0 8px; border-left: 0; border-top: 1px solid var(--mb-line); margin-top: 10px; }
	.mb-pview__btns { justify-content: stretch; }
	.mb-pview__btns .mb-obtn { flex: 1; justify-content: center; min-height: 42px; }
	.mb-vgrid { grid-template-columns: 1fr; }
	.mb-dcard--full { padding-top: 6px; }
	.mb-dcard--full > .mb-dcard__title { display: none; }
	.mb-rlist__row { flex-wrap: wrap; }
	.mb-rlist__row .mb-btn { margin-left: 70px; }
}

/* ---------------------------------------------------------------- desktop */
@media (min-width: 992px) {
	.mb-only-m { display: none; }
	.mb-only-d { display: block; }
	.mb-dhead { display: block; font-size: 24px; font-weight: 600; letter-spacing: -.01em; color: #1f2433; padding: 6px 2px 16px; }

	.mb-accwrap.mb-accd { max-width: 1210px; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; padding-top: 20px; padding-bottom: 40px; }
	.mb-accd .mb-backbar { display: none; }
	.mb-accd__main { min-width: 0; }

	.mb-accside { display: block; position: sticky; top: calc(var(--mb-header-h) + 70px); background: #fff; border-radius: 6px; padding: 22px 14px 18px; }
	.mb-accside__hi { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 0 0 14px; border-bottom: 1px solid var(--mb-line); font-size: 11px; color: #262b3b; }
	.mb-accside__hi b { font-weight: 400; }
	.mb-accside__hi em { margin-top: 8px; padding: 3px 7px; border-radius: 4px; background: #e8f8ee; color: #16a34a; font-size: 11px; font-style: normal; }
	.mb-accside__group { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--mb-line); }
	.mb-accside__group:last-child { border-bottom: 0; padding-bottom: 0; }
	.mb-accside__link { display: flex; align-items: center; gap: 8px; padding: 4px 4px; font-size: 13px; color: #6b7185; border-radius: 4px; }
	.mb-accside__link .mb-i { flex: none; color: #6b7185; }
	.mb-accside__link.is-head { font-size: 15px; color: #1f2433; padding: 5px 4px; }
	.mb-accside__link.is-head .mb-i { color: #3a3f52; }
	.mb-accside__link i { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--mb-primary); color: #fff; font-size: 10px; font-style: normal; font-weight: 700; line-height: 18px; text-align: center; }
	.mb-accside__link:hover, .mb-accside__link:hover .mb-i, .mb-accside__link.is-active, .mb-accside__link.is-active .mb-i { color: var(--mb-primary); }

	.mb-dcard { padding: 20px 20px; border-radius: 6px; }
	.mb-dcard--full { min-height: 480px; }
	.mb-manage { padding-bottom: 8px; }

	/* orders */
	.mb-acc--orders { background: #fff; border-radius: 6px; padding: 24px 20px 30px; gap: 0; min-height: 600px; }
	.mb-acc--orders .mb-dcard__title { margin-bottom: 4px; }
	.mb-acc--orders .mb-otabs { position: static; margin: 0; padding: 0; border-radius: 0; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--mb-line); }
	.mb-acc--orders .mb-otabs a { flex: 1; text-align: center; font-size: 13px; padding: 20px 4px 16px; }
	.mb-acc--orders .mb-otabs a.is-active::after { height: 2px; }
	.mb-acc--orders .mb-oempty { margin: 0; padding: 60px 16px 20px; border-radius: 0; }
	.mb-acc--orders .mb-oempty__art { width: 150px; margin-bottom: 26px; }
	.mb-acc--orders .mb-oempty p { font-size: 13px; }
	.mb-acc--orders .mb-btn--grad { max-width: 320px; min-height: 30px; font-size: 14px; margin-top: 10px; }
	.mb-acc--orders .mb-olist { padding-top: 16px; }
	.mb-acc--orders .mb-ocard { border: 1px solid var(--mb-line); border-radius: 8px; }

	/* notifications + engine tabs */
	.mb-acc--notices .mb-acc__card, .mb-accd .mb-acc--engine .bzc-acc2__block { border-radius: 6px; }

	/* help center */
	.mb-help { max-width: 1210px; }
	.mb-help .mb-backbar [data-mb-back] { display: none; }
	.mb-help .mb-backbar h1 { font-size: 22px; }
	.mb-help__banner { text-align: center; border-radius: 4px; padding: 16px 20px 18px; }
	.mb-help__banner h2 { font-size: 15px; font-weight: 600; }
	.mb-help__banner p { font-size: 18px; font-weight: 600; opacity: 1; }
	.mb-help__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 26px 20px; margin-top: 14px; border-radius: 4px; }
	.mb-help__actions a { width: 86px; gap: 6px; }
	.mb-help__actions .mb-i { width: 32px; height: 32px; }
	.mb-help__actions b { font-size: 11px; font-weight: 600; }
	.mb-help__intro { display: none; }
	.mb-faq { margin-top: 14px; border-radius: 4px; }
	.mb-faq__head { padding: 8px 14px; font-size: 14px; }
	.mb-faq__head .mb-i { width: 16px; height: 16px; }
	.mb-faq__body { padding: 14px; gap: 8px; }
	.mb-faq__q summary { padding: 10px 14px; font-size: 14px; }
	.mb-faq__q > .mb-prose { font-size: 13px; padding: 0 14px 12px; }
	.mb-help__call { padding-top: 26px; text-align: center; }
	.mb-help__call p { font-size: 15px; margin-bottom: 14px; }
	.mb-callbtn { max-width: 340px; padding: 10px 16px; gap: 14px; }
	.mb-callbtn .mb-i { width: 24px; height: 24px; }
	.mb-callbtn b { font-size: 17px; }
	.mb-callbtn small { font-size: 14px; }
}
.mb-vbtn.is-done { background: #c8ccd6; }

/* engine-drawn tabs (address, wishlist, password, edit profile) in theme style */
.mb-acc--engine .bzc-acc2, .mb-acc--engine .bzc-acc2__layout, .mb-acc--engine .bzc-acc2__main { background: transparent !important; box-shadow: none !important; border: 0 !important; min-height: 0 !important; padding: 0 !important; }
.mb-acc--engine .bzc-acc2__block { background: #fff; border: 0 !important; box-shadow: none !important; overflow: hidden; }
.mb-acc--engine .bzc-acc2__bar { background: #fff !important; color: #1f2433 !important; padding: 18px 20px 14px !important; border-bottom: 1px solid var(--mb-line); }
.mb-acc--engine .bzc-acc2__bar h3 { color: #1f2433 !important; font-size: 20px; font-weight: 600; }
.mb-acc--engine .bzc-acc2__title { font-size: 20px; font-weight: 600; color: #1f2433; }
@media (min-width: 992px) {
	.mb-accd .mb-acc--engine { background: transparent; padding: 0; }
	.mb-accd .mb-acc--engine .bzc-acc2__block { border-radius: 6px; }
	.mb-accd .mb-acc--engine .bzc-acc2__card { padding: 22px 20px !important; }
}
