/* ==========================================================================
   Simplify theme - missing layout rules
   The theme's per-colour stylesheets (public/Simplify/<Colour>.css) ship the
   visual tokens (colors, shadows, radii) but omit the structural layout rules
   for a number of BEM "component-*" wrapper elements used across the
   templates. Without them the wrappers collapse to bare block/inline boxes,
   which breaks the navbar, sidebar, tables, pagination, FAQ and footer.

   Loaded after the colour stylesheet by app/views/Simplify/header.twig.
   Tokens below match public/Simplify/Grapes.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Layout wrappers
   The navbar / sidebar markup uses <span> elements as block wrappers.
   Without display:block they sit inline and the whole chrome collapses.
   -------------------------------------------------------------------------- */
.component_private_navbar,
.component_private_sidebar {
	display: block;
	width: 100%;
}

.component_navbar,
.component-navbar,
.component-navbar__wrapper,
.editor__component-wrapper {
	display: block;
	width: 100%;
}

.component-navbar-brand {
	display: flex;
	align-items: center;
}

.component-navbar-brand > a {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.component-sidebar-with-navbar {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* Balance dropdown attached to the navbar */
.component_balance_dropdown {
	display: flex;
	align-items: center;
}

/* --------------------------------------------------------------------------
   2. Forms
   -------------------------------------------------------------------------- */
.component_form_group,
.component_filter_form_group {
	display: block;
	width: 100%;
}

.component_form_group .form-group {
	margin-bottom: 16px;
}

.component_form_group .form-group > label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	color: #15003f;
}

.component_form_group .form-control {
	width: 100%;
}

/* Submit button must fill the column */
.component_button_submit {
	display: block;
	width: 100%;
}

.component_button_submit > div,
.component_button_submit button {
	width: 100%;
}

.component_checkbox {
	display: flex;
	align-items: center;
}

/* Divider line above a form group */
.panel-border-top {
	padding-top: 16px;
	margin-top: 16px;
	border-top: 1px solid #e6e1f2;
}

.panel-body {
	padding: 12px 16px;
	background: #f8f6ff;
	border: 1px solid #e6e1f2;
	border-radius: 10px;
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.component_button_more,
.component_button_save,
.component_button_search,
.component_filter_button,
.component_filter_currency_button,
.component_content_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.component_button_search {
	width: 100%;
}

/* --------------------------------------------------------------------------
   4. Cards / content blocks
   -------------------------------------------------------------------------- */
.component_card,
.component_content_card,
.component_filter_card {
	display: block;
	width: 100%;
}

.component_content_card {
	margin-bottom: 16px;
}

.component_blog_headers {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.component_blog_headers .blog__header {
	margin-bottom: 10px;
}

.icon-container {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(98, 22, 251, 0.1);
	color: #6216fb;
}

/* --------------------------------------------------------------------------
   5. Tables
   -------------------------------------------------------------------------- */
.table-bg,
.component_table {
	position: relative;
	width: 100%;
	overflow-x: auto;
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0px 2px 4px 0px rgba(4, 33, 72, 0.08);
}

.custom-table,
.component_table table {
	width: 100%;
	margin-bottom: 0;
	border-collapse: collapse;
}

.custom-table th,
.component_table th {
	white-space: nowrap;
	font-weight: 600;
	color: #15003f;
}

.component_table_link {
	color: #6216fb;
	text-decoration: none;
}

.component_table_link:hover {
	color: #36049a;
	text-decoration: underline;
}

.component_table_statistics {
	white-space: nowrap;
}

.service-description__th {
	min-width: 220px;
}

.width-40 {
	width: 40px;
}

.width-service-name {
	min-width: 180px;
}

/* --------------------------------------------------------------------------
   6. Pagination
   -------------------------------------------------------------------------- */
.component_pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin-top: 16px;
}

.component_pagination > div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.component_pagination .pagination {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   7. Landing page sections
   -------------------------------------------------------------------------- */
.header-with-text {
	position: relative;
	padding: 60px 0;
	overflow: hidden;
}

.header-with-text .bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(98, 22, 251, 0.06), rgba(98, 22, 251, 0));
}

.header-with-text > .container {
	position: relative;
	z-index: 1;
}

.header-with-text .text-block__title h2 {
	margin-bottom: 12px;
	font-weight: 700;
	color: #15003f;
}

.header-with-text .text-block__description p {
	margin-bottom: 0;
	color: #877b9f;
}

/* SVG wave dividers */
.divider-img {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
}

.divider-top .divider-img,
.divider-bottom .divider-img {
	position: absolute;
	left: 0;
	z-index: 1;
	width: 100%;
}

.divider-top .divider-img {
	top: -1px;
}

.divider-bottom .divider-img {
	bottom: -1px;
}

.shape-fill {
	fill: #6216fb;
}

/* --------------------------------------------------------------------------
   8. FAQ accordion
   -------------------------------------------------------------------------- */
.faq-block__body {
	padding: 0 16px 16px 16px;
}

.faq-block__body-description {
	color: #6b6480;
}

.faq-block__body-description p {
	margin-bottom: 0;
}

.faq-block__header.collapsed + .faq-block__body {
	padding-top: 0;
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */
.component_footer_single_line {
	display: block;
	width: 100%;
}

.component_footer_single_line .component-footer {
	margin: 0;
}

.wrapper-content__footer {
	margin-top: 40px;
}

/* --------------------------------------------------------------------------
   10. Misc page furniture
   -------------------------------------------------------------------------- */
.page-content {
	display: block;
	width: 100%;
}

.help-block {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	color: #877b9f;
}

.rtl-alert {
	direction: rtl;
	text-align: right;
}

.m-t-md {
	margin-top: 20px;
}

.detail-data {
	margin-bottom: 0;
	color: #6b6480;
}

.details-split-959 {
	display: block;
	line-height: 1.6;
}

.favorite-toggle {
	cursor: pointer;
	font-size: 18px;
}

.favorite-toggle:hover {
	color: #ffc107;
}

/* Category / service autocomplete */
.search-results {
	position: absolute;
	z-index: 30;
	width: 100%;
	max-height: 320px;
	margin-top: 4px;
	overflow-y: auto;
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0px 8px 24px -4px rgba(4, 33, 72, 0.18);
}

.search-results .search-results__item {
	display: block;
	width: 100%;
	padding: 8px 12px;
	color: #15003f;
	text-align: left;
}

.search-results .search-results__item:hover {
	background: #f5f2ff;
}

.services-filter__active-currency {
	margin-bottom: 12px;
	color: #877b9f;
}

/* Child panel / hosting info boxes */
.hp-bbox {
	padding: 20px;
	background: #ffffff;
	border-radius: 20px;
	box-shadow: 0px 4px 15px -2px rgba(0, 0, 0, 0.25);
}

.hpbb-body {
	margin-top: 12px;
	color: #6b6480;
}

/* Add funds */
.addfunds-block {
	display: block;
	width: 100%;
	margin-bottom: 16px;
}

/* Affiliate list */
.affiliates-list {
	display: block;
	width: 100%;
}

/* Tickets */
.tickets-list {
	display: block;
	width: 100%;
}

.ticket-dialog__body {
	max-height: 420px;
	padding: 0;
	overflow-y: auto;
}

.component_ticket_messages {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.component_ticket_messages .ticket-message {
	padding: 12px;
	background: #f8f6ff;
	border-radius: 10px;
}

/* --------------------------------------------------------------------------
   11. Odds and ends left over from older markup
   -------------------------------------------------------------------------- */

/* Currency switcher entries in the balance dropdown.
   The markup is built in app/init.php and the .currencies-item class is the
   JS hook the currency converter binds to, so it must stay in the DOM. */
.currencies-item {
	display: block;
	padding: 8px 16px;
	color: #15003f;
	cursor: pointer;
}

.currencies-item:hover {
	color: #6216fb;
}

/* Bootstrap 3 "well" was dropped in v4; provide the equivalent inset panel
   used by the payment-method radio cards. */
.well {
	padding: 16px;
	background: #f8f6ff;
	border: 1px solid #e6e1f2;
	border-radius: 10px;
}

.badge-rounded {
	border-radius: 30px;
}


/* --------------------------------------------------------------------------
   12. Font Awesome fallbacks
   The templates use Font Awesome 5 class syntax (fas / far / fal / fab / fad),
   so FA5 is loaded in the header. Seven names used by the templates are not in
   FA5 Free (Pro-only, or non-existent), which left those icons blank. Alias
   them onto the nearest Free glyph so every icon renders.
   -------------------------------------------------------------------------- */
.fa-box-usd:before {
	content: "\f49e";
} /* fa-box-open */

.fa-hands-usd:before {
	content: "\f4c0";
} /* fa-hand-holding-usd */

.fa-portal-exit:before {
	content: "\f52b";
} /* fa-door-open */

.fa-sign-out:before {
	content: "\f2f6";
} /* fa-sign-in-alt */

.fa-shield-check:before {
	content: "\f3ed";
} /* fa-shield-alt */

.fa-star-shooting:before {
	content: "\f005";
} /* fa-star */

.fa-tachometer-alt-fastest:before {
	content: "\f3fd";
} /* fa-tachometer-alt */

/* --------------------------------------------------------------------------
   13. Icon font-family fix
   The shipped colour stylesheets ask for "Font Awesome 5 Pro", a paid font that
   was never loaded, so those glyphs had no font to render in. Point them at the
   Free family that IS loaded. Codepoints confirmed present in FA5 Free:
     f00c = fa-check, f107 = fa-angle-down, f056 = fa-minus-circle
   -------------------------------------------------------------------------- */
.body .form-group__checkbox input:checked ~ .checkmark:after,
.body .navbar-dropdown__toggle:after,
#block_85 .faq-block__icon:before {
	font-family: "Font Awesome 5 Free";
}

/* Free solid ships a single 900-weight face, so ask for it explicitly. */
.body .form-group__checkbox input:checked ~ .checkmark:after,
#block_85 .faq-block__icon:before {
	font-weight: 900;
}

/* --------------------------------------------------------------------------
   14. Logged-in flex layout fix (blank/white page content)
   .wrapper-sidebar-navbar is a flex ROW (bootstrap.css) whose first item,
   .component_private_navbar, is forced to width:100% by section 1 above.
   With no wrapping allowed, that item hogged the entire row and the second
   item, .wrapper-content, shrank to 0px wide (flex-shrink:1 + min-width:0
   from bootstrap.css). Result: every logged-in page showed only header +
   sidebar with a white content area. Wrap the navbar onto its own row and
   let the content fill the rest beside the fixed 250px sidebar.
   Scoped under .wrapper-sidebar-navbar, which is only emitted for
   logged-in pages, so login / signup / landing pages are unaffected.
   -------------------------------------------------------------------------- */
.wrapper-sidebar-navbar {
	flex-wrap: wrap;
}
.wrapper-sidebar-navbar > .component_private_navbar {
	flex: 0 0 100%;
	max-width: 100%;
}
.wrapper-sidebar-navbar > .wrapper-content {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	margin-left: 250px;
}
/* Below the lg breakpoint the fixed sidebar is hidden (off-canvas), so the
   content must span the full width. */
@media (max-width: 991.98px) {
	.wrapper-sidebar-navbar > .wrapper-content {
		margin-left: 0;
	}
}