/* SignHQ Product Suite - Global Styles */

/* ============================================
   HIDE WOOCOMMERCE DEFAULT ELEMENTS
   Only when our SignHQ form is active (body class added)
   ============================================ */

/* Hide ShopEngine widgets when our form is active */
body.signhq-product-form-active .elementor-widget-shopengine-product-meta,
body.signhq-product-form-active .elementor-widget-shopengine-product-title,
body.signhq-product-form-active .elementor-widget-shopengine-product-stock,
body.signhq-product-form-active .elementor-widget-shopengine-product-price,
body.signhq-product-form-active .shopengine-product-meta,
body.signhq-product-form-active .shopengine-product-title,
body.signhq-product-form-active .shopengine-product-stock,
body.signhq-product-form-active .shopengine-product-price {
    display: none !important;
}

/* Hide wishlist and comparison buttons when our form is active */
body.signhq-product-form-active .shopengine_add_to_list_action,
body.signhq-product-form-active .shopengine-wishlist,
body.signhq-product-form-active .shopengine_comparison_add_to_list_action,
body.signhq-product-form-active .shopengine-comparison,
body.signhq-product-form-active button[class*="shopengine-wishlist"],
body.signhq-product-form-active a[class*="shopengine-comparison"] {
    display: none !important;
}

/* Hide default quantity and add to cart button when our form is active */
body.signhq-product-form-active form.cart > .quantity,
body.signhq-product-form-active form.cart > .single_add_to_cart_button:not(.signhq-letters-button):not(.signhq-illuminated-button):not(.signhq-tray-button):not(.button-style1-green),
body.signhq-product-form-active form.cart > button.single_add_to_cart_button:not(.signhq-letters-button):not(.signhq-illuminated-button):not(.signhq-tray-button):not(.button-style1-green) {
    display: none !important;
}

/* Hide default WooCommerce variations form when our form is active */
body.signhq-product-form-active form.variations_form,
body.signhq-product-form-active .variations_form,
body.signhq-product-form-active .variations,
body.signhq-product-form-active .single_variation_wrap,
body.signhq-product-form-active .woocommerce-variation-add-to-cart {
    display: none !important;
}

/* Hide default quantity input everywhere when our form is active */
body.signhq-product-form-active .quantity,
body.signhq-product-form-active input.qty,
body.signhq-product-form-active input[type="number"].qty,
body.signhq-product-form-active .woocommerce-quantity,
body.signhq-product-form-active .quantity-wrapper,
body.signhq-product-form-active .elementor-widget-woocommerce-product-add-to-cart .quantity,
body.signhq-product-form-active .shopengine-add-to-cart .quantity,
body.signhq-product-form-active form.cart:not(.signhq-product-config-form) .quantity {
    display: none !important;
}

/* Hide WooCommerce default product attributes display */
.woocommerce-product-attributes,
.product_meta,
table.woocommerce-product-attributes,
.woocommerce-product-details__short-description + .woocommerce-product-attributes {
    display: none !important;
}

/* Hide product meta that appears before our form */
.panel ~ .product_meta,
.panel ~ .woocommerce-product-attributes,
.panel ~ table.woocommerce-product-attributes,
.signhq-letters-panel ~ .product_meta,
.signhq-illuminated-panel ~ .product_meta,
.signhq-tray-panel ~ .product_meta {
    display: none !important;
}

