/*
 * Admin dashboard design layer.
 * Visual only: loaded after the base admin styles on the plugin dashboard page.
 * Accent colours derive from the Primary colour setting so the admin keeps following it.
 */
#wpcontent:has(.main-div-tab),
#wpbody-content:has(.main-div-tab) {
	background: #f4f3f9;
}

.main-div-tab {
	--kirb-ui-primary: var(--kirb-primary-color, #6c5ce7);
	--kirb-ui-primary-dark: color-mix(in srgb, var(--kirb-ui-primary) 78%, #000);
	--kirb-ui-tint: color-mix(in srgb, var(--kirb-ui-primary) 8%, #fff);
	--kirb-ui-tint-strong: color-mix(in srgb, var(--kirb-ui-primary) 16%, #fff);
	--kirb-ui-glow: color-mix(in srgb, var(--kirb-ui-primary) 35%, transparent);
	--kirb-ui-ink: #17152a;
	--kirb-ui-text: #3d3a4f;
	--kirb-ui-muted: #74718a;
	--kirb-ui-line: #ebe9f3;
	--kirb-ui-field: #dcd9e8;
	--kirb-ui-canvas: #f9f8fd;
	--kirb-ui-side-1: #1d1838;
	--kirb-ui-side-2: #2c2553;
	--kirb-ui-gold: #ffcf6e;
	--kirb-ui-radius: 16px;
	--kirb-ui-shadow: 0 1px 2px rgba(23, 21, 42, .04), 0 10px 30px rgba(23, 21, 42, .06);
	--kirb-ui-shadow-lg: 0 18px 40px rgba(23, 21, 42, .12);
	gap: 24px;
	margin-top: 22px;
	margin-right: 20px;
	color: var(--kirb-ui-text);
	-webkit-font-smoothing: antialiased;
}

/* =========================================================
   Sidebar
   ========================================================= */
/* The sections are listed in the WordPress admin menu (Keyideas Jewelry Customizer), so the dashboard's
   own sidebar is hidden. Its buttons stay in the page: the tabs are still switched through them. */
.main-div-tab .tab-btn-section {
	display: none !important;
}

.main-div-tab .tab-content-section {
	flex: 1 1 auto;
	width: 100% !important;
}

.main-div-tab .tab-btn-section {
	position: sticky;
	top: 52px;
	align-self: flex-start;
	margin-right: 0 !important;
	padding: 24px 16px 20px;
	border: none;
	border-radius: 20px;
	background: radial-gradient(120% 60% at 0% 0%, color-mix(in srgb, var(--kirb-ui-primary) 35%, transparent) 0%, transparent 60%), linear-gradient(180deg, var(--kirb-ui-side-1) 0%, var(--kirb-ui-side-2) 100%);
	box-shadow: var(--kirb-ui-shadow-lg);
	color: #d9d6ee;
}

.main-div-tab .left-tab-heading {
	align-items: center;
	padding: 0 6px 20px;
	margin-bottom: 18px;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.main-div-tab .left-tab-heading .tab-image img {
	padding: 5px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}

.main-div-tab .left-tab-heading .tab-heading {
	color: #fff !important;
	font-weight: 700;
	line-height: 1.3;
}

.main-div-tab .version-p p {
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
}

.main-div-tab .tab-btn-section > ul > .manage-heading,
.main-div-tab .tab-btn-section .help-support-heading {
	margin: 4px 0 8px;
	padding-left: 8px;
	color: rgba(255, 255, 255, .5);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
}

.main-div-tab .tab-btn-section > ul > .manage-heading svg,
.main-div-tab .tab-btn-section .help-support-heading svg {
	color: var(--kirb-ui-gold);
}

.main-div-tab .tab-btn-section ul li {
	margin-left: 0;
}

.main-div-tab .tab-btn-section ul li button {
	margin: 2px 0 !important;
	padding-left: 14px !important;
	border-radius: 10px;
	color: #ece9fb;
	font-size: 14px;
	font-weight: 500;
	line-height: 40px !important;
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.main-div-tab .tab-btn-section ul li button:not(:disabled):hover {
	background-color: rgba(255, 255, 255, .08);
}

.main-div-tab .tab-btn-section ul li button.active {
	background: linear-gradient(135deg, var(--kirb-ui-primary) 0%, var(--kirb-ui-primary-dark) 100%) !important;
	color: #fff !important;
	font-weight: 600;
	box-shadow: 0 10px 22px var(--kirb-ui-glow);
}

.main-div-tab .tab-btn-section .line {
	margin: 14px 0;
	background-color: rgba(255, 255, 255, .1);
}

/* Premium Features item */
.main-div-tab .tab-btn-section ul li.kirb-premium-nav button {
	color: var(--kirb-ui-gold);
}

.main-div-tab .tab-btn-section ul li.kirb-premium-nav button.active {
	color: #fff !important;
}

.main-div-tab .tab-btn-section ul li.kirb-premium-nav .kirb-pf-nav-badge {
	background: var(--kirb-ui-gold);
	color: var(--kirb-ui-side-1);
}

/* Setup guide popup keeps its light theme */
.main-div-tab .manage-popup-main {
	color: var(--kirb-ui-ink);
	letter-spacing: normal;
	border-radius: 14px;
	box-shadow: var(--kirb-ui-shadow-lg);
}

.main-div-tab .manage-popup-main .manage-heading {
	color: var(--kirb-ui-ink);
	letter-spacing: normal;
}

/* =========================================================
   Page header
   ========================================================= */
.main-div-tab .sticky-outer-section {
	height: auto;
	margin-bottom: 20px;
}

.main-div-tab .main-heading-btn {
	min-height: 76px;
	padding: 14px 18px 14px 26px;
	border: none;
	border-radius: var(--kirb-ui-radius);
	background: linear-gradient(90deg, #fff 55%, var(--kirb-ui-tint) 100%);
	box-shadow: var(--kirb-ui-shadow);
	position: relative;
	overflow: hidden;
}

.main-div-tab .main-heading-btn::before {
	content: "";
	position: absolute;
	left: 0;
	top: 18px;
	bottom: 18px;
	width: 4px;
	border-radius: 0 4px 4px 0;
	background: linear-gradient(180deg, var(--kirb-ui-primary) 0%, var(--kirb-ui-primary-dark) 100%);
}

.main-div-tab .kirb-tabs-header h2 {
	margin: 0;
	color: var(--kirb-ui-ink);
	font-size: 24px !important;
	font-weight: 800;
	letter-spacing: -.02em;
}

/* Primary buttons */
.main-div-tab .save-btn,
.main-div-tab .initial-section .save-btn,
.main-div-tab .send-button,
.main-div-tab .year-month-switch-section .yearly-btn,
.main-div-tab .kirb-activate-plugin-btn,
.main-div-tab .kirb-contact-btn button {
	border: none;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--kirb-ui-primary) 0%, var(--kirb-ui-primary-dark) 100%);
	color: #fff;
	font-weight: 600;
	letter-spacing: .01em;
	box-shadow: 0 10px 22px var(--kirb-ui-glow);
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.main-div-tab .save-btn:hover,
.main-div-tab .send-button:not(:disabled):hover,
.main-div-tab .year-month-switch-section .yearly-btn:hover,
.main-div-tab .kirb-activate-plugin-btn:hover,
.main-div-tab .kirb-contact-btn button:hover {
	transform: translateY(-1px);
	box-shadow: 0 14px 28px var(--kirb-ui-glow);
	filter: brightness(1.05);
}

.main-div-tab .send-button:disabled {
	box-shadow: none;
	opacity: .45;
}

/* =========================================================
   Plugin header (name, version, description, status)
   ========================================================= */
.main-div-tab .kirb-plugin-header {
	display: flex;
	max-width: 98%; /* same width as the section headings and cards */
	align-items: center;
	gap: 16px;
	margin-bottom: 20px;
	padding: 18px 22px;
	border-radius: var(--kirb-ui-radius);
	background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--kirb-ui-primary) 35%, transparent) 0%, transparent 60%), linear-gradient(135deg, var(--kirb-ui-side-1) 0%, var(--kirb-ui-side-2) 100%);
	box-shadow: var(--kirb-ui-shadow-lg);
	color: #d9d6ee;
}

.main-div-tab .kirb-plugin-header-icon {
	flex: 0 0 auto;
	display: inline-flex;
	padding: 6px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}

.main-div-tab .kirb-plugin-header-icon img {
	display: block;
	width: 34px;
	height: 34px;
}

.main-div-tab .kirb-plugin-header-text {
	flex: 1 1 auto;
	min-width: 0;
}

.main-div-tab .kirb-plugin-header h1 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0 0 4px;
	padding: 0;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

.main-div-tab .kirb-plugin-header-version {
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
}

.main-div-tab .kirb-plugin-header p {
	margin: 0;
	color: #d9d6ee;
	font-size: 13px;
}

.main-div-tab .kirb-plugin-header-status {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	background: #fff;
	color: #8a5a00;
	font-size: 12px;
	font-weight: 600;
}

.main-div-tab .kirb-plugin-header-status::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #e0a100;
}

.main-div-tab .kirb-plugin-header-status.is-active {
	color: #11795a;
}

.main-div-tab .kirb-plugin-header-status.is-active::before {
	background: #11a36b;
}

@media (max-width: 600px) {
	/* Phone: icon and name stay side by side, status moves under the text */
	.main-div-tab .kirb-plugin-header {
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 12px 14px;
		padding: 16px;
	}

	.main-div-tab .kirb-plugin-header-icon img {
		width: 28px;
		height: 28px;
	}

	.main-div-tab .kirb-plugin-header-text {
		/* fill the row next to the icon so the status badge wraps below */
		flex: 1 1 calc(100% - 60px);
	}

	.main-div-tab .kirb-plugin-header h1 {
		font-size: 17px;
	}

	.main-div-tab .kirb-plugin-header-status {
		margin-left: 54px;
	}
}

/* =========================================================
   Content cards
   ========================================================= */
.main-div-tab .tab-content-section {
	min-width: 0;
}

.main-div-tab .initial-section .confirm-settings {
	padding: 24px 28px 28px;
	border: none !important;
	border-radius: var(--kirb-ui-radius);
	background: #fff;
	box-shadow: var(--kirb-ui-shadow);
}

.main-div-tab .initial-section .confirm-settings > .year-tab-section,
.main-div-tab .initial-section .confirm-settings .tab-pane,
.main-div-tab .initial-section .confirm-settings .tab-pane > .step {
	border: none !important;
	box-shadow: none;
}

.main-div-tab .initial-section .confirm-settings > .year-tab-section {
	padding-left: 0;
	padding-right: 0;
}

.main-div-tab .right-section {
	padding: 28px;
	border: none;
	border-radius: var(--kirb-ui-radius);
	box-shadow: var(--kirb-ui-shadow);
}

.main-div-tab .step h5,
.main-div-tab .setting-category-section h5,
.main-div-tab .theme-header h5,
.main-div-tab .right-section > .step > h5 {
	color: var(--kirb-ui-ink);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -.01em;
}

.main-div-tab .item-border,
.main-div-tab .step,
.main-div-tab .border-class {
	border-color: var(--kirb-ui-line) !important;
}

/* One-line explanation under each settings heading */
.main-div-tab .kirb-step-hint {
	margin: 4px 0 14px;
	color: var(--kirb-ui-muted);
	font-size: 13px;
	line-height: 1.5;
}

.main-div-tab .cashe-div .kirb-step-hint {
	margin-bottom: 0;
}

/* Preview panel: stays in view while the settings beside it scroll */
.main-div-tab .right-section-container {
	position: sticky;
	top: 130px;
	align-self: flex-start;
	padding: 16px;
	border: 1px solid var(--kirb-ui-line);
	border-radius: 14px;
	background: var(--kirb-ui-canvas);
}

.main-div-tab .right-section-container .section-header .para p {
	color: var(--kirb-ui-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.main-div-tab .right-section-container .kirb-nav-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(23, 21, 42, .12);
	cursor: pointer;
}

.main-div-tab .kirb_img_slides img {
	border-radius: 10px;
}

/* =========================================================
   Sub tabs
   ========================================================= */
.main-div-tab .year-tab-section .nav-tabs {
	display: inline-flex;
	gap: 4px;
	padding: 5px;
	border: none;
	border-radius: 12px;
	background: var(--kirb-ui-tint);
}

.main-div-tab .year-tab-section .nav-tabs .nav-item {
	margin: 0;
}

.main-div-tab .year-tab-section button {
	margin-right: 0;
	padding: 9px 18px;
	border-radius: 9px;
	color: var(--kirb-ui-muted);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.main-div-tab .year-tab-section button:hover {
	color: var(--kirb-ui-ink);
}

.main-div-tab .year-tab-section button.active,
.main-div-tab .plan-btn.active {
	border-bottom: none !important;
	background-color: #fff;
	color: var(--kirb-ui-primary);
	box-shadow: 0 2px 8px rgba(23, 21, 42, .1);
}

/* =========================================================
   Form controls
   ========================================================= */
.main-div-tab select,
.main-div-tab .form-select,
.main-div-tab input[type="text"],
.main-div-tab input[type="email"],
.main-div-tab input[type="number"],
.main-div-tab input[type="tel"],
.main-div-tab textarea {
	border-color: var(--kirb-ui-field) !important;
	border-radius: 10px;
	background-color: #fff;
	color: var(--kirb-ui-ink);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.main-div-tab select:hover,
.main-div-tab .form-select:hover,
.main-div-tab textarea:hover {
	border-color: color-mix(in srgb, var(--kirb-ui-primary) 45%, var(--kirb-ui-field)) !important;
}

.main-div-tab select:focus,
.main-div-tab .form-select:focus,
.main-div-tab input[type="text"]:focus,
.main-div-tab input[type="email"]:focus,
.main-div-tab input[type="number"]:focus,
.main-div-tab input[type="tel"]:focus,
.main-div-tab textarea:focus {
	border-color: var(--kirb-ui-primary) !important;
	outline: none;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--kirb-ui-primary) 16%, transparent);
}

.main-div-tab input[type="checkbox"] {
	accent-color: var(--kirb-ui-primary);
}

/* Stone checkboxes become tiles */
.main-div-tab .stap-grid-section .item.list {
	padding: 10px 14px;
	border: 1px solid var(--kirb-ui-line);
	border-radius: 12px;
	background: var(--kirb-ui-canvas);
	transition: border-color .15s ease, background-color .15s ease;
}

.main-div-tab .stap-grid-section .item.list:hover {
	border-color: var(--kirb-ui-tint-strong);
	background: #fff;
}

/* Stone tiles: two equal columns, each as wide as the longest stone name (no empty space after the icon) */
.main-div-tab .stap-grid-section {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px 40px;
	width: max-content;
	max-width: 100%;
	margin: 14px 0 25px;
}

.main-div-tab .stap-grid-section .item.list {
	display: flex;
	align-items: center;
	gap: 8px;
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 6px 10px;
}

.main-div-tab .stap-grid-section .item.list .enabled-div {
	flex: 0 0 auto;
}

.main-div-tab .stap-grid-section .item.list .text-p {
	flex: 0 1 auto;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	color: var(--kirb-ui-ink);
	font-size: 15px;
	font-weight: 600;
}

.main-div-tab .stap-grid-section .item.list .input-section {
	flex: 0 0 auto;
	width: auto;
	height: auto;
	margin-left: -4px;
}

.main-div-tab .stap-grid-section .send-link-icon a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	transition: background-color .15s ease;
}

.main-div-tab .stap-grid-section .send-link-icon a:hover,
.main-div-tab .stap-grid-section .send-link-icon a:focus-visible {
	background: var(--kirb-ui-tint-strong);
}

@media (max-width: 600px) {
	.main-div-tab .stap-grid-section {
		grid-template-columns: 1fr;
	}
}

.main-div-tab .stap-grid-section .send-link-icon img {
	width: 14px;
	height: 14px;
}


/* Products per page */
.main-div-tab .number-section span {
	height: 40px;
	border-color: var(--kirb-ui-field);
	border-radius: 10px;
	color: var(--kirb-ui-muted);
	font-weight: 600;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.main-div-tab .number-section span:hover {
	border-color: var(--kirb-ui-primary);
	color: var(--kirb-ui-ink);
}

.main-div-tab .number-section span.active {
	border-color: transparent;
	background: linear-gradient(135deg, var(--kirb-ui-primary) 0%, var(--kirb-ui-primary-dark) 100%);
	color: #fff;
	box-shadow: 0 8px 18px var(--kirb-ui-glow);
}

/* Clear cache */
.main-div-tab .clear-cache-btn {
	padding: 8px 16px;
	border: 1px solid var(--kirb-ui-field) !important;
	border-radius: 10px;
	background: #fff;
	color: var(--kirb-ui-ink);
	font-weight: 600;
	text-decoration: none !important;
	text-transform: capitalize;
	transition: border-color .15s ease, color .15s ease;
}

.main-div-tab .clear-cache-btn:hover {
	border-color: var(--kirb-ui-primary) !important;
	color: var(--kirb-ui-primary);
}

/* Colour pickers */
.main-div-tab .step-color-div .color-inner {
	padding: 10px 16px 10px 10px;
	border: 1px solid var(--kirb-ui-line);
	border-radius: 12px;
	background: var(--kirb-ui-canvas);
}

.main-div-tab .step-color-div .color-inner .box-color {
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 0 0 1px var(--kirb-ui-field);
}

/* More Options premium teaser */
.main-div-tab .kirb-pf-more-teaser {
	border-style: solid;
	border-color: var(--kirb-ui-tint-strong);
	border-radius: 14px;
	background: linear-gradient(135deg, var(--kirb-ui-tint) 0%, #fff 100%);
}

/* =========================================================
   My Plan
   ========================================================= */
.main-div-tab .myplan-price-main .simple-plan-section {
	position: relative;
	padding: 30px 28px;
	border: none;
	border-radius: 18px;
	background: radial-gradient(90% 70% at 100% 0%, rgba(255, 255, 255, .14) 0%, transparent 60%), linear-gradient(150deg, var(--kirb-ui-side-1) 0%, var(--kirb-ui-side-2) 55%, var(--kirb-ui-primary) 130%);
	color: #fff;
	box-shadow: var(--kirb-ui-shadow-lg);
	overflow: hidden;
}

.main-div-tab .myplan-price-main .simple-plan-section h2 {
	color: #fff !important;
	font-size: 22px !important;
	font-weight: 800 !important;
	letter-spacing: -.01em;
}

.main-div-tab .myplan-price-main .simple-plan-section .pera-head {
	color: rgba(255, 255, 255, .8);
}

.main-div-tab .basic-free-plan-section .basic-btn {
	padding: 4px 14px;
	border: none;
	border-radius: 999px;
	background: var(--kirb-ui-gold);
	color: var(--kirb-ui-side-1);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
}

.main-div-tab .myplan-price-main .simple-plan-section .yearly-btn,
.main-div-tab .myplan-price-main .simple-plan-section .kirb-contact-btn button {
	background: #fff;
	color: var(--kirb-ui-side-1) !important;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}

.main-div-tab .main-youget-section h3,
.main-div-tab .chargeable-services-section h3,
.main-div-tab .trusted-jewelers-section h3,
.main-div-tab .kirb-rec-apps .kirb-rec-apps__title {
	color: var(--kirb-ui-ink);
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -.01em;
}

.main-div-tab .main-youget-section .inner-youget-section .plan-dropdown-section {
	padding: 14px 16px;
	border: 1px solid var(--kirb-ui-line);
	border-radius: 12px;
	background-color: #fff;
	box-shadow: 0 1px 2px rgba(23, 21, 42, .04);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.main-div-tab .main-youget-section .inner-youget-section .plan-dropdown-section:hover {
	border-color: var(--kirb-ui-tint-strong);
	box-shadow: 0 10px 24px rgba(23, 21, 42, .08);
	transform: translateY(-1px);
}

.main-div-tab .main-youget-section .plan-dropdown-heading h4 {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--kirb-ui-ink);
	font-weight: 600;
}

/* Included features get a check, paid-only ones a star */
.main-div-tab .main-youget-section .plan-dropdown-heading h4::before {
	content: "\2713";
	flex: 0 0 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #e3f6ee;
	color: #12805c;
	font-size: 12px;
	font-weight: 800;
}

.main-div-tab .kirb-free-pricing-seperator-div ~ .plan-dropdown-section .plan-dropdown-heading h4::before {
	content: "\2605";
	background: #fff3d6;
	color: #b07400;
}

.main-div-tab .main-youget-section .plan-dropdown-heading .arrow-icon {
	filter: none !important;
	opacity: .45;
}

.main-div-tab .main-youget-section .inner-youget-section ul li,
.main-div-tab .main-youget-section .inner-youget-section .plan-dropdown-content p {
	color: var(--kirb-ui-muted);
}

.main-div-tab .kirb-free-pricing-seperator-div {
	width: 100%;
	margin-top: 12px;
	color: var(--kirb-ui-muted);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.main-div-tab .chargeable-services-section {
	padding: 8px 22px;
	border: none;
	border-radius: var(--kirb-ui-radius);
	background: #fff;
	box-shadow: var(--kirb-ui-shadow);
}

.main-div-tab .chargeable-services-section .inner-chargeable-div {
	border: none;
	border-bottom: 1px solid var(--kirb-ui-line);
	border-radius: 0;
	box-shadow: none;
}

.main-div-tab .chargeable-services-section .inner-chargeable-div:last-child {
	border-bottom: none;
}

.main-div-tab .trusted-jewelers-section .slider-img {
	border-radius: 12px;
	filter: grayscale(1);
	opacity: .8;
	transition: filter .2s ease, opacity .2s ease;
}

.main-div-tab .trusted-jewelers-section .slider-img:hover {
	filter: none;
	opacity: 1;
}

/* My Plan layout: plan card and the Coming Soon / Chargeable card share the left column,
   so it keeps pace with the feature list; Trusted Jewelers gets the full width below. */
.main-div-tab .myplan-price-main {
	align-items: flex-start;
	gap: 28px;
}

.main-div-tab .kirb-plan-aside {
	flex: 0 0 34%;
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.main-div-tab .kirb-plan-aside .simple-plan-section,
.main-div-tab .kirb-plan-aside .chargeable-services-section {
	width: 100%;
	min-width: 0;
}

.main-div-tab .myplan-price-main .main-youget-section {
	flex: 1 1 auto;
	width: auto;
	padding: 0;
}

.main-div-tab .chargeable-services-section ul {
	margin: 8px 0 0;
}

.main-div-tab .chargeable-services-section ul li {
	color: var(--kirb-ui-muted);
	line-height: 1.6;
}

.main-div-tab .main-chargeable-section {
	margin-top: 36px;
}

.main-div-tab .main-chargeable-section .recommened-section {
	width: 100%;
	padding: 0;
}

/* Logo strips fade out at the edges instead of being cut off */
.main-div-tab .trusted-jewelers-section .owl-carousel {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

/* Recommended apps: one card, app icon with name and description, "View All Apps" link */
.main-div-tab .kirb-rec-apps {
	margin: 36px 0 8px;
	padding: 20px;
	border: 1px solid var(--kirb-ui-line);
	border-radius: 12px;
	background: #fff;
}

.main-div-tab .kirb-rec-apps .kirb-rec-apps__title {
	margin: 0 0 12px;
}

.main-div-tab .kirb-rec-apps__subtitle {
	margin: 0 0 30px;
	color: var(--kirb-ui-text);
	font-size: 13px;
}

.main-div-tab .kirb-rec-apps__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px 24px;
	margin-bottom: 32px;
}

.main-div-tab .kirb-rec-apps__item {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 12px;
	min-width: 220px;
}

.main-div-tab .kirb-rec-apps__item img {
	flex-shrink: 0;
	width: 69px;
	height: 69px;
	border-radius: 5px;
}

.main-div-tab .kirb-rec-apps__text {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.main-div-tab .kirb-rec-apps__text p {
	margin: 0;
}

.main-div-tab .kirb-rec-apps__name {
	color: var(--kirb-ui-ink);
	font-size: 14px;
	font-weight: 700;
}

.main-div-tab .kirb-rec-apps__desc {
	max-width: 250px;
	color: var(--kirb-ui-text);
	font-size: 12px;
	line-height: 1.4;
}

.main-div-tab .kirb-rec-apps__all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--kirb-ui-ink);
	border-radius: 8px;
	background: #fff;
	color: var(--kirb-ui-ink);
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color .15s ease;
}

.main-div-tab .kirb-rec-apps__all:hover,
.main-div-tab .kirb-rec-apps__all:focus {
	background: var(--kirb-ui-canvas);
	color: var(--kirb-ui-ink);
}

.main-div-tab .kirb-rec-apps__all i {
	font-size: 14px;
	line-height: 1;
}

@media (max-width: 1023px) {
	/* Stacked: plan card, then the feature list, then Coming Soon / Chargeable Services */
	.main-div-tab .myplan-price-main {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}

	.main-div-tab .kirb-plan-aside {
		display: contents;
	}

	.main-div-tab .kirb-plan-aside .simple-plan-section {
		order: 1;
	}

	.main-div-tab .myplan-price-main .main-youget-section {
		order: 2;
		width: 100%;
	}

	.main-div-tab .kirb-plan-aside .chargeable-services-section {
		order: 3;
	}

	/* Previews sit below the settings, so they no longer need to stay in view */
	.main-div-tab .right-section-container,
	#lang_region-tab-pane .lang-basic-slider {
		position: static;
	}
}

@media (max-width: 600px) {
	/* Settings: Clear Cache under its description, colour labels on one line */
	.main-div-tab .step-3 .cashe-div {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.main-div-tab .step-color-div .color-inner label {
		white-space: nowrap;
	}

	.main-div-tab .step-color-div {
		flex-wrap: wrap;
		gap: 12px;
	}

	.main-div-tab .step-color-div .color-inner {
		justify-content: flex-start;
		gap: 12px;
		margin: 0 !important;
	}

	/* Sub tabs (Basic / More Options, Tutorials / FAQs / Contact Support) stay on one row */
	.main-div-tab .year-tab-section .nav-tabs {
		flex-wrap: nowrap;
		max-width: 100%;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.main-div-tab .year-tab-section .nav-tabs button {
		padding-left: 12px;
		padding-right: 12px;
		font-size: 11px;
		white-space: nowrap;
	}

}

/* More Options intro: keep the "Language and Region" link inside the sentence */
.main-div-tab #setting-tab-pane > .step > p:first-child {
	display: block;
}

.main-div-tab #setting-tab-pane .kirb-language-hyperlink {
	display: inline;
}

/* FAQ answers: left aligned (justified text leaves gaps on narrow screens) */
#help-tab-pane .faq-section .panel {
	color: var(--kirb-ui-muted) !important;
	text-align: left !important;
}

/* =========================================================
   Language & Region
   ========================================================= */
.main-div-tab .kirb-country-lang-container {
	padding: 6px 10px;
	border-radius: 10px;
	transition: background-color .15s ease;
}

.main-div-tab .kirb-country-lang-container:hover {
	background: var(--kirb-ui-canvas);
}

.main-div-tab .tab-section-lang .nav-link {
	border-radius: 9px 9px 0 0;
	font-weight: 600;
}

/* =========================================================
   Help & Support
   ========================================================= */
.main-div-tab .faq-section .accordion {
	margin-bottom: 10px;
	border: 1px solid var(--kirb-ui-line);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.main-div-tab .faq-section .accordion:hover {
	border-color: var(--kirb-ui-tint-strong);
	box-shadow: 0 8px 20px rgba(23, 21, 42, .06);
}

.main-div-tab .faq-section .accordion > div {
	border: none !important;
}

.main-div-tab .faq-section .accordion h4[data-bs-toggle] {
	margin: 0;
	padding: 16px 18px;
	border: none !important;
	color: var(--kirb-ui-ink);
	font-weight: 700;
	cursor: pointer;
}

.main-div-tab .faq-section .accordion h4[data-bs-toggle]:not(.collapsed) {
	background: var(--kirb-ui-tint);
	color: var(--kirb-ui-primary);
}

.main-div-tab .faq-section .faq-body {
	padding: 4px 18px 14px;
}




.main-div-tab .tutorial-section {
	gap: 18px;
}

.main-div-tab .tutorial-section > div,
.main-div-tab .tutorial-section .kirb-tutorial-btn,
.main-div-tab .tutorial-section img {
	border-radius: 14px;
}

.main-div-tab .tutorial-section > div {
	overflow: hidden;
	box-shadow: var(--kirb-ui-shadow);
	transition: transform .2s ease, box-shadow .2s ease;
}

.main-div-tab .tutorial-section > div:hover {
	transform: translateY(-3px);
	box-shadow: var(--kirb-ui-shadow-lg);
}


/* FAQ questions and answers: readable size and contrast */
.main-div-tab .faq-section .head-pera-faq {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: var(--kirb-ui-ink);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
}

.main-div-tab .faq-section .head-pera-faq .sign {
	flex: 0 0 auto;
	color: var(--kirb-ui-primary);
	font-size: 18px;
	font-weight: 600;
}

.main-div-tab .faq-section .panel {
	color: var(--kirb-ui-muted);
	font-size: 13.5px;
	line-height: 1.65;
}

/* =========================================================
   Language & Region tab
   ========================================================= */
#lang_region-tab-pane .right-section {
	padding: 24px 28px 28px;
}

/* ---- Basic: languages + ring sizes ---- */
#lang_region-tab-pane .language-basic-section {
	align-items: flex-start;
	gap: 24px;
}

#lang_region-tab-pane .slider-language {
	border: 1px solid var(--kirb-ui-line);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
}

#lang_region-tab-pane .slider-language .lang-trans {
	width: 46%;
}

