/**
 * Dugu Vacancies Frontend Styles
 * Designed to work with Palace theme colors
 * Primary: #3A233D (purple)
 * Secondary: #FCD5B7 (peach)
 */

/* Vacancies Grid - using theme's block--job style */
.dugu-vacancies-grid {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 40px 0;
}

.dugu-vacancies-grid .block--job {
	display: block;
	padding: 25px;
	background: #FCD5B7;
	border: 2px solid #FCD5B7;
	text-decoration: none;
	transition: all 0.3s ease;
}

.dugu-vacancies-grid .block--job .link {
	color: #3A233D;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	display: block;
	width: 100%;
	text-align: center;
}

.dugu-vacancies-grid .block--job:hover {
	transform: translateY(-3px);
	background: rgba(252, 213, 183, 0.2);
	box-shadow: 0 5px 20px rgba(58, 35, 61, 0.2);
	text-decoration: none;
}

.dugu-vacancies-grid .block__title {
	margin: 0 0 10px 0;
	color: #3A233D;
	font-weight: 600;
}

.dugu-vacancies-grid .block__text {
	color: #3A233D;
	margin-bottom: 10px;
	opacity: 0.8;
}

.dugu-vacancies-grid .link {
	color: #3A233D;
	font-weight: 500;
	margin: 0;
	text-decoration: underline;
}

.dugu-vacancies-grid .block--job:hover .link, .dugu-vacancies-grid .block--job:hover h3 {
	color: #FCD5B7;
}

/* Grid layout for multiple columns */
.dugu-vacancies-grid[data-columns="2"] {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
}

