/* ==========================================================================
   styles.css — Main stylesheet for Rename Pro website.
   Organized into logical sections with all light-theme overrides consolidated
   at the bottom in a single @media (prefers-color-scheme: light) block.
   ========================================================================== */

/* ==========================================================================
   1. CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
	/* Brand colors */
	--primary: hsl(151, 91%, 40%);
	--primary-border: hsl(151, 91%, 30%);
	--primary-hover-bg: hsl(151, 91%, 32%);
	--primary-text-color: hsl(0, 0%, 90%);
	--accent: hsl(151, 91%, 60%);

	/* Neutral scale — light end */
	--white-100: hsl(0, 0%, 100%);
	--white-90: hsl(0, 0%, 90%);
	--white-70: hsl(0, 0%, 70%);
	--white-50: hsl(0, 0%, 50%);
	--white-30: hsl(0, 0%, 30%);
	--white-20: hsl(0, 0%, 20%);
	--white-10: hsl(0, 0%, 10%);

	/* Neutral scale — dark end */
	--black-100: hsl(0, 0%, 0%);
	--black-90: hsl(0, 0%, 10%);
	--black-70: hsl(0, 0%, 30%);
	--black-50: hsl(0, 0%, 50%);
	--black-30: hsl(0, 0%, 70%);
	--black-20: hsl(0, 0%, 80%);
	--black-10: hsl(0, 0%, 90%);
}

/* ==========================================================================
   2. DaisyUI Theme Overrides
   ========================================================================== */

/* Override business and corporate theme border radius for more rounded corners */
[data-theme="business"],
[data-theme="corporate"] {
	--rounded-box: 1rem;
	--rounded-btn: 0.5rem;
	--rounded-badge: 1.9rem;
}

.card {
	border-radius: var(--rounded-box, 1rem);
	word-break: break-word;
	overflow-wrap: break-word;
}

.btn {
	border-radius: var(--rounded-btn, 0.5rem);
}

.input,
.checkbox {
	border-radius: 0.5rem;
}

.modal-box {
	border-radius: 1rem;
}

/* ==========================================================================
   3. Base Element Styles
   ========================================================================== */

ol {
	list-style-type: decimal;
}

/* ==========================================================================
   4. Utility / Helper Classes
   ========================================================================== */

.bg-primary {
	background-color: var(--primary);
}

.text-primary {
	color: var(--primary);
}

.primary {
	color: var(--primary);
}

.text-title {
	color: var(--primary-text-color, inherit);
}

/* Override DaisyUI stat-desc font size to match stat-title (text-sm) */
.stat-desc {
	font-size: 0.875rem !important;
}

/* Hide reCAPTCHA badge */
.grecaptcha-badge {
	visibility: hidden;
	width: 0 !important;
	height: 0 !important;
}

/* ==========================================================================
   5. Buttons & Badges
   ========================================================================== */

.btn-primary {
	background-color: var(--primary);
	border-color: var(--primary-border);
	color: var(--white-100, inherit) !important;
}

.btn-primary:hover {
	background-color: var(--primary-hover-bg);
	border-color: var(--primary-border);
}

.badge-primary {
	color: var(--white-100, white) !important;
}

.badge-secondary {
	background-color: var(--accent);
	color: var(--primary-text-color, inherit);
	border: var(--primary-border);
}

/* ==========================================================================
   6. Cards
   ========================================================================== */

.card.image-full:before {
	content: none;
}

.card-bordered-image {
	border-width: 0;
	border-bottom: 1px solid var(--white-20);
	border-left: 1px solid var(--white-20);
	border-right: 1px solid var(--white-20);
}

.card-bordered {
	border-width: 0;
	border-bottom: 1px solid var(--white-20);
	border-left: 1px solid var(--white-20);
	border-right: 1px solid var(--white-20);
	border-top: 1px solid var(--white-20);
}

/* Custom card-title color — dark theme default */
.card-title {
	color: hsl(0, 0%, 90%);
}

/* Expandable card behavior */
.card-expandable {
	cursor: pointer;
	transition: all 0.3s ease;
	height: auto; /* Allow height to adjust naturally */
}

.card-content-expanded {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.5s ease;
}

.expanded .card-content-expanded {
	max-height: 1000px;
}

/* ==========================================================================
   7. Borders & Dividers
   ========================================================================== */

.footer-border {
	border-top: 1px solid var(--white-20);
}

/* ==========================================================================
   8. Links
   ========================================================================== */

/* Link styling for better visibility in dark mode */
.link,
a.link-primary,
p a {
	color: var(--primary) !important;
}

.link:hover,
a.link-primary:hover,
p a:hover {
	color: hsl(151, 91%, 70%) !important;
}

