mirror of
https://github.com/velocitatem/PHANTOM.git
synced 2026-07-15 17:43:36 +00:00
Compare commits
4 Commits
15-define-
...
13-create-
| Author | SHA1 | Date | |
|---|---|---|---|
| 6eb02cc5d2 | |||
| 26af688d4d | |||
| 8174cd3ef5 | |||
| 7532bed897 |
@@ -6,11 +6,17 @@
|
||||
(setq TeX-command-extra-options
|
||||
"-file-line-error -interaction=nonstopmode")
|
||||
(TeX-add-to-alist 'LaTeX-provided-class-options
|
||||
'(("report" "12pt") ("article" "12pt") ("acmart" "sigconf" "nonacm")))
|
||||
'(("report" "12pt") ("article" "12pt") ("acmart" "sigconf" "nonacm" "natbib=false")))
|
||||
(TeX-run-style-hooks
|
||||
"latex2e"
|
||||
"preamble"
|
||||
"chapters/01-intro"
|
||||
"chapters/02-literature-review"
|
||||
"chapters/03-methodology"
|
||||
"chapters/04-results"
|
||||
"chapters/05-discussion"
|
||||
"chapters/06-conclusion"
|
||||
"../build/concatenated_code"
|
||||
"acmart"
|
||||
"acmart10")
|
||||
(TeX-add-symbols
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
@phdthesis{,
|
||||
abstract = {Algorithmic pricing is an emerging business practice that uses computational algorithms to determine
|
||||
the prices of products and services based on a number of dynamic factors. The aim of this thesis is to
|
||||
draw attention to the existence of these business practices, and the ethical and social implications that
|
||||
derive from them, and then focus on what could be effective solutions to increase the well-being of
|
||||
the community.
|
||||
In Chapter 2 of the thesis, a general introduction to the topic will be made, starting from its history
|
||||
and its evolution over the years; Chapter 3 will examine the different types of pricing algorithms.
|
||||
Subsequently, in Chapter 4 we will analyze the sectors in which they are most applicable, and the
|
||||
relative advantages and disadvantages they bring with them, with a critical analysis of the trade-offs
|
||||
generated. The effect of algorithmic pricing on competition will be studied, considering how the
|
||||
ability of algorithms to adapt quickly to market conditions can foster anti-competitive practices, such
|
||||
as price discrimination. Later, in Chapter 5, we will look at the issue of price transparency and how
|
||||
the opacity of algorithms can make it difficult for consumers to understand the pricing process and
|
||||
assess whether they are receiving fair treatment.
|
||||
To address these ethical issues, several possible solutions will be brought to light, described in
|
||||
Chapter 6, which will focus on the role of the government, as a regulatory, of the end consumer, who
|
||||
must be encouraged to educate and inform himself about the use of these practices, and of the
|
||||
company, as responsible for making its customers aware and acting in compliance with government
|
||||
laws, for fair and non-discriminatory use.},
|
||||
author = {Fabio Salassa and Paolo Pautassi},
|
||||
school = {Politecnico di Torino},
|
||||
title = {Politecnico di Torino Algorithmic Pricing in the digital age "Ethical considerations on its economic and social implications, and an analysis of possible solutions to overcome its critical issues" Tutor: Candidate},
|
||||
url = {https://webthesis.biblio.polito.it/secure/31375/1/tesi.pdf}
|
||||
}
|
||||
@inproceedings{Mueller2019,
|
||||
author = {Jonas W Mueller and Vasilis Syrgkanis and Matt Taddy},
|
||||
booktitle = {Advances in Neural Information Processing Systems 32 (NeurIPS 2019)},
|
||||
pages = {15442-15452},
|
||||
title = {Low-Rank Bandit Methods for High-Dimensional Dynamic Pricing},
|
||||
url = {https://proceedings.neurips.cc/paper/2019/file/0a3df70393993583a13c0dd6686f3f32-Paper.pdf},
|
||||
year = {2019}
|
||||
}
|
||||
@article{Prez-Ricardo2025,
|
||||
abstract = {The study aims to explore tourists' booking intentions by analyzing the price elasticity of demand in tourist accommodations. This analysis should reveal how changes in price affect booking behavior across different customer segments, using online booking records. A dataset was compiled from 106 hotels in Malaga, Spain, comprising 27,910 online bookings sourced exclusively from hotel websites. To understand the price elasticity of demand, a simple log-log regression was applied, segmenting the data based on key revenue-related variables. Subsequently, a cluster segmentation was performed using the Elbow method and K-means algorithm to identify distinct market segments. The findings highlighted that Family Travelers and Short Stay Travelers segments exhibited elastic demand, indicating higher sensitivity to price fluctuations. In contrast, Early Bookers and Mid-Season Long Stayers demonstrated inelastic demand, with lower responsiveness to changes in tourist accommodation prices. The number of variables analyzed in this study, along with the cluster analysis, represent a novelty and contribute to the existing literature on market segmentation and price elasticity of demand. This integration enriches both fields of research, offering mutual benefits and deeper insights that enhance the understanding of booking intention and pricing strategies.},
|
||||
author = {Elizabeth del Carmen Pérez-Ricardo and Josefa García-Mestanza},
|
||||
doi = {10.1016/j.iedeen.2025.100271},
|
||||
issn = {24448834},
|
||||
issue = {1},
|
||||
journal = {European Research on Management and Business Economics},
|
||||
keywords = {Booking intention,Price elasticity,Tourist segmentation},
|
||||
month = {1},
|
||||
publisher = {European Academy of Management and Business Economics},
|
||||
title = {Exploring booking intentions through price elasticity of demand in tourism accommodations using large-scale data analytics},
|
||||
volume = {31},
|
||||
year = {2025}
|
||||
}
|
||||
@article{ArnoudVdenBoer2015,
|
||||
author = {Arnoud V. den Boer},
|
||||
doi = {10.1016/j.sorms.2015.03.001},
|
||||
issue = {1},
|
||||
journal = {Surveys in Operations Research and Management Science},
|
||||
month = {6},
|
||||
pages = {1-18},
|
||||
title = {Dynamic pricing and learning: Historical origins, current research, and new directions},
|
||||
volume = {20},
|
||||
url = {https://www.sciencedirect.com/science/article/pii/S1876735415000021},
|
||||
year = {2015}
|
||||
}
|
||||
@article{Iliou2021,
|
||||
author = {Christos Iliou and Theodoros Kostoulas and Theodora Tsikrika and Vasilis Katos and Stefanos Vrochidis and Ioannis Kompatsiaris},
|
||||
doi = {10.1145/3447815},
|
||||
issue = {3},
|
||||
journal = {Digital Threats: Research and Practice},
|
||||
pages = {1-26},
|
||||
title = {Detection of Advanced Web Bots by Combining Web Logs with Mouse Behavioural Biometrics},
|
||||
volume = {2},
|
||||
url = {https://dl.acm.org/doi/10.1145/3447815},
|
||||
year = {2021}
|
||||
}
|
||||
@article{Amjad2017,
|
||||
abstract = { In this paper, the question of interest is estimating true demand of a product at a given store location and time period in the retail environment based on a single noisy and potentially censored observation. To address this question, we introduce a %non-parametric framework to make inference from multiple time series. Somewhat surprisingly, we establish that the algorithm introduced for the purpose of "matrix completion" can be used to solve the relevant inference problem. Specifically, using the Universal Singular Value Thresholding (USVT) algorithm [7], we show that our estimator is consistent: the average mean squared error of the estimated average demand with respect to the true average demand goes to 0 as the number of store locations and time intervals increase to $\infty$. We establish naturally appealing properties of the resulting estimator both analytically as well as through a sequence of instructive simulations. Using a real dataset in retail (Walmart), we argue for the practical relevance of our approach. },
|
||||
author = {Muhammad J. Amjad and Devavrat Shah},
|
||||
doi = {10.1145/3154489},
|
||||
issue = {2},
|
||||
journal = {Proceedings of the ACM on Measurement and Analysis of Computing Systems},
|
||||
month = {12},
|
||||
pages = {1-28},
|
||||
publisher = {Association for Computing Machinery (ACM)},
|
||||
title = {Censored Demand Estimation in Retail},
|
||||
volume = {1},
|
||||
url = {https://par.nsf.gov/servlets/purl/10066022},
|
||||
year = {2017}
|
||||
}
|
||||
@article{Calvano2018,
|
||||
author = {Emilio Calvano and Giacomo Calzolari and Vincenzo Denicolo and Sergio Pastorello},
|
||||
doi = {10.2139/ssrn.3304991},
|
||||
journal = {SSRN Electronic Journal},
|
||||
title = {Artificial Intelligence, Algorithmic Pricing and Collusion},
|
||||
url = {https://papers.ssrn.com/sol3/papers.cfm?abstract_id=3304991},
|
||||
year = {2018}
|
||||
}
|
||||
@misc{gha_ffary_day_2025_amazon_perplexit,
|
||||
author = {Shirin Ghaffary and Matt Day},
|
||||
note = {Updated 2025-11-05},
|
||||
title = {Amazon Sues to Stop Perplexity From Using AI Tool to Buy Stuff},
|
||||
url = {https://www.bloomberg.com/news/articles/2025-11-04/amazon-demands-perplexity-stop-ai-agent-from-making-purchases}
|
||||
}
|
||||
@@ -6,5 +6,11 @@
|
||||
%% \label{fig:example}
|
||||
%% \end{figure}
|
||||
|
||||
\section{Know They Enemy}
|
||||
To know how to overcome we need to
|
||||
\section{Introduction}
|
||||
|
||||
Research Objectives and Contribution: What are we making, why and who should care?
|
||||
|
||||
\subsection{Motivation and Market Context}
|
||||
Current market dynamics and trends of dynamic pricing and AI agents. Future projections of AI agents. Key stakeholders that are discussing this and reporting on it (Thales). Who is most affected
|
||||
\subsection{Solution Space Overview}
|
||||
Different approaches and perspectives, here also add a preview of what will be developed and explored in the lit review.
|
||||
|
||||
17
paper/src/chapters/02-literature-review.tex
Normal file
17
paper/src/chapters/02-literature-review.tex
Normal file
@@ -0,0 +1,17 @@
|
||||
\section{Literature Review}
|
||||
|
||||
\subsection{Foundational Concepts}
|
||||
|
||||
What is the taxonomy and definition of an agent and an actor in this case, a bit more about interaction models in sessions and about dynamic pricing algorithms.
|
||||
|
||||
\subsection{Problem Evidence and Market Impact}
|
||||
Documented instances of agent-driven market disruptions - Quantitative evidence of pricing manipulation - Case studies from affected industries
|
||||
|
||||
\subsection{Theoretical Foundations: Economic Prallels}
|
||||
|
||||
Economic foundations: relating the problem to options pricing theory. Cost of Information (COI) concept and its relevance
|
||||
|
||||
\subsection{Landscape of Existing Work}
|
||||
|
||||
Previous efforts in adversarial computer use LLM agents, show how multi-faceted the whole problem is
|
||||
Here we can show a market visualization (venn-like-diagram)
|
||||
68
paper/src/chapters/03-methodology.tex
Normal file
68
paper/src/chapters/03-methodology.tex
Normal file
@@ -0,0 +1,68 @@
|
||||
\section{Methodology}
|
||||
|
||||
|
||||
\subsection{Problem Formalization}
|
||||
|
||||
Mathematical formalization of agent-induced pricing distortions. Formal definition of potential loss mechanisms $\alpha D$
|
||||
|
||||
We consider a business across time during which we have an evolving vector $p_t \in \Re^N$ where $N$ is the number of products in our catalogue. our price vector is directly dependent on a demand function $q_t$ which we define as a linear method of a price elasticity matrix $B_t$. This is the same setup that Microsoft created in their research. \autocite{Mueller2019}
|
||||
|
||||
We gether interaction data from users interacting with a sample platform simulating a hotel/airline which generates interaction distributions $I_t = \{(p_t, q_t^\text{obs}, \pi_t)\}_{t=1}^T$
|
||||
|
||||
|
||||
\subsection{Cost of Information Framework}
|
||||
|
||||
Mathematical demonstration and validation of the COI and citation backed evidence, and framework overview + show harm to user via other cost distortions. Maybe split into 3.2.1 (COI Theory) and 3.2.2 (Framework Design)
|
||||
|
||||
\subsection{System Architecture}
|
||||
\begin{figure}[ht]
|
||||
\centering
|
||||
\begin{tikzpicture}[
|
||||
node distance=1.5cm and 2.5cm,
|
||||
box/.style={rectangle, draw, thick, minimum height=1cm, minimum width=3cm, align=center, fill=blue!10},
|
||||
kafka/.style={rectangle, draw=orange, thick, minimum height=1cm, minimum width=3cm, align=center, fill=orange!15},
|
||||
arrow/.style={thick,->,>=Stealth}
|
||||
]
|
||||
|
||||
% Nodes
|
||||
\node[box] (webapp) {Web Application \\ (Producer \& Consumer)};
|
||||
\node[kafka, below=of webapp] (kafka) {Apache Kafka \\ Cluster};
|
||||
\node[box, below=of kafka] (backend) {Backend Services / Microservices \\ (Producers and Consumers)};
|
||||
|
||||
% Connections
|
||||
\draw[arrow] (webapp) to[out=210,in=150] node[above]{Publish} (kafka);
|
||||
\draw[arrow] (kafka) to[out=50,in=330] node[below]{Consume} (webapp);
|
||||
\draw[arrow] (backend) -- node[above]{Publish/Consume} (kafka);
|
||||
|
||||
% Optional: Kafka internal components
|
||||
%\node[below=0.7cm of kafka, align=center] (topics) {Topics \\ Partitions};
|
||||
|
||||
% Optional background
|
||||
\begin{scope}[on background layer]
|
||||
\node[draw, rounded corners, fill=orange!5, fit=(kafka), inner sep=0.3cm] {};
|
||||
\end{scope}
|
||||
\end{tikzpicture}
|
||||
\caption{Technical Diagram}
|
||||
\end{figure}
|
||||
|
||||
High level overview of how it works
|
||||
\subsection{Experimental Design}
|
||||
Study methodology and approach. Data acquisition strategy. Defined objectives and success criteria. Observable metrics and KPIs
|
||||
|
||||
\subsection{Dynamic Pricing Algorithm Analysis}
|
||||
Deep dive into how the algorithm works, different kinds and justification for chosen appraoches + agent impact modeling and quantification.
|
||||
\subsection{Reinforcement Learning Formulation}
|
||||
How do we define the state space, action space and reward function breakdown and algorithm benchmarking.
|
||||
POSSIBLY: Expand into full subsections: 3.6.1 (State-Action Space), 3.6.2 (Reward Design), 3.6.3 (Benchmarking)
|
||||
|
||||
|
||||
\begin{algorithm}[t]
|
||||
\DontPrintSemicolon
|
||||
\KwIn{stepsize $\eta$, smoothing $\delta$, rank $d$}
|
||||
\For{$t=1$ \KwTo $T$}{
|
||||
Sample $u_t$ on unit sphere; set $x_t^\prime=x_t+\delta u_t$\;
|
||||
Set $p_t \gets U x_t^\prime$ and observe $q_t, R_t(p_t)$\;
|
||||
$x_{t+1} \gets \Pi\_{\mathcal{X}}(x_t-\eta R_t(p_t) u_t)$\;
|
||||
}
|
||||
\caption{Online Pricing Optimization (template)}
|
||||
\end{algorithm}
|
||||
16
paper/src/chapters/04-results.tex
Normal file
16
paper/src/chapters/04-results.tex
Normal file
@@ -0,0 +1,16 @@
|
||||
\section{Results}
|
||||
|
||||
\subsection{Behavioral Analysis}
|
||||
|
||||
Include markov chains of transition matrices, compare distributions (look at Divergence metrics)
|
||||
|
||||
|
||||
\subsection{Experimental Outcomes}
|
||||
|
||||
Align with defined objectives, show results and statistical significance (or not).
|
||||
|
||||
|
||||
\subsection{Interpretation and Insights}
|
||||
Inference from given patterns and show key findings.
|
||||
|
||||
\subsection{Anomalies}
|
||||
9
paper/src/chapters/05-discussion.tex
Normal file
9
paper/src/chapters/05-discussion.tex
Normal file
@@ -0,0 +1,9 @@
|
||||
\section{Discussion}
|
||||
|
||||
\subsection{Risk Assessment and Limitations}
|
||||
|
||||
Acknowledge risks and constraints and data sizes.
|
||||
|
||||
\subsection{Implications of Findings}
|
||||
|
||||
Interpretation of results and altenrative scenarios with broader market implications.
|
||||
8
paper/src/chapters/06-conclusion.tex
Normal file
8
paper/src/chapters/06-conclusion.tex
Normal file
@@ -0,0 +1,8 @@
|
||||
\section{Conclusion}
|
||||
|
||||
\subsection{Summary of contributions }
|
||||
Restate the thesis and key findings with validation of research objectives.
|
||||
|
||||
\subsection{Future Works and Next Steps}
|
||||
|
||||
Identify the research gaps here and potential business implications and setup of business + Proposed extensions and a long term agenda.
|
||||
3
paper/src/chapters/acknowledgements.tex
Normal file
3
paper/src/chapters/acknowledgements.tex
Normal file
@@ -0,0 +1,3 @@
|
||||
\section{Acknowledgements}
|
||||
|
||||
Eugene Bykovets, PhD - ETH
|
||||
@@ -29,17 +29,23 @@
|
||||
}
|
||||
|
||||
\begin{abstract}
|
||||
The primary objective of this thesis is to develop and validate pricing heuristics that protect e-commerce platforms from systematic exploitation by Large Language Model (LLM) agents within dynamic pricing environments. As AI agents increasingly mediate consumer transactions, they enable users to circumvent the Cost of Information (the price premium accumulated through demand signal expression) by conducting reconnaissance in isolated sessions before executing purchases through clean sessions at base prices. This research will make an anticipatory contribution by adapting recommendation system methodologies to distinguish between genuine human browsing behaviour and agent-orchestrated information gathering, thereby enabling pricing systems to maintain margin integrity without degrading the user experience for legitimate customers or getting rid of leads generated by LLMs.
|
||||
The primary objective of this thesis is to develop and validate pricing heuristics that protect e-commerce platforms from systematic exploitation by Large Language Model (LLM) agents within dynamic pricing environments. As AI agents increasingly mediate consumer transactions, they enable users to circumvent the Cost of Information (the price premium accumulated through demand signal expression) by conducting reconnaissance in isolated sessions before executing purchases through clean sessions at base prices. This research will make an anticipatory contribution by adapting recommendation system methodologies to distinguish between genuine human browsing behaviour and agent-orchestrated information gathering, thereby enabling pricing systems to maintain margin integrity without degrading the user experience for legitimate customers or getting rid of leads generated by LLMs.
|
||||
\end{abstract}
|
||||
|
||||
\maketitle
|
||||
|
||||
\input{chapters/01-intro}
|
||||
\input{chapters/02-literature-review}
|
||||
\input{chapters/03-methodology}
|
||||
\input{chapters/04-results}
|
||||
\input{chapters/05-discussion}
|
||||
\input{chapters/06-conclusion}
|
||||
|
||||
|
||||
\printbibliography
|
||||
|
||||
\clearpage
|
||||
\onecolumn
|
||||
\printbibliography
|
||||
\clearpage
|
||||
\appendix
|
||||
\input{../build/concatenated_code}
|
||||
|
||||
|
||||
@@ -4,10 +4,12 @@
|
||||
\usepackage{csquotes}
|
||||
\usepackage{subcaption}
|
||||
\usepackage{siunitx}
|
||||
|
||||
\usepackage{tikz}
|
||||
\usepackage{listings}
|
||||
\usepackage{xcolor}
|
||||
\usepackage[ruled,vlined]{algorithm2e}
|
||||
|
||||
\usetikzlibrary{positioning, shapes, arrows.meta, fit, backgrounds}
|
||||
\lstset{
|
||||
basicstyle=\ttfamily\footnotesize,
|
||||
breaklines=true,
|
||||
|
||||
@@ -1,14 +1,36 @@
|
||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||
|
||||
# Phantom Air/Hotels
|
||||
## Getting Started
|
||||
|
||||
Design Discovery Documentation: https://github.com/velocitatem/PHANTOM/wiki/Design-Discovery
|
||||
First, run the development server:
|
||||
|
||||
> This webapp serves two modes `{HOTEL,AIRLINE}` which are given by an env variable
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
|
||||
The webapp should serve under the / route the landing page which for both platforms is very similar. We define a set of components like Hero, Card, Button, Link ... This we can then pass to specific components each mode might demand that makes it behave differently, hotel cards showing hotel rooms from database and airline cards showing flights from database and each fetching prices from the pricing provider with a different HTTP parameter.
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
- globally we define a middleware.ts which is our switcher for modes.
|
||||
- /app will have (airline) and (hotel) children which each have a layout.tsx and page.tsx where /app also has a parent layout defining layout.tsx and globals.css for any shared styling to avoid repretition.
|
||||
- /components/ is gonna have ui/ which defines things like Button, Card, DatePicker with generic definitions and any tracking or observation code. We then define feats/airline/ and feats/hotel/ as children of components with specific components like AirlineHero and HotelCard.
|
||||
- in /styles/ we define airline.css and hotel.css to tailor accents and styling for each.
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||
|
||||
@@ -3,15 +3,6 @@
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f5f5f5;
|
||||
--text-primary: #333333;
|
||||
--text-secondary: #666666;
|
||||
--spacing-sm: 8px;
|
||||
--spacing-md: 16px;
|
||||
--spacing-lg: 32px;
|
||||
--border-radius: 8px;
|
||||
--shadow-card: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
@@ -28,71 +19,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
h1 { font-size: 2.5rem; }
|
||||
h2 { font-size: 2rem; }
|
||||
h3 { font-size: 1.5rem; }
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-family: inherit;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--spacing-md);
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow-card);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
padding: 12px 24px;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
border-radius: var(--border-radius);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.section-spacing {
|
||||
margin-bottom: var(--spacing-lg);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
@@ -1,302 +0,0 @@
|
||||
/* Airline Platform - Sky Blue Theme */
|
||||
|
||||
:root[data-mode="airline"] {
|
||||
--accent-primary: #007aff;
|
||||
--accent-secondary: #4caf50;
|
||||
--accent-warning: #ff3b30;
|
||||
--accent-primary-hover: #0051d5;
|
||||
--accent-primary-light: #e6f2ff;
|
||||
--text-accent: #007aff;
|
||||
}
|
||||
|
||||
[data-mode="airline"] {
|
||||
--primary-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
[data-mode="airline"] .btn-primary {
|
||||
background-color: var(--accent-primary);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-mode="airline"] .btn-primary:hover {
|
||||
background-color: var(--accent-primary-hover);
|
||||
}
|
||||
|
||||
[data-mode="airline"] .btn-secondary {
|
||||
background-color: transparent;
|
||||
color: var(--accent-primary);
|
||||
border: 2px solid var(--accent-primary);
|
||||
}
|
||||
|
||||
[data-mode="airline"] .btn-secondary:hover {
|
||||
background-color: var(--accent-primary-light);
|
||||
}
|
||||
|
||||
[data-mode="airline"] .badge-value {
|
||||
background-color: var(--accent-secondary);
|
||||
color: #ffffff;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
[data-mode="airline"] .badge-warning {
|
||||
background-color: var(--accent-warning);
|
||||
color: #ffffff;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
[data-mode="airline"] .search-form {
|
||||
background: var(--bg-primary);
|
||||
padding: var(--spacing-lg);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
[data-mode="airline"] .flight-card {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 3fr 2fr;
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-md);
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow-card);
|
||||
margin-bottom: var(--spacing-md);
|
||||
transition: box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
[data-mode="airline"] .flight-card:hover {
|
||||
box-shadow: 0 4px 16px rgba(0, 122, 255, 0.15);
|
||||
}
|
||||
|
||||
[data-mode="airline"] .flight-timing {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
[data-mode="airline"] .flight-time {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
[data-mode="airline"] .flight-airport {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
[data-mode="airline"] .flight-route {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
[data-mode="airline"] .flight-duration {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
[data-mode="airline"] .flight-stops {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
[data-mode="airline"] .flight-pricing {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
[data-mode="airline"] .fare-option {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: var(--spacing-sm);
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
[data-mode="airline"] .fare-option:hover {
|
||||
border-color: var(--accent-primary);
|
||||
background-color: var(--accent-primary-light);
|
||||
}
|
||||
|
||||
[data-mode="airline"] .fare-class {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
[data-mode="airline"] .fare-price {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
[data-mode="airline"] .date-price-bar {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-md) 0;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
[data-mode="airline"] .date-option {
|
||||
min-width: 100px;
|
||||
padding: var(--spacing-sm);
|
||||
text-align: center;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
[data-mode="airline"] .date-option:hover {
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
[data-mode="airline"] .date-option.active {
|
||||
border-color: var(--accent-primary);
|
||||
background-color: var(--accent-primary-light);
|
||||
}
|
||||
|
||||
[data-mode="airline"] .date-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
[data-mode="airline"] .date-price {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
[data-mode="airline"] .progress-wizard {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
max-width: 800px;
|
||||
margin: var(--spacing-lg) auto;
|
||||
padding: 0 var(--spacing-md);
|
||||
}
|
||||
|
||||
[data-mode="airline"] .wizard-step {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
[data-mode="airline"] .wizard-step::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: #e0e0e0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
[data-mode="airline"] .wizard-step:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-mode="airline"] .wizard-number {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: #e0e0e0;
|
||||
color: var(--text-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
[data-mode="airline"] .wizard-step.active .wizard-number {
|
||||
background: var(--accent-primary);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-mode="airline"] .wizard-step.completed .wizard-number {
|
||||
background: var(--accent-secondary);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-mode="airline"] .wizard-label {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
[data-mode="airline"] .wizard-step.active .wizard-label {
|
||||
color: var(--accent-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
[data-mode="airline"] a {
|
||||
color: var(--accent-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
[data-mode="airline"] a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
[data-mode="airline"] .input-field {
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
[data-mode="airline"] .input-field:focus {
|
||||
border-color: var(--accent-primary);
|
||||
box-shadow: 0 0 0 3px var(--accent-primary-light);
|
||||
}
|
||||
|
||||
[data-mode="airline"] .filter-sidebar {
|
||||
background: var(--bg-primary);
|
||||
padding: var(--spacing-md);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
[data-mode="airline"] .filter-section {
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
[data-mode="airline"] .filter-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
[data-mode="airline"] .checkbox-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-sm) 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[data-mode="airline"] .checkbox-label:hover {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
@@ -1,400 +0,0 @@
|
||||
/* Hotel Platform - Action Blue Theme */
|
||||
|
||||
:root[data-mode="hotel"] {
|
||||
--accent-primary: #007aff;
|
||||
--accent-secondary: #4caf50;
|
||||
--accent-warning: #d9534f;
|
||||
--accent-primary-hover: #0051d5;
|
||||
--accent-primary-light: #e6f2ff;
|
||||
--text-accent: #007aff;
|
||||
--bg-tertiary: #f5f5f7;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] {
|
||||
--primary-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .btn-primary {
|
||||
background-color: var(--accent-primary);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .btn-primary:hover {
|
||||
background-color: var(--accent-primary-hover);
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .btn-secondary {
|
||||
background-color: transparent;
|
||||
color: var(--accent-primary);
|
||||
border: 2px solid var(--accent-primary);
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .btn-secondary:hover {
|
||||
background-color: var(--accent-primary-light);
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .badge-value {
|
||||
background-color: var(--accent-secondary);
|
||||
color: #ffffff;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .badge-warning {
|
||||
background-color: var(--accent-warning);
|
||||
color: #ffffff;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .badge-rating {
|
||||
background-color: var(--accent-primary);
|
||||
color: #ffffff;
|
||||
padding: 6px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .search-form {
|
||||
background: var(--bg-primary);
|
||||
padding: var(--spacing-lg);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow-card);
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .hotel-card {
|
||||
display: grid;
|
||||
grid-template-columns: 300px 1fr auto;
|
||||
gap: var(--spacing-md);
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow-card);
|
||||
margin-bottom: var(--spacing-md);
|
||||
overflow: hidden;
|
||||
transition: box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .hotel-card:hover {
|
||||
box-shadow: 0 4px 16px rgba(0, 122, 255, 0.15);
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .hotel-image {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 220px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .hotel-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .image-carousel {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .carousel-nav {
|
||||
position: absolute;
|
||||
bottom: var(--spacing-sm);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .carousel-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .carousel-dot.active {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .hotel-info {
|
||||
padding: var(--spacing-md);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .hotel-name {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .hotel-location {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .hotel-rating {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .rating-text {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .hotel-features {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-sm);
|
||||
margin-top: var(--spacing-sm);
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .feature-tag {
|
||||
padding: 4px 8px;
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.75rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .hotel-pricing {
|
||||
padding: var(--spacing-md);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .price-wrapper {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .price-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .price-amount {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .price-unit {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .price-original {
|
||||
text-decoration: line-through;
|
||||
color: var(--text-secondary);
|
||||
font-size: 1rem;
|
||||
margin-right: var(--spacing-sm);
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .urgency-message {
|
||||
font-size: 0.75rem;
|
||||
color: var(--accent-warning);
|
||||
font-weight: 600;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .free-cancellation {
|
||||
font-size: 0.75rem;
|
||||
color: var(--accent-secondary);
|
||||
font-weight: 600;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .filter-sidebar {
|
||||
background: var(--bg-primary);
|
||||
padding: var(--spacing-md);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .filter-section {
|
||||
margin-bottom: var(--spacing-lg);
|
||||
padding-bottom: var(--spacing-md);
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .filter-section:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .filter-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .checkbox-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--spacing-sm) 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .checkbox-label:hover {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .checkbox-count {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .price-slider {
|
||||
margin-top: var(--spacing-md);
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .slider-track {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: #e0e0e0;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .slider-range {
|
||||
height: 100%;
|
||||
background: var(--accent-primary);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .slider-values {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: var(--spacing-sm);
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .map-toggle {
|
||||
background: var(--bg-primary);
|
||||
border: 2px solid var(--accent-primary);
|
||||
color: var(--accent-primary);
|
||||
padding: 12px 24px;
|
||||
border-radius: var(--border-radius);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .map-toggle:hover {
|
||||
background: var(--accent-primary);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .results-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
padding: var(--spacing-md);
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .sort-dropdown {
|
||||
padding: 8px 12px;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
background: var(--bg-primary);
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .sort-dropdown:focus {
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .view-toggle {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .view-button {
|
||||
padding: 8px 12px;
|
||||
background: transparent;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .view-button.active {
|
||||
background: var(--accent-primary);
|
||||
color: #ffffff;
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
[data-mode="hotel"] a {
|
||||
color: var(--accent-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .input-field {
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
width: 100%;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .input-field:focus {
|
||||
border-color: var(--accent-primary);
|
||||
box-shadow: 0 0 0 3px var(--accent-primary-light);
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .tab-navigation {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
border-bottom: 2px solid #e0e0e0;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .tab-item {
|
||||
padding: 12px 24px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 3px solid transparent;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .tab-item:hover {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
[data-mode="hotel"] .tab-item.active {
|
||||
color: var(--accent-primary);
|
||||
border-bottom-color: var(--accent-primary);
|
||||
}
|
||||
Reference in New Issue
Block a user