/*
Theme Name: Art Astra Child
Theme URI: https://wpastra.com/
Description: Astra child theme for custom WooCommerce development.
Author: Art
Template: astra
Version: 1.0.0
Text Domain: art-astra-child
Requires at least: 6.0
Requires PHP: 7.4
*/

/*
 * Keep small, global overrides here. Larger styles belong in
 * assets/css/woocommerce.css or another purpose-specific stylesheet.
 */

.qv-artist-contact {
	margin-top: 20px;
	text-align: center;
}

.qv-artist-contact__button {
	display: inline-block;
	padding: 13px 22px;
	border: 2px solid #800080;
	border-radius: 15px !important;
	background-color: #800080 !important;
	box-shadow: 0 3px 8px rgba(128, 0, 128, 0.3);
	color: #fff !important;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.qv-artist-contact__button:hover,
.qv-artist-contact__button:focus {
	border-color: #660066;
	background-color: #660066 !important;
	box-shadow: 0 5px 12px rgba(128, 0, 128, 0.4);
	color: #fff !important;
	transform: translateY(-1px);
}

.artist-contact-modal[hidden] {
	display: none;
}

.artist-contact-modal {
	position: fixed;
	z-index: 999999;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 20px;
}

.artist-contact-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(25, 18, 27, 0.72);
	backdrop-filter: blur(3px);
}

.artist-contact-modal__dialog {
	position: relative;
	z-index: 1;
	width: min(100%, 540px);
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 32px;
	border-radius: 15px;
	background: #fff;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
}

.artist-contact-modal__dialog h2 {
	margin: 0 40px 8px 0;
	border: 0 !important;
	color: #2b1b2d;
	font-size: 28px;
	outline: 0 !important;
	box-shadow: none !important;
}

.artist-contact-modal__dialog h2:focus,
.artist-contact-modal__dialog h2:focus-visible,
.artist-contact-modal__intro strong,
.artist-contact-modal__intro strong:focus,
.artist-contact-modal__intro strong:focus-visible {
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
}

.artist-contact-modal__intro {
	margin: 0 0 22px;
	color: #5d5360;
}

.artist-contact-modal__close {
	position: absolute;
	top: 14px;
	right: 16px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f5eff5;
	color: #800080;
	font-size: 28px;
	line-height: 38px;
	cursor: pointer;
}

.artist-contact-form label {
	display: block;
	margin: 0 0 7px;
	border: 0 !important;
	color: #332a35;
	font-weight: 600;
	outline: 0 !important;
	box-shadow: none !important;
}

.artist-contact-form label:hover,
.artist-contact-form label:focus,
.artist-contact-form label:focus-visible,
.artist-contact-form label:focus-within {
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
}

.artist-contact-form input[type="email"],
.artist-contact-form textarea {
	width: 100%;
	margin: 0 0 18px;
	padding: 11px 13px;
	border: 1px solid #cfc5d1;
	border-radius: 8px;
	background: #fff;
	color: #29222b;
}

.artist-contact-form input[type="email"]:focus,
.artist-contact-form input[type="email"]:focus-visible,
.artist-contact-form textarea:focus,
.artist-contact-form textarea:focus-visible {
	border-color: #800080 !important;
	outline: 0 !important;
	box-shadow: 0 0 0 3px rgba(128, 0, 128, 0.13) !important;
}

.artist-contact-form textarea {
	min-height: 135px;
	resize: vertical;
}

.artist-contact-form__submit {
	width: 100%;
}

.artist-contact-form__submit:disabled {
	opacity: 0.65;
	cursor: wait;
}

.artist-contact-form__status {
	margin: 15px 0 0;
	padding: 0;
	font-weight: 600;
	text-align: center;
}

.artist-contact-form__status.is-success {
	padding: 11px;
	border-radius: 8px;
	background: #eaf7ee;
	color: #176b35;
}

