/*
Theme Name: Custom Theme
Theme URI: https://fiatinsight.com/kadence-child/
Template: kadence
Author: Fiat Insight
Author URI: https://fiatinsight.com/
Description: A custom theme built to leverage Kadence WP.
Version: 1.0.0
Text Domain: kadence-child
*/

/* Theme customization starts here
-------------------------------------------------------------- */
.featherlight .featherlight-content.lightbox-941 {
    border: 10px solid #b8b7b7 !important; /* Reference border */
    padding: 0 !important;
    width: 600px;
    height: 410px;
}

.featherlight-content .hotspot-content > p {
    display: none !important;
}

/* This is the main container for your modal's content */
.tank-part-modal-product {
    padding: 5px 25px;
    max-width: 580px; /* Width from reference image */
    width: 100%; /* Ensure it can shrink if container is smaller */
    margin-left: auto; /* Centering if modal is block */
    margin-right: auto; /* Centering if modal is block */
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; /* Common sans-serif stack */
}

/* Apply box-sizing to all children for consistency */
.tank-part-modal-product *,
.tank-part-modal-product *::before,
.tank-part-modal-product *::after {
    box-sizing: border-box;
}

.tank-part-modal-product .modal-title {
    text-align: center;
    font-size: 38px;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 10px;
    color: #000000;
}

/* --- CRITICAL FOR TWO-COLUMN LAYOUT --- */
.tank-part-modal-product .modal-content-area {
    display: flex !important; /* ADD !IMPORTANT FOR TESTING - REMOVE IF NOT NEEDED LATER */
    flex-wrap: nowrap;
    gap: 25px; /* Space between columns */
    align-items: flex-start; /* Align items to the top of the flex container */
    /* DEBUG: Add a border to see if this flex container is working */
    /* border: 2px solid red !important; */
}

.tank-part-modal-product .modal-image-column {
    flex: 0 0 220px; /* Fixed width for the image column + some padding */
    display: flex;
    flex-direction: column;
    border-right: 2px #b8b7b7 solid;
    padding-right: 25px;
}

.tank-part-modal-product .tank-part-modal-image {
    width: 250px; /* Image container width */
    height: 150px; /* Image container height */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    overflow: hidden;
}

.tank-part-modal-product .tank-part-modal-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.tank-part-modal-product .tank-part-modal-image .no-image-placeholder {
    font-size: 14px;
    color: #777777;
    text-align: center;
    padding: 10px;
}

.tank-part-modal-product .modal-image-column .part-sku {
    font-size: 20px; /* Reference font size */
    color: #000000;
    margin-top: 0;
    margin-bottom: 6px;
    word-break: break-word;
    line-height: 1.25;
    font-weight: 700;
}
.tank-part-modal-product .modal-image-column .part-sku strong a {
    font-weight: bold; /* Reference has bold SKU value */
    color: #0073aa; /* WordPress blue or your brand color */
}

.tank-part-modal-product .modal-image-column .part-name {
    font-size: 20px; /* Reference font size */
    color: #000000;
    line-height: 1.25;
    margin-top: 0;
    margin-bottom: 0;
    word-break: break-word;
}

.tank-part-modal-product .modal-details-column {
    flex: 1; /* Takes remaining space */
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Aligns content (price, form) to the right */
    margin-top: auto;
    margin-bottom: auto;
}

.tank-part-modal-product .modal-details-column .tank-part-modal-price {
    font-size: 28px; /* Reference price font size */
    font-weight: bold;
    color: #000000;
    text-align: center;
    width: 100%;
    line-height: 1.1;
}

.modal-content-area > p {
    display: none !important;  
}

/*.modal-details-column > p {
    display: none !important;
} */

.tank-part-add-to-cart-form > p:first-of-type {
    display: none !important;
}

.tank-part-modal-product .modal-details-column .tank-part-modal-price small { /* For "Each" */
    font-size: 24px; /* Smaller relative to price */
    font-weight: normal; /* Reference "Each" is not bold */
    color: #333333;
    margin-left: 4px;
    display: inline-block; /* Ensures vertical-align works well */
}

