/**
 * RS Form Spec Table - Frontend Styles
 * 完全匹配 Figma 設計稿樣式
 */

/* ── Reset ── */
.rsform-spec-table-wrap *,
.rsform-spec-table-wrap *::before,
.rsform-spec-table-wrap *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Wrapper：水平捲軸 ── */
.rsform-spec-table-wrap {
    width: 100%;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
}

/* 
 * 強制 Elementor 外層容器不截斷捲軸
 * Elementor section / column / container 預設 overflow:hidden 會吃掉子元素的水平捲軸
 */
.elementor-widget-shortcode:has(.rsform-spec-table-wrap),
.elementor-widget-shortcode:has(.rsform-spec-table-wrap) > .elementor-widget-container,
.elementor-element:has(.rsform-spec-table-wrap),
.e-con:has(.rsform-spec-table-wrap) {
    overflow: visible !important;
}

/* ── Table Container ── */
.rsform-spec-table {
    --rsform-title-width: 180px;
    --rsform-bg: #FFFEFB;
    --rsform-title-bg: #0A2F86;
    --rsform-title-color: #FFFFFF;
    --rsform-content-color: #2C2624;
    --rsform-border-color: #DDDDDD;
    --rsform-font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    --rsform-font-size: 16px;
    --rsform-line-height: 32px;
    --rsform-letter-spacing: 1.6px;
    --rsform-cell-padding: 16px;

    width: 100%;
    min-width: 600px;
    background: var(--rsform-bg);
    display: flex;
    flex-direction: column;
    font-family: var(--rsform-font-family);
    font-size: var(--rsform-font-size);
    line-height: var(--rsform-line-height);
    letter-spacing: var(--rsform-letter-spacing);
}

/* ── Row ── */
.rsform-spec-row {
    display: flex;
    align-items: stretch;
    width: 100%;
}

/* ── Title Cell (左欄) ── */
.rsform-spec-title {
    width: var(--rsform-title-width);
    min-width: var(--rsform-title-width);
    max-width: var(--rsform-title-width);
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
}

.rsform-spec-title-inner {
    width: 100%;
    padding: var(--rsform-cell-padding);
    background: var(--rsform-title-bg);
    border-left: 1px solid var(--rsform-border-color);
    border-top: 1px solid var(--rsform-border-color);
    display: flex;
    align-items: center;
    color: var(--rsform-title-color);
    font-weight: 400;
    word-wrap: break-word;
}

/* 最後一列的標題加 bottom border */
.rsform-spec-row:last-child .rsform-spec-title-inner {
    border-bottom: 1px solid var(--rsform-border-color);
}

/* 清除 WYSIWYG p 標籤預設 margin */
.rsform-spec-title-inner p,
.rsform-spec-cell-inner p {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--rsform-font-family);
    font-size: var(--rsform-font-size);
    line-height: var(--rsform-line-height);
    letter-spacing: var(--rsform-letter-spacing);
}

.rsform-spec-title-inner p {
    color: var(--rsform-title-color);
}

.rsform-spec-cell-inner p {
    color: var(--rsform-content-color);
}

/* ── Content Area (右欄) ── */
.rsform-spec-content {
    flex: 1 1 0;
    display: flex;
    align-items: stretch;
}

/* ── Content Cell ── */
.rsform-spec-cell {
    flex: 1 1 0;
    display: flex;
    align-items: stretch;
}

.rsform-spec-cell-inner {
    width: 100%;
    padding: var(--rsform-cell-padding);
    border-top: 1px solid var(--rsform-border-color);
    border-right: 1px solid var(--rsform-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rsform-content-color);
    font-weight: 400;
    word-wrap: break-word;
}

/* 最後一列的內容加 bottom border */
.rsform-spec-row:last-child .rsform-spec-cell-inner {
    border-bottom: 1px solid var(--rsform-border-color);
}

/* 多欄時，第 2 欄起的左邊框由右邊框自然產生，不需額外加 */

/* ── Responsive ── */
@media screen and (max-width: 767px) {
    .rsform-spec-table {
        --rsform-font-size: 14px;
        --rsform-line-height: 24px;
        --rsform-letter-spacing: 1px;
        --rsform-cell-padding: 12px;
        --rsform-title-width: 120px;
    }
}