.tbp-wrapper {
    --tbp-primary: #16a34a;
    --tbp-primary-dark: #128a3e;
    --tbp-primary-light: #e9f9ef;
    --tbp-red: #ef4444;
    --tbp-text: #1f2937;
    --tbp-muted: #6b7280;
    --tbp-border: #e5e7eb;
    --tbp-bg: #f9fafb;
    /* Chiều cao dùng chung cho input/select/nút chọn Map để luôn bằng nhau. */
    --tbp-control-height: 48px;
    /* Bo góc dùng chung cho toàn bộ input, nút, bản đồ, modal, khung form. */
    --tbp-radius: 5px;
    max-width: 1200px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--tbp-text);
    box-sizing: border-box;
}

.tbp-wrapper *,
.tbp-wrapper *::before,
.tbp-wrapper *::after {
    box-sizing: border-box;
}

.tbp-card {
    background: #fff;
    border-radius: var(--tbp-radius);
    padding: 0px;
    animation: tbp-fade-in .4s ease;
}

@keyframes tbp-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.tbp-header { margin-bottom: 14px; }
.tbp-title { margin: 0 0 4px; font-size: 22px; font-weight: 600; color: var(--tbp-text); }
.tbp-subtitle { margin: 0; color: var(--tbp-muted); font-size: 16px; }

.tbp-form { display: flex; flex-direction: column; gap: 12px; }
.tbp-row { display: flex; gap: 12px; }
.tbp-row-2 > .tbp-field { flex: 1; min-width: 0; }

.tbp-field { display: flex; flex-direction: column; gap: 6px; }
.tbp-field label { font-size: 13px; font-weight: 600; color: var(--tbp-text); }
.tbp-required { color: var(--tbp-red); }

.tbp-field input[type="text"],
.tbp-field input[type="tel"],
.tbp-field input[type="datetime-local"],
.tbp-field select {
    width: 100%;
    /* min-width: 0 bắt buộc để input datetime-local co lại đúng theo khung cha (flex item),
       nếu không nội dung ngày giờ dài sẽ đẩy input tràn ra ngoài card trên điện thoại. */
    min-width: 0;
    max-width: 100%;
    /* Chiều cao bằng đúng nút chọn trên Map (.tbp-btn-map-pick) để hàng thẳng đều. */
    height: var(--tbp-control-height);
    padding: 0 14px;
    border: 1.5px solid var(--tbp-border);
    border-radius: var(--tbp-radius);
    /* 16px tối thiểu để Safari trên iPhone không tự phóng to (zoom) khi focus vào input. */
    font-size: 16px;
    line-height: calc(var(--tbp-control-height) - 3px);
    background: var(--tbp-bg);
    transition: border-color .2s ease, box-shadow .2s ease;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
}

/* Safari/iOS bỏ qua width:100% trên input[type="datetime-local"] trừ khi ép display:block
   tường minh (mặc định input này vẫn ở dạng inline theo WebKit). Thiếu dòng này, nội dung
   ngày giờ dài (định dạng tiếng Việt "20:16 ngày 17 thg 7, 2026") sẽ khiến input phình rộng
   hơn khung cha và tràn ra ngoài card khi xem trên iPhone. */
.tbp-field input[type="datetime-local"] {
    display: block;
    -webkit-appearance: none;
    appearance: none;
}

.tbp-field textarea {
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
    border: 1.5px solid var(--tbp-border);
    border-radius: var(--tbp-radius);
    font-size: 16px;
    background: var(--tbp-bg);
    transition: border-color .2s ease, box-shadow .2s ease;
    outline: none;
    font-family: inherit;
}

.tbp-field input:focus,
.tbp-field select:focus,
.tbp-field textarea:focus {
    border-color: var(--tbp-primary);
    box-shadow: 0 0 0 3px var(--tbp-primary-light);
    background: #fff;
}

.tbp-input-group { display: flex; gap: 8px; }
.tbp-input-group input { flex: 1; min-width: 0; }