#lang_region-tab-pane .slider-language .ring-size {
	width: 54%;
	border-left: 1px solid var(--kirb-ui-line);
}

#lang_region-tab-pane .slider-language h5 {
	height: 46px;
	margin: 0;
	padding: 0 18px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--kirb-ui-line);
	background: var(--kirb-ui-canvas);
	color: var(--kirb-ui-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

#lang_region-tab-pane .kirb-country-lang-container,
#lang_region-tab-pane .slider-language .ring-size > div {
	height: 60px;
	margin: 0;
	padding: 0 18px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--kirb-ui-line);
}

#lang_region-tab-pane .kirb-country-lang-container {
	gap: 2px;
	border-radius: 0;
	color: var(--kirb-ui-muted);
	font-size: 14px;
	transition: background-color .15s ease;
}

#lang_region-tab-pane .kirb-country-lang-container:hover {
	background: var(--kirb-ui-canvas);
}

#lang_region-tab-pane .kirb-country-lang-container:has(input:checked) {
	color: var(--kirb-ui-ink);
	font-weight: 600;
}

#lang_region-tab-pane .kirb-country-lang-container:has(.kirb-lang-btn[data-lang="en_US"]) > span::after {
	content: "Default";
	margin-left: 10px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--kirb-ui-tint-strong);
	color: var(--kirb-ui-primary);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	vertical-align: middle;
}

