/*
 * pdf_cart_door.css
 * --------------------------------------------------------------------------
 * Toàn bộ CSS cho door PDF page. Tất cả rule scope dưới `#pdf-cart-door` để
 * không leak ra cart/screen khác. HTML của door PDF dùng cùng class với
 * section-cart (cart_window_door, item_cart, un_cartResult, ...) nên các rule
 * unscoped trong cart.css tự apply làm base. File này:
 *   - Layout PDF-specific: header band, 3-column wrapper, 2-column group images.
 *   - Override cart behavior không phù hợp PDF (vd `.box_result_cart` cart ẩn
 *     mặc định, PDF luôn show).
 *   - Tinh chỉnh font-size/spacing cho khổ in A4.
 */

/* ============================================================================
 * Outer container
 * ----------------------------------------------------------------------------
 * KHÔNG set horizontal padding trên `#pdf-cart-door` để các phần tử full-width
 * (header band, group section title) có thể span cùng width với `.areaLogoTop`
 * cùng cấp. Inner items (.cart_window_door / .pdf_groups_row) tự thêm padding
 * nếu cần.
 * ========================================================================== */

#pdf-cart-door {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
}

/* ============================================================================
 * Header band — orange "シミュレーション結果"
 * ========================================================================== */

#pdf-cart-door .pdf_result_header {
    width: 100%;
    box-sizing: border-box;
}

#pdf-cart-door .pdf_result_header__band {
    width: 100%;
    background: #F9CB9C;
    color: #ffffff;
    font-size: 23px;
    font-weight: bold;
    text-align: center;
    padding: 6px 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
}

/* ============================================================================
 * 3-plan row — inherit cart_window_door base, override PDF specifics
 * ========================================================================== */

#pdf-cart-door .cart_window_door {
    width: 100%;
    max-width: none;
    margin-top: 12px;
    padding: 0 22px;
    gap: 10px;
    display: flex;
    justify-content: center;
    align-items: stretch;
    box-sizing: border-box;
}

/* PDF mirror cart layout: kế thừa width từ cart.css base + plans-X overrides
   (plans-3 → 33.3% / plans-2 → 50%). plans-X được set trong calculations_new
   .js cho cả cart và PDF parent → 2 wrapper đồng bộ visual.
   Riêng plans-1: cart 70%, PDF override xuống 50% (rule bên dưới).
   Cart.css cũng scale font-size theo plans-X — PDF accept luôn để mirror. */
#pdf-cart-door .cart_window_door .item_cart {
    display: flex;
    flex-direction: column;
}

/* Override plans-1: PDF 50% thay vì 70% như cart.
   Cart.css đặt rule này trong `@media screen and (min-width: 768px)` → cần
   wrap cùng media để áp dụng trên tablet/desktop. Print sẽ có rule riêng ở
   @media print phía dưới. */
@media screen and (min-width: 768px) {
    #pdf-cart-door .cart_window_door.plans-1 .item_cart {
        width: 50%;
    }
}

/* ============================================================================
 * Section title (orange/green/blue plan header)
 * ----------------------------------------------------------------------------
 * Cart.css đã có rule full-width section_title. PDF chỉ chỉnh height/font.
 * KHÔNG set padding trên `.box_subsidy_amount` — title nằm trên cùng level
 * với un_cartResult_content, nếu padding `.box_subsidy_amount` thì title bị
 * thụt vào.
 * ========================================================================== */

#pdf-cart-door .item_cart .section_item_cart .section_title {
    font-size: 18px;
    height: 27px;
    padding-top: 4px;
    width: 100.5%;
    margin-left: -0.5px;
    margin-top: -0.5px;
}

/* ============================================================================
 * Subsidy amount box — 補助金合計額 + total
 * ----------------------------------------------------------------------------
 * Mirror cart's pattern: padding nằm trên `.un_cartResult_content` (KHÔNG
 * trên `.box_subsidy_amount`), để section_title vẫn full-width edge-to-edge.
 * Cart đã có rule này nhưng PDF cần fix font-size/spacing.
 * ========================================================================== */

