/*
 * Holyster Child - Flipbox fix v2 (ERŐSÍTETT)
 * -----------------------------------------------------------------------------
 * A KingComposer beépített flipbox eleméhez tartozó CSS pótlása.
 * HTML struktúra:
 *   .kc-flipbox > .flipper > (.front + .back)
 * A theme.css / kingcomposer.min.css felülírás ellen minden szabály !important.
 */

/* ------- Konténer ------- */
.kc-flipbox,
.kc-flip-container {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 260px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    perspective: 1000px !important;
    -webkit-perspective: 1000px !important;
}

/* ------- Flipper ------- */
.kc-flipbox .flipper,
.kc-flip-container .flipper {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: inherit !important;
    transition: transform 0.6s ease !important;
    transform-style: preserve-3d !important;
    -webkit-transform-style: preserve-3d !important;
}

/* ------- Front + Back egymásra rétegezve ------- */
.kc-flipbox .front,
.kc-flipbox .back,
.kc-flip-container .front,
.kc-flip-container .back {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: inherit !important;
    box-sizing: border-box !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 30px 20px !important;
    background: #f7f7f7 !important;
    border: 1px solid #ebebeb !important;
    text-align: center !important;
}

.kc-flipbox .front,
.kc-flip-container .front {
    z-index: 2 !important;
    transform: rotateY(0deg) !important;
    -webkit-transform: rotateY(0deg) !important;
}

.kc-flipbox .back,
.kc-flip-container .back {
    z-index: 1 !important;
    transform: rotateY(180deg) !important;
    -webkit-transform: rotateY(180deg) !important;
    background: #ffffff !important;
}

/* ------- Hover / touch: forgatás ------- */
.kc-flipbox:hover .flipper,
.kc-flip-container:hover .flipper,
.kc-flipbox.hover .flipper,
.kc-flip-container.hover .flipper {
    transform: rotateY(180deg) !important;
    -webkit-transform: rotateY(180deg) !important;
}

/* ------- Belső tartalom ------- */
.kc-flipbox .front-content,
.kc-flipbox .des,
.kc-flip-container .front-content,
.kc-flip-container .des {
    width: 100% !important;
    max-width: 90% !important;
}

.kc-flipbox .front-content h3,
.kc-flipbox .des h3,
.kc-flip-container .front-content h3,
.kc-flip-container .des h3 {
    margin: 0 0 15px !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #333 !important;
    text-transform: uppercase !important;
}

.kc-flipbox .front-content p,
.kc-flipbox .des p,
.kc-flip-container .front-content p,
.kc-flip-container .des p {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #555 !important;
    font-style: italic !important;
}

/* ------- Idézőjel ikon ------- */
.kc-flipbox .wrap-icon,
.kc-flip-container .wrap-icon {
    width: 100% !important;
    margin-bottom: 12px !important;
    font-size: 32px !important;
    line-height: 1 !important;
    color: #c9a55a !important;
}

.kc-flipbox .wrap-icon i,
.kc-flip-container .wrap-icon i {
    display: inline-block !important;
    font-family: "FontAwesome", "Font Awesome 5 Free", "Font Awesome 6 Free", sans-serif !important;
    font-weight: 900 !important;
    font-style: normal !important;
}

.kc-flipbox .wrap-icon .fa-quote-left::before,
.kc-flip-container .wrap-icon .fa-quote-left::before { content: "\201C" !important; }

.kc-flipbox .wrap-icon .fa-quote-right::before,
.kc-flip-container .wrap-icon .fa-quote-right::before { content: "\201D" !important; }

/* ------- Mobil ------- */
@media (max-width: 767px) {
    .kc-flipbox,
    .kc-flip-container {
        perspective: none !important;
        min-height: 0 !important;
    }
    .kc-flipbox .flipper,
    .kc-flip-container .flipper {
        transform-style: flat !important;
        -webkit-transform-style: flat !important;
        transform: none !important;
        -webkit-transform: none !important;
    }
    .kc-flipbox .front,
    .kc-flipbox .back,
    .kc-flip-container .front,
    .kc-flip-container .back {
        position: relative !important;
        transform: none !important;
        -webkit-transform: none !important;
        margin-bottom: 15px !important;
        min-height: 200px !important;
    }
}