#lang_region-tab-pane .slider-language .kirb-lang-btn {
	margin: 0;
	padding: 4px;
	border-radius: 6px;
}

#lang_region-tab-pane .slider-language .kirb-lang-btn input {
	width: 18px;
	height: 18px;
	margin: 0;
	cursor: pointer;
}

#lang_region-tab-pane .slider-language-div .language-sprite-img {
	border-radius: 4px;
	transform: scale(.85);
	box-shadow: 0 0 0 1px rgba(23, 21, 42, .08);
}

#lang_region-tab-pane .slider-language .kirb-lang-select-slider {
	height: 40px;
	margin: 0;
	padding: 0 36px 0 14px;
	justify-content: flex-start;
	font-size: 14px;
	font-weight: 500;
}

/* Preview */
#lang_region-tab-pane .lang-basic-slider {
	padding: 16px;
	border: 1px solid var(--kirb-ui-line);
	border-radius: 14px;
	background: var(--kirb-ui-canvas);
}

#lang_region-tab-pane .lang-basic-slider .section-header p {
	color: var(--kirb-ui-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

#lang_region-tab-pane .lang-basic-slider .section-header .arrow-btn div {
	width: 30px;
	height: 30px;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(23, 21, 42, .12);
}

#lang_region-tab-pane .lang-basic-slider .kirb_img_slides img {
	border-radius: 10px;
	background: #fff;
}

