/**
 * CiviCRM Premium Redesign Stylesheet
 * Scoped strictly within .crm-container to protect core layout rules.
 * 
 * Palette:
 * - Primary: #A81B2C (Tesla Red)
 * - Base Dark: #1E1E1E (Dark Charcoal)
 * - Backgrounds: #F6F7F9 (Soft Gray)
 * - Borders: #E5E7EB (Clean Gray)
 * - Typography: Inter
 */

/* ==========================================================================
   1. Typography & Global Container Styling
   ========================================================================== */
.crm-container {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	color: #1E1E1E !important;
	line-height: 1.6 !important;
	font-size: 14px !important;
}

/* Restore FontAwesome font-family for icons, preventing override by the global Inter font */
.crm-container .crm-i,
.crm-container .fa,
.crm-container .fas,
.crm-container .far,
.crm-container .fab {
	font-family: 'Font Awesome 5 Free', 'FontAwesome', 'Font Awesome 6 Free', sans-serif !important;
}

.crm-container h1,
.crm-container h2,
.crm-container h3,
.crm-container h4,
.crm-container h5,
.crm-container h6 {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	color: #1E1E1E !important;
	font-weight: 600 !important;
	margin-top: 1.5em !important;
	margin-bottom: 0.5em !important;
	letter-spacing: -0.02em !important;
}

.crm-container h1 { font-size: 2.25rem !important; line-height: 1.25 !important; border-bottom: 2px solid rgba(255, 255, 255, 0.3) !important; padding-bottom: 8px !important; }
.crm-container h2 { font-size: 1.75rem !important; line-height: 1.3 !important; }
.crm-container h3 { font-size: 1.375rem !important; line-height: 1.35 !important; }
.crm-container h4 { font-size: 1.125rem !important; }
.crm-container h5 { font-size: 1rem !important; }
.crm-container h6 { font-size: 0.875rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; }

.crm-container p {
	margin-bottom: 1.25em !important;
	color: #1E1E1E !important;
	opacity: 0.9 !important;
}

.crm-container a {
	color: #A81B2C !important;
	text-decoration: none !important;
	transition: color 0.15s ease-in-out !important;
}

.crm-container a:hover,
.crm-container a:focus {
	color: #8A1220 !important;
	text-decoration: underline !important;
}

/* ==========================================================================
   2. Buttons & Actions (Micro-Animations & Premium Hover States)
   ========================================================================== */
/* Primary Buttons */
.crm-container .crm-button,
.crm-container input[type="button"].crm-form-submit,
.crm-container input[type="submit"].crm-form-submit,
.crm-container button.crm-form-submit,
.crm-container .crm-submit-buttons .button,
.crm-container a.button.crm-action-button,
.crm-container a.button.crm-register-button,
.crm-container .crm-register-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-family: 'Inter', sans-serif !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	line-height: 1.25 !important;
	background-color: #A81B2C !important;
	background-image: linear-gradient(135deg, #A81B2C 0%, #D92E47 100%) !important; /* Glossy red gradient */
	color: #FFFFFF !important;
	border: none !important;
	border-radius: 6px !important;
	padding: 10px 20px !important;
	cursor: pointer !important;
	text-decoration: none !important;
	box-shadow: 0 4px 15px rgba(224, 26, 34, 0.25) !important;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
	transform: translateZ(0) !important;
	backface-visibility: hidden !important;
}

