/* ==========================================================================
   Dive Master Insurance - shared mobile/responsive styles for the custom
   PHP pages (ClientArea, claims, orders, quote/application pages, etc.)

   Loaded by assets/includes/DMMobile.inc, which is included by each custom
   page directly after the WordPress theme header include.

   Scoping: DMMobile.inc runs a small script that adds the "dm-scope" class
   to every top-level element between the Elementor header and footer, so
   none of these rules touch the WordPress/Elementor parts of the page.
   ========================================================================== */

/* ---------- All screen sizes: sane sizing for legacy markup ---------- */

.dm-scope,
.dm-scope * {
	box-sizing: border-box;
}

.dm-scope img {
	max-width: 100%;
	height: auto;
}

/* Legacy inputs use size="50"/size="70" and textareas cols="100"/"120",
   which force fixed widths wider than a phone screen. Cap them. */
.dm-scope input,
.dm-scope select,
.dm-scope textarea {
	max-width: 100%;
}

.dm-scope form,
.dm-scope table {
	max-width: 100%;
}

/* A centred, readable content column on larger screens. Replaces the
   inline "width:50%; top:200px" wrappers that broke small screens.
   (Only applied via the explicit dm-card class so pages that style
   .loginpage themselves keep their own desktop look.) */
.dm-card {
	max-width: 1000px;
	margin: 24px auto;
	padding: 24px;
	background: #f7f7f7;
	border-radius: 8px;
}

.dm-form-row {
	margin-bottom: 14px;
}

.dm-form-row label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}

.dm-form-row input[type="text"],
.dm-form-row input[type="password"],
.dm-form-row input[type="email"] {
	width: 100%;
	max-width: 420px;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
}

/* Legacy alert rows: pages set bgcolor="#FF0000" + white text, but newer
   style blocks paint every row light grey, leaving white-on-grey alerts
   (age restrictions, invalid start dates etc). Force them back to a red
   banner so they are readable on PC and phones. */
td[bgcolor="#FF0000"],
td[bgcolor="#ff0000"],
.errorheader {
	background-color: #d5000f !important;
	color: #ffffff !important;
	font-weight: 600;
}

/* Red inline error banner (e.g. "Please select your qualification") */
.dm-error {
	background: #d5000f;
	color: #fff;
	padding: 10px 14px;
	border-radius: 4px;
	margin: 10px 0;
	font-weight: 600;
}

/* Quote / premium breakdown rows: right-aligned label, value column */
.dm-scope td.dm-price-label {
	text-align: right;
	font-weight: 600;
}

.dm-scope tr.dm-price-total td {
	border-top: 2px solid #073466;
	font-weight: 700;
}

/* ---------- Small screens ---------- */

@media (max-width: 768px) {

	/* Kill the fixed-width/offset wrappers used on some pages so nothing
	   hangs off the edge of the screen or slides sideways. */
	.dm-scope .loginpage,
	.dm-scope .claims_page,
	.dm-scope .claims_content,
	.dm-scope .custom-input,
	.dm-scope .sportdiver,
	.dm-scope .dmcheckout,
	.dm-scope .current-policy,
	.dm-scope .dm-card,
	.dm-scope.loginpage,
	.dm-scope.claims_page,
	.dm-scope.custom-input,
	.dm-scope.dmcheckout,
	.dm-scope.current-policy {
		width: 100% !important;
		max-width: 100% !important;
		position: static !important;
		top: 0 !important;
		left: 0 !important;
		margin: 0 0 16px 0 !important;
		padding: 12px !important;
	}

	.dm-scope h1.page-title {
		padding: 0 12px;
		font-size: 1.6em;
		word-break: normal;
	}

	/* --- Stack table cells: every legacy layout table becomes a single
	       column of label/value blocks instead of scrolling sideways. --- */
	.dm-scope table,
	.dm-scope tbody,
	.dm-scope tr,
	.dm-scope th,
	.dm-scope td {
		display: block;
		width: 100% !important;
	}

	.dm-scope thead {
		display: none;
	}

	.dm-scope table {
		border: none !important;
	}

	.dm-scope tr {
		padding: 6px 0;
		border: none !important;
		border-bottom: 1px solid #d9d9d9 !important;
	}

	.dm-scope td,
	.dm-scope th {
		text-align: left !important;
		white-space: normal !important;
		word-break: break-word;
		border: none !important;
		padding: 6px 4px !important;
	}

	/* Header rows converted to per-cell labels by DMMobile.inc's script */
	.dm-scope tr.dm-labels-row {
		display: none;
	}

	.dm-scope td[data-label]::before {
		content: attr(data-label);
		display: block;
		font-weight: 700;
		color: #073466;
		margin-bottom: 2px;
	}

	/* Section title rows (e.g. "IDEC Cover" on Current Policies) */
	.dm-scope tr.logintabletitle td {
		background: #073466;
		color: #fff;
		font-weight: 700;
		padding: 8px !important;
		border-radius: 4px;
	}

	/* Cells that only contained   are tagged by the script */
	.dm-scope td.dm-empty,
	.dm-scope th.dm-empty {
		display: none;
	}

	/* Price label cells left-align once stacked */
	.dm-scope td.dm-price-label {
		text-align: left !important;
	}

	.dm-scope tr.dm-price-total td {
		border-top: 2px solid #073466 !important;
	}

	/* --- Form controls --- */
	.dm-scope input[type="text"],
	.dm-scope input[type="password"],
	.dm-scope input[type="email"],
	.dm-scope textarea {
		width: 100%;
	}

	/* ...but keep short fields short: day/2-char and amount/10-char inputs
	   plus the month/year dropdowns stay inline so dates read naturally. */
	.dm-scope input[size="2"],
	.dm-scope input[size="3"],
	.dm-scope input[size="4"] {
		width: 3.5em;
		display: inline-block;
	}

	.dm-scope input[size="10"] {
		width: 8em;
		display: inline-block;
	}

	.dm-scope select {
		width: auto;
		max-width: 100%;
		display: inline-block;
		margin: 2px 4px 2px 0;
		padding: 6px 4px;
	}

	.dm-scope input[type="radio"],
	.dm-scope input[type="checkbox"] {
		width: auto;
		display: inline-block;
		transform: scale(1.25);
		margin: 0 8px;
	}

	/* Buttons: full-width and easy to tap, stacked with breathing room */
	.dm-scope input[type="submit"],
	.dm-scope input[type="button"],
	.dm-scope input[type="reset"] {
		display: block;
		width: 100%;
		margin: 8px 0;
		padding: 10px 12px !important;
		font-size: 1em;
	}

	.dm-scope textarea {
		min-height: 90px;
	}
}