my-app/src/components/booking/BookingCard.module.css

@@ -573,97 +573,8 @@
 	}
 }
 
-.optionButtons {
-	display: flex;
-	flex-direction: row;
-	gap: 0.75rem;
-}
 
-.optionButton {
-	background: var(--bg-secondary);
-	border: 1px solid var(--border-light);
-	color: var(--text-primary);
-	padding: 0.75rem 1rem;
-	font-size: 0.9rem;
-	font-weight: 500;
-	cursor: pointer;
-	transition: all 0.2s ease;
-	text-align: center;
-	width: 100%;
-	box-sizing: border-box;
-	border-radius: var(--border-radius-sm);
-}
 
-.optionButton:hover {
-	border-color: var(--color-primary);
-	background-color: var(--bg-secondary);
-}
-
-.optionButton:focus {
-	outline: none;
-}
-
-.optionButton:focus-visible {
-	outline: 2px solid var(--color-primary);
-	outline-offset: 2px;
-}
-
-/* Tab buttons for expanded view */
-.tabButtons {
-	display: flex;
-	flex-direction: row;
-	gap: 0.5rem;
-	margin-bottom: 1rem;
-	border-bottom: 1px solid var(--border-light);
-	padding-bottom: 1rem;
-}
-
-.tabButtonsNoBorder {
-	display: flex;
-	flex-direction: row;
-	gap: 0.5rem;
-}
-
-.tabButton {
-	background: var(--bg-secondary);
-	border: 1px solid var(--border-light);
-	color: var(--text-primary);
-	padding: 0.75rem 1rem;
-	font-size: 0.9rem;
-	font-weight: 500;
-	cursor: pointer;
-	transition: all 0.2s ease;
-	text-align: center;
-	border-radius: var(--border-radius-sm);
-	flex: 1;
-}
-
-.tabButton:hover {
-	border-color: var(--color-primary);
-	background-color: var(--bg-primary);
-}
-
-.tabButton:focus {
-	outline: none;
-}
-
-.tabButton:focus-visible {
-	outline: 2px solid var(--color-primary);
-	outline-offset: 2px;
-}
-
-.activeTab {
-	background: #6b7280 !important;
-	color: white !important;
-	border-color: #4b5563 !important;
-	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.activeTab:hover {
-	background: #6b7280 !important;
-	color: white !important;
-	border-color: #4b5563 !important;
-}
 
 /* Room information styles */
 .roomInfoContent {

my-app/src/components/booking/BookingCardTabs.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button } from 'react-aria-components';
-import styles from './BookingCard.module.css';
+import styles from './BookingCardTabs.module.css';
 
 export function BookingCardTabs({ 
 	activeView, 
@@ -9,11 +9,18 @@ export function BookingCardTabs({
 	onManageBooking,
 	setActiveView 
 }) {
+	const containerClass = isInExpandedView && activeView !== 'closed' 
+		? styles.tabButtons 
+		: styles.tabButtonsNoBorder;
+		
 	return (
-		<div className={isInExpandedView ? (activeView === 'closed' ? styles.tabButtonsNoBorder : styles.tabButtons) : styles.optionButtons}>
+		<div className={containerClass}>
 			<Button 
-				className={`${isInExpandedView ? styles.tabButton : styles.optionButton} ${activeView === 'lokalinfo' ? styles.activeTab : ''}`}
-				onPress={() => {
+				className={`${styles.tabButton} ${activeView === 'lokalinfo' ? styles.activeTab : ''}`}
+				onPress={(e) => {
+					// Remove focus on touch devices to prevent persistent styling
+					if (e.target) e.target.blur();
+					
 					if (isInExpandedView && activeView === 'lokalinfo') {
 						// Close content, show only tab buttons
 						setActiveView('closed');
@@ -25,8 +32,11 @@ export function BookingCardTabs({
 				Lokalinformation
 			</Button>
 			<Button 
-				className={`${isInExpandedView ? styles.tabButton : styles.optionButton} ${activeView === 'hantera' ? styles.activeTab : ''}`}
-				onPress={() => {
+				className={`${styles.tabButton} ${activeView === 'hantera' ? styles.activeTab : ''}`}
+				onPress={(e) => {
+					// Remove focus on touch devices to prevent persistent styling
+					if (e.target) e.target.blur();
+					
 					if (isInExpandedView && activeView === 'hantera') {
 						// Close content, show only tab buttons
 						setActiveView('closed');

my-app/src/components/booking/BookingCardTabs.module.css

@@ -0,0 +1,86 @@
+/* Container styles */
+.tabButtons {
+	display: flex;
+	flex-direction: row;
+	gap: 0.5rem;
+	margin-bottom: 1rem;
+	border-bottom: 1px solid var(--border-light);
+	padding-bottom: 1rem;
+}
+
+.tabButtonsNoBorder {
+	display: flex;
+	flex-direction: row;
+	gap: 0.5rem;
+}
+
+/* Button styles */
+.tabButton {
+	background: var(--bg-secondary);
+	border: 1px solid var(--border-light);
+	color: var(--text-primary);
+	padding: 0.75rem 1rem;
+	font-size: 0.9rem;
+	font-weight: 500;
+	cursor: pointer;
+	transition: all 0.2s ease;
+	text-align: center;
+	border-radius: var(--border-radius-sm);
+	flex: 1;
+}
+
+.tabButton:hover {
+	border-color: var(--color-primary);
+	background-color: var(--bg-primary);
+}
+
+.tabButton:focus {
+	outline: none;
+}
+
+.tabButton:focus-visible {
+	outline: 2px solid var(--color-primary);
+	outline-offset: 2px;
+}
+
+.tabButton:active {
+	background-color: var(--bg-secondary);
+	transform: none;
+}
+
+/* Touch device specific styles */
+@media (hover: none) {
+	.tabButton:hover {
+		background-color: var(--bg-secondary);
+		border-color: var(--border-light);
+	}
+	
+	.tabButton:focus {
+		outline: none;
+		background-color: var(--bg-secondary);
+	}
+	
+	.tabButton:focus-visible {
+		outline: none;
+	}
+	
+	.activeTab:hover {
+		background: #6b7280 !important;
+		color: white !important;
+		border-color: #4b5563 !important;
+	}
+}
+
+/* Active tab styling */
+.activeTab {
+	background: #6b7280 !important;
+	color: white !important;
+	border-color: #4b5563 !important;
+	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.activeTab:hover {
+	background: #6b7280 !important;
+	color: white !important;
+	border-color: #4b5563 !important;
+}