/*
 * Dental APPNA - Orders, Payment methods, Event bookings and single order view.
 * Loaded on My Account pages after account.css by mu-plugins/dentalappna-member-account.php. Built by Linknbit.
 */

/* ==========================================================
   Shared table polish
   ========================================================== */

/* Row headers inside the table body (e.g. order number) look like normal cells, not header cells. */
.woocommerce-account .woocommerce-MyAccount-content table tbody th {
	background: #fff;
	color: var(--da-ink);
	font-size: 15px;
	font-weight: 700;
	text-transform: none;
}
.woocommerce-account .woocommerce-MyAccount-content table tbody tr:hover > td,
.woocommerce-account .woocommerce-MyAccount-content table tbody tr:hover > th {
	background: #FAFBFD;
}

/* Secondary (outline) buttons inside tables; one primary action per row stays red. */
body.woocommerce-account .woocommerce .woocommerce-orders-table__cell-order-actions .button,
body.woocommerce-account .woocommerce .woocommerce-PaymentMethod--actions .button {
	padding: 8px 16px;
	background: transparent;
	border: 1.5px solid #CFD3E0;
	color: var(--da-navy);
	font-size: 13px;
}
body.woocommerce-account .woocommerce .woocommerce-orders-table__cell-order-actions .button:hover,
body.woocommerce-account .woocommerce .woocommerce-PaymentMethod--actions .button:hover {
	background: var(--da-navy);
	border-color: var(--da-navy);
	color: #fff;
}

/* ==========================================================
   Orders
   ========================================================== */
.woocommerce-account .woocommerce-orders-table__cell-order-number a {
	color: var(--da-navy);
	font-weight: 700;
	text-decoration: none;
}
.woocommerce-account .woocommerce-orders-table__cell-order-number a:hover {
	color: var(--da-red);
}
.woocommerce-account .woocommerce-orders-table .woocommerce-Price-amount {
	color: var(--da-ink);
	font-weight: 700;
}
.woocommerce-account .woocommerce-orders-table__cell-order-total {
	color: var(--da-muted);
}
.woocommerce-account td.woocommerce-orders-table__cell-order-status {
	white-space: nowrap;
	font-weight: 600;
}

/* "View" is the main action: solid red. Invoice buttons stay outline. */
body.woocommerce-account .woocommerce .woocommerce-orders-table__cell-order-actions .button.view {
	background: var(--da-red);
	border-color: var(--da-red);
	color: #fff;
}
body.woocommerce-account .woocommerce .woocommerce-orders-table__cell-order-actions .button.view:hover {
	background: var(--da-red-dark);
	border-color: var(--da-red-dark);
	color: #fff;
}

/* Status dot (desktop only: on phones WooCommerce uses ::before for the column label). */
@media (min-width: 769px) {
	.woocommerce-account td.woocommerce-orders-table__cell-order-status::before {
		content: "";
		display: inline-block;
		width: 8px;
		height: 8px;
		margin-right: 8px;
		border-radius: 50%;
		background: #9AA0B5;
		vertical-align: middle;
	}
	.woocommerce-account .woocommerce-orders-table__row--status-completed td.woocommerce-orders-table__cell-order-status::before {
		background: #2E9E57;
	}
	.woocommerce-account .woocommerce-orders-table__row--status-processing td.woocommerce-orders-table__cell-order-status::before,
	.woocommerce-account .woocommerce-orders-table__row--status-on-hold td.woocommerce-orders-table__cell-order-status::before {
		background: #E0A100;
	}
	.woocommerce-account .woocommerce-orders-table__row--status-cancelled td.woocommerce-orders-table__cell-order-status::before,
	.woocommerce-account .woocommerce-orders-table__row--status-failed td.woocommerce-orders-table__cell-order-status::before,
	.woocommerce-account .woocommerce-orders-table__row--status-refunded td.woocommerce-orders-table__cell-order-status::before {
		background: var(--da-red);
	}
}