.artist-contact-form__status.is-error {
	color: #a32020;
}

.artist-contact-form__website {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

body.artist-contact-modal-open {
	overflow: hidden;
}

@media (max-width: 600px) {
	.artist-contact-modal {
		padding: 12px;
	}

	.artist-contact-modal__dialog {
		max-height: calc(100vh - 24px);
		padding: 25px 20px;
	}
}

/* Compact the homepage contact form without shrinking its input controls. */
body.home .srfm-form-container-2395 #srfm-form-2395 {
	--srfm-row-gap-between-blocks: 10px;
	--srfm-input-field-margin-top: 0px;
	--srfm-input-field-margin-bottom: 0px;
}
/* Match the collapsed primary navigation to the account dropdown. */
@media (max-width: 968px) {
	#masthead #mega-menu-wrap-primary {
		position: relative;
		background: transparent;
	}

	#masthead #mega-menu-wrap-primary > #mega-menu-primary {
		box-sizing: border-box;
		position: absolute;
		top: 100%;
		/* Override the plugin's inline full-body width and left offset. */
		left: auto !important;
		right: 0;
		width: 220px !important;
		max-width: calc(100vw - 32px);
		max-height: calc(100dvh - 100px);
		overflow-y: auto;
		z-index: 1000;
		margin: 0;
		padding: 8px;
		border: 1px solid #eadfea;
		border-top: 3px solid #800080;
		border-radius: 8px;
		background: #fff;
		box-shadow: 0 8px 28px rgb(0 0 0 / 16%);
		text-align: start;
	}

	#masthead #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
	}

	#masthead #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
		box-sizing: border-box;
		display: block;
		height: auto;
		min-height: 44px;
		padding: 10px 14px;
		border: 0;
		border-radius: 4px;
		background: transparent;
		color: #422d42;
		font-size: 15px;
		font-weight: 500;
		line-height: 1.6;
		text-align: start;
		text-transform: none;
		text-decoration: none;
	}

	#masthead #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
	#masthead #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus-visible {
		color: #800080;
		background: #f8f3f8;
	}

	#masthead #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus-visible {
		outline: 2px solid #800080;
		outline-offset: -2px;
	}
}
/* Gallery flyout: the same panel and link treatment as the account menu. */
#masthead #mega-menu-wrap-primary #mega-menu-primary > li:has(> a[href*="/product-category/gallery"]) ul.mega-sub-menu {
	box-sizing: border-box;
	width: 220px;
	max-width: calc(100vw - 32px);
	padding: 8px;
	border: 1px solid #eadfea;
	border-top: 3px solid #800080;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 8px 28px rgb(0 0 0 / 16%);
	text-align: start;
}

#masthead #mega-menu-wrap-primary #mega-menu-primary > li:has(> a[href*="/product-category/gallery"]) ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
	box-sizing: border-box;
	display: block;
	height: auto;
	min-height: 44px;
	padding: 10px 14px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: #422d42;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6;
	text-align: start;
	text-transform: none;
	text-decoration: none;
}

#masthead #mega-menu-wrap-primary #mega-menu-primary > li:has(> a[href*="/product-category/gallery"]) ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover,
#masthead #mega-menu-wrap-primary #mega-menu-primary > li:has(> a[href*="/product-category/gallery"]) ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:focus-visible {
	color: #800080;
	background: #f8f3f8;
}

#masthead #mega-menu-wrap-primary #mega-menu-primary > li:has(> a[href*="/product-category/gallery"]) ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:focus-visible {
	outline: 2px solid #800080;
	outline-offset: -2px;
}

@media (max-width: 968px) {
	#masthead #mega-menu-wrap-primary #mega-menu-primary > li:has(> a[href*="/product-category/gallery"]) ul.mega-sub-menu {
		width: 100%;
		max-width: 100%;
		margin: 4px 0 8px;
		padding: 4px;
		box-shadow: none;
	}
}