/* Hide default WooCommerce add to cart, quantity, and wishlist - but NOT our custom buttons */
form.cart > .single_add_to_cart_button:not(.signhq-letters-button):not(.signhq-illuminated-button):not(.signhq-tray-button):not(.button-style1-green),
form.cart > button[type="submit"]:not(.signhq-letters-button):not(.signhq-illuminated-button):not(.signhq-tray-button):not(.button-style1-green),
form.cart > input[type="submit"]:not(.signhq-letters-button):not(.signhq-illuminated-button):not(.signhq-tray-button):not(.button-style1-green),
form.cart > .quantity,
form.cart > .qty,
form.cart .quantity:not(.signhq-quantity),
form.cart .qty:not(.signhq-qty),
form.cart > .woocommerce-variation-add-to-cart,
form.cart .woocommerce-variation-add-to-cart,
form.cart > .tinv-wraper,
form.cart .tinv-wraper,
form.cart .yith-wcwl-add-to-wishlist,
form.cart .wishlist-button,
form.cart .add-to-wishlist,
.product form.cart .single_add_to_cart_button:not(.signhq-letters-button):not(.signhq-illuminated-button):not(.signhq-tray-button):not(.button-style1-green),
.product form.cart button[type="submit"]:not(.signhq-letters-button):not(.signhq-illuminated-button):not(.signhq-tray-button):not(.button-style1-green),
.product form.cart .quantity:not(.signhq-quantity),
.product form.cart .qty:not(.signhq-qty),
.product .tinv-wraper,
.product .yith-wcwl-add-to-wishlist,
.product .wishlist-button,
.summary form.cart .single_add_to_cart_button:not(.signhq-letters-button):not(.signhq-illuminated-button):not(.signhq-tray-button):not(.button-style1-green),
.summary form.cart .quantity:not(.signhq-quantity),
.summary form.cart .qty:not(.signhq-qty),
.summary > .tinv-wraper,
.summary > .yith-wcwl-add-to-wishlist,
/* NOTE: Body class .signhq-product-form-active is used for conditional hiding above */

/* ============================================
   ENSURE FORMS ARE VISIBLE
   ============================================ */

form.cart.signhq-product-config-form,
.signhq-letters-panel,
.signhq-illuminated-panel,
.signhq-tray-panel,
.panel {
    display: block !important;
    visibility: visible !important;
}

/* ============================================
   COMMON PANEL STYLES
   ============================================ */

.panel,
.signhq-letters-panel,
.signhq-illuminated-panel,
.signhq-tray-panel {
    width: 600px;
    margin: 20px 0;
}

.panel-head,
.signhq-letters-panel-head,
.signhq-illuminated-panel-head,
.signhq-tray-panel-head {
    background: #0071a1;
    color: white;
    padding: 15px 20px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 5px 5px 0 0;
}

.panel-body,
.signhq-letters-panel-body,
.signhq-illuminated-panel-body,
.signhq-tray-panel-body {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 5px 5px;
}

/* ============================================
   ERROR DIV
   ============================================ */

.errorDiv,
.signhq-letters-errorDiv,
.signhq-illuminated-errorDiv,
.signhq-tray-errorDiv {
    width: 100%;
    border-left: 2px solid #f01616;
    background-color: #fff2f2;
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 20px;
    display: none;
}

/* ============================================
   GROUP STYLES (Generic Product Configuration)
   ============================================ */

.group {
    margin-bottom: 20px;
}

.group-head {
    margin-bottom: 12px;
}

.group-head .number {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: #0071a1;
    color: white;
    border-radius: 50%;
    font-weight: bold;
    margin-right: 10px;
}

.group-head h1,
.signhq-product-config-form .group-head h1,
.panel .group-head h1,
body.signhq-product-form-active .group-head h1 {
    display: inline-block;
    margin: 0;
    font-size: 25px !important;
    font-weight: 600 !important;
    text-transform: capitalize;
    line-height: 1.2 !important;
}

.group-head p {
    margin: 8px 0 0 38px;
    font-size: 13px;
    color: #666;
}

.group-body {
    margin-top: 15px;
}

.group-body strong {
    display: inline-block;
    min-width: 80px;
    margin-right: 10px;
}

.group-body input[type="number"],
.group-body input[type="text"],
.group-body select {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
}

.group-body input[type="number"] {
    width: 125px;
    display: inline-block;
}

.group-body input[type="text"] {
    width: 250px;
}

.group-body select {
    padding: 3px;
    min-width: 200px;
    margin-right: 10px;
}

