/* =====================================================================
 * [trip_plan_popup] – popup "Thiết kế hành trình riêng" (form Contact Form 7 bên trái, ảnh bên phải)
 * Màu: chỉ dùng biến :root (--hg-primary, --hg-text, --hg-button, --green-natural)
 * ===================================================================== */
.tp-modal[hidden] { display: none; }
.tp-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	overflow-y: auto;
	opacity: 0;
	transition: opacity .2s;
}
.tp-modal.is-open { opacity: 1; }
html.tp-lock, html.tp-lock body { overflow: hidden; }

.tp-overlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--hg-text) 55%, transparent); }

.tp-panel {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	width: 100%;
	max-width: 860px;
	margin: auto;
	padding: 24px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 24px 60px color-mix(in srgb, var(--hg-text) 30%, transparent);
	transform: translateY(16px) scale(.98);
	transition: transform .22s ease;
}
.tp-modal.is-open .tp-panel { transform: none; }
.tp-panel.no-img { grid-template-columns: 1fr; max-width: 520px; }

/* Nút đóng */
.tp-panel .tp-close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff !important;
	color: var(--hg-text) !important;
	box-shadow: 0 2px 10px color-mix(in srgb, var(--hg-text) 18%, transparent);
	cursor: pointer;
	transition: transform .2s, color .2s;
}
.tp-panel .tp-close svg { width: 20px; height: 20px; }
.tp-panel .tp-close:hover { color: var(--hg-primary) !important; transform: rotate(90deg); }

/* Ảnh bên phải */
.tp-media { position: relative; min-height: 100%; overflow: hidden; border-radius: 12px; background: color-mix(in srgb, var(--hg-text) 8%, #fff); }
.tp-media .tp-img { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; max-width: none; margin: 0; object-fit: cover; object-position: 78% center; }

/* Form */
.tp-form { min-width: 0; padding: 8px 0 4px 8px; }
.tp-modal .tp-title { 
    margin: 0 0 20px; 
    font-size: 28px !important;
    color: var(--hg-primary); 
    font-weight: 600; 
    line-height: 1.25; 
}

.tp-form .wpcf7-form p { margin: 0; }
.tp-form .wpcf7-form br { display: none; }
.tp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.tp-f { min-width: 0; }
.tp-full { grid-column: 1 / -1; }
.tp-f label { 
    display: block; 
    margin: 0 0 6px; 
    color: var(--hg-text); 
    font-size: 16px; 
    font-weight: 500; 
    line-height: 1.4; 
}
.tp-f .wpcf7-form-control-wrap { display: block; position: relative; }

.tp-form input[type="text"],
.tp-form input[type="tel"],
.tp-form input[type="email"],
.tp-form input[type="number"],
.tp-form select,
.tp-form textarea,
.tp-form .hg-cal-view {
	width: 100%;
	height: 40px;
	min-height: 0;
	margin: 0;
	padding: 0 12px;
	border: 1px solid color-mix(in srgb, var(--hg-text) 16%, transparent) !important;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: none;
	color: var(--hg-text) !important;
	font-size: 14px;
	line-height: 1.3;
	transition: border-color .15s, box-shadow .15s;
}
.tp-form .hg-cal-view { padding-right: 40px; background-size: 18px !important; background-position: right 12px center !important; }
.tp-form textarea { height: 84px; padding: 10px 12px; resize: vertical; }
.tp-form select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 36px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23999' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
	cursor: pointer;
}
.tp-form input::placeholder, .tp-form textarea::placeholder { color: color-mix(in srgb, var(--hg-text) 45%, transparent); opacity: 1; }
.tp-form .hg-cal-view.is-empty, .tp-form select:invalid, .tp-form select.is-placeholder { color: color-mix(in srgb, var(--hg-text) 45%, transparent) !important; }
.tp-form input:focus, .tp-form select:focus, .tp-form textarea:focus, .tp-form .hg-cal-view:focus-visible, .tp-form .hg-cal-view.is-open {
	border-color: var(--hg-primary) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--hg-primary) 12%, transparent);
	outline: none;
}
.tp-form input.wpcf7-not-valid, .tp-form select.wpcf7-not-valid, .tp-form textarea.wpcf7-not-valid, .tp-form .wpcf7-not-valid ~ .hg-cal-view { border-color: #d63638 !important; }
.tp-form .wpcf7-not-valid-tip { margin-top: 4px; font-size: 12px; }
.tp-form .ctd-cal { z-index: 5; width: 300px; max-width: calc(100vw - 48px); }

/* Nút gửi (có icon máy bay giấy) */
.tp-send { position: relative; display: flex; justify-content: center; margin-top: 20px; }
.tp-send p { position: relative; display: inline-flex; align-items: center; }
.tp-form .tp-send input[type="submit"] {
	height: 38px;
	min-height: 0;
	margin: 0;
	padding: 0 20px 0 42px;
	border: 0;
	border-radius: 16px;
	background: var(--green-natural) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2l-7 20-4-9-9-4 20-7z'/%3E%3C/svg%3E") no-repeat 18px center / 16px !important;
	box-shadow: none;
	color: #fff !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 38px;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	transition: background-color .2s, transform .2s;
}
.tp-form .tp-send input[type="submit"]:hover { background-color: var(--hg-button) !important; transform: translateY(-1px); }
.tp-form .tp-send input[type="submit"]:disabled { opacity: .6; cursor: wait; }
.tp-send .wpcf7-spinner { position: absolute; top: 50%; left: 100%; margin: -12px 0 0 8px; }
.tp-form .wpcf7-response-output { margin: 14px 0 0 !important; padding: 8px 12px !important; border-radius: 8px; font-size: 14px; text-align: center; }


/* Đang gửi: vòng xoay trên nút, CF7 không hiện spinner riêng */
.tp-form .wpcf7-spinner { display: none !important; }
.tp-form form.is-sending .tp-send input[type="submit"] { background-image: none !important; opacity: .75; pointer-events: none; }
.tp-form form.is-sending .tp-send p::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 16px;
	z-index: 1;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	border: 2px solid #fff;
	border-right-color: transparent;
	border-radius: 50%;
	animation: tpSpin .7s linear infinite;
}
@keyframes tpSpin { to { transform: rotate(360deg); } }
.tp-form form.sent .wpcf7-response-output { display: none; } /* thành công → dùng màn hình cảm ơn */

