/**
 * Gravity Forms Overrides
 *
 * Theme variable overrides and GF-specific styling for the
 * Wardrobes Customiser configurator.
 *
 * @package WardrobesCustomiser
 * @version 1.0.0
 */


/* ==========================================================================
   1. GF Theme Variables
   ========================================================================== */

.gform_wrapper,
[data-form-theme] {
	--gf-field-img-choice-card-space-md: 6px !important;
}

.gform-theme--foundation.gform-theme--foundation {
	--gf-form-gap-x: 9px;
	--gf-form-gap-y: 25px;
}


/* ==========================================================================
   2. Section & Label Typography
   ========================================================================== */

.gform-theme--foundation .gsection_title {
	margin-top: 10px;
}

h3.gsection_title,
legend.gfield_label {
	font-size: 20px !important;
	
}


/* ==========================================================================
   3. Image Choice Cards
   ========================================================================== */

.gform-theme--framework .gfield--type-image_choice.gfield--image-choice-style-square.gfield--image-choice-appearance-card .gchoice:where(:has(input:checked)) {
	border: 0.2em solid;
	border-color: var(--wc-img-modal-bg, #bfa97b);
}

.gform-theme--framework .gfield--type-image_choice.gfield--image-choice-appearance-card .gchoice:where(:has(input:checked))::after {
	background-color: var(--wc-img-modal-hover, #c06829) !important;
}


/* ==========================================================================
   3b. Image Choice Cards - equal heights
   ==========================================================================

   Gravity Forms lays the choice cards out in a flex row (align-items:normal,
   i.e. stretch) but then sets align-self:start on each .gchoice. That
   overrides the stretch, so every card sizes to its own label: a one-line
   label produces a shorter card than a two-line label sitting beside it.

   Restoring stretch makes all cards in a row match the tallest, which keeps
   the Door Inserts, Door Layout, Frame Colour and Track Selection grids even
   regardless of how long the option names are.
   ========================================================================== */

.gform-theme--framework .gfield--type-image_choice .gfield_radio > .gchoice,
.gform-theme--framework .gfield--type-image_choice .gfield_checkbox > .gchoice {
	align-self: stretch;
}


/* ==========================================================================
   4. Custom Column Layouts
   ========================================================================== */

.custom-col.two-col .ginput_container .gchoice,
.custom-col.four-col .ginput_container .gchoice,
.custom-col.three-col .ginput_container .gchoice {
	max-inline-size: initial;
	min-inline-size: initial;
	max-width: calc(50% - 11px);
}

@media (min-width: 1024px) {

	.custom-col.three-col .ginput_container .gchoice {
		max-width: calc(33.333% - 11px);
	}
}

@media (min-width: 1600px) {

	.custom-col.four-col .ginput_container .gchoice {
		max-width: calc(25% - 11px);
	}

	.custom-col.four-col .ginput_container .gchoice label {
		font-size: 11px;
	}
}


/* ==========================================================================
   5. Disabled Options
   ========================================================================== */

.gfield-choice-disabled {
	pointer-events: none;
	cursor: not-allowed !important;
}

.gfield-choice-disabled label {
	color: #999 !important;
}

.gfield-choice-disabled img {
	filter: grayscale(100%);
}


/* ==========================================================================
   6. Variation Unavailable Message
   ========================================================================== */

#wc-variation-unavailable-message {
	animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {

	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* ==========================================================================
   7. Measurement Input Suffix ("mm")
   ========================================================================== */

.gfield.suffix-mm .ginput_container_number {
	position: relative;
}

.gfield.suffix-mm .ginput_container_number input::placeholder {
	color: #888;
}

.gfield.suffix-mm .ginput_container_number::before {
	content: 'mm';
	position: absolute;
	left: 70%;
	top: 12px;
	color: #666;
	pointer-events: none;
	font-size: 14px;
	line-height: 1;
}

.gfield.suffix-mm .ginput_container_number input {
	padding-right: 45px;
	box-sizing: border-box;
}

.gfield.suffix-mm .gfield_description.instruction {
	display: none;
}

.measurements-top-message span {
	display: flex;
	align-items: center;
	column-gap: 5px;
}

.measurements-top-message img.measure-icon-guide {
	max-width: 30px !important;
}


/* ==========================================================================
   8. Product Totals
   ========================================================================== */

.product_totals .gform_fields {
	display: flex;
	justify-content: flex-start;
	gap: 50px;
	margin-bottom: 20px;
}

.product_totals ul.gform_fields li.gfield{
    flex-direction:column;
    border:none !important;
}

.product_totals .gform_fields .gfield_label {
	color: #c06829 !important;
	font-size: 1.35rem;
	font-weight: bold;
	margin-bottom: 5px;
}

.product_totals .gform_fields .ginput_total {
	font-size: 1.25rem;
	font-weight: 500;
	color:#303133 !important;
}

.product_totals ul li.wcgfpa_grand_total{
    padding-top: 5px !important;
    margin-top: 0 !important;
    padding-bottom:5px;
}


.product_totals .gform_fields .gfield p.price{
    color: #c06829 !important;
	font-size: 1.35rem;
	font-weight: bold;
	margin-bottom: 5px;
}

.product_totals .gform_fields .gfield p.price span.ginput_total{
    font-size: 1.25rem;
    font-weight: 500;
    color:#303133 !important;
    display:block;
    width:100%;
    padding-top:5px;
}





@media (max-width: 1024px) {
	.product_totals .gform_fields .gfield_label {
		font-size: 1rem;
	}
}


/* ==========================================================================
   9. Modal Trigger Wrappers inside GF Fields
      Base wrapper styles are in frontend.css (Modal System);
      these are GF-context overrides for positioning.
   ========================================================================== */

.gform-theme .configurator-info-modal-wrapper,
.gform-theme .configurator-img-modal-wrapper {
	position: relative;
	display: flex;
	gap: 7px;
	align-items: flex-end;
}

.gform-theme .configurator-info-modal-wrapper .open-configurator-info-modal {
	padding: 10px 15px !important;
	display: block !important;
	border-radius: 50% !important;
	position: absolute;
	right: -40px;
	transform: scale(0.7);
}

.gform-theme fieldset .configurator-info-modal-wrapper .open-configurator-info-modal {
	/* top:12px */
}

.gform-theme .configurator-img-modal-wrapper .open-configurator-img-modal {
	padding: 10px 15px !important;
	display: block !important;
	border-radius: 50% !important;
	position: absolute;
	left: 5px;
	bottom: 5px;
}

.gform-theme .configurator-img-modal-wrapper .open-configurator-img-modal i {
	position: absolute;
	top: 10px;
	right: 9px;
}

/* Track-selection and checkbox: position wrapper absolutely */
.gform_wrapper legend {
	position: relative;
}

.gform_wrapper legend .configurator-info-modal-wrapper {
	position: absolute;
	right: 0;
	top: 30px; 
}


.gform-theme .ginput_container_checkbox .configurator-info-modal-wrapper .open-configurator-info-modal {
	right: 0
}


.has-config-product-options tr:has([for="pa_material"]),
.has-config-product-options tr:has([for="pa_height-width"]) {
	opacity: 0.4;
	display: none;
}

.has-config-product-options .gfield-image-choice-wrapper-outer .gfield-choice-input {
	display: none !important;
}