.cost {
    font-size: 22px;
    padding: 0 0 10px 0;
    font-weight: 600;
    color: #0071a1;
}

/* ============================================
   BUTTON STYLES
   ============================================ */

.button-style1-green {
    background: #0071a1;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.button-style1-green:hover {
    background: #005177;
}

/* ============================================
   COLOR SELECTION BOXES (Generic Product Configuration)
   ============================================ */

.signhq-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.signhq-color-btn {
    display: inline-block;
    cursor: pointer;
    padding: 10px 15px;
    border: 2px solid #ddd;
    border-radius: 5px;
    background: white;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    transition: all 0.2s ease;
}

.signhq-color-btn:hover {
    border-color: #0071a1;
    background-color: #f0f8ff;
}

.signhq-color-btn.selected {
    border-color: #0071a1;
    background-color: #0071a1;
    color: white;
    font-weight: 600;
}

.signhq-subsection {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.signhq-subsection:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* ============================================
   FLAT CUT LETTERS SPECIFIC STYLES
   ============================================ */

.signhq-letters-group {
    margin-bottom: 20px;
}

.signhq-letters-group-head {
    margin-bottom: 12px;
}

.signhq-letters-group-head .number {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: #0071a1;
    color: white;
    border-radius: 50%;
    font-weight: bold;
    margin-right: 10px;
}

.signhq-letters-group-head h1,
body.signhq-product-form-active .signhq-letters-group-head h1 {
    display: inline-block;
    margin: 0;
    font-size: 25px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-transform: capitalize;
}

.signhq-letters-group-head p {
    margin: 8px 0 0 38px;
    font-size: 13px;
    color: #666;
}

.signhq-letters-group-body {
    margin-top: 15px;
}

.signhq-letters-group-body strong {
    display: inline-block;
    min-width: 80px;
    margin-right: 10px;
}

.signhq-letters-dimension-row {
    margin-bottom: 15px;
}

.signhq-letters-dimension-row input[type="number"] {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
    width: 125px;
    display: inline-block;
    margin-left: 10px;
}

.signhq-letters-letter-count {
    margin-top: 10px;
    font-size: 14px;
}

.signhq-letters-material-select {
    margin-bottom: 15px;
}

.signhq-letters-material-select select {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
    min-width: 200px;
}

.signhq-letters-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.signhq-letters-color-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 5px;
    background: white;
    transition: all 0.2s ease;
}

.signhq-letters-color-btn:hover {
    border-color: #0071a1;
}

.signhq-letters-color-btn.selected {
    border-color: #0071a1;
    background-color: #f0f8ff;
}

.signhq-letters-color-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-bottom: 5px;
}

.signhq-letters-color-name {
    font-size: 12px;
    text-align: center;
    font-weight: 500;
}

.signhq-letters-group-body select {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
    min-width: 200px;
}

.signhq-letters-cost {
    font-size: 22px;
    padding: 0 0 10px 0;
    font-weight: 600;
    color: #0071a1;
}

.signhq-letters-button {
    background: #0071a1;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.signhq-letters-button:hover {
    background: #005177;
}

/* ============================================
   ILLUMINATED LETTERS SPECIFIC STYLES
   ============================================ */

.signhq-illuminated-group {
    margin-bottom: 20px;
}

.signhq-illuminated-group-head {
    margin-bottom: 12px;
}

.signhq-illuminated-group-head .number {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: #0071a1;
    color: white;
    border-radius: 50%;
    font-weight: bold;
    margin-right: 10px;
}

.signhq-illuminated-group-head h1,
body.signhq-product-form-active .signhq-illuminated-group-head h1 {
    display: inline-block;
    margin: 0;
    font-size: 25px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-transform: capitalize;
}

.signhq-illuminated-group-head p {
    margin: 8px 0 0 38px;
    font-size: 13px;
    color: #666;
}

.signhq-illuminated-group-body {
    margin-top: 15px;
}