#pdf-cart-door .box_subsidy_amount .un_cartResult_content.box_text {
    padding: 8px 16px 0 10px !important;
}

#pdf-cart-door .box_subsidy_amount .un_cartResult_content {
    padding: 0 10px 10px 10px;
}

#pdf-cart-door .box_text_subsidy {
}

#pdf-cart-door .box_text_subsidy .area_selected {
    font-size: 13px;
}

#pdf-cart-door .box_text_subsidy .area_selected ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

#pdf-cart-door .box_text_subsidy .area_selected ul li {
    position: relative;
    padding-left: 10px;
}

#pdf-cart-door .box_text_subsidy .area_selected ul li.area_text {
    margin-right: 18px;
}

#pdf-cart-door .box_text_subsidy .area_selected ul li::before {
    content: '•';
    position: absolute;
    left: -2px;
    top: 30%;
    transform: translateY(-50%);
    font-size: 28px;
    color: #E75400;
    line-height: 0;
}

#pdf-cart-door .bl_cartResult_subsidy {
    display: flex;
    align-items: center;
    margin-top: 6px;
}

#pdf-cart-door .bl_cartResult_subsidy .bl_cartResult_subsidy--item.text_total_amount {
    font-size: 14px;
    flex: 0 0 auto;
}

#pdf-cart-door .bl_cartResult_subsidy .bl_cartResult_subsidy--item.box_price {
    flex: 1 1 auto;
    justify-content: flex-end;
    display: flex;
}

#pdf-cart-door .un_cartResult_subsidy .un_cartResult_subsidy--amount {
    font-size: 26px !important;
    color: #E75400;
    white-space: nowrap;
}

#pdf-cart-door .un_cartResult_subsidy--amount .err,
#pdf-cart-door .un_cartResult_subsidy--amount .err2 {
    font-size: 15px !important;
}

/* ============================================================================
 * Detail box — 補助金詳細 (window + door entries)
 * ----------------------------------------------------------------------------
 * Cart ẩn `.box_result_cart` mặc định, chỉ show khi click button .circle.
 * PDF không có toggle → luôn show.
 * ========================================================================== */

#pdf-cart-door .un_cartResult_content .box_result_cart {
    display: block !important;
    margin-top: 6px;
    min-height: auto;
}

#pdf-cart-door .box_result_cart .text_subsidy {
    font-size: 14px;
    color: #000;
    margin-bottom: 6px;
}

#pdf-cart-door .un_cartResult_itemDoor {
    margin-top: 6px;
    font-size: 12px;
}

#pdf-cart-door .un_cartResult_itemDoor .img_door_result {
    max-width: 56px;
    width: 100%;
}

#pdf-cart-door .un_cartResult_itemDoor .area_labelTargetConstruction {
    font-size: 13px;
    margin-bottom: 3px;
}

#pdf-cart-door .un_cartResult_itemDoor .bg_label_typeDoor {
    font-size: 12px !important;
    padding: 0px 8px 0px 8px;
}

#pdf-cart-door .un_cartResult_itemDoor .bg_label_typeDoor.label_target_construction_2 {
    padding-top: 2px;
}

#pdf-cart-door .un_cartResult_itemDoor .bg_label_typeDoor.label_target_construction_3 {
    padding-bottom: 2px;
}

#pdf-cart-door .un_cartResult_itemDoor .label_target_construction_1 {
    margin-bottom: 2px;
}

#pdf-cart-door .un_cartResult_itemDoor .text_itemDetailDoor {
    font-size: 13px;
    line-height: 1.4;
}

#pdf-cart-door .un_cartResult_itemDoor .icon-x {
    font-size: 13px;
    margin: 0 4px;
}

#pdf-cart-door .box_note_cart .note_selected_item {
    padding: 2px 4px 0;
    font-size: 13px;
    color: red;
}

/* ============================================================================
 * Effect box — 補助金の効果 (1/2/3 + 差額)
 * ----------------------------------------------------------------------------
 * Badge colors theo cart.css:
 *   .un_cartResult_item:first-child .num → #e7541c (orange)
 *   .un_cartResult_item_name span.num    → #4d4d4d (grey)
 *   .core / .core.org / .core.green      → grey / orange / green
 * Cart.css đã set sẵn, PDF chỉ override SIZE (không override BG color).
 * ========================================================================== */
