/**
 * Tea Subscription Card & Tracker - Frontend Styles
 *
 * Theme Palette:
 * - Primary: Deep Forest Green (#0e382c / #163b30)
 * - Hover / Active: Rich Forest Green (#0d523b)
 * - Accent: Warm Gold (#C9A36B / #D4AF37)
 * - Backgrounds: Clean Cream / Soft Off-white (#FAF5EF / #FBF6EF / #FFFFFF)
 * - Borders: Soft Gold-Tinted Stone (#E2D9CE / #D4C9BC)
 */

.tct-tracker-wrapper {
	box-sizing: border-box;
	max-width: 720px;
	margin: 36px auto;
	padding: 0 16px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	color: #2D2D2D;
}

.tct-tracker-wrapper *,
.tct-tracker-wrapper *::before,
.tct-tracker-wrapper *::after {
	box-sizing: inherit;
}

.tct-tracker-card {
	background: #FFFFFF;
	border: 1px solid #E2D9CE;
	border-radius: 14px;
	padding: 34px 30px;
	box-shadow: 0 8px 30px rgba(14, 56, 44, 0.08);
}

.tct-tracker-header {
	text-align: center;
	margin-bottom: 28px;
}

.tct-brand-badge {
	display: inline-block;
	background: #FAF5EF;
	color: #0e382c;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	padding: 6px 16px;
	border-radius: 30px;
	border: 1px solid #D4AF37;
	margin-bottom: 12px;
}

.tct-tracker-title {
	margin: 0 0 8px 0;
	color: #0e382c;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.25;
	font-family: Georgia, serif;
}

.tct-tracker-subtitle {
	margin: 0 auto;
	max-width: 540px;
	color: #555555;
	font-size: 15px;
	line-height: 1.5;
}

/* Search Form */
.tct-tracker-form {
	margin-bottom: 24px;
}

.tct-form-row {
	margin-bottom: 15px;
}

.tct-label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #163b30;
	margin-bottom: 8px;
}

/* Desktop Input Group Layout (> 600px) */
.tct-input-group {
	display: flex;
	align-items: stretch;
	gap: 0;
	position: relative;
	border-radius: 10px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
	width: 100%;
}

.tct-input-wrapper {
	display: flex;
	flex: 1;
	min-width: 0;
	align-items: stretch;
	position: relative;
}

.tct-input-prefix {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	background: #FAF5EF;
	color: #0e382c;
	font-size: 15px;
	font-weight: 700;
	border: 1.5px solid #D4C9BC;
	border-right: none;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	min-height: 48px;
	height: 50px;
	flex-shrink: 0;
}

.tct-phone-field {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	height: 50px;
	padding: 10px 16px;
	font-size: 16px; /* Prevents auto-zoom on iOS */
	letter-spacing: 1px;
	border: 1.5px solid #D4C9BC;
	border-radius: 0;
	background: #FFFFFF;
	color: #111111;
	outline: none;
	-webkit-appearance: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.tct-phone-field:focus {
	border-color: #0e382c;
	box-shadow: 0 0 0 2px rgba(14, 56, 44, 0.15);
	z-index: 2;
}

/* ========================================================
   SUBMIT BUTTON - HIGH CONTRAST & PURE WHITE TEXT ENFORCED
   ======================================================== */
.tct-btn-primary,
button.tct-btn-primary,
#tct-tracker-submit.tct-btn-primary {
	background-color: #0e382c !important;
	background: #0e382c !important;
	color: #ffffff !important;
	border: 1.5px solid #09241c !important;
	padding: 0 24px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 0.5px !important;
	text-transform: uppercase !important;
	border-top-right-radius: 10px !important;
	border-bottom-right-radius: 10px !important;
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	min-height: 48px !important;
	height: 50px !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	white-space: nowrap !important;
	text-decoration: none !important;
	line-height: 1 !important;
	margin: 0 !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
}

.tct-btn-primary .tct-btn-text,
button.tct-btn-primary .tct-btn-text,
#tct-tracker-submit .tct-btn-text {
	color: #ffffff !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}

