/* PN Pre-Built Products Styles - Updated with Higher Specificity */

/* Fix label selectors to match actual HTML */
body.single-product label[for="pn_ppc_audience_file_field"],
body.single-product label[for="pn_ppc_design_file_field"] {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: #005082 !important;
    margin-bottom: 10px !important;
    display: block !important;
}

/* Main wrapper with higher specificity */
body.single-product #pn-ppc-custom-fields-wrapper {
    margin-bottom: 20px !important;
    width: 100% !important;
    clear: both !important;
}

/* Field groups */
body.single-product .pn-ppc-field-group {
    margin-bottom: 25px !important;
    width: 100% !important;
    background: #f9f9f9 !important;
    padding: 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
}

/* Main section labels */
body.single-product label.pn-ppn-label {
    font-weight: 700 !important;
    font-size: 1.8rem !important;
    margin-bottom: 15px !important;
    line-height: 1 !important;
    display: block !important;
    color: #333 !important;
}

/* Campaign date wrapper */
body.single-product #pn-ppc-campaign-date-wrapper {
    background: #f8f9fa !important;
    border-radius: 6px !important;
    padding: 15px !important;
}

body.single-product #pn-ppc-campaign-date-wrapper input[type="text"] {
    width: 100% !important;
    max-width: 350px !important;
    padding: 12px 15px !important;
    border: 2px solid #005082 !important;
    border-radius: 6px !important;
    font-size: var(--default-font-size,var(--text-m)) !important;
    background: #fff !important;
    color: #333 !important;
}

/* Radio button containers */
body.single-product .on--design-options-wrapper,
body.single-product #pn--product-audience-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 15px 0 !important;
}

/* Radio button labels with higher specificity */
body.single-product .on--design-options-wrapper label,
body.single-product #pn--product-audience-options label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: var(--default-font-size,var(--text-s)) !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    margin-bottom: 8px !important;
    padding: 12px 15px !important;
    border: 2px solid #ddd;
    border-radius: 6px !important;
    background: #fff !important;
    transition: all 0.3s ease !important;
    min-height: 50px !important;
}
body.single-product #pn--product-audience-options form label{
    font-size: var(--default-font-size,var(--text-m)) !important;
}

body.single-product .on--design-options-wrapper label:hover,
body.single-product #pn--product-audience-options label:hover {
    background: #f0f8ff !important;
    border-color: #005082 !important;
}

/* Radio buttons */
body.single-product .on--design-options-wrapper input[type="radio"],
body.single-product #pn--product-audience-options input[type="radio"] {
    margin: 0 !important;
    width: 20px !important;
    height: 20px !important;
    accent-color: #005082 !important;
    flex-shrink: 0 !important;
    appearance: none;
}
/*.woocommerce input[type=radio] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 24px;
    height: 24px;
    background: #fff;
    border: 1px solid #d3ced2;
    border-radius: 100%;
    outline: none;
    cursor: pointer;
}*/
/* Checked state styling */

body.single-product .on--design-options-wrapper input[type="radio"]:checked + span,
body.single-product #pn--product-audience-options input[type="radio"]:checked + span {
    font-weight: 700 !important;
    color: #005082 !important;
}
body.single-product label.selected{
    border: 2px solid #005082 !important;
}
/* File upload areas */
body.single-product #pn--upload_audience_wrapper,
body.single-product #pn-ppc-image-upload-wrapper {
    border: 2px dashed #005082 !important;
    margin: 20px 0 !important;
    min-height: 100px !important;
    display: flex;
    flex-direction: column !important;
    padding: 20px !important;
    background-color: #f0f8ff !important;
    border-radius: 8px !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

body.single-product #pn--upload_audience_wrapper label,
body.single-product #pn-ppc-image-upload-wrapper label {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
    display: block !important;
    color: #005082 !important;
}

body.single-product #pn--upload_audience_wrapper input[type="file"],
body.single-product #pn-ppc-image-upload-wrapper input[type="file"] {
    padding: 10px !important;
    border: 1px solid #005082 !important;
    border-radius: 4px !important;
    background-color: white !important;
    width: 100% !important;
    max-width: 500px !important;
    font-size: 1.5rem !important;
}

/* Form rows */
body.single-product #pn-ppc-custom-fields-wrapper .form-row.pn-ppc-form-row {
    margin-bottom: 15px !important;
    width: 100% !important;
}

/* Template gallery */
body.single-product #pn-ppc-template-gallery-wrapper {
    margin: 20px 0 !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    padding: 20px !important;
    background-color: #fff !important;
	max-height:600px !important;
	overflow:scroll !important;
}

/* Style the grid--3 container */
body.single-product #pn-ppc-template-gallery-wrapper .grid--3 {
    gap: 20px !important;
    padding: 0 !important;
}

