/* Prevent text wrapping in navigation items */
.wp-block-navigation-item,
.is-style-no-wrap {
    white-space: nowrap;
}



/* Post Terms (Category) Block Styling */
.wp-block-post-terms {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.wp-block-post-terms.has-text-align-center {
    justify-content: center;
}

.wp-block-post-terms.has-text-align-right {
    justify-content: flex-end;
}

/* Block Transform Support (Image, Group, Paragraph) */
[style*="--translate-x"],
[style*="--translate-y"] {
    transform: translate(var(--translate-x, 0), var(--translate-y, 0));
}

/* .is-custom-positioned class injected via editor-script.js */
.is-custom-positioned,
[style*="--custom-position"] {
    position: var(--custom-position) !important;
    top: var(--pos-top, auto) !important;
    right: var(--pos-right, auto) !important;
    bottom: var(--pos-bottom, auto) !important;
    left: var(--pos-left, auto) !important;
    z-index: var(--z-index, 10) !important;
}

/* Aspect Ratio Utility */
.has-custom-aspect-ratio,
[style*="--aspect-ratio"] {
    aspect-ratio: var(--aspect-ratio);
    overflow: hidden;
    /* Ensure content doesn't spill out */
}

/* Ensure images fill the aspect ratio container */
.has-custom-aspect-ratio img,
.wp-block-image.has-custom-aspect-ratio img,
[style*="--aspect-ratio"] img {
    -o-object-fit: cover !important;
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
}

/* Helper for Group blocks to ensure they behave */
.wp-block-group.has-custom-aspect-ratio {
    display: flex;
    /* Often needed to make children fill height */
    flex-direction: column;
    justify-content: center;
}

/* SP Reset for Aspect Ratio */
@media screen and (max-width: 768px) {

    body .is-reset-aspect-sp,
    body .is-reset-aspect-sp img,
    body .wp-block-image.is-reset-aspect-sp img {
        aspect-ratio: auto !important;
        height: auto !important;
        object-fit: initial !important;
        /* Ideally we might want to revert to 'contain' or standard behavior, 'initial' might be risky for object-fit but checking */
    }

    /* Separator SP Margin */
    hr.wp-block-separator {
        margin-top: 40px !important;
        margin-bottom: 40px !important;
    }
}


/* Font Awesome Icon Block */
.fa-icon-editor {
    display: inline-block;
    line-height: 1;
}

/* Default Button Block Style */
.wp-block-button__link {
    background-color: #ffffff;
    color: #c82454;
    font-weight: 500;
    padding: 0.6rem 2rem;
    transition: background-color 0.3s, color 0.3s, opacity 0.3s;
}

/* Apply hover styles only when custom classes are present */

/* Text Color Hover */
.has-hover-text .wp-block-button__link:hover,
.block-editor-rich-text__editable.wp-block-button__link.has-hover-text:hover {
    color: var(--hover-color) !important;
}

/* Background Color Hover */
.has-hover-bg .wp-block-button__link:hover,
.block-editor-rich-text__editable.wp-block-button__link.has-hover-bg:hover {
    background-color: var(--hover-bg-color) !important;
    /* If border is not explicitly set, match background to prevent weird borders */
    border-color: var(--hover-bg-color);
}

/* Border Color Hover (Overrides background match) */
.has-hover-border .wp-block-button__link:hover,
.block-editor-rich-text__editable.wp-block-button__link.has-hover-border:hover {
    border-color: var(--hover-border-color) !important;
}

/* Separator (hr) Styles */
hr.wp-block-separator {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
}

/* Group Link Styles */
.has-group-link {
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    /* Ensure it can contain absolute elements if needed, though we use JS click */
}

/* Hover Effect: Scale Up */
.has-group-link:hover {
    transform: scale(1.02);
    z-index: 5;
    /* Mildly elevant to avoid clipping if possible */
}

/* Hover Effect: Text Color */
/* Recursively apply color to text children on hover */
.has-group-link:hover *:not(.wp-block-button__link):not(.wp-block-inabapyonpyon-fa-icon) {
    color: var(--group-hover-color, inherit) !important;
}

/* Height 100% Auto Width Utility */
/* Height 100% Auto Width Utility */
.is-height-100-auto,
[style*="--height-100-auto"] {
    height: 100% !important;
    width: auto !important;
}

/* Ensure images inside also respect the height */
.is-height-100-auto img,
[style*="--height-100-auto"] img {
    height: 100% !important;
    width: auto !important;
    object-fit: contain;
    /* Start with contain, or cover depending on need. Validated with user user later if needed but contain is safer for 'auto width' logic usually */
}

/* Mask Utilities (Diagonal Fade) */
.is-mask-diagonal-left,
[style*="--mask-style: diagonal-left"] {
    -webkit-mask-image: linear-gradient(110deg, transparent 20%, black 70%);
    mask-image: linear-gradient(110deg, transparent 20%, black 70%);
}

.is-mask-diagonal-right,
[style*="--mask-style: diagonal-right"] {
    -webkit-mask-image: linear-gradient(110deg, black 30%, transparent 80%);
    mask-image: linear-gradient(110deg, black 30%, transparent 80%);
}

.is-mask-diagonal-both,
[style*="--mask-style: diagonal-both"] {
    -webkit-mask-image: linear-gradient(110deg, transparent 15%, black 40%, black 60%, transparent 85%);
    mask-image: linear-gradient(110deg, transparent 15%, black 40%, black 60%, transparent 85%);
}

/* Width Utility */
body .wp-site-blocks .has-custom-width,
body .editor-styles-wrapper .has-custom-width,
[style*="--custom-width"] {
    width: var(--custom-width) !important;
    /* Prevent overflow unless intended */
}

/* Max Width Utility */
body .wp-site-blocks .has-custom-max-width,
body .editor-styles-wrapper .has-custom-max-width,
[style*="--custom-max-width"] {
    max-width: var(--custom-max-width) !important;
}

/* Standard Table and Flexible Table Blocks */
.wp-block-table table,
.wp-block-inabapyonpyon-flexible-table {
    border-collapse: collapse !important;
    width: 100%;
    margin-bottom: 1.5em;
    border: 1px solid var(--table-border-color, #ddd) !important;
}

/* Header Background & Uniform Border Thickness */
.wp-block-table thead,
.wp-block-table th,
.wp-block-inabapyonpyon-flexible-table thead,
.wp-block-inabapyonpyon-flexible-table th {
    background-color: var(--table-header-bg, transparent) !important;
    border-bottom: 1px solid var(--table-border-color, #ccc) !important;
    /* Ensure th bottom border isn't thicker */
}

/* Cell Borders */
.wp-block-table td,
.wp-block-table th,
.wp-block-inabapyonpyon-flexible-table td,
.wp-block-inabapyonpyon-flexible-table th {
    border: 1px solid var(--table-border-color, #ccc) !important;
    padding: 0.5em;
    vertical-align: top;
}

/* First Column Styling */
.wp-block-table tr td:first-child,
.wp-block-table tr th:first-child,
.flexible-table-row-editor>.block-editor-block-list__block:first-of-type .flexible-table-cell-editor {
    width: var(--first-col-width, auto) !important;
    max-width: 100% !important;
    background-color: var(--first-col-bg, transparent) !important;
    color: var(--first-col-text, inherit) !important;
}

@media screen and (max-width: 768px) {

    .wp-block-table tr td:first-child,
    .wp-block-table tr th:first-child {
        width: var(--first-col-width-sp, var(--first-col-width, auto)) !important;
    }
}

/* Editor specific fix for flexible table first cell */
.flexible-table-row-editor>.block-editor-block-list__block:first-of-type {
    flex: 1 1 0% !important;
    /* Default to same as others */
    width: var(--first-col-width, 0) !important;
    max-width: var(--first-col-width, none) !important;
    min-width: 0 !important;
    /* If first-col-width is set, flex will adjust via width/max-width */
}

.wp-block-table tr,
.wp-block-inabapyonpyon-flexible-table tr {
    border-bottom: 1px solid var(--table-border-color, #ddd) !important;
}

/* Ensure figure wrapper doesn't have a double or default border */
.wp-block-table {
    border: none !important;
}

/* Editor: Grid/Flex Layout (to handle Gutenberg wrappers) */
/* Prevent height stretching when nested in flex/grid in editor */
.block-editor-block-list__block[data-type="inabapyonpyon/flexible-table"] {
    align-self: flex-start !important;
    flex: 0 0 auto !important;
    height: fit-content !important;
    min-height: 0 !important;
    display: block !important;
    overflow: hidden !important;
    /* Prevent ghost height leak */
}

/* Table Container & Nested Layouts (Force content-based height on desktop) */
.flexible-table-editor {
    display: block !important;
    width: 100% !important;
    height: 1px !important;
    /* Force re-calculation */
    min-height: fit-content !important;
    border: 1px solid var(--table-border-color, #ddd);
}

/* Row Container (Horizontal Stack of Cells) */
.flexible-table-row-editor {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100%;
    border-bottom: 1px solid var(--table-border-color, #ccc);
    align-items: stretch;
}

/* Target Cells (Direct Children of Row) */
.flexible-table-row-editor>.block-editor-block-list__block,
.flexible-table-row-editor>.wp-block-inabapyonpyon-flexible-table-cell {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: 0 !important;
    border-right: 1px solid var(--table-border-color, #ccc);
    box-sizing: border-box;
    display: block !important;
    max-width: none !important;
}

/* Fix for the "Appender" (Plus Button) at the end of the row (Right Side) */
.flexible-table-row-editor>.block-list-appender {
    flex: 0 0 auto !important;
    width: 30px !important;
    min-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #eee;
    background: #f9f9f9;
}

.flexible-table-row-editor>.block-editor-block-list__block:last-of-type {
    border-right: none;
}

/* Fix for the "Table Appender" (Add Row Button) at the bottom */
.flexible-table-editor>.block-list-appender {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    padding: 0 !important;
    background: #f0f0f0 !important;
    border-top: 1px solid #ddd !important;
    margin: 0 !important;
    position: relative;
    z-index: 10;
    flex: 0 0 40px !important;
    height: 40px !important;
    /* Explicit height */
}

.flexible-table-editor>.block-list-appender .block-editor-button-block-appender {
    width: 100%;
    justify-content: center;
    height: auto;
    padding: 4px 0;
}

/* Cell Editor Content */
/* Cell Editor Content */
.flexible-table-cell-editor {
    padding: 8px;
    min-height: 50px;
    word-break: break-all;
}

/* Responsive Widths (Frontend & Editor) */
.wp-block-inabapyonpyon-flexible-table-cell,
.flexible-table-cell-editor {
    width: var(--cell-width-pc, auto);
    max-width: 100%;
}

/* Editor: Override Flex behavior ONLY if width is explicitly set */
.block-editor-block-list__block[data-type="inabapyonpyon/flexible-table-cell"][style*="--cell-width-pc"]:not([style*="--col-span"]) {
    flex: 0 1 var(--cell-width-pc) !important;
    max-width: var(--cell-width-pc) !important;
    min-width: 50px !important;
}

/* Editor: Colspan Simulation */
.block-editor-block-list__block[data-type="inabapyonpyon/flexible-table-cell"][style*="--col-span"] {
    flex: var(--col-span) var(--col-span) 0px !important;
    /* Use flex-grow to take up multiple slots */
}

/* Editor: Colspan with Explicit Width */
.block-editor-block-list__block[data-type="inabapyonpyon/flexible-table-cell"][style*="--col-span"][style*="--cell-width-pc"] {
    flex: 0 0 calc(var(--cell-width-pc) * var(--col-span)) !important;
    min-width: calc(var(--cell-width-pc) * var(--col-span)) !important;
}

/* SP Widths */
@media screen and (max-width: 768px) {
    .wp-block-inabapyonpyon-flexible-table-cell {
        width: var(--cell-width-sp, var(--cell-width-pc, auto));
    }
}

/* Vertical Alignment for Flexible Table Cell Editor */
.flexible-table-cell-editor.is-vertically-aligned-top {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
}

.flexible-table-cell-editor.is-vertically-aligned-middle {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
}

.flexible-table-cell-editor.is-vertically-aligned-bottom {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
}

/* Flexible Table Cell Icons */
.wp-block-inabapyonpyon-flexible-table td.is-left-icon-plus,
.wp-block-inabapyonpyon-flexible-table td.is-left-icon-triangle,
.flexible-table-cell-editor.is-left-icon-plus,
.flexible-table-cell-editor.is-left-icon-triangle {
    position: relative;
    overflow: visible !important;
}

/* Base icon style */
.wp-block-inabapyonpyon-flexible-table td.is-left-icon-plus::before,
.wp-block-inabapyonpyon-flexible-table td.is-left-icon-triangle::before,
.flexible-table-cell-editor.is-left-icon-plus::before,
.flexible-table-cell-editor.is-left-icon-triangle::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    bottom: auto;
    right: auto;
    transform: translate(-50%, -50%);
    z-index: 10;
}

/* Plus Icon */
.wp-block-inabapyonpyon-flexible-table td.is-left-icon-plus::before,
.flexible-table-cell-editor.is-left-icon-plus::before {
    content: '';
    width: 24px;
    height: 24px;
    background-color: var(--left-icon-color, var(--wp--preset--color--brand-blue, #00adec));
    background-image:
        linear-gradient(white, white),
        linear-gradient(white, white);
    background-size: 14px 2px, 2px 14px;
    /* Increased size slightly for better visibility */
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    box-shadow: 0 0 0 2px white;
}

/* Triangle Icon */
.wp-block-inabapyonpyon-flexible-table td.is-left-icon-triangle::before,
.flexible-table-cell-editor.is-left-icon-triangle::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent var(--left-icon-color, var(--wp--preset--color--brand-blue, #00adec));
}

/* Flexible Table Cell Bottom Icons */
.wp-block-inabapyonpyon-flexible-table td.is-bottom-icon-plus,
.wp-block-inabapyonpyon-flexible-table td.is-bottom-icon-triangle,
.flexible-table-cell-editor.is-bottom-icon-plus,
.flexible-table-cell-editor.is-bottom-icon-triangle {
    position: relative;
    overflow: visible !important;
}

/* Base bottom icon style - Uses ::after so it can coexist with left icon (::before) */
.wp-block-inabapyonpyon-flexible-table td.is-bottom-icon-plus::after,
.wp-block-inabapyonpyon-flexible-table td.is-bottom-icon-triangle::after,
.flexible-table-cell-editor.is-bottom-icon-plus::after,
.flexible-table-cell-editor.is-bottom-icon-triangle::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    top: auto;
    right: auto;
    transform: translate(-50%, 50%);
    z-index: 10;
}

/* Bottom Plus Icon */
.wp-block-inabapyonpyon-flexible-table td.is-bottom-icon-plus::after,
.flexible-table-cell-editor.is-bottom-icon-plus::after {
    content: '';
    width: 24px;
    height: 24px;
    background-color: var(--bottom-icon-color, var(--wp--preset--color--brand-blue, #00adec));
    background-image:
        linear-gradient(white, white),
        linear-gradient(white, white);
    background-size: 14px 2px, 2px 14px;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    box-shadow: 0 0 0 2px white;
}

/* Bottom Triangle Icon (Downward) */
.wp-block-inabapyonpyon-flexible-table td.is-bottom-icon-triangle::after,
.flexible-table-cell-editor.is-bottom-icon-triangle::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 6px 0 6px;
    border-color: var(--bottom-icon-color, var(--wp--preset--color--brand-blue, #00adec)) transparent transparent transparent;
}

/* Dotted List Block (Price List) */
.wp-block-inabapyonpyon-dotted-list-item,
.dotted-list-item-editor {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.5em;
    width: 100%;
    gap: 0.5em;
}

/* Term (Left side) */
.dotted-list-term,
.dotted-list-term-input,
.dotted-list-term .block-editor-rich-text__editable {
    flex-shrink: 0;
    text-align: left;
    max-width: 70%;
    min-width: 1em;
}

/* Leader Line (Dots) */
.dotted-list-leader,
.dotted-list-leader-visual {
    flex-grow: 1;
    border-bottom: 2px dotted #aaa;
    margin: 0 0.5em;
    position: relative;
    top: -5px;
    min-width: 20px;
    height: 1px;
    align-self: baseline;
}

/* Description (Right side) */
.dotted-list-description,
.dotted-list-desc-input,
.dotted-list-description .block-editor-rich-text__editable {
    flex-shrink: 0;
    flex-shrink: 0;
    text-align: left;
    /* Changed to left align as requested */
    white-space: nowrap;
    width: var(--desc-width, auto);
    min-width: var(--desc-width, 1em);
}

/* SP Adjustments */
@media screen and (max-width: 600px) {

    .wp-block-inabapyonpyon-dotted-list-item,
    .dotted-list-item-editor {
        flex-wrap: wrap;
        margin-bottom: 1em;
        /* Increased spacing for SP */
        justify-content: flex-start;
        /* Align specific items to left */
    }

    /* Term takes full width on SP */
    .dotted-list-term,
    .dotted-list-term-input,
    .dotted-list-term .block-editor-rich-text__editable {
        flex-basis: 100%;
        max-width: 100%;
        width: 100%;
        margin-bottom: 0px;
    }

    /* Dots: Fixed short width acting as a bullet/connector */
    .dotted-list-leader,
    .dotted-list-leader-visual {
        margin-left: 0;
        flex-grow: 0;
        width: 30px;
        /* Fixed width */
        min-width: 30px;
        margin-right: 0.5em;
    }

    /* Description: Takes remaining space */
    .dotted-list-description,
    .dotted-list-desc-input,
    .dotted-list-description .block-editor-rich-text__editable {
        white-space: normal;
        text-align: left;
        flex-shrink: 1;
        /* Allow shrink if needed */
        width: auto;
        min-width: unset;
        flex-grow: 1;
    }
}

/* SP: Smaller icons for Flexible Table Cell */
@media screen and (max-width: 768px) {

    /* Left Plus Icon */
    .wp-block-inabapyonpyon-flexible-table td.is-left-icon-plus::before,
    .flexible-table-cell-editor.is-left-icon-plus::before {
        width: 18px;
        height: 18px;
        background-size: 10px 2px, 2px 10px;
    }

    /* Left Triangle Icon */
    .wp-block-inabapyonpyon-flexible-table td.is-left-icon-triangle::before,
    .flexible-table-cell-editor.is-left-icon-triangle::before {
        border-width: 4px 0 4px 7px;
    }

    /* Bottom Plus Icon */
    .wp-block-inabapyonpyon-flexible-table td.is-bottom-icon-plus::after,
    .flexible-table-cell-editor.is-bottom-icon-plus::after {
        width: 18px;
        height: 18px;
        background-size: 10px 2px, 2px 10px;
    }

    /* Bottom Triangle Icon */
    .wp-block-inabapyonpyon-flexible-table td.is-bottom-icon-triangle::after,
    .flexible-table-cell-editor.is-bottom-icon-triangle::after {
        border-width: 7px 4px 0 4px;
    }
}

/* Core Table Block Style: Custom Header & Border */
.wp-block-table.is-style-custom-header-border {
    border-collapse: collapse;
}

.wp-block-table.is-style-custom-header-border table,
.wp-block-table.is-style-custom-header-border th,
.wp-block-table.is-style-custom-header-border td {
    border: 1px solid #e5b9b9;
}

.wp-block-table.is-style-custom-header-border th {
    background-color: #c82454;
    color: #ffffff;
    /* Typically needed when background is dark */
}

/* Pagination & Post Navigation Round Button Styles */
.wp-block-query-pagination,
.wp-block-post-navigation-link {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    margin-bottom: 40px;
}

/* Base style for pagination numbers and next/prev links */
.wp-block-query-pagination-numbers a,
.wp-block-query-pagination-numbers .current,
.wp-block-query-pagination-next,
.wp-block-query-pagination-previous,
.wp-block-post-navigation-link a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 15px;
    border-radius: 22px;
    /* Standard pill/round shape */
    border: 1px solid var(--wp--preset--color--brand-red);
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--brand-red);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* Numeric page buttons should be circular */
.wp-block-query-pagination-numbers a,
.wp-block-query-pagination-numbers .current {
    width: 44px;
    padding: 0;
    border-radius: 50%;
}

/* Hover & Active States */
.wp-block-query-pagination-numbers a:hover,
.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-post-navigation-link a:hover {
    background-color: var(--wp--preset--color--brand-red);
    color: var(--wp--preset--color--white);
}

.wp-block-query-pagination-numbers .current {
    background-color: var(--wp--preset--color--brand-red);
    color: var(--wp--preset--color--white);
    cursor: default;
}

/* Post Navigation Link specific adjustments */
.wp-block-post-navigation-link {
    justify-content: space-between;
}

.wp-block-post-navigation-link .post-navigation-link-next {
    margin-left: auto;
}

/* SP Adjustments */
@media screen and (max-width: 600px) {

    .wp-block-query-pagination,
    .wp-block-post-navigation-link {
        gap: 8px;
    }

    .wp-block-query-pagination-numbers a,
    .wp-block-query-pagination-numbers .current,
    .wp-block-query-pagination-next,
    .wp-block-query-pagination-previous,
    .wp-block-post-navigation-link a {
        min-width: 36px;
        height: 36px;
        border-radius: 18px;
        font-size: 0.875rem;
    }

    .wp-block-query-pagination-numbers a,
    .wp-block-query-pagination-numbers .current {
        width: 36px;
    }
}