/* The ring size charts are tall: keep the preview in view and about as tall as the language list
   (click the chart to see it full size) */
#lang_region-tab-pane .lang-basic-slider {
	position: sticky;
	top: 130px;
	align-self: flex-start;
}

#lang_region-tab-pane .lang-basic-slider .kirb_img_slides {
	text-align: center;
}

/* Only the active chart is shown (the slider script toggles display) */
#lang_region-tab-pane .lang-basic-slider .kirb_img_slides img {
	width: auto;
	max-width: 100%;
	max-height: 420px;
	margin: 0 auto;
	object-fit: contain;
}

/* Short explanation above the language list */
#lang_region-tab-pane .kirb-lang-intro {
	margin: 0 0 14px;
	color: var(--kirb-ui-muted);
	font-size: 13px;
	line-height: 1.5;
}

/* Other language */
#lang_region-tab-pane .kirb-other-lang-section {
	margin-top: 24px;
	padding: 20px;
	border: 1px solid var(--kirb-ui-line);
	border-radius: 14px;
	background: #fff;
}

#lang_region-tab-pane .kirb-other-lang-section h2 {
	margin-bottom: 16px;
	color: var(--kirb-ui-ink);
	font-size: 16px;
	font-weight: 700;
}

#lang_region-tab-pane .kirb-other-lang-section .other_lang_group {
	height: 420px;
	padding: 6px 14px;
	border-color: var(--kirb-ui-line);
	border-radius: 12px;
	background: var(--kirb-ui-canvas);
}