.tank-part-modal-product .tank-part-add-to-cart-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
}

.tank-part-modal-product .tank-part-add-to-cart-form .quantity-label {
    font-size: 18px; /* Reference label size */
    color: #333333;
    margin-bottom: 5px;
    font-weight: normal;
    text-align: right;
    width: 100%;
}

.tank-part-modal-product .tank-part-add-to-cart-form .quantity-input {
    width: 75px; /* Width for quantity input from reference */
    padding: 8px 10px; /* Padding from reference */
    text-align: center;
    border: 1px solid #000000; /* Border from reference */
    border-radius: 3px; /* Slight rounding */
    margin-bottom: 15px;
    font-size: 16px; /* Font size in input */
    color: #000000 !important;
}
/* Hide spinner buttons for number input */
.tank-part-modal-product .tank-part-add-to-cart-form .quantity-input::-webkit-outer-spin-button,
.tank-part-modal-product .tank-part-add-to-cart-form .quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.tank-part-modal-product .tank-part-add-to-cart-form .quantity-input[type=number] {
  -moz-appearance: textfield;
}

.tank-part-modal-product .tank-part-add-to-cart-form .add-to-cart-button {
    background-color: #072a4a; /* Dark blue from reference */
    color: white;
    border: none;
    padding: 10px 25px; /* Padding from reference */
    font-size: 16px; /* Font size from reference */
    font-weight: bold;
    border-radius: 3px; /* Slight rounding */
    cursor: pointer;
    text-transform: none;
    margin: 0;
    line-height: normal;
    min-width: 140px; /* Ensure button has decent width */
    text-align: center;
}
.tank-part-modal-product .tank-part-add-to-cart-form .add-to-cart-button:hover {
    background-color: #05457d;
    box-shadow: unset !important;
}
.tank-part-modal-product .tank-part-add-to-cart-form .add-to-cart-button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

.tank-part-modal-product .tank-part-cart-message {
    margin-top: 10px;
    font-size: 13px;
    text-align: right;
    width: 100%;
    min-height: 1.2em;
    color: green;
}
.tank-part-modal-product .tank-part-cart-message:not(:empty) {
    padding-top: 5px;
}
.tank-part-modal-product .tank-part-cart-message:has(a),
.tank-part-modal-product .tank-part-cart-message.error {
    color: red;
}

.tank-part-modal-product .modal-details-column .login-prompt,
.tank-part-modal-product .modal-details-column .product-unavailable-message {
    font-size: 14px;
    color: #555555;
    text-align: right;
    margin-top: 20px;
    width: 100%;
    line-height: 1.5;
}
.tank-part-modal-product .modal-details-column .login-prompt a {
    color: #072a4a;
    text-decoration: underline;
}

/* Styles for the "not stocking this part" message */
.tank-part-modal-product.tank-part-modal-not-stocked {
    padding: 30px;
}
.tank-part-modal-product.tank-part-modal-not-stocked p {
    line-height: 1.6;
    text-align: center;
}

/* Responsive adjustments */
@media (max-width: 600px) { /* Adjust breakpoint as needed */
    .tank-part-modal-product .modal-content-area {
        flex-direction: column; /* Stack columns on small screens */
        align-items: center; /* Center content when stacked */
    }
    .tank-part-modal-product .modal-image-column,
    .tank-part-modal-product .modal-details-column {
        flex-basis: auto; /* Allow columns to take full width */
        width: 100%;
        max-width: 320px; /* Prevent excessive width on small screens */
        align-items: center; /* Center content within each column */
    }
    .tank-part-modal-product .modal-details-column .tank-part-modal-price,
    .tank-part-modal-product .tank-part-add-to-cart-form,
    .tank-part-modal-product .modal-details-column .login-prompt,
    .tank-part-modal-product .modal-details-column .product-unavailable-message,
    .tank-part-modal-product .tank-part-add-to-cart-form .quantity-label,
    .tank-part-modal-product .tank-part-cart-message {
        align-items: center;
        text-align: center;
    }
    .tank-part-modal-product .tank-part-add-to-cart-form .add-to-cart-button {
        width: 100%;
        max-width: 280px;
    }
}