/*
CTC Separate Stylesheet
Updated: 2025-12-29 10:53:00

Styles have been moved to header.php and woocommerce/content-product-custom.php as per user request.
*/

/* ================================================
   Single Post Page Styles
   ================================================ */

/* 文章页标题容器 */
.post-header {
    margin-bottom: 30px;
}

.post-header.with-image {
    position: relative;
    margin-bottom: 40px;
}

.post-header .featured-image {
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
}

.post-header.with-image .header-content {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 30px 30px;
    border-radius: 0 0 8px 8px;
}

.post-header.with-image .entry-title {
    color: #ffffff;
    margin: 0 0 15px 0;
    font-size: 36px;
    line-height: 1.2;
}

.post-header.no-image .entry-title {
    color: #222222;
    margin: 0 0 15px 0;
    font-size: 36px;
    line-height: 1.2;
}

/* 文章内容区域 */
.entry-content {
    font-size: 16px;
    line-height: 1.8;
    color: #333333;
    margin-bottom: 40px;
}

.entry-content p {
    margin-bottom: 20px;
}

.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    margin-top: 30px;
    margin-bottom: 15px;
    color: #222222;
}

/* 文章分页链接 */
.page-links {
    margin-top: 30px;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 4px;
    font-size: 14px;
}

.page-links a {
    display: inline-block;
    padding: 5px 12px;
    margin: 0 5px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 3px;
    text-decoration: none;
    color: #333333;
    transition: all 0.3s ease;
}

.page-links a:hover {
    background-color: #222222;
    color: #ffffff;
    border-color: #222222;
}

/* 文章底部（标签区域） */
.entry-footer {
    padding-top: 20px;
    margin-top: 30px;
    border-top: 1px solid #e1e1e1;
}

.entry-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.entry-tags .tags-label {
    font-weight: 600;
    color: #222222;
}

.entry-tags a {
    display: inline-block;
    padding: 5px 15px;
    background-color: #f5f5f5;
    color: #666666;
    text-decoration: none;
    border-radius: 20px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.entry-tags a:hover {
    background-color: #222222;
    color: #ffffff;
}

/* 单篇文章页响应式 */
@media (max-width: 768px) {
    .post-header .featured-image {
        height: 250px;
    }

    .post-header.with-image .entry-title,
    .post-header.no-image .entry-title {
        font-size: 24px;
    }

    .post-header.with-image .header-content {
        padding: 20px 15px 15px;
    }

    .entry-content {
        font-size: 15px;
    }
}


/* ================================================
   TablePress Custom Styles
   ================================================ */

/* 取消所有边框线 */
.tablepress,
.tablepress thead,
.tablepress tbody,
.tablepress tfoot,
.tablepress tr,
.tablepress th,
.tablepress td {
    border: none !important;
}

/* 表格基础样式 */
.tablepress {
    border-collapse: collapse;
    width: 100%;
}

/* 奇数行背景色（包括表头作为第一行） */
.tablepress thead tr:nth-child(odd) th,
.tablepress thead tr:nth-child(odd) td {
    background-color: #FEC4C3;
}

/* 奇数行背景色 - 使用JS添加的逻辑类 */
.tablepress tbody tr.logical-odd td {
    background-color: #fff !important;
}

.tablepress tbody tr.logical-odd:hover>td {
    background-color: #fff !important;
}

/* 偶数行背景色 - 使用JS添加的逻辑类 */
.tablepress tbody tr.logical-even td {
    background-color: #FEC4C3 !important;
}

.tablepress tbody tr.logical-even:hover>td {
    background-color: #FEC4C3 !important;
}

/* 具有rowspan属性的td标签 */
.tablepress td[rowspan] {
    /* 移除强制背景色，使其跟随行的逻辑颜色 */
    vertical-align: middle;
}

/* 单元格内边距（可选，使表格更美观） */
.tablepress th,
.tablepress td {
    padding: 10px;
}

/* 第二列水平居中对齐 */
.tablepress .column-2 {
    text-align: center;
}

/* Custom Highlight for rows with rowspan */
/* Custom Highlight for rows with rowspan - REMOVED, controlled by logical classes now */

/* ================================================
   Specifications Tab Styles
   ================================================ */

/* Specifications 标题样式 */
.specifications-title {
    font-size: 24px;
    font-weight: bold;
    color: #222222;
    margin-top: 30px;
    margin-bottom: 20px;
}

/* Specifications Tab 内容容器 - 桌面端左右布局 */
.specifications-tab-content {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* 规格图片区域 */
.specifications-image {
    flex: 0 0 40%;
    max-width: 40%;
}

.specifications-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* 规格表格区域 */
.specifications-table {
    flex: 0 0 60%;
    max-width: 60%;
}

.specifications-table table {
    width: 100%;
}

/* 移动端响应式布局 - 上下结构 */
@media (max-width: 768px) {
    .specifications-tab-content {
        flex-direction: column;
        gap: 20px;
    }

    .specifications-image,
    .specifications-table {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ================================================
   Detailed Image Grid Styles
   ================================================ */

/* 网格容器 - 三列布局 */
.detailed-image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 20px 0;
}

/* 单个项目 */
.detailed-image-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* 确保等高 */
}

/* 图片容器 */
.detailed-image-wrapper {
    flex: 0 0 auto;
    /* 图片不拉伸 */
    margin-bottom: 15px;
}

.detailed-image-wrapper img {
    width: 100%;
    height: 100%;
    /* Fill container */
    object-fit: cover;
    /* Maintain aspect ratio and cover area */
    display: block;
    border: 3px solid #000000;
    border-radius: 0;
    aspect-ratio: 1 / 1;
    /* Force square aspect ratio */
}

/* 标题样式 */
.detailed-image-title,
.shipping-information-title {
    text-align: left;
    /* 左对齐 */
    font-size: 16px;
    font-weight: 500;
    color: #222222;
    margin: 0px 0 20px 0 !important;
    padding: 0;
    line-height: 1.4;
}

@media (max-width: 768px) {

    .detailed-image-title,
    .shipping-information-title {
        font-size: 10px;
        margin-bottom: 10px !important;
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

/* 移动端响应式 - 保持三列布局但缩小间距 */
/* 移动端响应式 - 保持三列布局但缩小间距 */
@media (max-width: 768px) {
    .detailed-image-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        /* Prevent overflow with minmax */
        gap: 5px;
        /* Smaller gap */
    }
}

/* ================================================
   Shipping Information Grid Styles
   ================================================ */

/* 网格容器 - 三列布局 */
.shipping-information-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 20px 0;
}

/* 单个项目 */
.shipping-information-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* 确保等高 */
}

/* 图片容器 */
.shipping-information-wrapper {
    flex: 1;
    /* 占满空间 */
    margin-bottom: 15px;
}

.shipping-information-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 3px solid #000000;
    border-radius: 0;
    aspect-ratio: 1 / 1;
    /* Force square aspect ratio */
}