.tbp-suggestions {
    position: relative;
    z-index: 20;
}
.tbp-suggestions:empty { display: none; }
.tbp-suggestions ul {
    list-style: none;
    margin: 4px 0 0;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--tbp-border);
    border-radius: var(--tbp-radius);
    box-shadow: 0 8px 24px rgba(16,24,40,.1);
    max-height: 220px;
    overflow-y: auto;
}
.tbp-suggestions li {
    padding: 10px 12px;
    border-radius: var(--tbp-radius);
    cursor: pointer;
    font-size: 13px;
    color: var(--tbp-text);
}
.tbp-suggestions li:hover { background: var(--tbp-primary-light); }

.tbp-map-hint { font-size: 12px; color: var(--tbp-muted); margin-top: -4px; }

.tbp-map {
    width: 100%;
    height: 280px;
    border-radius: var(--tbp-radius);
    overflow: hidden;
    border: 1.5px solid var(--tbp-border);
    background: #eee;
}

.tbp-field textarea { resize: vertical; min-height: 60px; }

.tbp-error { color: var(--tbp-red); font-size: 12px; min-height: 0; line-height: 1.4; }
.tbp-error:empty { display: none; }

.tbp-price-box {
    background: linear-gradient(135deg, var(--tbp-primary-light), #fff);
    border: 1.5px solid var(--tbp-primary);
    border-radius: var(--tbp-radius);
    padding: 18px;
    animation: tbp-fade-in .4s ease;
}
.tbp-price-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 14px; color: var(--tbp-text); }
.tbp-price-total { border-top: 1.5px dashed var(--tbp-primary); margin-top: 6px; padding-top: 12px; }
.tbp-price-total span { font-weight: 600; font-size: 15px; }
.tbp-price-total strong { font-size: 24px; color: var(--tbp-primary-dark); font-weight: 600; }
.tbp-price-note { font-size: 11.5px; color: var(--tbp-muted); margin: 10px 0 0; line-height: 1.5; }
.tbp-price-warning {
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--tbp-radius);
    padding: 8px 10px;
    font-weight: 600;
}

.tbp-btn-submit {
    background: var(--tbp-primary);
    color: #fff;
    border: none;
    border-radius: var(--tbp-radius);
    padding: 16px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .5px;
    cursor: pointer;
    transition: background .2s ease, transform .1s ease, opacity .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.tbp-btn-submit:not(:disabled):hover { background: var(--tbp-primary-dark); transform: translateY(-1px); }
.tbp-btn-submit:disabled { opacity: .45; cursor: not-allowed; }

.tbp-btn-loading {
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tbp-spin .7s linear infinite;
}
@keyframes tbp-spin { to { transform: rotate(360deg); } }

.tbp-result-box {
    border-radius: var(--tbp-radius);
    padding: 16px;
    font-size: 14px;
    text-align: center;
    animation: tbp-fade-in .3s ease;
}
.tbp-result-box.tbp-success { background: var(--tbp-primary-light); color: var(--tbp-primary-dark); border: 1.5px solid var(--tbp-primary); }
.tbp-result-box.tbp-error { background: #fef2f2; color: #b91c1c; border: 1.5px solid #fecaca; }
.tbp-result-box strong { display: block; font-size: 18px; margin-bottom: 4px; }

.tbp-hidden { display: none !important; }
.tbp-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.tbp-marker-pickup { filter: hue-rotate(90deg); }
.tbp-marker-dropoff { filter: hue-rotate(320deg) saturate(3); }

.tbp-btn-map-pick {
    flex-shrink: 0;
    width: var(--tbp-control-height);
    height: var(--tbp-control-height);
    border-radius: var(--tbp-radius);
    border: 1.5px solid var(--tbp-border);
    background: var(--tbp-bg);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: transform .15s ease, background .2s ease;
}
.tbp-btn-map-pick:hover { background: var(--tbp-primary-light); transform: scale(1.05); }

/* -------------------- Modal chọn vị trí trên bản đồ -------------------- */
.tbp-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    padding: 16px;
    animation: tbp-fade-in .2s ease;
}

.tbp-modal {
    background: #fff;
    border-radius: var(--tbp-radius);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
}

.tbp-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--tbp-border);
}
.tbp-modal-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--tbp-text); }
.tbp-modal-close {
    border: none;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: var(--tbp-muted);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: var(--tbp-radius);
}
.tbp-modal-close:hover { background: var(--tbp-bg); color: var(--tbp-text); }