#lang_region-tab-pane .kirb-other-lang-section .other_lang_group div {
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid var(--kirb-ui-line);
}

#lang_region-tab-pane .kirb-other-lang-section .other_lang_group span {
	color: var(--kirb-ui-text);
	font-weight: 500;
}

/* ---- Translations ---- */
#lang_region-tab-pane .language-region-div {
	padding: 0 !important;
}

#lang_region-tab-pane .kirb-translation-para {
	margin-bottom: 8px;
	color: var(--kirb-ui-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

#lang_region-tab-pane .select-section-manage-ring {
	padding: 14px 16px;
	border: 1px solid var(--kirb-ui-line);
	border-radius: 14px;
	background: var(--kirb-ui-canvas);
}

#lang_region-tab-pane .language-region-div .select-section {
	width: 320px;
	max-width: 100%;
	height: 42px;
	padding: 0 38px 0 14px;
	font-weight: 600;
}

#lang_region-tab-pane .language-main-div {
	gap: 24px;
	padding-bottom: 10px;
}

#lang_region-tab-pane .language-main-div .inner-language {
	min-width: 0;
	border: 1px solid var(--kirb-ui-line);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(23, 21, 42, .04);
}

/* Column header with language chips */
#lang_region-tab-pane .language-main-div .default-lang-div > .tab-section-lang,
#lang_region-tab-pane .language-main-div .tab-btn-lang {
	width: auto;
	min-height: 54px;
	padding: 8px 10px;
	align-items: center;
	border-bottom: 1px solid var(--kirb-ui-line);
	background: var(--kirb-ui-canvas);
}

#lang_region-tab-pane .language-main-div .tab-section-lang {
	gap: 6px;
	padding-right: 0;
	border: none;
	flex-wrap: wrap;
	align-items: center;
}

#lang_region-tab-pane .language-main-div .tab-section-lang button {
	height: 36px;
	margin: 0;
	padding: 0 12px;
	gap: 6px;
	border: 1px solid transparent !important;
	border-radius: 9px !important;
	background: transparent;
	color: var(--kirb-ui-muted) !important;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

#lang_region-tab-pane .language-main-div .tab-section-lang button:hover {
	background: #fff !important;
	color: var(--kirb-ui-ink) !important;
}

#lang_region-tab-pane .language-main-div .tab-section-lang button.active {
	border-color: var(--kirb-ui-tint-strong) !important;
	background: #fff !important;
	color: var(--kirb-ui-primary) !important;
	box-shadow: 0 2px 8px rgba(23, 21, 42, .08);
}

#lang_region-tab-pane .language-main-div .tab-section-lang button.default::after {
	content: "Read-only";
	margin-left: 4px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--kirb-ui-line);
	color: var(--kirb-ui-muted);
	font-size: 10px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

#lang_region-tab-pane .language-main-div .language-sprite-img {
	width: 24px;
	height: 18px;
	margin: 0;
	border-radius: 3px;
	background-size: 146px;
	box-shadow: 0 0 0 1px rgba(23, 21, 42, .08);
}

#lang_region-tab-pane .language-main-div .language-sprite-img.en_US { background-position: -80px -35px; }
#lang_region-tab-pane .language-main-div .language-sprite-img.en_GB { background-position: -6px -35px; }
#lang_region-tab-pane .language-main-div .language-sprite-img.fr_FR { background-position: -42px -35px; }
#lang_region-tab-pane .language-main-div .language-sprite-img.de_DE { background-position: -80px -6px; }
#lang_region-tab-pane .language-main-div .language-sprite-img.it_IT { background-position: -6px -6px; }
#lang_region-tab-pane .language-main-div .language-sprite-img.es_ES { background-position: -43px -6px; }

/* Add language button */
#lang_region-tab-pane .language-main-div .kirb-lang-plus {
	width: 36px;
	height: 36px;
	padding: 10px;
	border: 1px dashed var(--kirb-ui-field);
	border-radius: 9px;
	background: #fff;
	transition: border-color .15s ease;
}

#lang_region-tab-pane .language-main-div .kirb-lang-plus:hover {
	border-color: var(--kirb-ui-primary);
}