/* 移动端响应式 - 保持三列布局但缩小间距 */
/* 移动端响应式 - 保持三列布局但缩小间距 */
@media (max-width: 768px) {
    .shipping-information-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        /* Prevent overflow */
        gap: 5px;
    }

    .detailed-image-wrapper img,
    .shipping-information-wrapper img {
        border-width: 1px !important;
    }
}

gap: 5px;
}
}

.social-icons {
    margin-top: 20px;
}

.social-icons a img {

    width: 48px;
}

/* ================================================
   Form Plugin Compatibility Fixes (Global Reset)
   ================================================ */

/* 
 * Re-apply fixes to ensure all form plugins work correctly without parent theme interference.
 */

/* Target ALL inputs inside known form containers and generic forms to reset parent theme styles */
.frm_forms,
.wpcf7,
.gform_wrapper,
.wpforms-container,
.ninja-forms-form,
.elementor-form,
form {
    box-sizing: border-box;
}

/* Reset aggressive global input styling from parent theme */
.frm_forms input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
.frm_forms textarea,
.frm_forms select,
.wpcf7 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
.wpcf7 textarea,
.wpcf7 select,
.gform_wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
.gform_wrapper textarea,
.gform_wrapper select,
.wpforms-container input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
.wpforms-container textarea,
.wpforms-container select,
/* Generic fallback for other plugins */
form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]),
form textarea,
form select {
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: 10px !important;
    /* Override parent padding:6px */
    margin-bottom: 10px;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    background: #fff !important;
    box-shadow: none !important;
    line-height: 1.5 !important;
    /* Override parent line-height:1.25 */
    box-sizing: border-box !important;
    font-size: 16px !important;
    /* Readable size */
    color: #333 !important;
}

/* Ensure textareas are resizable */
textarea {
    min-height: 120px;
    resize: vertical;
}