/* ==========================================================
   Payment methods
   ========================================================== */
.woocommerce-account table.woocommerce-MyAccount-paymentMethods {
	font-size: 15px;
}
.woocommerce-account table.woocommerce-MyAccount-paymentMethods td.woocommerce-PaymentMethod--details {
	color: var(--da-ink);
	font-weight: 600;
	letter-spacing: .02em;
}
.woocommerce-account table.woocommerce-MyAccount-paymentMethods td.woocommerce-PaymentMethod--details img {
	border-radius: 4px;
}
.woocommerce-account table.woocommerce-MyAccount-paymentMethods td.woocommerce-PaymentMethod--default mark {
	padding: 5px 10px;
	background: var(--da-navy-tint);
	border-radius: 999px;
	color: var(--da-navy);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	text-transform: none;
}
/* Delete is destructive: red outline, never the same look as Edit. */
body.woocommerce-account .woocommerce .woocommerce-PaymentMethod--actions .button.delete {
	border-color: #F3B5BB;
	color: var(--da-red-dark);
}
body.woocommerce-account .woocommerce .woocommerce-PaymentMethod--actions .button.delete:hover {
	background: var(--da-red);
	border-color: var(--da-red);
	color: #fff;
}
body.woocommerce-account .woocommerce .woocommerce-PaymentMethod--actions .button.save {
	background: var(--da-navy);
	border-color: var(--da-navy);
	color: #fff;
}
.woocommerce-account table.woocommerce-MyAccount-paymentMethods input[type="text"] {
	padding: 8px 12px;
	border: 1px solid #CFD3E0;
	border-radius: 8px;
	font-size: 14px;
}
.woocommerce-account .woocommerce-MyAccount-paymentMethods + .button,
.woocommerce-account .woocommerce-MyAccount-content > p > .button[href*="add-payment-method"] {
	margin-top: 18px;
}

/* ==========================================================
   Event booking dashboard (Event Manager plugin)
   ========================================================== */
.woocommerce-account .mpwem-event-bookings-dashboard {
	--color_theme: var(--da-navy);
	width: 100%; /* the plugin sets 119%, which spills past the page */
	max-width: 100%;
	margin: 0;
	font-family: var(--da-font);
	color: var(--da-ink);
}
.woocommerce-account .mpwem-dashboard-header {
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--da-line);
}
.woocommerce-account .mpwem-dashboard-header h2 {
	margin: 0 0 4px;
	color: var(--da-ink);
	font-family: var(--da-font);
	font-size: 22px;
	font-weight: 700;
}
.woocommerce-account .mpwem-dashboard-description {
	color: var(--da-muted);
	font-size: 14px;
}

/* Search panel */
.woocommerce-account .mpwem-dashboard-filters {
	margin-bottom: 18px;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--da-line);
	border-radius: var(--da-radius);
}
.woocommerce-account .mpwem-filter-group {
	margin-bottom: 18px;
}
.woocommerce-account .mpwem-event-bookings-dashboard input.mpwem-search-input {
	height: auto;
	min-width: 220px;
	padding: 11px 14px;
	background: #fff;
	border: 1px solid #CFD3E0;
	border-radius: 8px;
	box-shadow: none;
	color: var(--da-ink);
	font-family: var(--da-font);
	font-size: 15px;
}
.woocommerce-account .mpwem-event-bookings-dashboard input.mpwem-search-input:focus {
	border-color: var(--da-navy);
	outline: none;
	box-shadow: 0 0 0 3px rgba(60, 68, 117, .15);
}