/* All the existing styles with body.single-product prefix for higher specificity */
body.single-product .oxy-product-price,
body.single-product .simpleshopmessage {
    width: 100% !important;
}

body.single-product #pn-ppc-custom-fields-wrapper .ui-datepicker-multi .ui-datepicker-group table {
    margin-top: 10px !important;
}

body.single-product #pn-ppc-custom-fields-wrapper .ui-datepicker-multi-3 .ui-datepicker-group {
    width: 32% !important;
    margin-right: 10px;
}

body.single-product #pn-ppc-custom-fields-wrapper .ui-datepicker-multi-3 .ui-datepicker-group.ui-datepicker-group-last {
    margin-right: 0 !important;
}
/*
 * Fix for Datepicker Month Dropdown Color
 * This selector is more specific to override Oxygen's universal.css styles.
 */
.ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all .ui-datepicker-title select {
    font-size: 15px !important;
    color: #000 !important; /* Or your desired color */
}
body.single-product #pn-ppc-custom-fields-wrapper .ui-widget.ui-widget-content {
    width: 15em !important;
}

body.single-product #pn-ppc-custom-fields-wrapper .ui-datepicker-calendar th span {
    font-size: 10px !important;
}

body.single-product .single_add_to_cart_button {
    margin-top: 3rem !important;
    padding: 15px 30px !important;
    font-size: 1.2rem !important;
    background: #005082 !important;
    border: none !important;
    border-radius: 6px !important;
    color: white !important;
    font-weight: 600 !important;
}

body.single-product #pn--product-design-options,
body.single-product .pn-audience-wrapper {
    margin-top: 0.5rem;
    margin-bottom: 0;
    width: 100%;
}


body.single-product #pn-ppc-custom-fields-wrapper .ui-button {
    padding: 0.5em 1em;
    font-weight: bold !important;
}

body.single-product #pn-ppc-custom-fields-wrapper .ui-datepicker table {
    font-size: 0.75em;
}

body.single-product #pn-ppc-custom-fields-wrapper .ui-datepicker .ui-datepicker-header {
    font-size: 1.325rem;
    margin-left: 2px;
}

body.single-product #pn-ppc-custom-fields-wrapper .ui-datepicker-calendar tr a,
body.single-product #pn-ppc-custom-fields-wrapper table td.label,
body.single-product #pn-ppc-custom-fields-wrapper table td.value {
    line-height: 1.5rem !important;
}

body.single-product #pn-ppc-custom-fields-wrapper .ui-state-active,
body.single-product #pn-ppc-custom-fields-wrapper .ui-widget-content .ui-state-active,
body.single-product #pn-ppc-custom-fields-wrapper .ui-widget-header .ui-state-active,
body.single-product #pn-ppc-custom-fields-wrapper a.ui-button:active,
body.single-product #pn-ppc-custom-fields-wrapper .ui-button:active,
body.single-product #pn-ppc-custom-fields-wrapper .ui-button.ui-state-active:hover {
    border-color: #005082 !important;
    background-color: #f0f0f0 !important;
}
body.single-product #pn-ppc-custom-fields-wrapper .ui-datepicker-header .ui-datepicker-title select{
    color: black !important;
}

body.single-product #pn-ppc-custom-fields-wrapper .ginput_container.ginput_container_radio {
    max-height: none !important;
    overflow: visible !important;
    border: none !important;
    padding: 0 !important;
}

body.single-product #pn-ppc-custom-fields-wrapper .image-choices-choice label {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    cursor: pointer !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

body.single-product #pn-ppc-custom-fields-wrapper .gfield_radio.gform-theme__no-reset--children {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

body.single-product #pn-ppc-custom-fields-wrapper .image-choices-choice {
    width: 100% !important; /* Let Automatic.CSS grid control the width */
    height: auto !important;
    min-height: 280px !important;
    margin: 0 !important; /* Remove margins since grid gap/Automatic.CSS handles spacing */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    border: 2px solid #ddd !important;
    border-radius: 8px !important;
    padding: 15px !important;
    background: #fff !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
/* Hover effect for template choices */
body.single-product #pn-ppc-custom-fields-wrapper .image-choices-choice:hover {
    border-color: #005082 !important;
    box-shadow: 0 4px 16px rgba(0, 80, 130, 0.15) !important;
    transform: translateY(-2px) !important;
}
/* Selected state styling */
body.single-product #pn-ppc-custom-fields-wrapper .image-choices-choice.image-choices-choice-selected {
    border-color: #005082 !important;
    background: #f0f8ff !important;
    box-shadow: 0 4px 20px rgba(0, 80, 130, 0.2) !important;
}
/* Ensure images fit properly within the grid cells */
body.single-product #pn-ppc-custom-fields-wrapper .image-choices-choice-image-wrap {
    width: 100% !important;
    height: 180px !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 6px !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
    border: 1px solid #eee !important;
}