/* Fix generic button/submit styles */
input[type="submit"],
button[type="submit"],
.frm_forms .frm_button,
.gform_button,
.wpcf7-submit {
    width: auto !important;
    padding: 10px 24px !important;
    height: auto !important;
    cursor: pointer !important;
    font-weight: bold !important;
    appearance: none;
    -webkit-appearance: none;
}

/* ================================================
   jQuery UI Datepicker Fixes
   ================================================ */

/* Container - Ensure high z-index and proper background */
#ui-datepicker-div,
.ui-datepicker {
    background-color: #ffffff !important;
    border: 1px solid #e2e2e2 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    padding: 0 !important;
    z-index: 999999 !important;
    /* Fix interaction issues by bringing to front */
    display: none;
    /* Let JS toggle it, but style it for when visible */
    font-family: 'Poppins', sans-serif !important;
    width: 300px !important;
    max-width: 90vw !important;
}

/* Header Section */
.ui-datepicker-header {
    background-color: #F50601 !important;
    /* Corresponds to user's requested color */
    color: #ffffff !important;
    padding: 12px 10px !important;
    border-radius: 8px 8px 0 0 !important;
    border: none !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    font-weight: 600;
}

/* Navigation Icons (Prev/Next) */
.ui-datepicker-prev,
.ui-datepicker-next {
    cursor: pointer !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
}

.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
    background: rgba(255, 255, 255, 0.4) !important;
    border: none !important;
    top: auto !important;
    margin: 0 !important;
}

/* Replace default jQuery UI span icons with CSS arrows if images are missing */
.ui-datepicker-prev span,
.ui-datepicker-next span {
    display: none !important;
    /* Hide original spans usually containing text or sprite bg */
}

/* 
.ui-datepicker-prev:after {
    content: '<';
    color: #fff;
    font-weight: bold;
    font-family: monospace;
} */

/* .ui-datepicker-next:after {
    content: '>';
    color: #fff;
    font-weight: bold;
    font-family: monospace;
} */

.frm-datepicker .ui-datepicker-title select.ui-datepicker-month {
    width: 60px !important;
}

.frm-datepicker .ui-datepicker-title select.ui-datepicker-year {
    width: 80px !important;
}


/* Title Area (Month/Year Selects) */
.ui-datepicker-title {
    display: flex !important;
    justify-content: center;
    gap: 5px;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* Dropdowns in Title */
.ui-datepicker-title select {
    background: #fff !important;
    color: #333 !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 2px 5px !important;
    font-size: 14px !important;
    height: auto !important;
    margin: 0 !important;
    cursor: pointer;
    font-weight: normal;
}

/* Calendar Table */
table.ui-datepicker-calendar {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse !important;
    background: #fff;
    border-radius: 0 0 8px 8px;
}

table.ui-datepicker-calendar thead th {
    padding: 10px 0 !important;
    color: #888 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border: none !important;
    background: #f9f9f9;
    text-align: center;
}

table.ui-datepicker-calendar tbody td {
    padding: 2px !important;
    border: none !important;
    background: #fff;
}

/* Day Links */
.ui-datepicker-calendar td a {
    display: block !important;
    text-align: center !important;
    padding: 8px 0 !important;
    margin: 2px !important;
    text-decoration: none !important;
    color: #333 !important;
    border-radius: 4px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    font-weight: normal !important;
    transition: all 0.2s;
}

/* Hover State */
.ui-datepicker-calendar td a:hover,
.ui-datepicker-calendar td:hover a {
    background-color: #ffe6e6 !important;
    color: #F50601 !important;
}

/* Active / Current Day */
.ui-datepicker-calendar td.ui-datepicker-current-day a,
.ui-datepicker-calendar td a.ui-state-active,
.ui-datepicker-calendar td a.ui-state-highlight {
    background-color: #F50601 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    box-shadow: 0 2px 4px rgba(245, 6, 1, 0.3) !important;
}

/* Today's Date (if distinct from selected) */
.ui-datepicker-calendar td.ui-datepicker-today a {
    border-color: #F50601 !important;
    color: #F50601;
}

/* Fix disabled properties */
.ui-datepicker-unselectable {
    opacity: 0.5;
    pointer-events: none;
}


/* Fix Label issues if any */
label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

/* Fix z-index for datepickers or dropdowns */
.ui-datepicker,
.select2-container {
    z-index: 99999 !important;
}

/* ================================================
   Custom Tab Section Titles
   ================================================ */

.detailed-image-title-main,
.shipping-info-title-main {
    font-size: 24px;
    font-weight: bold;
    color: #222222;
    margin-top: 30px;
    margin-bottom: 20px;
    clear: both;
}