/* Modals on phones (added to every public page by core/view.js, after the page's own CSS).
 *
 * The modals were laid out for desktop: side-by-side panels, fixed-width columns and
 * rows of tabs that ran off a 390px screen. Everything here is inside a phone-width
 * media query, so desktop is untouched. */

@media (max-width: 575.98px) {

	/* ── Every modal: a little room at the edges, nothing wider than the screen ── */
	.modal .modal-dialog { margin-left: 10px; margin-right: 10px; max-width: none; }
	.modal .modal-content { max-width: 100%; }
	.modal .modal-content img { max-width: 100%; height: auto; }

	/* ── Login / sign-up (#choose-login, copied into each page) ──
	   On desktop the form sits on the right half of a balloon picture. On a phone that
	   left the form a 100px strip, so the picture goes and the form takes the width. */
	.modal .signup-bg,
	.modal#choose-login .modal-content .signup-bg,
	.modal#choose-state .modal-content .signup-bg {
		background-image: none !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	/* Sign-up mode narrowed the dialog to 85vw */
	.modal#choose-login.auth-reg-mode .modal-dialog,
	.modal#choose-state.auth-reg-mode .modal-dialog { max-width: none !important; }
	.modal .login-bg::after { display: none !important; }
	/* The ids beat the pages' own "#choose-login .signup-box { max-width: 50% !important }" */
	.modal .signup-box,
	.modal#choose-login .signup-bg .signup-box,
	.modal#choose-state .signup-bg .signup-box {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 30px 22px 24px !important;
		border-radius: 20px;
	}
	.modal .signup-box .login-title { margin-top: 0; font-size: 22px; }
	.modal .signup-box .new-card-btn {
		width: 100%;
		margin: 6px 0 0 !important;
		padding: 14px 20px;
		justify-content: center;
	}
	.modal .signup-box .login-forget-password { flex-wrap: wrap; gap: 8px; }

	/* ── Checkout: the Step 1 / 2 / 3 tabs share the width instead of running off it ── */
	.shopcart-step-tab { flex-wrap: nowrap; }
	.shopcart-step-tab .nav-item { flex: 1 1 0; min-width: 0; }
	.shopcart-step-tab .nav-link { width: 100%; padding: 7px 4px 7px 14px; }
	.shopcart-step-tab .nav-link h5 { font-size: 13px; margin-bottom: 0; }
	.shopcart-step-tab .nav-link span { font-size: 10px; line-height: 1.25; display: block; }

	/* ── Checkout: the cart table becomes one card per number ──
	   number and price on top, the plan under them, the timer and Remove at the bottom */
	.shopingnumbers-list { overflow-x: visible !important; }
	.shopingnumbers-list table,
	.shopingnumbers-list tbody { display: block; width: 100% !important; }
	.shopingnumbers-list thead { display: none; }
	.shopingnumbers-list tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 10px 12px;
		padding: 14px 0;
		border-bottom: 1px solid #eef0f6;
	}
	.shopingnumbers-list td { display: block; width: auto !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; }
	.shopingnumbers-list td:nth-child(1) { grid-column: 1; grid-row: 1; }
	.shopingnumbers-list td:nth-child(3) { grid-column: 2; grid-row: 1; text-align: right; }
	.shopingnumbers-list td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
	.shopingnumbers-list td:nth-child(4) { grid-column: 1 / -1; grid-row: 3; }
	.shopingnumbers-list .shopingnumbers-number { white-space: nowrap; }
	.shopingnumbers-list .shopingnumbers-price { justify-content: flex-end; font-size: 14px; }
	.shopingnumbers-list .shopingnumbers-reserved {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
	}
	.shopingnumbers-list .shopingnumbers-reserved p { margin: 0; }
	.shopingnumbers-list .cart-plan-select,
	.shopingnumbers-list .nrps { width: 100%; max-width: 100%; }

	/* ── Payment method tabs (checkout + transfer): a grid that wraps, not a row that
	   scrolls sideways with the last methods cut off ── */
	.secure-pay-methods,
	.sp-sidebar {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px;
		overflow: visible !important;
		width: 100% !important;
		padding: 10px !important;
	}
	.secure-pay-methods .secure-pay-method,
	.sp-sidebar .sp-tab {
		width: 100%;
		min-width: 0;
		justify-content: center;
		gap: 6px;
		padding: 10px 6px;
		font-size: 13px;
		white-space: nowrap;
	}
	.secure-pay-fields { padding: 20px 16px; }

	/* ── Transfer modal: a title that fits beside the close button ── */
	.cb-modal-content .modal-title,
	.cb-modal-content #cbPanelBilling .modal-title,
	.cb-modal-content .cb-title { font-size: 20px !important; line-height: 1.3; padding: 0 30px; }
	.cb-modal-content .cb-x { top: 14px; right: 14px; }
	/* Back / Continue share the row, so a long label like "Continue To Pay" still fits */
	.cb-modal-content .cb-actions,
	.cb-modal-content .sp-footer,
	.secure-pay-footer { display: flex; gap: 10px; }
	.cb-modal-content .cb-actions .cb-btn,
	.cb-modal-content .sp-footer .cb-btn,
	.secure-pay-footer .round-button { flex: 1 1 0; min-width: 0; white-space: nowrap; padding-left: 10px; padding-right: 10px; }

	/* Transfer Step 1: the plan table becomes one card per number, like the cart */
	.tn-plan-table-wrap { overflow-x: visible; padding: 4px 14px; }
	.tn-plan-table, .tn-plan-table tbody { display: block; width: 100%; }
	.tn-plan-table thead { display: none; }
	.tn-plan-table .tn-plan-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 8px 10px;
		padding: 12px 0;
	}
	.tn-plan-table tbody tr + tr { border-top: 1px solid #f3f4f8; }
	.tn-plan-table .tn-plan-row td { display: block; padding: 0 !important; border: 0 !important; min-width: 0; }
	.tn-plan-table .tn-plan-row td:nth-child(1) { grid-column: 1; grid-row: 1; }
	.tn-plan-table .tn-plan-row td:nth-child(3) { grid-column: 2; grid-row: 1; }
	.tn-plan-table .tn-plan-row td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
	.tn-plan-table .tn-plan-select,
	.tn-plan-table .nrps { width: 100%; max-width: 100%; }
	.tn-plan-table .tn-price-input { width: 96px; text-align: center; }

	/* ── Add to wishlist: its two buttons side by side ran off the right edge ── */
	.modal.wishlist-create .d-flex { flex-wrap: wrap; gap: 10px; }
	.modal.wishlist-create .d-flex > .new-card-btn {
		flex: 1 1 140px;
		min-width: 0;
		margin: 0 !important;
		padding: 12px 14px;
		justify-content: center;
		white-space: nowrap;
	}

	/* ── Offer history tables: scroll sideways inside the modal instead of being cut off ── */
	.modal .calllogs-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.modal .calllogs-table table { min-width: 560px; }

	/* ── Portal bill: five columns in tighter type, scrolling sideways if still too wide ── */
	.modal .bill-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.modal .bill-table { font-size: 12.5px; }
	.modal .bill-table th,
	.modal .bill-table td { padding: 9px 6px; }

	/* ── Modal titles fit on one line on small phones ── */
	.modal .modal-header .modal-title { font-size: 19px; }

	/* ── Search help: the intro line was 11px ── */
	.search-help-modal .modal-body > h3 { font-size: 13px; line-height: 1.5; }
}