.tbp-modal-body { padding: 16px 20px; }
.tbp-modal-map {
    width: 100%;
    height: 360px;
    border-radius: var(--tbp-radius);
    overflow: hidden;
    border: 1.5px solid var(--tbp-border);
    background: #eee;
}
.tbp-modal-hint { font-size: 12px; color: var(--tbp-muted); margin: 10px 0 0; text-align: center; }

.tbp-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid var(--tbp-border);
    flex-wrap: wrap;
}
.tbp-modal-footer-actions { display: flex; gap: 10px; margin-left: auto; }

/* Cả 3 nút dùng chung chiều cao --tbp-control-height (giống input/nút chọn Map) để nút
   Huỷ và Xác nhận vị trí luôn cao bằng nút Vị trí hiện tại, kể cả khi xuống hàng trên
   điện thoại. */
.tbp-btn-locate-modal,
.tbp-btn-cancel,
.tbp-btn-confirm {
    height: var(--tbp-control-height);
    box-sizing: border-box;
}

.tbp-btn-locate-modal {
    border: 1.5px solid var(--tbp-primary);
    background: var(--tbp-primary-light);
    color: var(--tbp-primary-dark);
    border-radius: var(--tbp-radius);
    padding: 0 16px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1;
    white-space: nowrap;
    transition: background .2s ease;
}
.tbp-btn-locate-modal:hover { background: #d7f5e2; }
.tbp-btn-locate-modal.tbp-active { opacity: .6; pointer-events: none; }

.tbp-btn-cancel {
    border: 1.5px solid var(--tbp-border);
    background: #fff;
    color: var(--tbp-text);
    border-radius: var(--tbp-radius);
    padding: 0 16px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.tbp-btn-cancel:hover { background: var(--tbp-bg); }

.tbp-btn-confirm {
    border: none;
    background: var(--tbp-primary);
    color: #fff;
    border-radius: var(--tbp-radius);
    padding: 0 18px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    transition: background .2s ease, opacity .2s ease;
}
.tbp-btn-confirm:hover:not(:disabled) { background: var(--tbp-primary-dark); }
.tbp-btn-confirm:disabled { opacity: .45; cursor: not-allowed; }

body.tbp-modal-open { overflow: hidden; }

@media (max-width: 560px) {
    .tbp-modal-map { height: 280px; }
    .tbp-modal-footer { flex-direction: column; align-items: stretch; }
    /* Xếp cả 3 nút (Vị trí hiện tại / Huỷ / Xác nhận vị trí) thành 1 cột, mỗi nút rộng hết
       khung, thay vì để Huỷ và Xác nhận vị trí chia đôi hàng ngang. Nếu để chia đôi, chữ
       "Xác nhận vị trí" dễ bị xuống dòng trong nút hẹp, khiến nút đó cao hơn nút Vị trí
       hiện tại ở trên. Xếp dọc giúp cả 3 nút luôn cao bằng nhau (đều dùng chung
       --tbp-control-height) và không bị vượt khung. */
    .tbp-modal-footer-actions {
        margin-left: 0;
        flex-direction: column;
        width: 100%;
    }
    .tbp-modal-footer-actions button { flex: none; width: 100%; }
}

@media (max-width: 560px) {
    .tbp-row { flex-direction: column; }
    .tbp-card { padding: 0px; border-radius: var(--tbp-radius); }
    .tbp-map { height: 220px; }
}

/* Màn hình iPhone rất hẹp (SE, mini...): định dạng ngày giờ tiếng Việt còn dài hơn cả bề rộng
   khả dụng, nên giảm padding ngang một chút để chắc chắn không tràn khung. */
@media (max-width: 380px) {
    .tbp-field input[type="datetime-local"] {
        padding: 0 8px;
    }
}