/* ---------- Màn hình cảm ơn ---------- */
.tp-success { display: none; flex-direction: column; align-items: center; justify-content: center; padding: 24px 8px 12px; text-align: center; }
.tp-modal.is-sent .tp-form, .tp-modal.is-sent .tp-media { display: none; }
.tp-modal.is-sent .tp-panel { grid-template-columns: 1fr; max-width: 500px; }
.tp-modal.is-sent .tp-success { display: flex; }
.tp-success-icon { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin-bottom: 18px; border-radius: 50%; background: color-mix(in srgb, var(--green-natural) 14%, #fff); color: var(--green-natural); animation: tpPop .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.tp-success-icon svg { width: 36px; height: 36px; stroke-dasharray: 24; stroke-dashoffset: 24; animation: tpDraw .4s .25s ease-out forwards; }
@keyframes tpPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes tpDraw { to { stroke-dashoffset: 0; } }
.tp-modal .tp-success-title { margin: 0 0 12px; color: var(--hg-primary); font-size: 22px; font-weight: 700; line-height: 1.35; }
.tp-success-text { max-width: 400px; margin: 0 0 8px; color: var(--hg-text); font-size: 15px; line-height: 1.6; }
.tp-success-phone b { color: var(--hg-primary); white-space: nowrap; }
.tp-success-phone[hidden] { display: none; }
.tp-success-note { max-width: 400px; margin: 0 0 22px; color: color-mix(in srgb, var(--hg-text) 60%, #fff); font-size: 13px; line-height: 1.5; }
.tp-success-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tp-modal .tp-success-close, .tp-modal .tp-success-more { display: inline-flex; align-items: center; justify-content: center; min-width: 140px; min-height: 0; margin: 0; padding: 11px 22px; border-radius: 999px; font-size: 15px; font-weight: 600; line-height: 1.2; text-transform: none; letter-spacing: 0; text-decoration: none !important; cursor: pointer; transition: background .2s, color .2s; }
.tp-modal .tp-success-close { border: 0 !important; background: var(--hg-button) !important; color: #fff !important; }
.tp-modal .tp-success-close:hover { background: var(--hg-primary) !important; }
.tp-modal .tp-success-more { border: 1px solid var(--hg-primary) !important; background: #fff !important; color: var(--hg-primary) !important; }
.tp-modal .tp-success-more:hover { background: var(--hg-primary) !important; color: #fff !important; }
.tp-modal .tp-success-close:focus, .tp-modal .tp-success-more:focus { outline: none; }
.tp-modal .tp-success-close:focus-visible, .tp-modal .tp-success-more:focus-visible { outline: 2px solid var(--hg-primary); outline-offset: 2px; }

/* ---------- Màn hình nhỏ ---------- */
@media (max-width: 849px) {
	.tp-panel { grid-template-columns: 1fr; max-width: 520px; padding: 20px; }
	.tp-media { display: none; }
	.tp-form { padding: 4px 0 0; }
	.tp-modal .tp-title { padding-right: 36px; font-size: 24px; }
}
@media (max-width: 479px) {
	.tp-modal { align-items: flex-end; padding: 0; }
	.tp-panel { margin: auto 0 0; border-radius: 16px 16px 0 0; max-height: 92vh; overflow-y: auto; }
	.tp-grid { grid-template-columns: 1fr; gap: 12px; }
	.tp-modal .tp-title { margin-bottom: 14px; font-size: 22px; }
}