/* ==========================================================================
   9. Form Inputs
   ========================================================================== */

/* Fix input field width in flex containers */
.input input[type="email"],
.input input[type="text"] {
	width: 100%;
	min-width: 0;
	flex: 1;
}

/* ==========================================================================
   10. Expand Arrow (shared by cards & pricing table)
   ========================================================================== */

.expand-arrow {
	display: flex;
	justify-content: center;
	margin-top: 10px;
	color: #888;
	transition: transform 0.3s ease;
}

.card-expandable.expanded .expand-arrow {
	transform: rotate(180deg);
}

/* Expand arrow rotation for pricing table */
.expand-arrow.expanded {
	transform: rotate(180deg);
}

/* ==========================================================================
   11. Masonry Layout
   ========================================================================== */

.masonry-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	align-items: start;
}

@media (min-width: 768px) {
	.masonry-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.masonry-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.masonry-item {
	width: 100%;
}

/* ==========================================================================
   12. Timeline
   ========================================================================== */

/* Push the hr + dot to the container's start edge */
.timeline-vertical:where(.timeline-snap-icon) > li {
	--timeline-col-start: minmax(0, 0fr);
	--timeline-row-start: 0.5rem;
}

/* ==========================================================================
   13. Pricing Section
   ========================================================================== */

/* --- 13a. Desktop grid layout --- */

/* Mobile sticky header - hidden by default */
.mobile-pricing-header {
	display: none;
}

.responsive-pricing-table .grid-header,
.responsive-pricing-table .grid-row,
.responsive-pricing-table .grid-footer {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: 1rem;
	align-items: center;
	padding: 1rem 0;
	border-bottom: 1px solid var(--white-30);
}

.responsive-pricing-table .grid-header {
	font-weight: bold;
	border-bottom-width: 2px;
	border-color: var(--white-50);
}

.responsive-pricing-table .grid-header > div:not(:first-child) {
	text-align: center;
}

.responsive-pricing-table .grid-cell {
	text-align: center;
}

.responsive-pricing-table .grid-footer {
	border-bottom: none;
}

.responsive-pricing-table .grid-footer > div {
	display: flex;
	justify-content: center;
	align-items: center;
}

.responsive-pricing-table .grid-footer button {
	min-width: 200px;
}

/* --- 13b. Feature names & tooltips --- */

.responsive-pricing-table .feature-name {
	text-align: left;
	display: flex;
	align-items: center;
	cursor: pointer;
	position: relative;
}

.responsive-pricing-table .feature-name .expand-arrow {
	display: inline-flex;
	align-items: center;
	margin-right: 0.375rem;
	flex-shrink: 0;
	color: #888;
	transition: transform 0.3s ease;
}

.responsive-pricing-table .expandable-row.row-expanded .expand-arrow {
	transform: rotate(180deg);
}

.responsive-pricing-table .expansion-content {
	grid-column: 1 / -1;
}

.responsive-pricing-table .expandable-row.row-expanded .feature-tooltip-box,
.responsive-pricing-table
	.expandable-row.row-expanded:hover
	.feature-tooltip-box {
	display: none;
}

.feature-info-icon {
	display: inline-flex;
	align-items: center;
	margin-left: 0.375rem;
	flex-shrink: 0;
	opacity: 0.45;
	transition: opacity 0.15s;
}

.feature-name:hover .feature-info-icon {
	opacity: 1;
}

.feature-tooltip-box {
	display: none;
	position: fixed;
	z-index: 200;
	min-width: 260px;
	max-width: 340px;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.5;
	white-space: normal;
	pointer-events: none;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	background: oklch(var(--b2));
	border: 1px solid oklch(var(--bc) / 0.15);
	color: oklch(var(--bc));
}

/* --- 13c. Price display --- */

#price-display {
	font-weight: bold;
	margin: 1rem 0;
	text-align: center;
}

/* --- 13d. Mobile pricing (max-width: 767px) --- */