body.single-product #pn-ppc-custom-fields-wrapper .image-choices-choice.image-choices-choice-selected label:before {
    content: "✔" !important;
    font-family: "Font Awesome 5 Pro", serif;
    color: green;
    background-color: #fff;
    border-radius: 5px;
    top: 10px;
    bottom: auto;
    width: 30px;
    height: 30px;
    display: block !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 27px;
    text-align: center;
    position: absolute;
    right: 10px;
    border: 2px solid;
}
body.single-product #pn-ppc-custom-fields-wrapper .image-choices-choice-image {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    transition: transform 0.3s ease !important;
}
body.single-product #pn-ppc-custom-fields-wrapper .image-choices-choice:hover .image-choices-choice-image {
    transform: scale(1.02) !important;
}

/* Style the text labels */
body.single-product #pn-ppc-custom-fields-wrapper .image-choices-choice-text {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333 !important;
    margin-top: 10px !important;
    line-height: 1.4 !important;
    text-align: center !important;
    padding: 0 8px !important;
}

body.single-product .oxy-product-cart-button,
body.single-product .oxy-woo-element div.product form.cart {
    width: 100% !important;
    max-width: 100% !important;
}

body.single-product #pn-ppc-custom-fields-wrapper .image-choices-field .image-choices-choice input[type=checkbox],
body.single-product #pn-ppc-custom-fields-wrapper .image-choices-field .image-choices-choice input[type=radio] {
    visibility: hidden;
    position: absolute;
    left: -9999px;
}

body.single-product #pn-ppc-custom-fields-wrapper .chosen-container,
body.single-product .chosen-container-single .chosen-single {
    height: 36px;
}

body.single-product #pn-ppc-custom-fields-wrapper .chosen-container-single .chosen-single span {
    line-height: 32px;
}

body.single-product #pn-ppc-custom-fields-wrapper .chosen-container-single .chosen-single div b {
    background-position-y: 9px;
}

body.single-product #pn-ppc-custom-fields-wrapper div.quantity {
    display: none !important;
}

/* Oxygen Builder specific overrides */
body.single-product .oxy-product-cart-button #pn-ppc-custom-fields-wrapper {
    margin: 0 !important;
}

body.single-product .oxy-woo-element #pn-ppc-custom-fields-wrapper {
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Ensure proper display for conditionally shown/hidden elements */
body.single-product #pn-ppc-template-gallery-wrapper[style*="display: none"],
body.single-product #pn--upload_audience_wrapper[style*="display: none"] {
    display: none !important;
}

body.single-product #pn-ppc-image-upload-wrapper[style*="display: block"] {
    display: flex !important;
    flex-direction: column !important;
}
body.single-product #pn-ppc-custom-fields-wrapper .image-choices-lightbox-btn {
    text-decoration: none !important;
    font-weight: 700 !important;
    width: 32px !important;
    height: 32px !important;
    overflow: hidden !important;
    text-align: center !important;
    line-height: 32px !important;
    display: block !important;
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    color: #fff !important;
    background-color: rgba(0, 80, 130, 0.8) !important;
    font-size: 18px !important;
    z-index: 10 !important;
    text-indent: -99999px !important;
    border-radius: 50% !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.3s ease !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='71' height='71' viewBox='0 0 71 71' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M69.5 62.3c1.8 1.8 1.8 4.6.1 6.4-1.8 1.8-4.6 1.8-6.4 0L46.4 51.9C35.2 60 19.4 59.1 9.3 49-1.9 37.8-1.9 19.6 9.3 8.4c11.2-11.2 29.4-11.2 40.6 0 10.1 10.1 11 25.9 2.9 37.1l16.7 16.8zM13.8 44.5c8.7 8.7 22.9 8.7 31.6 0 8.7-8.7 8.7-22.9 0-31.6-8.7-8.7-22.9-8.7-31.6 0-8.7 8.7-8.7 22.9 0 31.6zM41 25.4c1.8 0 3.3 1.5 3.4 3.4 0 1.9-1.6 3.4-3.4 3.4h-8v8c0 1.9-1.6 3.4-3.4 3.4-1.9 0-3.4-1.6-3.4-3.4v-8h-8c-1.9 0-3.4-1.6-3.4-3.4 0-1.9 1.6-3.4 3.4-3.4h8v-8c0-1.9 1.6-3.4 3.4-3.4 1.9 0 3.4 1.6 3.4 3.4v8h8z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E") !important;
    background-size: 16px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
body.single-product #pn-ppc-custom-fields-wrapper .image-choices-lightbox-btn:hover {
    background-color: #005082 !important;
    transform: scale(1.1) !important;
}