/* Buttons */
.woocommerce-account .mpwem-event-bookings-dashboard .mpwem-btn,
.woocommerce-account .mpwem-modal .mpwem-btn {
	gap: 6px;
	padding: 10px 20px;
	background: transparent;
	border: 1.5px solid #CFD3E0;
	border-radius: 999px;
	box-shadow: none;
	color: var(--da-navy);
	font-family: var(--da-font);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-transform: none;
}
.woocommerce-account .mpwem-event-bookings-dashboard .mpwem-btn:hover,
.woocommerce-account .mpwem-event-bookings-dashboard .mpwem-btn:focus-visible,
.woocommerce-account .mpwem-modal .mpwem-btn:hover {
	background: var(--da-navy-tint);
	border-color: var(--da-navy);
	color: var(--da-navy);
}
.woocommerce-account .mpwem-event-bookings-dashboard .mpwem-btn-search,
.woocommerce-account .mpwem-event-bookings-dashboard .mpwem-btn-primary,
.woocommerce-account .mpwem-modal .mpwem-btn-primary {
	background: var(--da-navy);
	border-color: var(--da-navy);
	color: #fff;
}
.woocommerce-account .mpwem-event-bookings-dashboard .mpwem-btn-search:hover,
.woocommerce-account .mpwem-event-bookings-dashboard .mpwem-btn-primary:hover,
.woocommerce-account .mpwem-modal .mpwem-btn-primary:hover {
	background: #2E3560;
	border-color: #2E3560;
	color: #fff;
}
.woocommerce-account .mpwem-event-bookings-dashboard .mpwem-btn-view,
.woocommerce-account .mpwem-event-bookings-dashboard .mpwem-btn-edit,
.woocommerce-account .mpwem-event-bookings-dashboard .mpwem-btn-pdf,
.woocommerce-account .mpwem-event-bookings-dashboard .mpwem-btn-cancel,
.woocommerce-account .mpwem-event-bookings-dashboard .mpwem-btn-small {
	padding: 8px 14px;
	font-size: 13px;
}
.woocommerce-account .mpwem-event-bookings-dashboard .mpwem-btn-pdf {
	background: var(--da-red);
	border-color: var(--da-red);
	color: #fff;
}
.woocommerce-account .mpwem-event-bookings-dashboard .mpwem-btn-pdf:hover {
	background: var(--da-red-dark);
	border-color: var(--da-red-dark);
	color: #fff;
}
.woocommerce-account .mpwem-event-bookings-dashboard .mpwem-btn-cancel,
.woocommerce-account .mpwem-modal .mpwem-btn-cancel {
	border-color: #F3B5BB;
	color: var(--da-red-dark);
}
.woocommerce-account .mpwem-event-bookings-dashboard .mpwem-btn-cancel:hover,
.woocommerce-account .mpwem-modal .mpwem-btn-cancel:hover {
	background: var(--da-red);
	border-color: var(--da-red);
	color: #fff;
}
.woocommerce-account .mpwem-event-bookings-dashboard .mpwem-btn-cancel.mpwem-btn-disabled,
.woocommerce-account .mpwem-event-bookings-dashboard .mpwem-btn-cancel.mpwem-btn-disabled:hover {
	background: var(--da-bg);
	border-color: var(--da-line);
	color: #9AA0B5;
}

/* Stat tiles */
.woocommerce-account .mpwem-filter-stats {
	padding-top: 16px;
	border-top: 1px solid var(--da-line);
}
.woocommerce-account .mpwem-stats {
	gap: 12px;
}
.woocommerce-account .mpwem-stat-clickable {
	padding: 16px;
	background: var(--da-bg);
	border: 1.5px solid transparent;
	border-radius: var(--da-radius);
	box-shadow: none;
}
.woocommerce-account .mpwem-stat-clickable:hover {
	background: var(--da-navy-tint);
	border-color: var(--da-navy);
	box-shadow: none;
	transform: translateY(-1px);
}
.woocommerce-account .mpwem-stat-clickable.active {
	background: var(--da-navy);
	border-color: var(--da-navy);
	box-shadow: none;
}
.woocommerce-account .mpwem-stat-number {
	color: var(--da-navy);
	font-family: var(--da-font);
	font-size: 30px;
	font-weight: 700;
}
.woocommerce-account .mpwem-stat-label {
	color: var(--da-muted);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}