@media (max-width: 767px) {
	/* Decrease padding for all large containers on mobile */
	.container {
		padding-left: 0.75rem !important;
		padding-right: 0.75rem !important;
	}

	/* Decrease padding for BUY and GET FREE popup cards on mobile */
	#user-info-modal {
		padding: 0 !important;
	}
	#user-info-modal .modal-box {
		padding: 0.75rem !important;
	}

	/* Disable card zoom on mobile */
	.card {
		transform: none !important;
	}

	.card:hover {
		transform: none !important;
	}

	/* Mobile sticky header styling */
	.mobile-pricing-header {
		display: block;
		position: sticky;
		top: 0;
		z-index: 10;
		background-color: hsl(0, 0%, 20%);
		margin-bottom: 1rem;
	}

	.mobile-header-content {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
		padding: 1rem;
	}

	.mobile-plan-column {
		text-align: center;
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
	}

	/* Reduce card-body padding for pricing card on mobile */
	.pricing-card-body {
		padding: 0.75rem;
	}

	/* Reduce padding on the pricing table container for mobile */
	.responsive-pricing-table {
		padding: 5px;
	}

	.responsive-pricing-table .grid-header {
		display: none;
	}

	.responsive-pricing-table .grid-row {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"name name"
			"lite pro";
		gap: 0.5rem;
		border: 1px solid var(--white-30);
		border-radius: 0.5rem;
		padding: 0.75rem;
		margin-bottom: 0.75rem;
	}

	.responsive-pricing-table .feature-name {
		grid-area: name;
		margin-bottom: 0.5rem;
		padding-bottom: 0.5rem;
		border-bottom: 1px solid var(--white-30);
	}

	.responsive-pricing-table .grid-cell[data-label="Lite"] {
		grid-area: lite;
		align-self: start;
	}

	.responsive-pricing-table .grid-cell[data-label="Pro"] {
		grid-area: pro;
		align-self: start;
	}

	/* Remove the data-label display since we have sticky header */
	.responsive-pricing-table .grid-cell::before {
		display: none;
	}

	.responsive-pricing-table .badge-info {
		font-size: 0.65rem;
		padding: 0.25rem 0.5rem;
	}

	.responsive-pricing-table .grid-footer {
		grid-template-columns: 1fr 1fr;
		gap: 0.5rem;
		padding: 1rem 0.5rem;
	}

	.responsive-pricing-table .grid-footer > div:first-child {
		display: none;
	}

	.responsive-pricing-table .grid-footer button {
		width: 100%;
		min-width: auto;
		white-space: normal;
		font-size: 0.875rem;
		padding: 0.5rem 0.75rem;
		line-height: 1.2;
	}
}

/* Extra small mobile devices */
@media (max-width: 400px) {
	.responsive-pricing-table .grid-footer button {
		font-size: 0.75rem;
		padding: 0.5rem;
	}
}

/* ==========================================================================
   14. User Info Modal
   ========================================================================== */

#user-info-modal {
	padding: 2rem;
}

#user-info-modal .modal-box {
	border-radius: 0.5rem;
	border: 1px solid var(--white-20);
	background-color: hsl(0, 0%, 20%);
}

#user-info-modal::backdrop {
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(2px);
}

#user-info-form .revit-versions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 1rem 0;
}

/* ==========================================================================
   15. Klaro Cookie Consent — Dark Theme (Default)
   ========================================================================== */

.klaro .cookie-modal,
.klaro .cookie-notice {
	background-color: hsl(0, 0%, 15%) !important;
	color: hsl(0, 0%, 90%) !important;
}

.klaro .cookie-notice,
.klaro .cookie-notice p,
.klaro .cookie-notice span,
.klaro .cookie-notice .cn-body,
.klaro .cookie-notice .cn-text,
.klaro .cookie-modal p,
.klaro .cookie-modal span,
.klaro .cookie-modal h1,
.klaro .cookie-modal h2,
.klaro .cookie-modal .cm-header h1 {
	color: hsl(0, 0%, 90%) !important;
}

.klaro .cm-modal .cm-header {
	border-bottom: 1px solid hsl(0, 0%, 30%) !important;
}

.klaro .cm-modal .cm-footer {
	border-top: 1px solid hsl(0, 0%, 30%) !important;
}

/* Toggle switches */
.klaro .cm-list-input:checked + .cm-list-label .slider {
	background-color: var(--primary) !important;
}

/* Disabled/inactive toggle - grayed out, not white */
.klaro .cm-list-input:not(:checked) + .cm-list-label .slider {
	background-color: hsl(0, 0%, 40%) !important;
}

/* Required services (always on) - primary color but slightly dimmed */
.klaro .cm-list-input[disabled]:checked + .cm-list-label .slider {
	background-color: var(--primary) !important;
	opacity: 0.8;
}

/* Hover state for inactive toggles */
.klaro
	.cm-list-label:hover
	.cm-list-input:not(:checked)
	+ .cm-list-label
	.slider,
.klaro .cm-list-input:not(:checked) + .cm-list-label:hover .slider {
	background-color: hsl(0, 0%, 50%) !important;
}

/* Toggle circle/slider button */
.klaro .slider:before {
	background-color: white !important;
}

/* Service descriptions and text */
.klaro .cm-app-description {
	color: hsl(0, 0%, 75%) !important;
}

.klaro .cm-app-title {
	color: hsl(0, 0%, 95%) !important;
}