#pdf-cart-door .item_cart .section_item_cart .un_cartResult_content {
    padding: 0px 10px 3px 10px;
}

#pdf-cart-door .item_cart .section_item_cart .un_cartResult_title {
    font-size: 18px;
    padding: 4px 0 4px 18px;
}

#pdf-cart-door .un_cartResult_itemWrap {
    padding: 0px 8px 6px 8px;
}

#pdf-cart-door .un_cartResult_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
    font-size: 12px;
    margin-top: 2px;
}

#pdf-cart-door .un_cartResult_item_name {
    display: flex;
    align-items: center;
    gap: 4px;
}

#pdf-cart-door .un_cartResult_item_name span.num {
    width: 22px;
    height: 22px;
    font-size: 13px;
    /* Background color KHÔNG override — kế thừa cart.css:
         default → #4d4d4d, first-child → #e7541c */
}

#pdf-cart-door .un_cartResult_item_name span.txt span.name {
    font-size: 14.5px;
    margin-left: 2px;
}

#pdf-cart-door .un_cartResult_item_name span.txt span.text_note {
    display: block;
    margin-left: 3px;
}

#pdf-cart-door .un_cartResult_item_name span.txt span.text_note,
#pdf-cart-door .un_cartResult_item_name span.txt span.asterisk {
    font-size: 10px;
}

#pdf-cart-door .un_cartResult_item_price,
#pdf-cart-door .un_cartResult_item_price span.yen {
    font-size: 16px !important;
}

#pdf-cart-door .un_cartResult_item_price span.err,
#pdf-cart-door .un_cartResult_item_price span.err2 {
    font-size: 15px !important;
}

#pdf-cart-door .un_cartResult_detail {
    padding: 0 8px 6px;
}

#pdf-cart-door .un_cartResult_detail .un_cartResult_title-end {
    font-size: 11px;
    text-align: left;
    margin-top: 2px;
}

#pdf-cart-door .un_cartResult_detail p.line {
    margin: 2px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#pdf-cart-door .un_cartResult_detail .koumoku {
    font-size: 13px;
}

#pdf-cart-door .un_cartResult_detail p.line span.koumoku span.num span.core {
    width: 18px;
    height: 18px;
    font-size: 10.5px;
    margin-left: 2px;
    margin-right: 2px;

    /* Background color KHÔNG override — kế thừa cart.css:
         default → #4d4d4d, .org → #e7541c, .green → #009f44 */
}

#pdf-cart-door .un_cartResult_detail p.line span.price {
    font-size: 21px;
    font-weight: bold;
}

#pdf-cart-door .un_cartResult_detail p.off {
    font-size: 16px;
    text-align: right;
    margin: 0;
    color: #E75400;
}

#pdf-cart-door .un_cartResult_detail p.off span {
    font-size: 14px;
}

#pdf-cart-door .un_cartResult_atten {
    font-size: 10px;
    margin-top: 2px;
    color: red;
}

/* ============================================================================
 * Group images row — 2-column, có title + border màu theo design
 * ----------------------------------------------------------------------------
 * プロがすすめるコスパが良い仕様 → orange/yellow theme
 * 省エネ・健康                  → green theme
 * ========================================================================== */

#pdf-cart-door .pdf_groups_row {
    width: 100%;
    padding: 8px 22px 0 22px;
    box-sizing: border-box;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: stretch;
}

#pdf-cart-door .pdf_group {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    border: 3px solid;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}

/* ============================================================================
 * Plans-1 layout (chỉ tablet/desktop + print) — pdf_groups_row được JS move
 * vào BÊN TRONG `#pdf_cart_window_door`, sit cạnh `plan_selected`:
 *   [ plan_selected 50% ] [ pdf_groups_row 50% ]
 * Bên trong pdf_groups_row: 2 group stack dọc (column).
 * Mục đích: compact layout giúp PDF fit 1 page khi chỉ có 1 plan.
 *
 * Mobile (<768): JS không move → pdf_groups_row vẫn ở vị trí cũ.
 * ========================================================================== */
