/* ===== IGAMING JOBS STYLES ===== */

/* ===== COMMON STYLES ===== */
.blog_bg {
	gap: 20px;
	margin-top: 30px;
}

.blog_right {
	flex-shrink: 0;
	width: 255px;
}

.igaming-jobs-container {
	margin-bottom: 40px;
}

.igaming-jobs-container h1 {
	line-height: 1.2;
}

/* ===== SUBMIT JOB BLOCK ===== */
.submit-job-block {
	background-color: #101b32;
	box-shadow: 0 0 15px 0 rgba(7, 16, 39, 0.4);
	padding: 20px;
	margin-bottom: 20px;
	border-radius: 5px;
	box-sizing: border-box;
	text-align: left;
	position: relative;
	z-index: 1;
}

.submit-job-block::before {
	content: '';
	position: absolute;
	inset: 10px;
	z-index: 0;
	background-image: url('/wp-content/themes/3snet/img/pattern_3snet_w.png');
	pointer-events: none;
	background-size: 80%;
	opacity: 0.5;
	background-repeat: repeat;
}

.submit-job-block h2 {
	color: #fff;
	margin-bottom: 12px;
	line-height: 1.4;
}

.submit-job-block p {
	color: #fff;
	opacity: .85;
	margin-bottom: 18px;
}

.submit-job-block p span {
	padding: 2px 5px;
	border-radius: 3px;
	background: #3c4964;
}

.submit-job-btn {
	display: block;
	background: #fcb900;
	color: #0f1b32;
	font-weight: 700;
	padding: 10px 28px;
	border-radius: 5px;
	text-decoration: none;
	transition: .2s;
	text-align: center;
	box-shadow: 0 0 40px #fcb90061;
	border: 1px solid #ffde84;
	box-sizing: border-box;
}

.submit-job-btn:hover {
	background: #ffde84;
	color: #223358;
	cursor: pointer;
}

.submit-job-btn:disabled {
	background: #666;
	cursor: not-allowed;
	color: #ccc;
	border: 1px solid #ccc;
	box-shadow: none;
}

.submit-job-btn:disabled:hover {
	background: #666;
	color: #fff;
}

/* ===== IGAMING JOB FORM ===== */
.igaming-job-form {
	padding: 26px;
	border: 1px solid #ffe128;
	border-radius: 6px;
	background-color: rgba(15, 27, 50, .5);
	width: 100%;
	height: fit-content;
}

.input-row {
	display: flex;
	gap: 15px;
	margin-top: 20px;
	margin-bottom: 10px;
}

.input-col {
	flex: 1;
}

/* Префиксы для регулировки ширины колонок (1-12) */
.input-col--1 { flex: 0 0 8.333333%; }
.input-col--2 { flex: 0 0 16.666667%; }
.input-col--3 { flex: 0 0 25%; }
.input-col--4 { flex: 0 0 33.333333%; }
.input-col--5 { flex: 0 0 41.666667%; }
.input-col--6 { flex: 0 0 50%; }
.input-col--7 { flex: 0 0 58.333333%; }
.input-col--8 { flex: 0 0 66.666667%; }
.input-col--9 { flex: 0 0 75%; }
.input-col--10 { flex: 0 0 83.333333%; }
.input-col--11 { flex: 0 0 91.666667%; }
.input-col--12 { flex: 0 0 100%; }

.igaming-job-form label {
	display: block;
	margin-bottom: 12px;
	color: #fff;
	opacity: 0.85;
	margin-bottom: 3px;
}

.igaming-job-form input[type="text"],
.igaming-job-form select,
.igaming-job-form textarea {
	width: 100%;
	padding: 10px;
	border-radius: 5px;
	border: 1px solid #3d4e73;
	background-color: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-size: 14px;
	box-sizing: border-box;
}

.igaming-job-form input[type="text"]::placeholder,
.igaming-job-form select::placeholder,
.igaming-job-form textarea::placeholder {
	color: #fff;
	opacity: 0.5;
}

.igaming-job-form input[type="text"]:focus,
.igaming-job-form select:focus,
.igaming-job-form textarea:focus {
	border-color: #fcb900;
	outline: none;
}

.igaming-job-form select option {
	color: #000;
}

.submit-job-btn {
	margin-top: 16px;
	width: 100%;
	font-size: 14px;
	padding: 15px 20px;
}