/* Hover, Focus, and Active States - STRICTLY MAINTAINS CRISP WHITE TEXT */
.tct-btn-primary:hover,
button.tct-btn-primary:hover,
#tct-tracker-submit.tct-btn-primary:hover,
.tct-btn-primary:focus,
button.tct-btn-primary:focus,
#tct-tracker-submit.tct-btn-primary:focus,
.tct-btn-primary:active,
button.tct-btn-primary:active,
#tct-tracker-submit.tct-btn-primary:active {
	background-color: #0d523b !important;
	background: #0d523b !important;
	border-color: #083827 !important;
	color: #ffffff !important;
	box-shadow: 0 4px 14px rgba(13, 82, 59, 0.3) !important;
	outline: none !important;
}

.tct-btn-primary:hover .tct-btn-text,
button.tct-btn-primary:hover .tct-btn-text,
#tct-tracker-submit.tct-btn-primary:hover .tct-btn-text,
.tct-btn-primary:focus .tct-btn-text,
button.tct-btn-primary:focus .tct-btn-text,
#tct-tracker-submit.tct-btn-primary:focus .tct-btn-text,
.tct-btn-primary:active .tct-btn-text,
button.tct-btn-primary:active .tct-btn-text,
#tct-tracker-submit.tct-btn-primary:active .tct-btn-text {
	color: #ffffff !important;
}

.tct-btn-primary:active,
#tct-tracker-submit:active {
	transform: scale(0.98) !important;
}

.tct-btn-spinner {
	font-size: 14px;
	display: inline-block;
}

.tct-help-text {
	margin: 8px 0 0 0;
	font-size: 12.5px;
	color: #777777;
}

/* Notices & Alerts */
.tct-notice {
	padding: 14px 18px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 22px;
}

.tct-notice.info {
	background: #F2F7FF;
	color: #1A56DB;
	border: 1px solid #C3D9FF;
}

.tct-notice.error {
	background: #FDF2F2;
	color: #C62828;
	border: 1px solid #F8B4B4;
}

.tct-notice.warning {
	background: #FFFDF0;
	color: #8D6E14;
	border: 1px solid #FCE588;
}

/* Dynamic AJAX Results Container */
.tea-tracker-results {
	margin-top: 20px;
}

/* 1. Customer Summary Card */
.tct-customer-summary-card {
	background: #FBF6EF;
	border: 1.5px solid #E2D9CE;
	border-radius: 12px;
	padding: 24px;
	margin-bottom: 22px;
	box-shadow: 0 2px 10px rgba(14, 56, 44, 0.04);
}

.tct-summary-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}

.tct-customer-info {
	flex: 1;
	min-width: 200px;
}

.tct-customer-label {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	color: #8C7866;
	font-weight: 700;
	letter-spacing: 0.8px;
	margin-bottom: 3px;
}

.tct-customer-name {
	margin: 0;
	color: #0e382c;
	font-size: 24px;
	font-weight: 800;
	font-family: Georgia, serif;
}

.tct-status-badge {
	padding: 6px 14px;
	border-radius: 30px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.3px;
	display: inline-block;
	line-height: 1.4;
}

.tct-status-badge.active {
	background: #E8F5E9;
	color: #1B5E20;
	border: 1.5px solid #81C784;
}

.tct-status-badge.expired {
	background: #FFEBEE;
	color: #C62828;
	border: 1.5px solid #E57373;
}

.tct-card-action {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid #EADBCE;
}

.download-card-btn,
a.download-card-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-color: #0e382c !important;
	background: #0e382c !important;
	color: #FFFFFF !important;
	border: 1px solid #D4AF37 !important;
	padding: 10px 20px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	border-radius: 6px !important;
	transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
}

.download-card-btn:hover,
a.download-card-btn:hover {
	background-color: #0d523b !important;
	background: #0d523b !important;
	color: #FFFFFF !important;
	box-shadow: 0 4px 12px rgba(14, 56, 44, 0.25) !important;
	transform: translateY(-1px);
}

/* 2. Statistics Tiles */
.tct-stats-tiles-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin-bottom: 24px;
}

.tct-stat-tile {
	background: #FFFFFF;
	border: 1.5px solid #E2D9CE;
	border-radius: 10px;
	padding: 20px 16px;
	text-align: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
	transition: transform 0.2s, box-shadow 0.2s;
}

.tct-stat-tile:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(14, 56, 44, 0.08);
	border-color: #C9A36B;
}

.tct-tile-icon {
	font-size: 26px;
	display: block;
	margin-bottom: 6px;
}