.dugu-vacancies-grid[data-columns="3"] {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.dugu-vacancies-grid[data-columns="4"] {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
}

@media (max-width: 992px) {
	.dugu-vacancies-grid[data-columns="3"],
	.dugu-vacancies-grid[data-columns="4"] {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 576px) {
	.dugu-vacancies-grid[data-columns="2"],
	.dugu-vacancies-grid[data-columns="3"],
	.dugu-vacancies-grid[data-columns="4"] {
		grid-template-columns: 1fr;
	}
}

/* Single Vacancy Page - Contact Options */

.vacancy-contact-box {
	background: #FCD5B7;
	padding: 40px 30px;
	
}


.vacancy-contact-box h4 {
	color: #3A233D;
}

.vacancy-contact-box .block__text {
	color: #000;
}

.vacancy-contact-options h3 {
	margin-bottom: 25px;
	font-size: 24px;
	color: #3A233D;
	font-weight: 600;
}

.separator {
	color: #fff;
	padding-top: 25px;
	padding-bottom: 25px;
	font-weight: bold;
	text-align: center;
}


/* WhatsApp Button - styled with green but matching theme */
.button--whatsapp {
	display: inline-flex !important;
	align-items: center;
	background-color: #25D366 !important;
	border: 2px solid #25D366 !important;
	color: #ffffff !important;
	padding: 12px 24px;
	border-radius: 50px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.3s ease;
}

.button--whatsapp:hover {
	background-color: #1fb855 !important;
	border-color: #1fb855 !important;
	color: #ffffff !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

/* Contact Form Wrapper - matching Palace theme */
.vacancy-form-wrapper {
	margin: 30px 0;
	padding: 30px;
	background: transparent;
	border: 2px solid rgba(252, 213, 183, 0.3);
	border-radius: 8px;
}

/* Form Styles */
.application-form .form-group {
	margin-bottom: 20px;
}

.application-form label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	color: #000;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.application-form input[type="text"],
.application-form input[type="email"] {
	width: 100%;
	padding: 12px 15px;
	background: #e4bc9b;
	border: 2px solid rgba(252, 213, 183, 0.5);
	border-radius: 4px;
	font-size: 16px;
	color: #3A233D;
	transition: all 0.3s ease;
}

.application-form input[type="text"]::placeholder,
.application-form input[type="email"]::placeholder {
	color: rgba(58, 35, 61, 0.5);
}

.application-form input[type="text"]:focus,
.application-form input[type="email"]:focus {
	outline: none;
	border-color: #FCD5B7;
	background: rgba(252, 213, 183, 0.05);
	box-shadow: 0 0 0 3px rgba(252, 213, 183, 0.2);
}

/* Submit button - matching Palace theme button style */
.application-form .button,
.application-form button[type="submit"] {
	background: #3A233D !important;
	color: #FCD5B7 !important;
	border: 2px solid #3A233D !important;
	padding: 12px 30px;
	border-radius: 50px;
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	transition: all 0.3s ease;
	display: inline-block;
}

.application-form .button:hover,
.application-form button[type="submit"]:hover {
	background: #FCD5B7 !important;
	color: #3A233D !important;
	border-color: #FCD5B7 !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(58, 35, 61, 0.2);
}

.application-form .button:disabled,
.application-form button[type="submit"]:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

/* Form Messages */
.form-message {
	margin-top: 15px;
	padding: 15px;
	border-radius: 4px;
	display: none;
	font-weight: 500;
}

.form-message.success {
	background: #25D366;
	color: #fff;
	font-weight: bold;
	font-size: 20px;
	border: 2px solid #25D366;
	display: block;
}

.form-message.error {
	background: rgba(220, 53, 69, 0.1);
	color: #dc3545;
	border: 2px solid #dc3545;
	display: block;
}

/* Direct email option */
.vacancy-contact-options .email-option-wrapper {
	text-align: center;
	padding: 20px;
	background: transparent;
	border: 2px solid rgba(252, 213, 183, 0.3);
	border-radius: 4px;
	margin-top: 20px;
	color: #3A233D;
}

/* "Something else?" section styling */
.section .block--job {
	border: 2px solid rgba(252, 213, 183, 0.3);
	margin-bottom: 15px;
	transition: all 0.3s ease;
}

.section .block--job:hover {
	background: rgba(252, 213, 183, 0.1);
	border-color: #FCD5B7;
	transform: translateX(5px);
}

.section .block--job .block__title {
	color: #3A233D;
	font-weight: 600;
}

.section .block--job .block__text {
	color: #3A233D;
	opacity: 0.8;
}

.section .block--job .link {
	color: #3A233D;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.vacature-block h2 {
	font-size: 1.2rem;
}

/* Ensure proper text color for block--text-alt if needed */
.block--text-alt {
	color: #3A233D;
}

.block--text-alt p {
	color: #3A233D;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.vacancy-hero-title {
		font-size: 32px;
	}
	
	.vacancy-hero-subtitle {
		font-size: 18px;
	}
	
	.vacancy-content-wrapper {
		padding: 25px;
	}
	
	.contact-section-title {
		font-size: 22px;
	}
	
	.contact-method {
		padding: 20px;
	}
	
	.button--whatsapp,
	.button--submit {
		width: 100%;
		text-align: center;
		justify-content: center;
	}
}



/* Submit button - matching Palace theme button style */
.application-form .button,
.application-form button[type="submit"] {
	background: #3A233D !important;
	color: #FCD5B7 !important;
	border: 2px solid #3A233D !important;
	padding: 12px 30px;
	border-radius: 50px;
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	transition: all 0.3s ease;
	display: inline-block;
	position: relative;
}

.application-form .button:hover,
.application-form button[type="submit"]:hover {
	background: #FCD5B7 !important;
	color: #3A233D !important;
	border-color: #FCD5B7 !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(58, 35, 61, 0.2);
}

.application-form .button:disabled,
.application-form button[type="submit"]:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

/* Loading spinner animation */
.application-form button[type="submit"] .spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(252, 213, 183, 0.3);
	border-top-color: #FCD5B7;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	vertical-align: middle;
	margin-right: 5px;
}

.application-form button[type="submit"].is-loading {
	pointer-events: none;
	opacity: 0.8;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}