.submit-add-contact-btn {
	background: #3d4e73;
	color: #fff;
	border: none;
	border-radius: 5px;
	padding: 8px 16px;
	cursor: pointer;
	font-size: 14px;
}

.submit-add-contact-btn:disabled {
	background: #666;
	cursor: not-allowed;
}

.submit-add-contact-btn:disabled:hover {
	background: #666;
	color: #fff;
}

.submit-add-contact-btn:hover {
	background: #fcb900;
	color: #0f1b32;
}

.submit-btn-spinner {
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 2px solid #fff;
	border-top: 2px solid #fcb900;
	border-radius: 50%;
	animation: spinBtn 0.7s linear infinite;
	box-sizing: border-box;
	vertical-align: middle;
	margin-left: 8px;
}

@keyframes spinBtn {
	100% { transform: rotate(360deg); }
}

.form-bottom {
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* ===== FILTERS STYLES ===== */
.input-item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.input-item.radio-select {
	display: flex;
}

.igaming-jobs-filters {
	display: flex;
	gap: 20px;
	align-items: center;
	margin: 30px 0;
}

.input-item.no-label {
	margin-top: 30px;
}

.checkselect {
	position: relative;
	display: inline-block;
	min-width: 200px;
	text-align: left;
}

.checkselect-control {
	position: relative;
	padding: 0 !important;
}

.checkselect-control select {
	width: 100%;
	height: 37.5px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 5px;
	background: transparent url(/wp-content/themes/3snet/img/arrow_bottom.png) no-repeat 95% 50%!important;
	font: 14px/40px Arial, sans-serif;
	color: rgba(255, 255, 255, 0.5);
	appearance: none;
	line-height: 1.2;
}

.checkselect-control.active select {
	border: 1px solid #40f3f7;
	border-bottom: 0px;
	border-radius: 5px 5px 0 0;
	background: #223358 url(/wp-content/themes/3snet/img/arrow_bottom.png) no-repeat 95% 50%!important;
}

.checkselect-over {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	cursor: pointer;
	z-index: 999;
}

.checkselect-popup {
	display: none;
	box-sizing: border-box;
	margin: 0;
	width: 100%;
	max-height: 200px;
	position: absolute;
	top: 100%;
	left: 0px;
	padding: 12px;
	border: 1px solid #40f3f7;
	border-radius: 0 0 5px 5px;
	border-top: none;
	background: #223358;
	color: #fff;
	z-index: 9999;
	overflow: auto;
	user-select: none;
}

.checkselect label {
	display: block;
	margin: 0;
	padding: 6px 0;
	font-weight: normal;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.5);
}

.checkselect-popup input {
	position: absolute;
	top: 5px;
	left: 8px;
	margin: 0 !important;
	padding: 0;
}

.checkselect-popup label:hover {
	color: #fff;
}

.checkselect-popup label.custom-checkbox>input:checked+span {
	color: #fff;
}

.checkselect-popup fieldset {
	display: block;
	margin: 0;
	padding: 0;
	border: none;
}

.checkselect-popup fieldset input {
	left: 15px;
}

.checkselect-popup fieldset label {
	padding-left: 32px;
}

.checkselect-popup legend {
	display: block;
	margin: 0;
	padding: 5px 8px;
	font-weight: 700;
	font-size: 1em;
	line-height: 1.1;
}

.checkselect-clear {
	color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	display: none;
	position: absolute;
	right: 0;
	top: 0;
}

.checkselect-clear:hover {
	color: #fff;
}

.checkselect-clear.active {
	display: block;
}

.custom-checkbox:hover {
	cursor: pointer;
}

.igaming-jobs-filters .air-datepicker {
	opacity: 1!important;
	position: relative!important;
	height: auto;
	margin: 0;
	padding: 9.5px 12px;
	border: 1px solid rgba(255, 255, 255, 0.5)!important;
	border-radius: 5px!important;
	background: transparent!important;
	box-shadow: none !important;
	color: rgba(255, 255, 255, 0.5)!important;
	box-sizing: border-box;
	z-index: 1;
}

.igaming-jobs-filters .air-datepicker::placeholder {
	color: rgba(255, 255, 255, 0.5)!important;
}

.custom-checkbox>input:disabled+span::before {
	background: none;
	border-color: rgba(255, 255, 255, 0.5);
}