.tct-tile-value {
	display: block;
	font-size: 30px;
	font-weight: 800;
	color: #0e382c;
	line-height: 1.2;
}

.tct-tile-title {
	display: block;
	font-size: 13px;
	color: #666666;
	margin-top: 6px;
	font-weight: 600;
}

/* 3. Recent Consumption Log Table */
.tct-history-container {
	margin-top: 24px;
	background: #FFFFFF;
	border: 1.5px solid #E2D9CE;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.tct-history-heading {
	margin: 0 0 14px 0;
	font-size: 18px;
	color: #0e382c;
	font-weight: 700;
	font-family: Georgia, serif;
}

.tct-table-scroll {
	overflow-x: auto;
	border-radius: 8px;
	border: 1px solid #EFE6DC;
}

.tct-consumption-table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	font-size: 13.5px;
}

.tct-consumption-table th,
.tct-consumption-table td {
	padding: 12px 16px;
	border-bottom: 1px solid #EFE6DC;
}

.tct-consumption-table th {
	background: #FAF5EF;
	color: #0e382c;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.tct-consumption-table tbody tr:last-child td {
	border-bottom: none;
}

.tct-consumption-table tbody tr:hover {
	background: #FAF7F2;
}

.tct-empty-history {
	text-align: center;
	color: #888888;
	padding: 24px !important;
	font-style: italic;
}

.tct-load-more-wrap {
	margin-top: 16px;
	text-align: center;
}

.tct-btn-secondary,
button.tct-btn-secondary {
	background: #FAF5EF !important;
	color: #0e382c !important;
	border: 1.5px solid #0e382c !important;
	padding: 9px 22px !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	transition: all 0.2s !important;
}

.tct-btn-secondary:hover,
button.tct-btn-secondary:hover {
	background: #0e382c !important;
	color: #FFFFFF !important;
}

/* ========================================================
   MOBILE RESPONSIVENESS & USABILITY (<= 600px width)
   ======================================================== */
@media screen and (max-width: 600px) {
	.tct-tracker-card {
		padding: 22px 16px;
	}

	.tct-tracker-title {
		font-size: 24px;
	}

	.tct-tracker-subtitle {
		font-size: 14px;
	}

	/* Stack input wrapper and submit button with 12px vertical spacing */
	.tct-input-group {
		display: flex !important;
		flex-direction: column !important;
		gap: 12px !important;
		width: 100% !important;
		box-shadow: none !important;
		border-radius: 0 !important;
	}

	/* Input wrapper takes 100% width and keeps +91 and input side-by-side */
	.tct-input-wrapper {
		display: flex !important;
		width: 100% !important;
		min-width: 0 !important;
		min-height: 48px !important;
		height: 50px !important;
		border-radius: 10px !important;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
		overflow: hidden !important;
	}

	.tct-input-prefix {
		min-height: 48px !important;
		height: 100% !important;
		padding: 0 14px !important;
		border: 1.5px solid #D4C9BC !important;
		border-right: none !important;
		border-top-left-radius: 10px !important;
		border-bottom-left-radius: 10px !important;
		border-top-right-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
	}

	.tct-phone-field {
		flex: 1 !important;
		min-width: 0 !important;
		min-height: 48px !important;
		height: 100% !important;
		font-size: 16px !important; /* Critical: >= 16px prevents iOS zoom */
		border: 1.5px solid #D4C9BC !important;
		border-left: none !important;
		border-top-right-radius: 10px !important;
		border-bottom-right-radius: 10px !important;
		border-top-left-radius: 0 !important;
		border-bottom-left-radius: 0 !important;
		-webkit-appearance: none !important;
	}

	/* Submit button takes 100% full width with 48px touch target */
	.tct-btn-primary,
	button.tct-btn-primary,
	#tct-tracker-submit.tct-btn-primary {
		width: 100% !important;
		min-height: 48px !important;
		height: 50px !important;
		border-radius: 10px !important;
		margin: 0 !important;
		padding: 0 16px !important;
		font-size: 15px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	.tct-summary-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.tct-stats-tiles-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.tct-stat-tile {
		padding: 16px;
	}

	.tct-tile-value {
		font-size: 26px;
	}

	.tct-history-container {
		padding: 16px;
	}

	.tct-consumption-table th,
	.tct-consumption-table td {
		padding: 10px 12px;
		font-size: 13px;
	}
}