@media screen and (min-width: 768px) {
    #pdf_cart_window_door.plans-1 .pdf_groups_row {
        width: 50%;
        flex: 0 0 50%;
        flex-direction: column;
        padding: 0;
        gap: 10px;
        justify-content: flex-start;
    }
    /* Override flex: 1 1 0 (làm height=0 trong column direction). */
    #pdf_cart_window_door.plans-1 .pdf_groups_row .pdf_group {
        flex: 0 0 auto;
    }

}

@media print {
    #pdf_cart_window_door.plans-1 .pdf_groups_row {
        width: 50%;
        flex: 0 0 50%;
        flex-direction: column;
        padding: 0;
        gap: 10px;
        justify-content: flex-start;
    }
    #pdf_cart_window_door.plans-1 .pdf_groups_row .pdf_group {
        flex: 0 0 auto;
    }
}

#pdf-cart-door .pdf_group--orange {
    border-color: #FFC000;
}

#pdf-cart-door .pdf_group--green {
    border-color: #70AD47;
}

#pdf-cart-door .pdf_group_title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    padding: 6px 0;
}

#pdf-cart-door .pdf_group--orange .pdf_group_title {
    background: #FFC000;
}

#pdf-cart-door .pdf_group--green .pdf_group_title {
    background: #70AD47;
}

#pdf-cart-door .pdf_group_body {
    flex: 1 1 auto;
    padding: 6px;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

#pdf-cart-door .pdf_group_body img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* ============================================================================
 * Responsive: tablet
 * ========================================================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {
    #pdf-cart-door .pdf_result_header__band {
        font-size: 22px;
    }

    #pdf-cart-door .un_cartResult_subsidy .un_cartResult_subsidy--amount {
        font-size: 22px !important;
    }

    #pdf-cart-door .un_cartResult_detail p.line span.price {
        font-size: 18px;
    }

    #pdf-cart-door .pdf_group_title {
        font-size: 16px;
    }
}

/* ============================================================================
 * Responsive: mobile (<=767px) — stack plans + groups vertically
 * ========================================================================== */

@media screen and (max-width: 767px) {
    #pdf-cart-door .cart_window_door {
        flex-direction: column;
        gap: 12px;
    }

    #pdf-cart-door .cart_window_door .item_cart {
        width: 100%;
        flex: 0 0 auto;
    }

    #pdf-cart-door .pdf_groups_row {
        flex-direction: column;
        gap: 12px;
    }

    /* Override desktop's `flex: 1 1 0`. Trong column mode, flex-basis: 0 ép
       height về 0 (vì parent không có fixed height) → chỉ border hiển thị,
       content + image bên trong bị collapse. Reset về auto để item lấy
       height theo content. */
    #pdf-cart-door .pdf_group {
        flex: 0 0 auto;
    }

    #pdf-cart-door .pdf_result_header__band {
        font-size: 18px;
    }
}

/* ============================================================================
 * Print
 * ========================================================================== */

@media print {
    #pdf-cart-door {
        padding: 0 0 8px;
    }

    /* Lock layout row khi in để mobile media-query không break thành column. */
    #pdf-cart-door .cart_window_door {
        flex-direction: row;
    }

    #pdf-cart-door .pdf_groups_row {
        flex-direction: row;
    }

    /* Plans-X widths — cart.css đặt rule plans-X trong `@media screen and
       (min-width: 768px)`, KHÔNG match trong print context (print không phải
       screen). Nên khi in PDF, plan rơi về base 33.3% thay vì các giá trị
       mong muốn. Mirror lại đây scope #pdf-cart-door.
       Plans-1: PDF dùng 50% (khác cart 70%) — đồng bộ với rule screen
       phía trên (line ~80). */
    #pdf-cart-door .cart_window_door.plans-1 .item_cart {
        width: 50%;
    }
    #pdf-cart-door .cart_window_door.plans-2 .item_cart {
        width: 50%;
    }

}