.woocommerce-account .mpwem-stat-clickable.active .mpwem-stat-number {
	color: #fff;
}
.woocommerce-account .mpwem-stat-clickable.active .mpwem-stat-label {
	color: rgba(255, 255, 255, .85);
}

/* Bookings table: one border only (the wrapper and the table both had one) */
.woocommerce-account .mpwem-bookings-table-wrapper {
	margin-bottom: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}
.woocommerce-account .woocommerce-MyAccount-content table.mpwem-bookings-table th {
	color: var(--da-navy);
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
}
.woocommerce-account table.mpwem-bookings-table td {
	padding: 14px !important; /* the plugin forces 0.55em with !important */
}
.woocommerce-account .mpwem-order-number {
	color: var(--da-navy);
}
.woocommerce-account .mpwem-order-date,
.woocommerce-account .mpwem-event-date {
	color: var(--da-muted);
}
.woocommerce-account .mpwem-event-name {
	color: var(--da-ink);
	font-weight: 700;
}
.woocommerce-account .mpwem-event-name:hover {
	color: var(--da-red);
}
.woocommerce-account .mpwem-event-thumb {
	border-radius: 8px;
}
.woocommerce-account .mpwem-ticket-count {
	background: var(--da-navy-tint);
	border-radius: 999px;
	color: var(--da-navy);
}
.woocommerce-account .mpwem-status {
	border-radius: 999px;
}
.woocommerce-account .mpwem-status-completed {
	background: #E3F4E8;
	color: #1E6B3A;
}

/* Empty state */
.woocommerce-account .woocommerce-MyAccount-content table.mpwem-bookings-table td.mpwem-no-bookings {
	padding: 44px 20px !important;
	color: var(--da-muted);
	font-size: 15px;
	font-style: normal;
	text-align: center;
}
.woocommerce-account .mpwem-bookings-table td.mpwem-no-bookings::before {
	content: "";
	display: block;
	float: none;
	width: 40px;
	height: 40px;
	margin: 0 auto 12px;
	background-color: #C5C9DA;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M4 11h16'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M4 11h16'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Booking details pop-up */
.woocommerce-account .mpwem-modal-content {
	border-radius: var(--da-radius);
	font-family: var(--da-font);
	color: var(--da-ink);
}
.woocommerce-account .mpwem-modal-content h3,
.woocommerce-account .mpwem-modal-content h4,
.woocommerce-account .mpwem-modal-content h5 {
	color: var(--da-ink);
	font-family: var(--da-font);
	font-weight: 700;
}
.woocommerce-account .mpwem-modal-close:hover,
.woocommerce-account .mpwem-modal-close:focus {
	color: var(--da-red);
}
.woocommerce-account .mpwem-attendee-card {
	background: var(--da-bg);
	border-color: var(--da-line);
	border-radius: 10px;
}

/* ==========================================================
   Single order view (Orders > View)
   ========================================================== */
.woocommerce-account .woocommerce-MyAccount-content mark {
	padding: 0;
	background: none;
	color: var(--da-navy);
	font-weight: 700;
}
.woocommerce-account .woocommerce-order-details__title,
.woocommerce-account .woocommerce-column__title,
.woocommerce-account .woocommerce-MyAccount-content h2 {
	margin: 28px 0 12px;
	color: var(--da-ink);
	font-family: var(--da-font);
	font-size: 20px;
	font-weight: 700;
}
.woocommerce-account .woocommerce-MyAccount-content table.order_details tfoot th {
	background: #fff;
	color: var(--da-muted);
	font-weight: 600;
}
.woocommerce-account .woocommerce-MyAccount-content table.order_details tfoot tr:last-child th,
.woocommerce-account .woocommerce-MyAccount-content table.order_details tfoot tr:last-child td {
	color: var(--da-ink);
	font-size: 17px;
	font-weight: 700;
}
.woocommerce-account .woocommerce-customer-details address {
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--da-line);
	border-radius: var(--da-radius);
	color: var(--da-ink);
	font-style: normal;
	line-height: 1.6;
}