.signhq-illuminated-group-body strong {
    display: inline-block;
    min-width: 80px;
    margin-right: 10px;
}

.signhq-illuminated-dimension-row {
    margin-bottom: 15px;
}

.signhq-illuminated-dimension-row input[type="number"] {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
    width: 125px;
    display: inline-block;
    margin-left: 10px;
}

.signhq-illuminated-letter-count {
    margin-top: 10px;
    font-size: 14px;
}

.signhq-illuminated-section-label {
    margin-bottom: 10px;
    font-weight: 600;
}

.signhq-illuminated-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.signhq-illuminated-color-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 5px;
    background: white;
    transition: all 0.2s ease;
}

.signhq-illuminated-color-btn:hover {
    border-color: #0071a1;
}

.signhq-illuminated-color-btn.selected {
    border-color: #0071a1;
    background-color: #f0f8ff;
}

.signhq-illuminated-color-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-bottom: 5px;
}

.signhq-illuminated-color-name {
    font-size: 12px;
    text-align: center;
    font-weight: 500;
}

.signhq-illuminated-group-body select {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
    min-width: 200px;
}

.signhq-illuminated-cost {
    font-size: 22px;
    padding: 0 0 10px 0;
    font-weight: 600;
    color: #0071a1;
}

.signhq-illuminated-button {
    background: #0071a1;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.signhq-illuminated-button:hover {
    background: #005177;
}

/* Conditional section for acrylic back (Halo/Face+Halo) */
.signhq-illuminated-conditional-section {
    display: none;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

.signhq-illuminated-conditional-section.visible {
    display: block;
    opacity: 1;
    max-height: 1000px;
}

/* ============================================
   SIGN TRAY SPECIFIC STYLES
   ============================================ */

.signhq-tray-group {
    margin-bottom: 20px;
}

.signhq-tray-group-head {
    margin-bottom: 12px;
}

.signhq-tray-group-head .number {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: #0071a1;
    color: white;
    border-radius: 50%;
    font-weight: bold;
    margin-right: 10px;
}

.signhq-tray-group-head h1,
body.signhq-product-form-active .signhq-tray-group-head h1 {
    display: inline-block;
    margin: 0;
    font-size: 25px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-transform: capitalize;
}

.signhq-tray-group-head p {
    margin: 8px 0 0 38px;
    font-size: 13px;
    color: #666;
}

.signhq-tray-group-body {
    margin-top: 15px;
}

.signhq-tray-group-body strong {
    display: inline-block;
    min-width: 80px;
    margin-right: 10px;
}

.signhq-tray-dimension-row {
    margin-bottom: 15px;
}

.signhq-tray-dimension-row input[type="number"] {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
    width: 125px;
    display: inline-block;
    margin-left: 10px;
}

.signhq-tray-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.signhq-tray-color-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 5px;
    background: white;
    transition: all 0.2s ease;
}

.signhq-tray-color-btn:hover {
    border-color: #0071a1;
}

.signhq-tray-color-btn.selected {
    border-color: #0071a1;
    background-color: #f0f8ff;
}

.signhq-tray-color-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-bottom: 5px;
}

.signhq-tray-color-name {
    font-size: 12px;
    text-align: center;
    font-weight: 500;
}

.signhq-tray-group-body select {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
    min-width: 200px;
}

.signhq-tray-cost {
    font-size: 22px;
    padding: 0 0 10px 0;
    font-weight: 600;
    color: #0071a1;
}

.signhq-tray-button {
    background: #0071a1;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.signhq-tray-button:hover {
    background: #005177;
}

/* ============================================
   HELP/CLICK4HELP STYLES
   ============================================ */

.click4help {
    margin-left: 5px;
    cursor: pointer;
}

.c4hbody {
    display: none;
    margin: 10px 0;
    padding: 10px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 12px;
}

.c4hbody img {
    max-width: 100%;
    height: auto;
    margin: 5px 0;
}