.checkout-page{font-family:Inter, Arial, Helvetica, sans-serif; color:#0f172a; padding:28px 20px; background:#f8fafc}
.checkout-container{max-width:1100px;margin:0 auto}
.breadcrumb{font-size:14px;margin-bottom:18px;color:#475569}
.checkout-grid{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start}

.checkout-form-section,
.order-summary-section{
	background:#fff;
	padding:22px;
	border-radius:12px;
	border:1px solid #e6edf3;
	box-shadow:0 6px 20px rgba(15,23,42,0.04);
}

.checkout-form-section h2{font-size:1.5rem;margin:0 0 12px 0;color:#0f172a}
.checkout-form-section h3{font-size:1.05rem;margin:0 0 12px 0;color:#0f172a;display:flex;align-items:center;gap:8px}
.form-section{margin-bottom:18px}
.form-label{display:block;margin-bottom:8px;font-weight:700;color:#0f172a}
.form-input,.form-textarea{width:100%;padding:12px;border:1px solid #e6edf3;border-radius:8px;background:#fff;color:#0f172a}
.form-textarea{min-height:92px;resize:vertical}

.payment-methods{display:flex;flex-direction:column;gap:10px}
.payment-option{display:block}
.payment-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;border:1px solid #f1f5f9;background:#fff}
.payment-option input[type="radio"]{margin-right:8px}
.payment-title{font-weight:700;color:#0f172a}
.payment-desc{display:block;color:#64748b;font-size:0.9rem}

.checkout-actions{display:flex;gap:12px;margin-top:16px}
.btn-primary{background:linear-gradient(135deg,#059669,#047857);color:#fff;padding:10px 18px;border-radius:10px;border:none;cursor:pointer;font-weight:700;box-shadow:0 6px 18px rgba(5,150,105,0.15)}
.btn-primary .spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;display:inline-block;margin-left:8px}
.btn-secondary{background:#fff;color:#0f172a;padding:10px 16px;border-radius:10px;border:1px solid #e6edf3;cursor:pointer}

.security-badges{display:flex;gap:12px;margin-top:16px}
.security-badge{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;background:#f8fafc;border:1px solid #eef2f6;color:#475569}

.order-summary-section h3{margin-top:0;color:#0f172a}
.order-items{min-height:120px}
.order-item{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:8px;border:1px solid #f1f5f9;background:#fff}
.order-item .item-image img{width:120px;height:84px;object-fit:cover;border-radius:6px}
.order-item .item-details{flex:1}
.item-name{margin:0;font-size:1rem;font-weight:700;color:#0f172a}
.item-meta{color:#64748b;font-size:0.9rem;margin:6px 0}
.item-price{font-weight:700;color:#059669}

.order-total{margin-top:18px;border-top:1px dashed #eef2f6;padding-top:14px}
.total-row{display:flex;justify-content:space-between;margin-bottom:10px;color:#0f172a}
.final-total{font-size:1.125rem;font-weight:800}

/* Mobile adjustments */
@media(max-width:991px){
	.checkout-grid{grid-template-columns:1fr}
	.order-summary-section{order:2}
	.checkout-form-section{order:1}
}

@media(max-width:480px){
	.checkout-container{padding:0 8px}
	.order-item .item-image img{width:100%;height:120px}
}

/* Utility tweaks */
.text-center{text-align:center}
.text-muted{color:#94a3b8}

/* Modal styles (payment and success) */
.payment-modal,
.success-modal{
	position:fixed;
	inset:0; /* top:0; right:0; bottom:0; left:0; */
	display:none; /* toggled via JS */
	align-items:center;
	justify-content:center;
	background:rgba(15,23,42,0.45);
	z-index:1100;
	padding:20px;
}
.payment-modal .modal-content,
.success-modal .modal-content{
	background:#fff;
	border-radius:12px;
	max-width:720px;
	width:100%;
	padding:20px 22px;
	box-shadow:0 12px 40px rgba(2,6,23,0.2);
	animation:modalIn .16s ease-out;
}
@keyframes modalIn{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}

.payment-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.payment-header h3{margin:0;font-size:1.125rem;color:#0f172a}
.close-btn{background:transparent;border:none;font-size:1.5rem;line-height:1;cursor:pointer;color:#64748b}

.payment-amount{font-size:1.5rem;font-weight:800;margin:6px 0 12px;color:#0f172a}

.qr-code-container{display:flex;gap:20px;align-items:center}
.qr-code{width:180px;height:180px;object-fit:contain;border-radius:8px;border:1px solid #eef2f6;background:#fff;padding:8px}
.qr-instructions{flex:1}
.qr-instructions p{margin:6px 0;color:#475569}
.vendor-info{font-weight:700}
.upi-id{color:#64748b}

.payment-apps{margin-top:14px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.payment-app-btn{background:#fff;border:1px solid #e6edf3;color:#0f172a;padding:12px;border-radius:8px;cursor:pointer;display:flex;gap:12px;align-items:center;justify-content:flex-start;min-height:56px}
.payment-app-btn i{font-size:1.1rem}

.payment-app-icon{width:28px;height:28px;display:inline-block;flex-shrink:0}
.payment-app-btn span{font-weight:700}

/* Make the title inside the grid span both columns so buttons occupy the next rows */
.payment-apps .payment-apps-title {
	grid-column: 1 / -1;
	margin: 0 0 6px 0;
	font-weight: 600;
	color: #0f172a;
}

/* Images: constrain to avoid pushing layout */
.payment-app-btn img.payment-app-icon{max-width:36px;max-height:36px;width:auto;height:auto}

/* Selected state for buttons */
.payment-app-btn.selected{background:linear-gradient(90deg,#ecfdf5,#dcfce7);border-color:#bbf7d0}
.payment-app-btn.selected .payment-app-icon{filter: none;}

/* Ensure icons are visible and not collapsed */
.payment-app-btn img.payment-app-icon{width:24px;height:24px;display:inline-block}

.btn-paid{background:linear-gradient(135deg,#059669,#047857);color:#fff;padding:10px 16px;border-radius:10px;border:none;cursor:pointer;font-weight:700;margin-top:14px}
.btn-paid.disabled{opacity:0.6;cursor:not-allowed}

.payment-timer{color:#475569;margin-top:10px;display:flex;align-items:center;gap:8px}
.payment-help{margin-top:12px;color:#64748b}

/* Success modal specifics */
.success-modal .modal-content{max-width:420px;text-align:center}
.success-icon{i{display:inline-block}}
.success-modal .modal-content h3{margin:8px 0 6px 0;color:#059669}

/* Mobile-specific modal/layout tweaks to match book-service responsiveness */
@media (max-width: 768px) {
	/* Make checkout grid stack cleanly */
	.checkout-grid { grid-template-columns: 1fr; gap: 18px; }
	.order-summary-section { order: 2; }
	.checkout-form-section { order: 1; }

	/* Make order item image full width inside card */
	.order-item { flex-direction: column; align-items: stretch; }
	.order-item .item-image img { width: 100%; height: 160px; object-fit: cover; }

	/* Mobile modal should be narrow and full-width with stacked QR */

	/* Mobile: hide QR and show only the top UPI app button to open app directly */
	.payment-modal .modal-content,
	.success-modal .modal-content { max-width: 96%; padding: 16px; }
	.qr-code-container { flex-direction: column; align-items: center; gap: 12px; }
	.qr-code { width: 220px; height: 220px; }
	.qr-instructions { text-align: center; }

	/* Hide QR section entirely on mobile to prefer app opening UX */
	.upi-qr-section { display: none !important; }

	/* Payment app buttons: show all options in a 2x2 grid on mobile as requested */
	.payment-apps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.payment-app-btn { display: flex; width: 100%; justify-content: flex-start; padding: 12px; }

	/* when first button expands on mobile, ensure icon and text align nicely */
	.payment-apps .payment-app-btn:nth-of-type(1) .payment-app-icon{margin-right:8px}

/* Desktop: ensure buttons in grid have enough padding and consistent look */
@media(min-width:769px){
    .payment-app-btn{padding:14px 16px}
}

	/* Make the paid button full-width and prominent */
	.btn-paid { width: 100%; display: block; }

	/* Make mobile action bar more compact */
	.checkout-actions.d-flex.d-md-none { padding: 10px; }
}

@media (max-width: 420px) {
	.qr-code { width: 180px; height: 180px; }
	.payment-amount { font-size: 1.125rem; }
	.checkout-form-section, .order-summary-section { padding: 14px; }
	.form-input, .form-textarea { padding: 10px; }
}