/* String rows */
#lang_region-tab-pane .language-main-div .lang-content {
	border: none;
	border-radius: 0;
}

#lang_region-tab-pane .language-main-div .lang-content .textarea-div {
	align-items: stretch;
	border-bottom: 1px solid var(--kirb-ui-line);
	transition: background-color .15s ease;
}

#lang_region-tab-pane .language-main-div .lang-content .textarea-div:last-child {
	border-bottom: none;
}

#lang_region-tab-pane .language-main-div .lang-content .textarea-div:focus-within {
	background: var(--kirb-ui-tint);
}

#lang_region-tab-pane .language-main-div .lang-content .textarea-div > .text-left {
	padding: 14px 20px 0 !important;
	color: var(--kirb-ui-ink);
	font-size: 12px;
	font-weight: 700 !important;
	letter-spacing: .03em;
}

#lang_region-tab-pane .language-main-div .lang-content .textarea-div textarea {
	height: 88px;
	padding: 12px 20px;
	border: none !important;
	border-radius: 0;
	background: transparent;
	box-shadow: none !important;
	color: var(--kirb-ui-ink);
	line-height: 1.55;
}

#lang_region-tab-pane .language-main-div .lang-content .textarea-div textarea:disabled {
	color: var(--kirb-ui-muted);
}

#lang_region-tab-pane .language-main-div .kirb-default-lang-content .textarea-div {
	background: var(--kirb-ui-canvas);
}

#lang_region-tab-pane .textarea-count {
	align-self: flex-end;
	margin: 0 14px 10px 0;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(23, 21, 42, .04);
	color: var(--kirb-ui-muted);
	font-size: 11px;
	font-weight: 600;
}

#lang_region-tab-pane .language-pera-div p {
	border-radius: 6px;
	background: var(--kirb-ui-ink);
	font-size: 12px;
}

#lang_region-tab-pane .kirb-country-lang-container > span {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

#lang_region-tab-pane .kirb-country-lang-container > .kirb-lang-btn,
#lang_region-tab-pane .kirb-country-lang-container > .language-sprite-img {
	flex-shrink: 0;
}

#lang_region-tab-pane .slider-language .lang-trans {
	width: 52%;
}

#lang_region-tab-pane .slider-language .ring-size {
	width: 48%;
}

#lang_region-tab-pane .language-main-div .default-lang-div > .tab-section-lang {
	padding: 8px 10px;
	border-bottom: 1px solid var(--kirb-ui-line) !important;
	background: var(--kirb-ui-canvas) !important;
}

/* =========================================================
   Responsive: tablet & small laptop (<= 1200px)
   The sidebar becomes a compact top bar so content gets the full width.
   ========================================================= */
@media (max-width: 1200px) {
	.main-div-tab {
		flex-direction: column;
		gap: 16px;
		margin: 16px 16px 0 0;
	}

	.main-div-tab .tab-btn-section,
	.main-div-tab .tab-content-section {
		width: 100% !important;
	}

	.main-div-tab .tab-btn-section {
		position: static;
		margin: 0 !important;
		padding: 14px 16px;
		border-radius: 16px;
	}

	.main-div-tab .left-tab-heading {
		padding: 0 4px 12px;
		margin-bottom: 12px;
	}

	.main-div-tab .tab-btn-section > ul.nav-tabs {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: 6px;
		overflow-x: auto;
		overflow-y: visible;
		padding-bottom: 4px;
		scrollbar-width: thin;
		scrollbar-color: rgba(255, 255, 255, .25) transparent;
		-webkit-overflow-scrolling: touch;
	}

	.main-div-tab .tab-btn-section > ul.nav-tabs > li {
		flex: 0 0 auto;
	}

	.main-div-tab .tab-btn-section ul li button {
		min-width: 0;
		padding: 0 14px !important;
		line-height: 38px !important;
		white-space: nowrap;
		background-color: rgba(255, 255, 255, .06);
	}

	.main-div-tab .tab-btn-section ul li button.active::before {
		display: none;
	}

	.main-div-tab .tab-btn-section > ul > .manage-heading,
	.main-div-tab .tab-btn-section .help-support-heading {
		flex: 0 0 auto;
		margin: 0 4px 0 8px;
		padding: 0;
		white-space: nowrap;
	}

	.main-div-tab .tab-btn-section > ul > .manage-heading {
		margin-left: 0;
	}

	.main-div-tab .tab-btn-section .line {
		flex: 0 0 1px;
		width: 1px;
		height: 24px;
		margin: 0 6px;
	}

	/*
	 * Setup guide popup: the menu row scrolls horizontally here and would clip it,
	 * so show it as a centered card above a dimmed page instead.
	 */
	.main-div-tab .tab-btn-section .manage-popup-main {
		position: fixed !important;
		left: 50% !important;
		top: 50% !important;
		transform: translate(-50%, -50%);
		width: min(360px, calc(100vw - 32px));
		max-height: calc(100vh - 96px);
		overflow-y: auto;
		padding: 22px 20px 8px;
		border: none;
		border-radius: 16px;
		background: #fff;
		box-shadow: 0 24px 60px rgba(23, 21, 42, .35);
		color: var(--kirb-ui-ink);
		font-size: 14px;
		font-weight: 400;
		letter-spacing: normal;
		text-transform: none;
		white-space: normal;
		cursor: default;
		z-index: 100001;
	}

	.main-div-tab .tab-btn-section .manage-popup-main .manage-popup-triangle-container,
	.main-div-tab .tab-btn-section .manage-popup-main .manage-popup-triangle {
		display: none;
	}

	.main-div-tab .tab-btn-section .manage-popup-main > .manage-heading {
		margin: 0 0 18px;
		font-size: 15px;
		letter-spacing: normal;
	}

	.main-div-tab .tab-btn-section .manage-popup-main .close-popup {
		flex-shrink: 0;
		width: 16px;
		height: 16px;
	}

	.main-div-tab .tab-btn-section .manage-popup-main .kirb-setup-popup {
		align-items: flex-start;
		padding-bottom: 22px;
	}

	.main-div-tab .tab-btn-section .manage-popup-main .kirb-setup-number {
		margin-right: 14px;
		font-size: 13px;
	}

	.main-div-tab .tab-btn-section .manage-popup-main .kirb-popup-text {
		padding-top: 6px;
		font-size: 13px;
		line-height: 1.45;
	}

	.main-div-tab .tab-btn-section .body-overlay-bg {
		z-index: 100000;
	}
}

/* WordPress removes the content padding below 782px: keep equal side gutters */
@media (min-width: 601px) and (max-width: 1200px) {
	.main-div-tab .tab-btn-section > ul.nav-tabs {
		flex-wrap: wrap;
		overflow-x: visible;
		row-gap: 8px;
	}
}

@media (max-width: 782px) {
	.main-div-tab {
		margin: 12px 10px 0;
	}
}

/* =========================================================
   Responsive: phones (<= 600px)
   ========================================================= */
