/*
 Theme Name:   Lifeline Market Theme
 Theme URI:    https://www.kadencewp.com/
 Description:  Lifeline Market Theme
 Author:       Louis-Philippe Manette
 Author URI:   https://www.lifeline-market.com
 Template:     kadence
 Version:      1.0.0
*/

.hidden {
    display: none;
}

.inline-radio > span {
    display:none;
}

.inline-radio .optional {
    display: none;
}

.inline-radio >  [type=checkbox], [type=radio] {
    display: none;
}

/* Text orientation */
.woocommerce .text-orientation-radio {
    margin: 0 !important;
}

.woocommerce .text-orientation-radio .woocommerce-input-wrapper label {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-right: 0px;
    cursor: pointer;
    width: 90px;
    text-align: center;
}

.woocommerce .text-orientation-radio .woocommerce-input-wrapper label::before {
    content: "";
    display: block;
    
    margin-top: 0;
    margin-bottom: 0;

    width: 70px;
    height: 70px;
    background-size: contain;
    background-repeat: no-repeat;
}

.woocommerce .text-orientation-radio .woocommerce-input-wrapper label:nth-of-type(1)::before {
    background-image: url('https://www.lifeline-market.com/wp-content/themes/kadence-child/assets/yokogaki.png');
}

.woocommerce .text-orientation-radio .woocommerce-input-wrapper label:nth-of-type(2)::before {
    background-image: url('https://www.lifeline-market.com/wp-content/themes/kadence-child/assets/tategaki.png');
}

/* Hanko frame style*/
.woocommerce .hanko-style-radio {
    margin: 0 !important;
}

.woocommerce .hanko-style-radio .woocommerce-input-wrapper label {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-right: 20px;
    cursor: pointer;
    width: 90px;
    text-align: center;
}

.woocommerce .hanko-style-radio .woocommerce-input-wrapper label::before {
    content: "";
    display: block;

    margin-top: 0;
    margin-bottom: 0px;

    width: 70px;
    height: 70px;
    background-size: contain;
    background-repeat: no-repeat;
}

.woocommerce .hanko-style-radio .woocommerce-input-wrapper label:nth-of-type(1)::before {
    background-image: url('https://www.lifeline-market.com/wp-content/themes/kadence-child/assets/simple_frame.png');
}

.woocommerce .hanko-style-radio .woocommerce-input-wrapper label:nth-of-type(2)::before {
    background-image: url('https://www.lifeline-market.com/wp-content/themes/kadence-child/assets/double_frame.png');
}

/* Hanko font style*/
.woocommerce .hanko-wstyle-radio {
    margin: 0 !important;
}

.woocommerce .hanko-wstyle-radio .woocommerce-input-wrapper label {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-right: 20px;
    cursor: pointer;
    width: 90px;
    text-align: center;
}

.woocommerce .hanko-wstyle-radio .woocommerce-input-wrapper label::before {
    content: "";
    display: block;

    margin-top: 0;
    margin-bottom: 0px;

    width: 70px;
    height: 70px;
    background-size: contain;
    background-repeat: no-repeat;
}


#hanko_wstyle_field .woocommerce-input-wrapper {
    display: flex;   /* Make the container a flexbox */
    flex-wrap: wrap; /* Allow items to wrap to the next line cleanly */
    gap: 15px;       /* The modern way to add space between all items */
}

/*
 * Target the individual options (the label for each radio button)
*/
#hanko_wstyle_field .woocommerce-input-wrapper label {
    /* These styles come from your previous code and are correct */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90px;
    text-align: center;
    cursor: pointer;
    margin: 0; /* Remove margin as 'gap' now handles spacing */
}


.woocommerce .hanko-wstyle-radio .woocommerce-input-wrapper label:nth-of-type(1)::before {
    background-image: url('https://www.lifeline-market.com/wp-content/themes/kadence-child/assets/古印体-夢.png');
}

.woocommerce .hanko-wstyle-radio .woocommerce-input-wrapper label:nth-of-type(2)::before {
    background-image: url('https://www.lifeline-market.com/wp-content/themes/kadence-child/assets/印相体-夢.png');
}

.woocommerce .hanko-wstyle-radio .woocommerce-input-wrapper label:nth-of-type(3)::before {
    background-image: url('https://www.lifeline-market.com/wp-content/themes/kadence-child/assets/楷書体-夢.png');
}

.woocommerce .hanko-wstyle-radio .woocommerce-input-wrapper label:nth-of-type(4)::before {
    background-image: url('https://www.lifeline-market.com/wp-content/themes/kadence-child/assets/行書体-夢.png');
}

.woocommerce .hanko-wstyle-radio .woocommerce-input-wrapper label:nth-of-type(5)::before {
    background-image: url('https://www.lifeline-market.com/wp-content/themes/kadence-child/assets/隷書体-夢.png');
}

.image-radio.image-radio > span > input:checked+label {
    opacity:1;
}

.image-radio.image-radio > span > label {
    opacity: .3;
}

.image-radio.image-radio > span > label:hover {
    opacity: .7;
    transform: scale(1.1);
}

.woocommerce-cart table.cart tbody td, .woocommerce-checkout table.cart tbody td {
    width: auto !important;
    height: 100px !important;
}

/* Preview window */
.preview-canvas {
    /*position: fixed;*/
    /*top: 250px;*/
    /*right: 10px;*/
    /*z-index: 1000;*/

    background-color: white;
    border: 1px red dashed;
    opacity: 100%;

    width: 200px;
    height: 200px;
    /*padding: 10px;*/

    /*justify-items: center;*/

    /*opacity: 0;*/
    /*visibility: hidden;*/
    /*transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;*/
    margin-right: 50px;
}

.is-visible {
    opacity: .7;
    visibility: visible;
}

.hanko-form-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 0px;
    flex-wrap: wrap;
}

.hanko-form-wrapper .preview-canvas {
    flex-basis: 200px;
    align-self: center;
}

.hanko-form-wrapper .hanko-options-container {
    /*display: flex;*/
    /*flex-direction: column;*/
    /*flex-wrap: wrap; !* Allows items to wrap on small screens *!*/
    gap: 10px;
}


/* Preview window */
#hanko-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

#hanko-loading-box {
    background: white;
    border-radius: 1rem;
    padding: 2rem 3rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
}

#hanko-spinner {
    border: 6px solid #f3f3f3;
    border-top: 6px solid #d44;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 1rem auto 0;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}