/**
 * TG WooCommerce Premium Account - Mobile & Tablet Responsive Stylesheet
 * Author: Tech Googly
 * Text Domain: tg-woocommerce-premium-account
 * Version: 1.9.6
 * Developed By Tech Googly.
 */

/* Medium Desktop & Tablet Layout (768px to 1023px) */
@media screen and (max-width: 1023px) and (min-width: 768px) {
	.tg-wca-page-inner,
	.tg-wca-layout {
		grid-template-columns: 220px minmax(0, 1fr) !important;
		gap: 20px !important;
		width: 100% !important;
	}

	.tg-wca-sidebar {
		width: 100% !important;
		padding: 18px !important;
	}

	.tg-wca-main,
	.tg-wca-content {
		width: 100% !important;
		padding: 24px !important;
	}

	.tg-wca-stats-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 14px !important;
	}
}

/* Mobile Layout (< 767px) */
@media screen and (max-width: 767px) {
	.tg-wca-page-root,
	.tg-wca-account {
		width: 100% !important;
		padding: 0 10px !important;
	}

	.tg-wca-page-inner,
	.tg-wca-layout {
		display: block !important;
		width: 100% !important;
	}

	.tg-wca-sidebar {
		width: 100% !important;
		margin-bottom: 20px !important;
		padding: 16px !important;
		box-sizing: border-box !important;
	}

	.tg-wca-main,
	.tg-wca-content {
		width: 100% !important;
		padding: 16px !important;
		min-height: auto !important;
		box-sizing: border-box !important;
	}

	/* Compact Mobile Profile Header */
	.tg-wca-profile-header {
		display: flex;
		align-items: center;
		text-align: left;
		gap: 16px;
		padding-bottom: 16px;
		margin-bottom: 16px;
	}

	.tg-wca-avatar-wrapper {
		margin-bottom: 0;
	}

	.tg-wca-avatar-icon-wrapper,
	.tg-wca-avatar-svg {
		width: 72px !important;
		height: 72px !important;
	}

	.tg-wca-customer-name {
		font-size: 1.05rem;
	}

	/* Navigation Menu on Mobile: Touch Friendly Horizontal Scroll Pills */
	.tg-wca-navigation ul {
		display: flex;
		overflow-x: auto;
		white-space: nowrap;
		gap: 8px;
		padding-bottom: 8px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.tg-wca-navigation ul::-webkit-scrollbar {
		display: none;
	}

	.tg-wca-menu-item {
		margin-bottom: 0;
		flex-shrink: 0;
	}

	.tg-wca-menu-link {
		padding: 10px 16px !important;
		font-size: 0.85rem !important;
		min-height: 44px; /* Touch target */
		border-radius: 24px !important;
		background: #f1f5f9;
	}

	/* Stats Grid on Mobile: 2x2 */
	.tg-wca-stats-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px !important;
	}

	.tg-wca-stat-card {
		padding: 14px !important;
		gap: 10px !important;
	}

	.tg-wca-stat-icon {
		width: 38px !important;
		height: 38px !important;
		border-radius: 10px !important;
	}

	.tg-wca-stat-number {
		font-size: 1.2rem !important;
	}

	.tg-wca-stat-label {
		font-size: 0.72rem !important;
	}

	/* Welcome Banner on Mobile */
	.tg-wca-welcome-banner {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding: 20px !important;
	}

	.tg-wca-welcome-title {
		font-size: 1.25rem !important;
	}

	/* Order Cards on Mobile */
	.tg-wca-order-card-body {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.tg-wca-order-total-block {
		text-align: left;
		border-top: 1px dashed #f1f5f9;
		padding-top: 8px;
		width: 100%;
	}

	.tg-wca-card-actions {
		width: 100%;
		justify-content: stretch;
	}

	.tg-wca-btn {
		flex: 1;
		min-height: 44px;
	}

	/* View Order Layout on Mobile */
	.tg-wca-order-details {
		gap: 16px !important;
	}

	.tg-wca-order-meta-grid {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}

	.tg-wca-order-header,
	.tg-wca-order-progress,
	.tg-wca-order-items,
	.tg-wca-order-summary,
	.tg-wca-delivery-billing,
	.tg-wca-shipment-tracking {
		padding: 16px !important;
	}

	.tg-wca-shipment-info-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.tg-wca-timeline-steps::before {
		display: none;
	}

	.tg-wca-timeline-steps {
		flex-direction: column;
		gap: 14px;
		align-items: flex-start;
	}

	.tg-wca-timeline-step {
		display: flex;
		align-items: center;
		gap: 12px;
		text-align: left;
	}

	.tg-wca-step-icon {
		margin: 0 !important;
	}
}

/* Medium Desktop & Tablet Layout (768px to 991px) */
@media screen and (max-width: 991px) {
	.tg-wca-split-container {
		grid-template-columns: 1fr !important;
		border-radius: 20px;
		min-height: auto;
	}

	.tg-wca-promo-panel {
		display: none !important;
	}

	.tg-wca-auth-panel {
		padding: 32px 24px !important;
	}

	.tg-wca-login-header {
		display: block !important;
		text-align: center;
		margin-bottom: 20px;
	}
}

/* Full-Width Mobile Authentication Layout (< 767px) */
@media screen and (max-width: 767px) {
	.woocommerce-account .tg-wca-page-root.tg-wca-logged-out,
	.woocommerce-page .tg-wca-page-root.tg-wca-logged-out,
	.tg-wca-page-root.tg-wca-logged-out,
	.tg-wca-logged-out {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto !important;
		padding: 0 8px !important;
		box-sizing: border-box !important;
		min-width: 0 !important;
	}

	.tg-wca-auth-wrapper {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		box-sizing: border-box !important;
		min-width: 0 !important;
	}

	.tg-wca-login-card {
		width: calc(100% - 16px) !important;
		max-width: none !important;
		margin: 8px auto !important;
		padding: 24px 18px !important;
		border-radius: 16px !important;
		box-sizing: border-box !important;
		min-width: 0 !important;
	}

	.tg-wca-login-header {
		margin-bottom: 18px !important;
	}

	.tg-wca-login-title {
		font-size: 1.35rem !important; /* 22-24px */
		margin-bottom: 4px !important;
	}

	.tg-wca-login-subtitle {
		font-size: 0.84rem !important; /* 13-14px */
	}

	/* Keep the two authentication actions on one row at every mobile width. */
	.tg-wca-auth-actions,
	.tg-wca-page-root.tg-wca-logged-out .tg-wca-auth-actions.has-two-actions {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		grid-auto-flow: row !important;
		gap: 8px !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}
	.tg-wca-auth-actions.has-one-action { grid-template-columns: minmax(0, 1fr) !important; }
	.tg-wca-auth-actions > .tg-wca-auth-choice-btn,
	.tg-wca-page-root.tg-wca-logged-out .tg-wca-auth-actions.has-two-actions > .tg-wca-auth-choice-btn {
		display: flex !important;
		flex: none !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		min-height: 64px !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 7px !important;
		padding: 10px 8px !important;
		margin: 0 !important;
		font-size: 12px !important;
		line-height: 1.2 !important;
		box-sizing: border-box !important;
		white-space: normal !important;
		word-break: normal !important;
		overflow-wrap: anywhere !important;
	}
	.tg-wca-auth-actions > .tg-wca-auth-choice-btn > span {
		display: block !important;
		min-width: 0 !important;
		max-width: 100% !important;
		font-size: 12px !important;
		line-height: 1.2 !important;
		text-align: center !important;
		word-break: normal !important;
		overflow-wrap: anywhere !important;
	}
	.tg-wca-auth-actions > .tg-wca-auth-choice-btn svg {
		flex: 0 0 18px !important;
		width: 18px !important;
		height: 18px !important;
	}

	/* Stacked auth actions remain full-width; do not inherit legacy two-column rules. */
	.tg-wca-auth-actions-stacked {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		max-width: 100% !important;
		gap: 9px !important;
	}
	.tg-wca-auth-actions-stacked > .tg-wca-auth-choice-btn {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		min-height: 52px !important;
		padding: 12px 14px !important;
		font-size: 14px !important;
		line-height: 1.25 !important;
		white-space: normal !important;
		word-break: normal !important;
		overflow-wrap: break-word !important;
	}
	.tg-wca-stepper-header {
		margin-top: 14px !important;
		padding-top: 10px !important;
	}

	.tg-wca-stepper-header h4 {
		font-size: 0.95rem !important;
		margin-bottom: 4px !important;
	}

	.tg-wca-stepper-header p {
		font-size: 0.78rem !important;
		margin-bottom: 16px !important;
	}
}

/* Extra Small Mobile (<= 480px) Adjustments */
@media screen and (max-width: 480px) {
	.tg-wca-login-card {
		padding: 20px 12px !important;
		border-radius: 14px !important;
	}

	.tg-wca-auth-actions-stacked { gap: 8px !important; }
	.tg-wca-login-card .tg-wca-otp-inputs { gap: 4px !important; }
	.tg-wca-login-card .tg-wca-otp-inputs > input { height: 40px !important; font-size: 15px !important; }
}