@media (max-width: 600px) {
	.main-div-tab .main-heading-btn {
		min-height: 64px;
		padding: 12px 12px 12px 20px;
		gap: 10px;
	}

	.main-div-tab .kirb-tabs-header h2 {
		font-size: 20px !important;
		line-height: 1.2;
	}

	.main-div-tab .save-btn,
	.main-div-tab .initial-section .save-btn,
	.main-div-tab .kirb-pf-header-btn {
		width: auto !important;
		min-width: 96px;
		padding: 0 16px;
		flex-shrink: 0;
	}

	.main-div-tab .right-section,
	.main-div-tab .initial-section .confirm-settings {
		padding: 18px 16px;
	}

	.main-div-tab .year-tab-section button {
		padding: 8px 12px;
	}

	.main-div-tab .number-section {
		gap: 6px;
	}

	.main-div-tab .number-section span {
		width: auto;
		flex: 1 1 0;
	}

	/* Language & Region: keep the language/ring size table aligned */
	#lang_region-tab-pane .right-section {
		padding: 16px 12px;
	}

	#lang_region-tab-pane .slider-language .lang-trans {
		width: 56%;
	}

	#lang_region-tab-pane .slider-language .ring-size {
		width: 44%;
	}

	#lang_region-tab-pane .slider-language h5,
	#lang_region-tab-pane .kirb-country-lang-container,
	#lang_region-tab-pane .slider-language .ring-size > div {
		padding: 0 10px;
	}

	#lang_region-tab-pane .kirb-country-lang-container:has(.kirb-lang-btn[data-lang="en_US"]) > span::after {
		display: none;
	}

	#lang_region-tab-pane .slider-language .kirb-lang-select-slider {
		padding: 0 28px 0 10px;
	}

	#lang_region-tab-pane .language-region-div .select-section {
		width: 100%;
	}

	/* Premium Features */
	.main-div-tab #premium-features-tab-pane .kirb-pf-hero {
		padding: 22px 18px;
	}

	.main-div-tab #premium-features-tab-pane .kirb-pf-actions .kirb-pf-btn {
		width: 100%;
	}

	.main-div-tab #premium-features-tab-pane .kirb-pf-legend {
		flex-direction: column;
		align-items: flex-start;
	}

	.main-div-tab #premium-features-tab-pane .kirb-pf-table {
		min-width: 0;
		font-size: 13px;
	}

	.main-div-tab #premium-features-tab-pane .kirb-pf-table th,
	.main-div-tab #premium-features-tab-pane .kirb-pf-table td {
		padding: 11px 8px;
	}

	.main-div-tab #premium-features-tab-pane .kirb-pf-table th[scope="row"],
	.main-div-tab #premium-features-tab-pane .kirb-pf-table thead th:first-child {
		padding-left: 12px;
	}

	.main-div-tab #premium-features-tab-pane .kirb-pf-table .kirb-pf-col-pro,
	.main-div-tab #premium-features-tab-pane .kirb-pf-table td:not(.kirb-pf-col-pro),
	.main-div-tab #premium-features-tab-pane .kirb-pf-table thead th:not(:first-child) {
		width: 56px;
	}

	.main-div-tab #premium-features-tab-pane .kirb-pf-table thead th {
		font-size: 11px;
		letter-spacing: .04em;
	}

	.main-div-tab #premium-features-tab-pane .kirb-pf-table thead .kirb-pf-col-pro span {
		padding: 3px 8px;
	}

	.main-div-tab #premium-features-tab-pane .kirb-pf-text {
		padding: 2px 6px;
		font-size: 9px;
	}

	.main-div-tab #premium-features-tab-pane .kirb-pf-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.main-div-tab #premium-features-tab-pane .kirb-pf-price strong {
		font-size: 32px;
	}

	.main-div-tab #premium-features-tab-pane .kirb-pf-price-actions .kirb-pf-btn {
		flex: 1 1 auto;
	}

	.main-div-tab #premium-features-tab-pane .kirb-pf-cta {
		padding: 22px 18px;
	}
}

/* Setup guide popup: all step markers are equal circles and the popup sits above page content */
.main-div-tab .tab-btn-section {
	z-index: 20;
}

.main-div-tab .manage-popup-main .kirb-setup-number,
.main-div-tab .manage-popup-main .kirb-setup-number.popup-step-3,
.main-div-tab .manage-popup-main .kirb-setup-number.popup-step-4 {
	flex-shrink: 0;
	width: 40px;
	min-width: 40px;
}

.main-div-tab .manage-popup-main .kirb-setup-popup:last-child .kirb-popup-line {
	display: none;
}

/* My Plan: recommended apps, tighter card on phones */
@media (max-width: 619px) {
	.main-div-tab .kirb-rec-apps {
		padding: 12px;
	}
}

/* Feed Center menu item (link to the hosted Feed Center, or "not available" label) */
.main-div-tab .tab-btn-section ul li .client-login-btn {
	margin: 2px 0 !important;
	padding-left: 14px !important;
	border-radius: 10px;
	color: #ece9fb;
	font-size: 14px;
	font-weight: 500;
	line-height: 40px !important;
	text-decoration: none;
	transition: background-color .15s ease;
}

.main-div-tab .tab-btn-section ul li a.client-login-btn:hover {
	background-color: rgba(255, 255, 255, .08);
	color: #fff;
}

.main-div-tab .tab-btn-section ul li span.client-login-btn {
	line-height: 22px !important;
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

.main-div-tab .tab-btn-section ul li .client-login-btn > span {
	color: rgba(255, 255, 255, .6);
	font-size: 11px !important;
}

@media (max-width: 1200px) {
	.main-div-tab .tab-btn-section ul li .client-login-btn {
		min-width: 0;
		padding: 0 14px !important;
		background-color: rgba(255, 255, 255, .06);
		line-height: 38px !important;
		white-space: nowrap;
	}

	.main-div-tab .tab-btn-section ul li span.client-login-btn {
		flex-direction: row;
		align-items: center;
		gap: 6px;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		line-height: 38px !important;
	}

	.main-div-tab .tab-btn-section ul li span.client-login-btn br {
		display: none;
	}

	.main-div-tab .tab-btn-section ul li .client-login-btn > span {
		margin-top: 0;
	}
}

/* Every menu item is always available: show all at full strength (no dimmed "not completed yet" state) */
.main-div-tab .tab-btn-section ul li button,
.main-div-tab .tab-btn-section ul li a.client-login-btn {
	opacity: 1 !important;
}


/* =========================================================
   Help & Support: Contact Us
   ========================================================= */
.main-div-tab .kirb-contact-page {
	display: grid;
	gap: 24px;
}

/* Body: form + side column */
.main-div-tab .kirb-contact {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 24px;
	align-items: start;
}

.main-div-tab .kirb-contact-form {
	position: relative;
	padding: 30px 32px 32px;
	border: 1px solid var(--kirb-ui-line);
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--kirb-ui-shadow);
}

.main-div-tab .kirb-contact-form::before {
	content: "";
	position: absolute;
	top: 0;
	right: 32px;
	left: 32px;
	height: 4px;
	border-radius: 0 0 4px 4px;
	background: linear-gradient(90deg, var(--kirb-ui-primary), var(--kirb-ui-gold));
}

.main-div-tab .kirb-contact-form-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--kirb-ui-line);
}

.main-div-tab .kirb-contact-form-icon {
	display: inline-flex;
	flex: 0 0 48px;
	align-items: center;
	justify-content: center;
	height: 48px;
	border-radius: 14px;
	background: var(--kirb-ui-tint);
	color: var(--kirb-ui-primary);
	font-size: 22px;
}

.main-div-tab .kirb-contact-form-head > div {
	flex: 1 1 auto;
	min-width: 0;
}

.main-div-tab .kirb-contact-form-head h4 {
	margin: 0 0 2px;
	color: var(--kirb-ui-ink);
	font-size: 19px;
	font-weight: 800;
}

.main-div-tab .kirb-contact-form-head p {
	margin: 0;
	color: var(--kirb-ui-muted);
	font-size: 13.5px;
}