#clearFilters,
#applyFilters {
	align-self: flex-end;
	height: 40px;
	padding: 0 15px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	background: #2c708b;
}

#applyFilters {
	margin-left: auto;
	margin-right: 10px;
}

/* ===== JOBS LIST STYLES ===== */
.igaming-jobs-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.job-item {
	padding: 26px;
	border: 1px solid #6d7a97;
	border-radius: 6px;
	background-color: rgba(15, 27, 50, .5);
}

.job-item.hot-job {
	border: 1px solid #ffe128;
}

.item-info-top {
	display: flex;
	gap: 20px;
	align-items: center;
	justify-content: space-between;
}

.title-job {
	font-size: 1.5rem;
	line-height: 1.5rem;
	font-weight: 600;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 5px;
}

.title-job .hot-lable {
	color: #0f1b32;
	font-size: 12px;
	line-height: 1;
	font-weight: 500;
	background-color: #fcb900;
	padding: 5px 10px;
	border-radius: 4px;
	margin-left: 10px;
}

.date-job {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.5);
	margin-left: auto;
}

.share-job {
}

.share-job .share-btn {
	border: none;
	cursor: pointer;
	margin: 0;
	display: flex;
	align-items: center;
	opacity: 0.5;
	border-radius: 50%;
	padding: 10px;
	background-color: rgba(255, 255, 255, 0.1);
}

.share-job .share-btn:hover {
	opacity: 1;
}

.share-job .share-btn svg {
	width: 16px;
	height: 16px;
	fill: #fff;
}

.igaming-jobs-wrap {
	margin-top: 15px;
}

.job-meta {
	margin-top: 20px;
	margin-bottom: 10px;
	display: flex;
	gap: 10px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.5);
}

.job-meta > div {
	padding: 2px 8px;
	border-radius: 4px;
	background-color: rgba(255, 255, 255, 0.1);
}

.job-contacts {
	margin-top: 10px;
	gap: 10px;
}

.job-contacts span {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.5);
}

.job-contacts-list {
	display: flex;
	align-items: center;
	gap: 15px;
}

.job-contacts-list a {
	text-decoration: none;
	font-size: 12px;
}

.job-contacts-list a svg {
	width: 16px;
	height: 16px;
	vertical-align: middle;
	fill: #fff;
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	padding: 6px;
	overflow: visible;
}

.job-contacts-list a span {
	color: #fff;
	font-weight: 400;
	display: block;
	max-width: 250px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.job-contacts-list a:hover span {
	color: #40f3f7;
}

.related-articles {
	margin-top: 20px;
	background-color: #101b32b8;
	padding: 20px;
	border-radius: 8px;
}

.related-articles ul {
	display: flex;
	gap: 20px;
}

.related-articles ul li {
	flex: 1;
	display: flex;
	gap: 20px;
}

.related-articles ul li img {
	height: 120px;
	width: 180px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

.related-articles ul li .right {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.related-title a:hover {
	text-decoration: underline;
}

.related-excerpt {
	opacity: .7;
}

/* ===== PAGINATION STYLES ===== */
.jobs-pagination {
	display: flex;
	justify-content: center;
	margin: 30px 0 0 0;
	gap: 8px;
	flex-wrap: wrap;
	width: 100%;
}

.jobs-pagination .page-numbers {
	display: inline-block;
	min-width: 23px;
	padding: 7px 12px;
	margin: 0 2px;
	border-radius: 4px;
	background: rgba(15, 27, 50, .5);
	color: #fff;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
	width: auto;
}

.jobs-pagination .page-numbers.current,
.jobs-pagination .page-numbers:hover {
	background: #fcb900;
	color: #0f1b32;
}

.jobs-pagination .page-numbers.dots {
	background: none;
	color: #aaa;
	cursor: default;
}

/* ===== FILTERS LOCKED STYLES ===== */
body.filters-locked .input-item:not(.filter-initiator) {
	opacity: 0.5 !important;
	pointer-events: none !important;
	cursor: not-allowed !important;
}

body.filters-locked .input-item:not(.filter-initiator) * {
	cursor: not-allowed !important;
}

body.filters-locked {
	cursor: wait !important;
}

.checkselect-apply-wrap {
	position: sticky;
	bottom: -12px;
	left: 0px;
	padding: 12px;
	width: 100%;
	background: #1c2c50;
	margin-left: -12px;
	margin-bottom: -12px;
}

.checkselect-apply {
	width: 100%;
	background: #2c708b;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	z-index: 10000;
	box-shadow: 0 -2px 8px 0 rgba(0,0,0,0.10);
	display: block;
}

/* ===== MESSAGE STYLES ===== */
#igaming-job-message {
	display: none;
	margin-top: 16px;
	min-height: 24px;
	padding: 10px 18px;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 500;
	text-align: center;
	box-shadow: 0 2px 12px 0 rgba(0,0,0,0.07);
	background: #fffbe6;
	color: #333;
	border: 1px solid #ffe58f;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
	position: relative;
	z-index: 2;
}

#igaming-job-message.visible {
	display: block;
	opacity: 1;
	pointer-events: auto;
}

#igaming-job-message.success {
	background: #e6ffed;
	color: #135200;
	border-color: #b7eb8f;
}