/* Hover State - Slight scale-up and deepened red shade */
.crm-container .crm-button:hover,
.crm-container input[type="button"].crm-form-submit:hover,
.crm-container input[type="submit"].crm-form-submit:hover,
.crm-container button.crm-form-submit:hover,
.crm-container .crm-submit-buttons .button:hover,
.crm-container a.button.crm-action-button:hover,
.crm-container a.button.crm-register-button:hover,
.crm-container .crm-register-button:hover {
	background-color: #8A1220 !important;
	background-image: linear-gradient(135deg, #8A1220 0%, #A81B2C 100%) !important;
	color: #FFFFFF !important;
	box-shadow: 0 6px 20px rgba(224, 26, 34, 0.35) !important;
	transform: translateY(-1px) scale(1.02) !important;
}

/* Active State - Pressed down */
.crm-container .crm-button:active,
.crm-container input[type="button"].crm-form-submit:active,
.crm-container input[type="submit"].crm-form-submit:active,
.crm-container button.crm-form-submit:active,
.crm-container .crm-submit-buttons .button:active,
.crm-container a.button.crm-action-button:active,
.crm-container a.button.crm-register-button:active,
.crm-container .crm-register-button:active {
	transform: translateY(0) scale(1) !important;
	box-shadow: 0 2px 4px rgba(224, 26, 34, 0.15) !important;
}

/* Secondary / Cancel / Back Buttons */
.crm-container .crm-button.secondary,
.crm-container .crm-button.crm-cancel-button,
.crm-container input[type="button"].cancel,
.crm-container input[type="submit"].cancel,
.crm-container .crm-button-type-cancel,
.crm-container a.button.cancel {
	background-color: rgba(255, 255, 255, 0.45) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	background-image: none !important;
	color: #1E1E1E !important;
	border: 1px solid rgba(255, 255, 255, 0.4) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.crm-container .crm-button.secondary:hover,
.crm-container .crm-button.crm-cancel-button:hover,
.crm-container input[type="button"].cancel:hover,
.crm-container input[type="submit"].cancel:hover,
.crm-container .crm-button-type-cancel:hover,
.crm-container a.button.cancel:hover {
	background-color: rgba(255, 255, 255, 0.65) !important;
	background-image: none !important;
	border-color: rgba(224, 26, 34, 0.3) !important;
	color: #1E1E1E !important;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
	transform: translateY(-1px) scale(1.02) !important;
}

/* Disabled State */
.crm-container .crm-button:disabled,
.crm-container input[type="button"]:disabled,
.crm-container input[type="submit"]:disabled,
.crm-container button:disabled {
	background-color: #F6F7F9 !important;
	border-color: #E5E7EB !important;
	color: #9CA3AF !important;
	cursor: not-allowed !important;
	box-shadow: none !important;
	transform: none !important;
}

/* ==========================================================================
   3. Forms and Inputs
   ========================================================================== */
.crm-container .crm-section {
	margin-bottom: 20px !important;
}

.crm-container .crm-label {
	font-weight: 500 !important;
	color: #1E1E1E !important;
	margin-bottom: 6px !important;
	display: block !important;
	font-size: 0.9rem !important;
}

.crm-container input[type="text"],
.crm-container input[type="password"],
.crm-container input[type="email"],
.crm-container input[type="tel"],
.crm-container input[type="url"],
.crm-container input[type="number"],
.crm-container select,
.crm-container textarea {
	font-family: 'Inter', sans-serif !important;
	font-size: 14px !important;
	color: #1E1E1E !important;
	background-color: rgba(255, 255, 255, 0.65) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	border: 1px solid rgba(0, 0, 0, 0.15) !important;
	border-radius: 6px !important;
	padding: 10px 14px !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) inset !important;
	transition: all 0.2s ease !important;
}

/* Focus Indicator using Tesla Red with a transparent glow */
.crm-container input[type="text"]:focus,
.crm-container input[type="password"]:focus,
.crm-container input[type="email"]:focus,
.crm-container input[type="tel"]:focus,
.crm-container input[type="url"]:focus,
.crm-container input[type="number"]:focus,
.crm-container select:focus,
.crm-container textarea:focus {
	border-color: #A81B2C !important;
	background-color: rgba(255, 255, 255, 0.9) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(224, 26, 34, 0.15) !important;
}

.crm-container select {
	cursor: pointer !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7 9l3 3 3-3' stroke='%231E1E1E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-position: right 10px center !important;
	background-repeat: no-repeat !important;
	background-size: 20px !important;
	padding-right: 40px !important;
}

.crm-container input[type="checkbox"],
.crm-container input[type="radio"] {
	width: 18px !important;
	height: 18px !important;
	border: 1px solid #767676 !important; /* Accessible border (4.5:1 contrast on white) */
	border-radius: 4px !important;
	cursor: pointer !important;
	transition: all 0.15s ease-in-out !important;
	margin: 4px 8px 4px 4px !important;
	vertical-align: middle !important;
}

.crm-container input[type="checkbox"]:checked,
.crm-container input[type="radio"]:checked {
	background-color: #A81B2C !important;
	border-color: #A81B2C !important;
}

.crm-container .description,
.crm-container .help {
	font-size: 0.825rem !important;
	color: #6B7280 !important;
	margin-top: 4px !important;
}

/* Form Layout Panels */
.crm-container .crm-group,
.crm-container fieldset {
	background: rgba(255, 255, 255, 0.45) !important;
	backdrop-filter: blur(12px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(12px) saturate(180%) !important;
	border: 1px solid rgba(255, 255, 255, 0.4) !important;
	border-radius: 12px !important;
	padding: 24px !important;
	margin-bottom: 24px !important;
	box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.03) !important;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.crm-container .crm-group:hover,
.crm-container fieldset:hover {
	background: rgba(255, 255, 255, 0.55) !important;
	border-color: rgba(224, 26, 34, 0.25) !important;
	box-shadow: 0 10px 25px rgba(224, 26, 34, 0.06) !important;
}

.crm-container legend {
	font-weight: 600 !important;
	color: #1E1E1E !important;
	padding: 0 10px !important;
	font-size: 1.1rem !important;
}

/* ==========================================================================
   4. Tables & Data Grids (SaaS Aesthetic, Alternating Rows, Row Hovers)
   ========================================================================== */
.crm-container table,
.crm-container .crm-grid-table,
.crm-container table.display {
	width: 100% !important;
	border-collapse: collapse !important;
	margin-top: 15px !important;
	margin-bottom: 25px !important;
	background: rgba(255, 255, 255, 0.45) !important;
	backdrop-filter: blur(12px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(12px) saturate(180%) !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.03) !important;
	border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* Header Cells - Dark Charcoal Background */
.crm-container table th,
.crm-container .crm-grid-table th,
.crm-container table.display th {
	background-color: rgba(30, 30, 30, 0.85) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	color: #FFFFFF !important;
	font-family: 'Inter', sans-serif !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	padding: 14px 18px !important;
	border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
	text-align: left !important;
}

.crm-container table th a {
	color: #FFFFFF !important;
}

/* Body Rows & Cells */
.crm-container table td,
.crm-container .crm-grid-table td,
.crm-container table.display td {
	padding: 14px 18px !important;
	font-family: 'Inter', sans-serif !important;
	color: #1E1E1E !important;
	font-size: 14px !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
	vertical-align: middle !important;
	transition: background-color 0.2s ease !important;
}

/* Alternating Rows - Soft Gray zebra striping */
.crm-container table tr:nth-child(even) td,
.crm-container .crm-grid-table tr:nth-child(even) td,
.crm-container table.display tr:nth-child(even) td {
	background-color: rgba(255, 255, 255, 0.18) !important;
}

/* Interactive Hover State on Rows - Transition background to a slightly darker soft gray */
.crm-container table tr:hover td,
.crm-container .crm-grid-table tr:hover td,
.crm-container table.display tr:hover td {
	background-color: rgba(224, 26, 34, 0.03) !important;
}

/* ==========================================================================
   5. Tabs & Navigation
   ========================================================================== */
.crm-container .ui-tabs,
.crm-container .crm-tab-button {
	margin-top: 20px !important;
	background: transparent !important;
	border: none !important;
}

.crm-container .ui-tabs-nav,
.crm-container .crm-tabs-list {
	display: flex !important;
	flex-wrap: wrap !important;
	padding: 0 !important;
	margin: 0 0 20px 0 !important;
	list-style: none !important;
	border-bottom: 2px solid rgba(255, 255, 255, 0.3) !important;
}

.crm-container .ui-tabs-nav li,
.crm-container .crm-tabs-list li {
	margin-bottom: -2px !important;
	margin-right: 10px !important;
	background: transparent !important;
	border: none !important;
}

.crm-container .ui-tabs-nav li a,
.crm-container .crm-tabs-list li a {
	display: block !important;
	padding: 12px 20px !important;
	color: #6B7280 !important;
	font-weight: 500 !important;
	font-size: 14px !important;
	border-bottom: 2px solid transparent !important;
	transition: all 0.2s ease-in-out !important;
	background: transparent !important;
}

.crm-container .ui-tabs-nav li a:hover,
.crm-container .crm-tabs-list li a:hover {
	color: #1E1E1E !important;
	border-bottom: 2px solid #E5E7EB !important;
	text-decoration: none !important;
}

/* Active tab style with brand red accent indicator */
.crm-container .ui-tabs-nav li.ui-tabs-active a,
.crm-container .ui-tabs-nav li.active a,
.crm-container .crm-tabs-list li.active a {
	color: #A81B2C !important;
	border-bottom: 2px solid #A81B2C !important;
	font-weight: 600 !important;
	background-color: transparent !important;
}

/* ==========================================================================
   6. Alerts, Messages & Notifications
   ========================================================================== */
.crm-container .messages,
.crm-container .status,
.crm-container .crm-error,
.crm-container .crm-success,
.crm-container .crm-warning,
.crm-container div.messages {
	padding: 16px 20px 16px 54px !important;
	border-radius: 8px !important;
	margin-bottom: 24px !important;
	border-width: 1px !important;
	border-style: solid !important;
	font-size: 14px !important;
	position: relative !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

/* Success Alerts */
.crm-container .crm-success,
.crm-container div.messages.status {
	background-color: rgba(240, 253, 244, 0.65) !important;
	border-color: rgba(220, 252, 231, 0.5) !important;
	color: #15803D !important;
	border-left: 4px solid #16A34A !important;
}
.crm-container .crm-success::before,
.crm-container div.messages.status::before {
	content: "✓" !important;
	position: absolute !important;
	left: 20px !important;
	top: 14px !important;
	font-size: 20px !important;
	font-weight: bold !important;
	color: #16A34A !important;
}

/* Error Alerts - highlighted with Tesla Red brand accent */
.crm-container .crm-error,
.crm-container div.messages.error {
	background-color: rgba(254, 242, 242, 0.65) !important;
	border-color: rgba(254, 226, 226, 0.5) !important;
	color: #B91C1C !important;
	border-left: 4px solid #A81B2C !important;
}
.crm-container .crm-error::before,
.crm-container div.messages.error::before {
	content: "✕" !important;
	position: absolute !important;
	left: 20px !important;
	top: 14px !important;
	font-size: 18px !important;
	font-weight: bold !important;
	color: #A81B2C !important;
}

/* Warning Alerts */
.crm-container .crm-warning,
.crm-container div.messages.warning {
	background-color: rgba(255, 251, 235, 0.65) !important;
	border-color: rgba(254, 243, 199, 0.5) !important;
	color: #B45309 !important;
	border-left: 4px solid #D97706 !important;
}
.crm-container .crm-warning::before,
.crm-container div.messages.warning::before {
	content: "⚠" !important;
	position: absolute !important;
	left: 20px !important;
	top: 14px !important;
	font-size: 18px !important;
	font-weight: bold !important;
	color: #D97706 !important;
}

/* Informational Alerts */
.crm-container div.messages.info {
	background-color: rgba(255, 255, 255, 0.45) !important;
	border-color: rgba(255, 255, 255, 0.4) !important;
	color: #1E1E1E !important;
	border-left: 4px solid #1E1E1E !important;
}
.crm-container div.messages.info::before {
	content: "ℹ" !important;
	position: absolute !important;
	left: 22px !important;
	top: 14px !important;
	font-size: 18px !important;
	font-weight: bold !important;
	color: #1E1E1E !important;
}

/* ==========================================================================
   7. Profile Dashboard & Inner Panels
   ========================================================================== */
.crm-container .crm-profile-name {
	font-weight: 700 !important;
	color: #1E1E1E !important;
	font-size: 1.5rem !important;
	margin-bottom: 15px !important;
}

.crm-container .crm-summary-block {
	background-color: rgba(255, 255, 255, 0.35) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	border: 1px solid rgba(255, 255, 255, 0.4) !important;
	border-radius: 10px !important;
	padding: 20px !important;
	margin-bottom: 20px !important;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
}

.crm-container .crm-contact-info,
.crm-container .crm-membership-details {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
	gap: 20px !important;
}

/* ==========================================================================
   8. CiviCRM Events Redesign Additions (Premium Redesign Integration)
   ========================================================================== */

/* Make tables scrollable on mobile (fully responsive) */
.crm-container .crm-event-list {
	width: 100% !important;
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch !important;
	margin-bottom: 20px !important;
}

/* Form Labels and Required Markers */
.crm-container .crm-section .label,
.crm-container .label label,
.crm-container .crm-label {
	font-weight: 600 !important;
	color: #1E1E1E !important;
	font-size: 0.9rem !important;
	margin-bottom: 6px !important;
	display: block !important;
}
.crm-container .crm-marker {
	color: #A81B2C !important;
	font-weight: 700 !important;
}

/* Max width for form inputs (except textarea) on desktop for better readability */
@media (min-width: 768px) {
	.crm-container input[type="text"],
	.crm-container input[type="password"],
	.crm-container input[type="email"],
	.crm-container input[type="tel"],
	.crm-container input[type="url"],
	.crm-container input[type="number"],
	.crm-container select {
		max-width: 450px !important;
	}
	.crm-container textarea {
		max-width: 650px !important;
	}
}

/* Separation of checkbox and radio border-radius for UX clarity */
.crm-container input[type="checkbox"] {
	border-radius: 4px !important;
}
.crm-container input[type="radio"] {
	border-radius: 50% !important;
}

/* Reset Form Layout Tables (no borders, no backgrounds, no row hovers) */
.crm-container table.form-layout,
.crm-container table.form-layout-compressed,
.crm-container table.form-layout-compressed tr,
.crm-container table.form-layout-compressed td,
.crm-container table.form-layout-compressed tr:hover td {
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 8px 12px !important;
}

/* Teal help message/donation callout styling */
.crm-container .messages.help {
	background-color: rgba(240, 253, 251, 0.65) !important; /* Soft Teal glass */
	border-color: rgba(204, 245, 241, 0.5) !important;
	color: #1A6C63 !important;
	border-left: 4px solid #3FB5A6 !important; /* Brand Teal */
	padding: 16px 20px 16px 54px !important;
	position: relative !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
}
.crm-container .messages.help::before {
	content: "ℹ" !important;
	position: absolute !important;
	left: 20px !important;
	top: 14px !important;
	font-size: 20px !important;
	font-weight: bold !important;
	color: #3FB5A6 !important;
}

/* Total Amount Display Box */
.crm-container #pricesetTotal.crm-section {
	display: inline-flex !important;
	align-items: center !important;
	background-color: rgba(255, 255, 255, 0.45) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	border: 1px solid rgba(255, 255, 255, 0.4) !important;
	border-radius: 8px !important;
	padding: 14px 20px !important;
	margin-top: 15px !important;
	margin-bottom: 25px !important;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
}
.crm-container #pricesetTotal .label {
	font-weight: 600 !important;
	color: #1E1E1E !important;
	margin-right: 15px !important;
	margin-bottom: 0 !important;
	text-transform: uppercase !important;
	font-size: 0.85rem !important;
	letter-spacing: 0.05em !important;
}
.crm-container #pricesetTotal .content.calc-value {
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	color: #A81B2C !important;
}

/* Stripe card input elements matching the rounded theme style */
.crm-container .StripeElement {
	background-color: rgba(255, 255, 255, 0.65) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	border: 1px solid rgba(0, 0, 0, 0.15) !important;
	border-radius: 6px !important;
	padding: 12px 14px !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) inset !important;
	box-sizing: border-box !important;
	transition: all 0.2s ease !important;
}
@media (min-width: 768px) {
	.crm-container .StripeElement {
		max-width: 450px !important;
	}
}
.crm-container .StripeElement--focus {
	border-color: #A81B2C !important;
	background-color: rgba(255, 255, 255, 0.9) !important;
	box-shadow: 0 0 0 3px rgba(224, 26, 34, 0.15) !important;
}

/* Sidebar Event Widget Register button style integration */
.widget_civievent-widget .civievent-widget-reglink a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background-color: #A81B2C !important;
	color: #FFFFFF !important;
	padding: 6px 14px !important;
	border-radius: 6px !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	text-decoration: none !important;
	margin-top: 8px !important;
	box-shadow: 0 2px 4px rgba(232, 33, 39, 0.12) !important;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.widget_civievent-widget .civievent-widget-reglink a:hover {
	background-color: #8A1220 !important;
	color: #FFFFFF !important;
	box-shadow: 0 4px 10px rgba(232, 33, 39, 0.24) !important;
	transform: translateY(-1px) scale(1.02) !important;
}