/* Small phones (360px class): the transfer modal titles fit on one line */
@media (max-width: 380px) {
	.cb-modal-content .modal-title,
	.cb-modal-content #cbPanelBilling .modal-title,
	.cb-modal-content .cb-title { font-size: 18px !important; padding: 0 26px; }
}

@media (max-width: 380px) {
	/* Cart: the price moves under the number instead of running into it */
	.shopingnumbers-list td:nth-child(3) { grid-column: 1 / -1; grid-row: 2; text-align: left; }
	.shopingnumbers-list td:nth-child(2) { grid-row: 3; }
	.shopingnumbers-list td:nth-child(4) { grid-row: 4; }
	.shopingnumbers-list .shopingnumbers-price { justify-content: flex-start; }

	/* Checkout steps: just "STEP 1 / 2 / 3" - the subtitles no longer fit */
	.shopcart-step-tab .nav-link span { display: none; }

	/* Back is short, so the main button gets the room for "Continue To Pay" */
	.cb-modal-content .cb-actions .cb-btn--back,
	.cb-modal-content .sp-footer .cb-btn--back,
	.secure-pay-footer .btn-secondary { flex: 0 0 92px; }
	.cb-modal-content .cb-btn,
	.secure-pay-footer .round-button { font-size: 14px; }
}