#igaming-job-message.error {
	background: #fff1f0;
	color: #a8071a;
	border-color: #ffa39e;
}

/* ===== RULES BLOCK STYLES ===== */
.rules-block {
	background: #fffbe6;
	border: 1px solid #ffe58f;
	padding: 18px 22px 14px 22px;
	border-radius: 7px;
	margin-bottom: 22px;
	font-size: 15px;
	line-height: 1.7;
	color: #333;
}

.rules-agree-row {
	margin-top: 18px;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.rules-agree-row input[type="checkbox"] {
	width: 18px;
	height: 18px;
}

.rules-agree-row label {
	font-size: 15px;
	cursor: pointer;
	user-select: none;
}

.rules-link {
	color: #40f3f7;
	cursor: pointer;
	margin-left: 5px;
	display: inline-block;
	border-bottom: 1px dashed #40f3f7;
	line-height: 1.2;
}

/* ===== MODAL STYLES ===== */
#rules-modal {
	display: none;
	position: fixed;
	z-index: 9999;
	left: 0; top: 0;
	width: 100vw; height: 100vh;
	background: rgba(0,0,0,0.45);
	align-items: center;
	justify-content: center;
}

#rules-modal .rules-modal-content {
	background: #fffbe6;
	border: 1px solid #ffe58f;
	padding: 28px 28px 18px 28px;
	border-radius: 9px;
	max-width: 420px;
	width: 90vw;
	box-shadow: 0 8px 32px 0 rgba(0,0,0,0.18);
	position: relative;
}

#rules-modal .rules-modal-close {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none;
	border: none;
	font-size: 22px;
	color: #888;
	cursor: pointer;
}

#rules-modal .rules-modal-text {
	font-size: 16px;
	line-height: 1.7;
	color: #333;
}

/* ===== TRANSLATION FORM STYLES ===== */
#translation-form {
	padding: 20px 20px 10px 20px;
	margin-top: 10px;
	margin-bottom: 10px;
	border-radius: 8px;
	background: #1f2e51;
	position: relative;
}

#translation-form .label-lang {
	position: absolute;
	top: 10px;
	right: 20px;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.5;
}

#translation-form .input-row {
	margin: 0px;
}

.custom-checkbox > * {
	cursor: pointer;
}

/* ===== MODERATION NOTIFICATION STYLES ===== */
#moderation-notification {
	display: none;
	padding: 30px;
	border: 1px solid #ffe128;
	border-radius: 6px;
	background: radial-gradient(circle at top left, rgba(82, 196, 26, 0.15) 0%, rgba(15, 27, 50, 0.95) 70%);
	width: 100%;
	height: fit-content;
	position: relative;
}