/* Buttons */
.klaro .cm-btn {
	border-radius: 0.5rem !important;
}

.klaro .cm-btn.cm-btn-success {
	background-color: var(--primary) !important;
	border-color: var(--primary-border) !important;
	color: white !important;
}

.klaro .cm-btn.cm-btn-success:hover {
	background-color: var(--primary-hover-bg) !important;
}

.klaro .cm-btn.cm-btn-info {
	background-color: hsl(0, 0%, 30%) !important;
	color: hsl(0, 0%, 90%) !important;
	border: 1px solid hsl(0, 0%, 40%) !important;
}

.klaro .cm-btn.cm-btn-info:hover {
	background-color: hsl(0, 0%, 35%) !important;
}

/* Notice banner at bottom */
.klaro .cookie-notice {
	border-top: 1px solid hsl(0, 0%, 30%) !important;
}

/* Ensure proper z-index for modal */
.klaro .cookie-modal {
	z-index: 9999 !important;
}

.klaro .cookie-modal-backdrop {
	z-index: 9998 !important;
	background-color: rgba(0, 0, 0, 0.5) !important;
}

/* ==========================================================================
   16. Light Theme Overrides
   All prefers-color-scheme: light rules gathered in one place.
   ========================================================================== */

@media (prefers-color-scheme: light) {
	/* --- Design tokens --- */
	:root {
		--primary-text-color: hsl(0, 0%, 0%);
	}

	/* --- Cards & borders --- */
	.card-bordered-image {
		border-width: 0;
		border-bottom: 1px solid var(--black-20);
		border-left: 1px solid var(--black-20);
		border-right: 1px solid var(--black-20);
	}

	.card-bordered {
		border-width: 0;
		border-bottom: 1px solid var(--black-20);
		border-left: 1px solid var(--black-20);
		border-right: 1px solid var(--black-20);
		border-top: 1px solid var(--black-20);
	}

	.card-title {
		color: hsl(0, 0%, 0%);
	}

	.footer-border {
		border-top: 1px solid var(--black-20);
	}

	/* --- Links --- */
	.link,
	a.link-primary,
	p a {
		color: hsl(151, 91%, 28%) !important;
	}

	.link:hover,
	a.link-primary:hover,
	p a:hover {
		color: hsl(151, 91%, 20%) !important;
	}

	/* --- User Info Modal --- */
	#user-info-modal .modal-box {
		border-color: var(--black-20);
		background-color: hsl(0, 0%, 95%);
	}

	/* --- Mobile pricing header --- */
	.mobile-pricing-header {
		background-color: hsl(0, 0%, 98%);
		border-color: var(--black-20);
	}

	/* --- Klaro Cookie Consent --- */
	.klaro .cookie-modal,
	.klaro .cookie-notice {
		background-color: hsl(0, 0%, 98%) !important;
		color: hsl(0, 0%, 10%) !important;
	}

	.klaro .cookie-notice,
	.klaro .cookie-notice p,
	.klaro .cookie-notice span,
	.klaro .cookie-notice .cn-body,
	.klaro .cookie-notice .cn-text,
	.klaro .cookie-modal p,
	.klaro .cookie-modal span,
	.klaro .cookie-modal h1,
	.klaro .cookie-modal h2,
	.klaro .cookie-modal .cm-header h1 {
		color: hsl(0, 0%, 10%) !important;
	}

	.klaro .cm-modal .cm-header {
		border-bottom: 1px solid hsl(0, 0%, 85%) !important;
	}

	.klaro .cm-modal .cm-footer {
		border-top: 1px solid hsl(0, 0%, 85%) !important;
	}

	.klaro .cm-list-input:not(:checked) + .cm-list-label .slider {
		background-color: hsl(0, 0%, 70%) !important;
	}

	.klaro
		.cm-list-label:hover
		.cm-list-input:not(:checked)
		+ .cm-list-label
		.slider,
	.klaro .cm-list-input:not(:checked) + .cm-list-label:hover .slider {
		background-color: hsl(0, 0%, 60%) !important;
	}

	.klaro .cm-app-description {
		color: hsl(0, 0%, 40%) !important;
	}

	.klaro .cm-app-title {
		color: hsl(0, 0%, 5%) !important;
	}

	.klaro .cm-btn.cm-btn-info {
		background-color: hsl(0, 0%, 90%) !important;
		color: hsl(0, 0%, 10%) !important;
		border: 1px solid hsl(0, 0%, 75%) !important;
	}

	.klaro .cm-btn.cm-btn-info:hover {
		background-color: hsl(0, 0%, 85%) !important;
	}

	.klaro .cookie-notice {
		border-top: 1px solid hsl(0, 0%, 85%) !important;
	}
}