.main-div-tab .kirb-contact-store {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 6px;
	max-width: 220px;
	overflow: hidden;
	padding: 6px 12px;
	border: 1px solid var(--kirb-ui-line);
	border-radius: 999px;
	background: var(--kirb-ui-canvas);
	color: var(--kirb-ui-text);
	font-size: 12px;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.main-div-tab .kirb-contact-store i {
	color: var(--kirb-ui-primary);
}

/* The form lives in a shadow root: theme it through its CSS variables and parts */
.main-div-tab #ring-builder-contact {
	display: block;
	min-height: 360px;
	color: var(--kirb-ui-ink);
	font-family: inherit;
	--cf-primary: var(--kirb-ui-primary);
	--cf-radius: 12px;
	--cf-max-width: 100%;
	--cf-control-border: var(--kirb-ui-field);
	--cf-input-text: var(--kirb-ui-ink);
	--cf-placeholder: var(--kirb-ui-muted);
	--cf-muted: var(--kirb-ui-tint);
	--cf-notice-bg: var(--kirb-ui-tint);
	--cf-notice-border: var(--kirb-ui-tint-strong);
	--cf-actions-align: flex-start;
}

.main-div-tab #ring-builder-contact::part(button-primary) {
	min-width: 180px;
	padding: 13px 26px;
	background: linear-gradient(135deg, var(--kirb-ui-primary), var(--kirb-ui-primary-dark));
	box-shadow: 0 10px 24px var(--kirb-ui-glow);
	font-weight: 700;
}

.main-div-tab #ring-builder-contact::part(version) {
	display: none;
}

.main-div-tab #ring-builder-contact::part(success-message) {
	border: 1px solid #bbf7d0;
	background: #f0fdf4;
	color: #166534;
}

/* Side column */
.main-div-tab .kirb-contact-side {
	display: grid;
	gap: 16px;
}

.main-div-tab .kirb-contact-card {
	padding: 20px;
	border: 1px solid var(--kirb-ui-line);
	border-radius: 18px;
	background: #fff;
	box-shadow: var(--kirb-ui-shadow);
}

.main-div-tab .kirb-contact-card h5 {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 14px;
	color: var(--kirb-ui-ink);
	font-size: 15px;
	font-weight: 800;
}

.main-div-tab .kirb-contact-channel,
.main-div-tab .kirb-contact-pro {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 12px;
	border: 1px solid transparent;
	border-radius: 14px;
	background: transparent;
	color: var(--kirb-ui-muted);
	font: inherit;
	font-size: 12.5px;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.main-div-tab .kirb-contact-channel + .kirb-contact-channel {
	margin-top: 4px;
}

.main-div-tab .kirb-contact-channel:hover,
.main-div-tab .kirb-contact-channel:focus-visible {
	border-color: var(--kirb-ui-tint-strong);
	background: var(--kirb-ui-tint);
	color: var(--kirb-ui-muted);
}

.main-div-tab .kirb-contact-channel > i:first-child {
	display: inline-flex;
	flex: 0 0 40px;
	align-items: center;
	justify-content: center;
	height: 40px;
	border-radius: 12px;
	background: var(--kirb-ui-tint);
	color: var(--kirb-ui-primary);
	font-size: 19px;
	transition: background .15s ease, color .15s ease;
}

.main-div-tab .kirb-contact-channel:hover > i:first-child {
	background: var(--kirb-ui-primary);
	color: #fff;
}

.main-div-tab .kirb-contact-channel span,
.main-div-tab .kirb-contact-pro span {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.main-div-tab .kirb-contact-channel strong {
	display: block;
	color: var(--kirb-ui-ink);
	font-size: 14px;
}

.main-div-tab .kirb-contact-go {
	color: var(--kirb-ui-muted);
	font-size: 17px;
	transition: transform .15s ease, color .15s ease;
}

.main-div-tab .kirb-contact-channel:hover .kirb-contact-go {
	color: var(--kirb-ui-primary);
	transform: translate(2px, -2px);
}

.main-div-tab .kirb-contact-tips {
	background: linear-gradient(180deg, var(--kirb-ui-tint) 0%, #fff 70%);
}

.main-div-tab .kirb-contact-tips h5 i {
	color: var(--kirb-ui-primary);
	font-size: 18px;
}

.main-div-tab .kirb-contact-tips ul {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-div-tab .kirb-contact-tips li {
	position: relative;
	margin: 0;
	padding-left: 28px;
	color: var(--kirb-ui-text);
	font-size: 13px;
	line-height: 1.5;
}

.main-div-tab .kirb-contact-tips li::before {
	content: "\eb7b";
	position: absolute;
	top: 1px;
	left: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--kirb-ui-primary);
	color: #fff;
	font-family: remixicon;
	font-size: 12px;
}

.main-div-tab .kirb-contact-pro {
	padding: 16px 18px;
	border-radius: 18px;
	background: linear-gradient(135deg, #221d3d, var(--kirb-ui-primary-dark));
	box-shadow: var(--kirb-ui-shadow);
	color: rgba(255, 255, 255, .75);
}

.main-div-tab .kirb-contact-pro > i:first-child {
	color: var(--kirb-ui-gold);
	font-size: 26px;
}

.main-div-tab .kirb-contact-pro strong {
	display: block;
	color: #fff;
	font-size: 14.5px;
}

.main-div-tab .kirb-contact-pro .kirb-contact-go {
	color: #fff;
}

.main-div-tab .kirb-contact-pro:hover {
	transform: translateY(-2px);
}

.main-div-tab .kirb-contact-pro:hover .kirb-contact-go {
	transform: translateX(3px);
}

@media (max-width: 1100px) {
	.main-div-tab .kirb-contact {
		grid-template-columns: minmax(0, 1fr);
	}

	.main-div-tab .kirb-contact-side {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.main-div-tab .kirb-contact-pro {
		grid-column: 1 / -1;
	}
}

@media (max-width: 782px) {
	.main-div-tab .kirb-contact-side {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 600px) {
	.main-div-tab .kirb-contact-form {
		padding: 22px 16px;
	}

	.main-div-tab .kirb-contact-form-head {
		flex-wrap: wrap;
	}

	.main-div-tab .kirb-contact-form-head > div {
		flex-basis: calc(100% - 62px);
	}

	.main-div-tab .kirb-contact-store {
		max-width: 100%;
	}

	.main-div-tab #ring-builder-contact::part(button-primary) {
		width: 100%;
	}
}

/* My Plan: highlighted "Read Documentation" link in the heading bar */
.main-div-tab .kirb-doc-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, #ffd98a 0%, var(--kirb-ui-gold) 55%, #f5b543 100%);
	box-shadow: 0 6px 18px rgba(245, 181, 67, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
	color: #2b2141;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .15s ease, box-shadow .15s ease;
}

.main-div-tab .kirb-doc-btn::after {
	content: "";
	position: absolute;
	inset: -4px;
	border: 2px solid rgba(245, 181, 67, .55);
	border-radius: inherit;
	animation: kirb-doc-pulse 2.4s ease-out infinite;
	pointer-events: none;
}

.main-div-tab .kirb-doc-btn i {
	font-size: 17px;
}

.main-div-tab .kirb-doc-btn:hover,
.main-div-tab .kirb-doc-btn:focus {
	color: #2b2141;
	box-shadow: 0 10px 24px rgba(245, 181, 67, .55), inset 0 1px 0 rgba(255, 255, 255, .6);
	transform: translateY(-1px);
}

.main-div-tab .kirb-doc-btn:focus-visible {
	outline: 2px solid var(--kirb-ui-primary);
	outline-offset: 3px;
}

@keyframes kirb-doc-pulse {
	0% { opacity: 1; transform: scale(1); }
	70%, 100% { opacity: 0; transform: scale(1.12, 1.35); }
}

@media (prefers-reduced-motion: reduce) {
	.main-div-tab .kirb-doc-btn::after {
		animation: none;
		opacity: 0;
	}
}

@media (max-width: 600px) {
	.main-div-tab .kirb-doc-btn {
		padding: 8px 14px;
		font-size: 13px;
	}
}