/* catalog/view/theme/zeexo/stylesheet/stark/account.css
   Rozetka-style account cabinet skin. */

/* =============================================================
   1. Hide the original Zeexo right sidebar on cabinet pages
   ============================================================= */
body.is-stark-cabinet #column-right,
body.is-stark-cabinet .col-right,
body.is-stark-cabinet #content.col-sm-9 {
	/* column-right hidden; content span widened via grid */
}
body.is-stark-cabinet #column-right { display: none !important; }
body.is-stark-cabinet #content.col-sm-9,
body.is-stark-cabinet #content.col-md-9 {
	width: 100% !important;
	flex: 1 1 auto !important;
	max-width: 100% !important;
}

/* =============================================================
   2. Cabinet wrapper + two-column layout (sidebar + content)
   ============================================================= */
.stark-cabinet {
	max-width: 1200px;
	margin: 0 auto;
	padding: 8px 0 40px;
	color: #1a1f2b;
	font-size: 14px;
	line-height: 1.45;
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}
@media (max-width: 860px) {
	.stark-cabinet {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}

.stark-cabinet__content { min-width: 0; }

/* =============================================================
   3. Left sidebar
   ============================================================= */
.stark-sidebar {
	background: #fff;
	border: 1px solid #e7e9ee;
	border-radius: 10px;
	padding: 8px 6px;
	position: sticky;
	top: 16px;
	align-self: start;
}
@media (max-width: 860px) {
	.stark-sidebar { position: static; }
}

.stark-sidebar__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.stark-sidebar__item { margin: 0; padding: 0; }

.stark-sidebar__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	color: #1a1f2b;
	text-decoration: none;
	font-size: 16px;
	border-radius: 8px;
	transition: background 0.15s ease, color 0.15s ease;
}
.stark-sidebar__link:hover {
	background: #f7f8fa;
	color: #0071c2;
	text-decoration: none;
}

.stark-sidebar__item.is-active .stark-sidebar__link {
	background: #fff7e6;
	color: #1a1f2b;
	font-weight: 600;
}
.stark-sidebar__item.is-active .stark-sidebar__link::before {
	opacity: 1;
}

.stark-sidebar__item--logout {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid #f2f3f6;
}
.stark-sidebar__item--logout .stark-sidebar__link {
	color: #b71c1c;
}

/* =============================================================
   4. Page title inside content area
   ============================================================= */
.stark-cabinet__title {
	margin: 0 0 18px;
	font-size: 22px;
	font-weight: 700;
	color: #1a1f2b;
}

/* =============================================================
   5. Existing "stark-account" landing grid (kept for /account/account
      if it's rendered, but we redirect now — still good to keep)
   ============================================================= */
.stark-account {
	max-width: 1200px;
	margin: 0 auto;
	padding: 8px 0 40px;
	color: #1a1f2b;
	font-size: 14px;
	line-height: 1.45;
}
.stark-account__hero { margin: 4px 0 20px; }
.stark-account__title {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	color: #1a1f2b;
}
.stark-account__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
@media (max-width: 720px) {
	.stark-account__grid { grid-template-columns: 1fr; }
}
.stark-acc-section {
	background: #fff;
	border: 1px solid #e7e9ee;
	border-radius: 10px;
	padding: 16px 18px 8px;
}
.stark-acc-section__title {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #6c7383;
}
.stark-acc-menu { list-style: none; margin: 0; padding: 0; }
.stark-acc-menu__item { margin: 0; padding: 0; }
.stark-acc-menu__item + .stark-acc-menu__item {
	border-top: 1px solid #f2f3f6;
}

/* =============================================================
   6. Shared link styling (icon + text) — used in sidebar AND landing
   ============================================================= */
.stark-acc-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 4px;
	color: #1a1f2b;
	text-decoration: none;
	font-size: 14px;
	transition: color 0.15s ease;
}
.stark-acc-link:hover { color: #0071c2; text-decoration: none; }
.stark-acc-link:hover::before { opacity: 1; }

.stark-acc-link::before {
	content: "";
	display: inline-block;
	width: 20px; height: 20px;
	flex-shrink: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.75;
	transition: opacity 0.15s ease;
}

.stark-acc-link__text { flex: 1 1 auto; }

.stark-acc-link__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: #f9b233;
	color: #1a1f2b;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.stark-acc-menu__item--highlight .stark-acc-link {
	font-weight: 600;
}

/* Override padding for sidebar variant */
.stark-sidebar .stark-acc-link {
	font-size: 16px;
}

/* =============================================================
   7. Icons (inline SVG data URIs)
   ============================================================= */
.stark-acc-link--profile::before     { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1f2b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21a8 8 0 0 0-16 0'/><circle cx='12' cy='7' r='4'/></svg>"); }
.stark-acc-link--password::before    { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1f2b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='11' width='16' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/></svg>"); }
.stark-acc-link--address::before     { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1f2b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s-7-7.58-7-13a7 7 0 0 1 14 0c0 5.42-7 13-7 13z'/><circle cx='12' cy='9' r='2.5'/></svg>"); }
.stark-acc-link--wishlist::before    { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1f2b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20.8 5.7a5 5 0 0 0-7 0L12 7.4l-1.8-1.7a5 5 0 0 0-7 7L12 21l8.8-8.3a5 5 0 0 0 0-7z'/></svg>"); }
.stark-acc-link--card::before        { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1f2b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='M3 10h18'/></svg>"); }
.stark-acc-link--orders::before      { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d48c00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='16' rx='2'/><path d='M7 9h10M7 13h10M7 17h6'/></svg>"); opacity: 1; }
.stark-acc-link--history::before     { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1f2b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>"); }
.stark-acc-link--download::before    { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1f2b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v12'/><path d='M7 10l5 5 5-5'/><path d='M5 21h14'/></svg>"); }
.stark-acc-link--reward::before      { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1f2b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v10M9 10h4a2 2 0 0 1 0 4H9'/></svg>"); }
.stark-acc-link--return::before      { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1f2b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7l4-4 4 4'/><path d='M7 3v10a4 4 0 0 0 4 4h10'/></svg>"); }
.stark-acc-link--tx::before          { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1f2b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7h14l-3-3'/><path d='M21 17H7l3 3'/></svg>"); }
.stark-acc-link--recurring::before   { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1f2b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 0 1 15-6.7L21 8'/><path d='M21 4v4h-4'/><path d='M21 12a9 9 0 0 1-15 6.7L3 16'/><path d='M3 20v-4h4'/></svg>"); }
.stark-acc-link--affiliate::before   { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1f2b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l4-4 3 3 5-5 2 2'/><path d='M19 14v5a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-5'/></svg>"); }
.stark-acc-link--newsletter::before  { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1f2b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='M3 7l9 6 9-6'/></svg>"); }
.stark-acc-link--logout::before      { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b71c1c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><path d='M16 17l5-5-5-5'/><path d='M21 12H9'/></svg>"); opacity: 1; }