/* Extracted from an inline <style> in: application/views/tour/product.php
   Edit here; every view listed links this file. */
        .tzbk-dialog {
            max-width: 700px;
            width: 96%;
            margin: 16px auto
        }

        .tzbk-content {
            width: 100%;
            border-radius: 10px;
            overflow: hidden;
            border: none;
            box-shadow: 0 10px 40px rgba(0, 0, 0, .2)
        }

        /* Header */
        .tzbk-header {
            background: #e35000;
            color: #fff;
            padding: 13px 18px;
            display: flex;
            align-items: center;
            gap: 10px
        }

        .tzbk-header-plane {
            font-size: 18px;
            flex-shrink: 0
        }

        .tzbk-header-info {
            flex: 1;
            min-width: 0
        }

        .tzbk-header-name {
            font-weight: 700;
            font-size: 13px;
            line-height: 1.35;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }

        .tzbk-header-sub {
            font-size: 11px;
            opacity: .85;
            margin-top: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis
        }

        .tzbk-header-close {
            background: none;
            border: none;
            color: #fff;
            font-size: 22px;
            line-height: 1;
            cursor: pointer;
            padding: 0 2px;
            opacity: .8;
            flex-shrink: 0
        }

        .tzbk-header-close:hover {
            opacity: 1
        }

        /* Body */
        .tzbk-body {
            display: flex;
            min-height: 0
        }

        .tzbk-left {
            flex: 1;
            padding: 16px;
            border-right: 1px solid #eee;
            overflow-y: auto;
            max-height: 72vh
        }

        .tzbk-right {
            width: 250px;
            flex-shrink: 0;
            padding: 16px 14px;
            background: #f4fdf7
        }

        /* Section title */
        .tzbk-sec-title {
            font-size: 12px;
            font-weight: 700;
            color: #333;
            margin: 0 0 10px;
            padding-bottom: 5px;
            border-bottom: 2px solid #e35000
        }

        /* Pax table */
        .tzbk-pax-tbl {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
            margin-bottom: 14px
        }

        .tzbk-pax-tbl thead tr {
            background: #f5f5f5
        }

        .tzbk-pax-tbl th {
            padding: 7px 8px;
            font-weight: 600;
            color: #555;
            border-bottom: 1px solid #e0e0e0;
            white-space: nowrap
        }

        .tzbk-pax-tbl th:not(:first-child) {
            text-align: center
        }

        .tzbk-pax-tbl td {
            padding: 9px 8px;
            border-bottom: 1px solid #f2f2f2;
            vertical-align: middle
        }

        .tzbk-pax-tbl td:not(:first-child) {
            text-align: center
        }

        .tzbk-pax-name {
            font-weight: 600;
            color: #333;
            font-size: 13px
        }

        .tzbk-pax-sub {
            font-size: 11px;
            color: #888;
            margin-top: 2px
        }

        .tzbk-line-total {
            font-weight: 700;
            color: #e35000 !important;
            text-align: right !important
        }

        /* Qty ctrl */
        .tzbk-qty-ctrl {
            display: inline-flex;
            align-items: center;
            gap: 5px
        }

        .tzbk-qty-btn {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            border: 1.5px solid #e35000;
            background: #fff;
            color: #e35000;
            font-size: 15px;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            transition: all .15s
        }

        .tzbk-qty-btn:hover {
            background: #e35000;
            color: #fff
        }

        .tzbk-qty-val {
            min-width: 22px;
            text-align: center;
            font-weight: 700;
            font-size: 15px;
            color: #222
        }

        /* Room section */
        .tzbk-room-sec {
            margin-bottom: 14px
        }

        .tzbk-room-lbl {
            font-size: 12px;
            font-weight: 700;
            color: #444;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px
        }

        .tzbk-room-lbl .tzbk-req {
            color: #e35000
        }

        .tzbk-room-remain {
            font-size: 11px;
            font-weight: 400;
            padding: 2px 7px;
            border-radius: 10px;
            background: #f0f0f0;
            color: #666
        }

        .tzbk-room-remain.warn {
            background: #fff0f0;
            color: #e35000
        }

        .tzbk-room-remain.ok {
            background: #f0fdf4;
            color: #00a651
        }

        .tzbk-room-tbl {
            width: 100%;
            border-collapse: collapse;
            font-size: 12px
        }

        .tzbk-room-tbl tr {
            border-bottom: 1px solid #f0f0f0
        }

        .tzbk-room-tbl tr:last-child {
            border-bottom: none
        }

        .tzbk-rtn {
            padding: 8px 6px;
            vertical-align: middle
        }

        .tzbk-rtq {
            padding: 6px;
            text-align: right;
            white-space: nowrap;
            vertical-align: middle
        }

        .tzbk-room-hint {
            font-size: 11px;
            margin-top: 6px;
            min-height: 16px
        }

        .tzbk-room-name {
            font-weight: 600;
            color: #333;
            line-height: 1.3
        }

        .tzbk-room-price {
            font-size: 11px;
            color: #888;
            margin-top: 2px
        }

        .tzbk-room-price.tzbk-sup {
            color: #e35000
        }

        /* Note */
        .tzbk-note-sec label {
            font-size: 12px;
            font-weight: 600;
            color: #555;
            display: block;
            margin-bottom: 4px
        }

        .tzbk-remark {
            width: 100%;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 7px 9px;
            font-size: 13px;
            resize: vertical;
            box-sizing: border-box;
            font-family: inherit;
            min-height: 52px
        }

        .tzbk-remark:focus {
            outline: none;
            border-color: #e35000;
            box-shadow: 0 0 0 2px rgba(0, 166, 81, .12)
        }

        /* Right side */
        .tzbk-summary-box {
            background: #fff;
            border-radius: 8px;
            border: 1px solid #d4ead9;
            padding: 12px;
            margin-bottom: 12px
        }

        .tzbk-sum-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: #555;
            margin-bottom: 7px
        }

        .tzbk-sum-row:last-child {
            margin-bottom: 0
        }

        .tzbk-sum-total {
            border-top: 1px solid #e8e8e8;
            padding-top: 9px;
            margin-top: 4px;
            font-weight: 700;
            font-size: 14px;
            color: #222
        }

        #tzbk-summary-grand {
            color: #e35000;
            font-size: 17px;
            font-weight: 700
        }

        .tzbk-orig-price {
            color: #aaa;
            font-size: 11px;
            font-weight: 400;
            text-decoration: line-through;
            margin-right: 2px
        }

        .tzbk-tip-sec {
            background: #fffbf0;
            border: 1px solid #ffe9a0;
            border-radius: 6px;
            padding: 9px 11px;
            margin-top: 10px
        }

        .tzbk-tip-label {
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            font-size: 13px;
            color: #444;
            margin: 0
        }

        .tzbk-tip-chk {
            accent-color: #e35000;
            width: 15px;
            height: 15px;
            cursor: pointer;
            flex-shrink: 0
        }

        .tzbk-tip-note {
            font-size: 11px;
            color: #888;
            margin-top: 4px;
            padding-left: 21px
        }

        .tzbk-info-box {
            font-size: 11px;
            color: #555;
            line-height: 1.7;
            background: #fff;
            border: 1px solid #d4ead9;
            border-radius: 6px;
            padding: 9px 10px
        }

        .tzbk-info-box i {
            color: #e35000;
            margin-right: 3px
        }

        /* Footer */
        .tzbk-footer {
            padding: 12px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #eee;
            background: #fff
        }

        .tzbk-btn-cancel {
            background: #fff;
            color: #555;
            border: 1px solid #ccc;
            padding: 9px 22px;
            border-radius: 5px;
            font-size: 14px;
            cursor: pointer;
            transition: background .12s
        }

        .tzbk-btn-cancel:hover {
            background: #f5f5f5
        }

        .tzbk-btn-confirm {
            background: #e35000;
            color: #fff;
            border: none;
            padding: 10px 30px;
            border-radius: 5px;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            transition: background .15s;
            display: flex;
            align-items: center;
            gap: 6px
        }

        .tzbk-btn-confirm:hover {
            background: #008f44
        }

        .tzbk-btn-confirm:disabled {
            background: #aaa;
            cursor: not-allowed
        }

        #tzbkModal .tzbk-dialog {
            max-width: 900px;
            margin: 28px auto;
        }

        #tzbkModal .tzbk-content {
            border-radius: 16px;
            border: 1px solid #eef0f3;
            box-shadow: 0 24px 70px rgba(15, 23, 42, .18);
            color: #1f2937;
        }

        #tzbkModal .tzbk-header {
            background: #fff;
            color: #111827;
            padding: 18px 22px;
            border-bottom: 1px solid #edf0f2;
            gap: 12px;
        }

        #tzbkModal .tzbk-header-plane {
            width: 38px;
            height: 38px;
            border-radius: 12px;
            background: #fff3ed;
            color: #e35000;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
        }

        #tzbkModal .tzbk-header-name {
            font-size: 15px;
            font-weight: 700;
            color: #111827;
        }

        #tzbkModal .tzbk-header-sub {
            color: #6b7280;
            opacity: 1;
            font-size: 12px;
        }

        #tzbkModal .tzbk-header-close {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: #f6f7f9;
            color: #6b7280;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }

        #tzbkModal .tzbk-header-close:hover {
            background: #eef0f3;
            color: #111827;
        }

        #tzbkModal .tzbk-left {
            padding: 20px 22px;
            border-right: 1px solid #eef0f3;
        }

        #tzbkModal .tzbk-right {
            width: 270px;
            padding: 20px;
            background: #fafafa;
        }

        #tzbkModal .tzbk-sec-title {
            color: #111827;
            border: 0;
            padding-bottom: 0;
            margin-bottom: 14px;
            font-size: 13px;
            letter-spacing: 0;
        }

        #tzbkModal .tzbk-pax-tbl,
        #tzbkModal .tzbk-room-tbl {
            border-collapse: separate;
            border-spacing: 0;
        }

        #tzbkModal .tzbk-pax-tbl thead tr {
            background: #f7f8fa;
        }

        #tzbkModal .tzbk-pax-tbl th {
            color: #6b7280;
            border-bottom: 0;
            padding: 9px 10px;
            font-size: 12px;
        }

        #tzbkModal .tzbk-pax-tbl td {
            border-bottom: 1px solid #f1f2f4;
            padding: 12px 10px;
        }

        #tzbkModal .tzbk-pax-name,
        #tzbkModal .tzbk-room-name {
            color: #111827;
            font-weight: 600;
        }

        #tzbkModal .tzbk-pax-sub,
        #tzbkModal .tzbk-room-price,
        #tzbkModal .tzbk-tip-note {
            color: #8a93a3;
        }

        #tzbkModal .tzbk-line-total,
        #tzbkModal .tzbk-room-price.tzbk-sup,
        #tzbkModal #tzbk-summary-grand {
            color: #e35000 !important;
        }

        #tzbkModal .tzbk-qty-ctrl {
            gap: 8px;
        }

        #tzbkModal .tzbk-qty-btn {
            width: 30px;
            height: 30px;
            border-radius: 10px;
            border: 1px solid #e5e7eb;
            background: #fff;
            color: #374151;
            font-weight: 700;
            box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
        }

        #tzbkModal .tzbk-qty-btn:hover {
            background: #fff3ed;
            border-color: #f5b58d;
            color: #e35000;
        }

        #tzbkModal .tzbk-qty-val {
            min-width: 24px;
            color: #111827;
        }

        #tzbkModal .tzbk-room-sec,
        #tzbkModal .tzbk-tip-sec,
        #tzbkModal .tzbk-note-sec {
            margin-top: 16px;
        }

        #tzbkModal .tzbk-room-lbl {
            color: #111827;
            font-size: 13px;
            margin-bottom: 10px;
        }

        #tzbkModal .tzbk-room-remain {
            border-radius: 999px;
            background: #f3f4f6;
            color: #6b7280;
            padding: 3px 9px;
        }

        #tzbkModal .tzbk-room-remain.warn {
            background: #fff1f2;
            color: #dc2626;
        }

        #tzbkModal .tzbk-room-remain.ok {
            background: #ecfdf3;
            color: #15803d;
        }

        #tzbkModal .tzbk-room-tbl tr {
            border-bottom: 1px solid #f1f2f4;
        }

        #tzbkModal .tzbk-rtn {
            padding: 11px 8px;
        }

        #tzbkModal .tzbk-remark {
            border-radius: 10px;
            border-color: #e5e7eb;
            padding: 10px 12px;
            min-height: 72px;
        }

        #tzbkModal .tzbk-remark:focus {
            border-color: #f19a63;
            box-shadow: 0 0 0 3px rgba(227, 80, 0, .1);
        }

        #tzbkModal .tzbk-summary-box,
        #tzbkModal .tzbk-info-box,
        #tzbkModal .tzbk-tip-sec {
            border-radius: 12px;
            border: 1px solid #eceff3;
            box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
        }

        #tzbkModal .tzbk-summary-box,
        #tzbkModal .tzbk-info-box {
            background: #fff;
        }

        #tzbkModal .tzbk-tip-sec {
            background: #fffaf0;
            border-color: #fdecc8;
        }

        #tzbkModal .tzbk-sum-row {
            color: #6b7280;
            font-size: 13px;
        }

        #tzbkModal .tzbk-sum-total {
            color: #111827;
            border-top-color: #eef0f3;
        }

        #tzbkModal .tzbk-info-box {
            color: #6b7280;
        }

        #tzbkModal .tzbk-info-line {
            display: flex;
            gap: 7px;
            align-items: flex-start;
        }

        #tzbkModal .tzbk-info-line+.tzbk-info-line {
            margin-top: 7px;
        }

        #tzbkModal .tzbk-info-box .material-symbols-outlined {
            color: #16a34a;
            font-size: 17px;
            line-height: 1.2;
        }

        #tzbkModal .tzbk-footer {
            padding: 16px 22px;
            border-top-color: #eef0f3;
            background: #fff;
        }

        #tzbkModal .tzbk-btn-cancel,
        #tzbkModal .tzbk-btn-confirm {
            min-height: 42px;
            border-radius: 10px;
            padding: 10px 18px;
        }

        #tzbkModal .tzbk-btn-cancel {
            border-color: #e5e7eb;
            color: #4b5563;
            background: #fff;
        }

        #tzbkModal .tzbk-btn-cancel:hover {
            background: #f7f8fa;
        }

        #tzbkModal .tzbk-btn-confirm {
            background: #e35000;
            box-shadow: 0 8px 18px rgba(227, 80, 0, .18);
        }

        #tzbkModal .tzbk-btn-confirm:hover {
            background: #c84600;
        }

        #tzbkModal .tzbk-btn-confirm:disabled {
            background: #d1d5db;
            color: #fff;
            box-shadow: none;
        }

        #tzbkModal .tzbk-btn-confirm .material-symbols-outlined {
            font-size: 20px;
            line-height: 1;
        }

        /* Mobile */
        @media(max-width:575px) {
            .tzbk-dialog {
                margin: 0;
                width: 100%;
                max-width: 100%
            }

            .tzbk-content {
                border-radius: 0
            }

            .tzbk-body {
                flex-direction: column
            }

            .tzbk-left {
                border-right: none;
                border-bottom: 1px solid #eee;
                max-height: none
            }

            .tzbk-right {
                width: 100%;
                background: #fff;
                padding: 14px 16px
            }

            #tzbkModal .tzbk-dialog {
                margin: 0;
            }

            #tzbkModal .tzbk-content {
                border-radius: 0;
                border: 0;
            }

            #tzbkModal .tzbk-header,
            #tzbkModal .tzbk-left,
            #tzbkModal .tzbk-right,
            #tzbkModal .tzbk-footer {
                padding-left: 16px;
                padding-right: 16px;
            }
        }