.moderation-content {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

.moderation-icon {
	flex-shrink: 0;
	margin-top: 2px;
}

.moderation-text {
	flex: 1;
}

.moderation-text h3 {
	color: #fff;
	margin: 0 0 12px 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

.moderation-text p {
	color: #fff;
	opacity: 0.85;
	margin: 0 0 20px 0;
	line-height: 1.5;
	font-size: 15px;
}

.moderation-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.moderation-btn {
	padding: 12px 24px;
	border-radius: 5px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: .2s;
	border: none;
	text-decoration: none;
	display: inline-block;
}

.moderation-btn.primary {
	background: #fcb900;
	color: #0f1b32;
	box-shadow: 0 0 40px #fcb90061;
	border: 1px solid #ffde84;
}

.moderation-btn.primary:hover {
	background: #ffde84;
	color: #223358;
}

.moderation-btn.secondary {
	background: #3d4e73;
	color: #fff;
	border: 1px solid #3d4e73;
}

.moderation-btn.secondary:hover {
	background: #fcb900;
	color: #0f1b32;
	border-color: #ffde84;
}

/* ===== ADDITIONAL STYLES ===== */
.rus-blocked {
	padding: 5px 0;
	margin: 10px 0;
	border-top: 1px dashed #cccccc3b;
	color: rgba(255, 255, 255, 0.5);
	font-size: 12px;
}

.user-pending-jobs {
	opacity: .6;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.igaming-jobs-header {
	margin: 20px 0;
}

.igaming-jobs-header h1 {
	color: #fff;
	margin-bottom: 12px;
	line-height: 1.4;
}

.igaming-jobs-header p {
	color: #fff;
	opacity: .85;
	margin-bottom: 18px;
}

/* ===== RESPONSIVE STYLES ===== */
@media screen and (max-width: 768px) {
	.igaming-job-form {
		padding: 16px;
		width: auto;
	}
	
	.input-row {
		flex-direction: column;
	}
	
	.input-col {
		width: 100%;
	}
	
	.blog_left {
		width: 100%;
	}
	
	.submit-job-btn {
		width: 100%;
		font-size: 16px;
		padding: 12px 0;
	}
	
	.blog_right {
		flex-shrink: 0;
		width: 100%;
	}
	
	.form-bottom {
		flex-direction: column-reverse;
		gap: 10px;
	}
	
	.form-bottom .right {
		width: 100%;
	}
	
	.form-bottom .right button {
		width: 100%!important;
	}
	
	.form-bottom .left {
		width: 100%;
	}
	
	.form-bottom .left .checkbox {
		margin-bottom: 10px;
	}
	
	.form-bottom .left .custom-checkbox>span {
		flex-wrap: wrap;
	}
	
	#contacts-list .input-row {
		position: relative;
	}
	
	#contacts-list .input-row>div:nth-child(3) {
		position: absolute;
		right: 6px;
		top: 67px;
	}
	
	/* На мобильных устройствах все колонки становятся полной ширины */
	.input-col--1,
	.input-col--2,
	.input-col--3,
	.input-col--4,
	.input-col--5,
	.input-col--6,
	.input-col--7,
	.input-col--8,
	.input-col--9,
	.input-col--10,
	.input-col--11,
	.input-col--12 {
		flex: 1;
	}
	
	#moderation-notification {
		padding: 20px;
	}
	
	.moderation-content {
		flex-direction: column;
		gap: 15px;
	}
	
	.moderation-actions {
		flex-direction: column;
	}
	
	.moderation-btn {
		width: 100%;
		text-align: center;
	}
}

@media (max-width: 767px) {
	.igaming-jobs-filters .air-datepicker {
		width: 100%!important;
	}
	
	.igaming-jobs-container .igaming-jobs-filters {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		align-items: normal;
		gap: 10px;
	}
	
	.input-item.no-label {
		margin-top: 0;
	}
	
	#clearFilters, #applyFilters {
		width: 100%;
		justify-content: center;
		box-sizing: border-box;
	}
	
	.related-articles ul {
		flex-direction: column;
		gap: 20px;
	}
	
	.related-articles ul li {
		flex-direction: column;
	}
	
	.related-articles ul li img {
		width: 100%;
	}
	
	.igaming-jobs-list {
		width: 100%;
	}
	
	.job-meta,
	.job-contacts-list {
		flex-wrap: wrap;
		gap: 10px;
		justify-content: flex-start;
	}
	
	.item-info-top {
		flex-direction: column;
		align-items: flex-start;
		gap: 5px;
	}
	
	.title-job {
		font-size: 1.2rem;
		flex-wrap: wrap;
		gap: 5px;
		row-gap: 15px;
	}
	
	.title-job svg {
		order: 1;
	}
	
	.title-job .hot-lable {
		order: 2;
		margin-left: 0px;
	}
	
	.title-job span {
		order: 3;
		display: block;
		width: 100%;
	}
	
	.share-job {
		order: 4;
	}
	
	.date-job {
		margin-left: 0;
	}
}