/*
* ═══════════════════════════════════════════════════════════════════
* GiftedTrip Design System v1.0
* © 2026 GiftedTrip. All rights reserved.
*
* FONTS: Inter + Plus Jakarta Sans (load via before this file)
* USAGE:
* ═══════════════════════════════════════════════════════════════════
*
* TABLE OF CONTENTS
* ─────────────────
* 1. Design Tokens (CSS Custom Properties)
* 2. Reset & Base
* 3. Typography Scale
* 4. Layout Utilities
* 5. Color Utilities
* 6. Spacing Utilities
* 7. ── COMPONENTS ──
* 7a. Navigation / Navbar
* 7b. Premium Buttons
* 7c. Glass Search Bar
* 7d. Form Inputs & Selects
* 7e. Beautiful Forms
* 7f. Modern Cards
* 7g. Status Badges & Chips
* 7h. Professional Tables
* 7i. AI Widgets
* 7j. Interactive Map Container
* 7k. Timeline Component
* 7l. Modals & Drawers
* 7m. Alerts & Toast Notifications
* 7n. Price Cards & Booking Summary
* 7o. Stat Cards
* 7p. Progress & Step Indicators
* 7q. Tabs
* 7r. Dropdown Menus
* 7s. Rating / Stars
* 7t. Avatar & User Info
* 7u. Empty State
* 7v. Skeleton Loaders
* 7w. Pagination
* 8. Animation Utilities
* 9. Responsive Utilities
* 10. Scrollbar Styling
*/
/* ═══════════════════════════════════════════════════════════════════
1. DESIGN TOKENS
═══════════════════════════════════════════════════════════════════ */
:root {
/* ── Brand Colors ── */
--gt-primary: #030335; /* Deep Navy */
--gt-primary-dark: #020225; /* Deeper Navy (hover/active) */
--gt-primary-light: #0a0a6b; /* Lighter Navy */
--gt-secondary: #030460; /* Rich Blue-Navy */
--gt-secondary-dark: #020348;
--gt-secondary-light: #060890;
--gt-accent: #2EA7E7; /* Sky Blue */
--gt-accent-dark: #1a8ecf;
--gt-accent-light: #56bcf0;
--gt-accent-glow: rgba(46, 167, 231, 0.25);
/* ── Neutrals ── */
--gt-white: #FFFFFF;
--gt-bg: #F0F4F8; /* Light Gray Background */
--gt-bg-dark: #E4EAF2;
--gt-surface: #FFFFFF;
--gt-surface-2: #F8FAFB;
--gt-border: #D8E2EE;
--gt-border-light: #EAF0F7;
--gt-border-dark: #B8CAD9;
/* ── Text ── */
--gt-text-primary: #0D1421;
--gt-text-secondary: #3D5166;
--gt-text-muted: #7A90A4;
--gt-text-light: #A8BDC9;
--gt-text-inverse: #FFFFFF;
/* ── Semantic Colors ── */
--gt-success: #10B981;
--gt-success-bg: rgba(16, 185, 129, 0.10);
--gt-success-border: rgba(16, 185, 129, 0.25);
--gt-warning: #F59E0B;
--gt-warning-bg: rgba(245, 158, 11, 0.10);
--gt-warning-border: rgba(245, 158, 11, 0.25);
--gt-danger: #EF4444;
--gt-danger-bg: rgba(239, 68, 68, 0.10);
--gt-danger-border: rgba(239, 68, 68, 0.25);
--gt-info: #2EA7E7;
--gt-info-bg: rgba(46, 167, 231, 0.10);
--gt-info-border: rgba(46, 167, 231, 0.25);
/* ── Gradients ── */
--gt-grad-primary: linear-gradient(135deg, #030335 0%, #030460 50%, #050780 100%);
--gt-grad-accent: linear-gradient(135deg, #2EA7E7 0%, #1a8ecf 100%);
--gt-grad-hero: linear-gradient(160deg, #020225 0%, #030460 40%, #041080 70%, #030335 100%);
--gt-grad-card: linear-gradient(145deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
--gt-grad-glow: radial-gradient(ellipse at top, rgba(46,167,231,0.15) 0%, transparent 70%);
/* ── Typography ── */
--gt-font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--gt-font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
--gt-text-xs: 0.75rem; /* 12px */
--gt-text-sm: 0.875rem; /* 14px */
--gt-text-base: 1rem; /* 16px */
--gt-text-lg: 1.125rem; /* 18px */
--gt-text-xl: 1.25rem; /* 20px */
--gt-text-2xl: 1.5rem; /* 24px */
--gt-text-3xl: 1.875rem; /* 30px */
--gt-text-4xl: 2.25rem; /* 36px */
--gt-text-5xl: 3rem; /* 48px */
--gt-text-6xl: 3.75rem; /* 60px */
--gt-font-light: 300;
--gt-font-normal: 400;
--gt-font-medium: 500;
--gt-font-semibold: 600;
--gt-font-bold: 700;
--gt-font-extrabold: 800;
--gt-leading-tight: 1.25;
--gt-leading-normal: 1.5;
--gt-leading-relaxed: 1.75;
/* ── Spacing ── */
--gt-space-0: 0;
--gt-space-1: 0.25rem; /* 4px */
--gt-space-2: 0.5rem; /* 8px */
--gt-space-3: 0.75rem; /* 12px */
--gt-space-4: 1rem; /* 16px */
--gt-space-5: 1.25rem; /* 20px */
--gt-space-6: 1.5rem; /* 24px */
--gt-space-8: 2rem; /* 32px */
--gt-space-10: 2.5rem; /* 40px */
--gt-space-12: 3rem; /* 48px */
--gt-space-16: 4rem; /* 64px */
--gt-space-20: 5rem; /* 80px */
--gt-space-24: 6rem; /* 96px */
/* ── Border Radius ── */
--gt-radius-sm: 6px;
--gt-radius-md: 10px;
--gt-radius-lg: 14px;
--gt-radius-xl: 18px;
--gt-radius-2xl: 24px;
--gt-radius-3xl: 32px;
--gt-radius-full: 9999px;
/* ── Shadows ── */
--gt-shadow-sm: 0 1px 3px rgba(3, 3, 53, 0.08), 0 1px 2px rgba(3, 3, 53, 0.06);
--gt-shadow-md: 0 4px 12px rgba(3, 3, 53, 0.10), 0 2px 6px rgba(3, 3, 53, 0.07);
--gt-shadow-lg: 0 10px 28px rgba(3, 3, 53, 0.12), 0 4px 12px rgba(3, 3, 53, 0.08);
--gt-shadow-xl: 0 20px 48px rgba(3, 3, 53, 0.15), 0 8px 20px rgba(3, 3, 53, 0.10);
--gt-shadow-2xl: 0 40px 80px rgba(3, 3, 53, 0.20), 0 16px 32px rgba(3, 3, 53, 0.14);
--gt-shadow-accent: 0 8px 24px rgba(46, 167, 231, 0.35);
--gt-shadow-primary: 0 8px 24px rgba(3, 3, 53, 0.45);
--gt-shadow-inset: inset 0 2px 6px rgba(3, 3, 53, 0.08);
/* ── Transitions ── */
--gt-ease-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--gt-ease-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
--gt-ease-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
--gt-ease-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
/* ── Z-Index Scale ── */
--gt-z-base: 1;
--gt-z-dropdown: 100;
--gt-z-sticky: 200;
--gt-z-overlay: 300;
--gt-z-modal: 400;
--gt-z-toast: 500;
/* ── Container ── */
--gt-container-sm: 640px;
--gt-container-md: 768px;
--gt-container-lg: 1024px;
--gt-container-xl: 1280px;
--gt-container-2xl: 1440px;
}
/* ═══════════════════════════════════════════════════════════════════
2. RESET & BASE
═══════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body.gt-body {
font-family: var(--gt-font-sans);
font-size: var(--gt-text-base);
font-weight: var(--gt-font-normal);
line-height: var(--gt-leading-normal);
color: var(--gt-text-primary);
background-color: var(--gt-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
body.gt-body-dark {
background: var(--gt-primary);
color: var(--gt-text-inverse);
}
img, video { max-width: 100%; display: block; }
a { color: var(--gt-accent); text-decoration: none; transition: color var(--gt-ease-fast); }
a:hover { color: var(--gt-accent-dark); }
button, [role="button"] { cursor: pointer; font-family: var(--gt-font-sans); }
input, textarea, select { font-family: var(--gt-font-sans); }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 {
font-family: var(--gt-font-sans);
font-weight: var(--gt-font-bold);
line-height: var(--gt-leading-tight);
color: var(--gt-text-primary);
}
.gt-body-dark h1,
.gt-body-dark h2,
.gt-body-dark h3,
.gt-body-dark h4,
.gt-body-dark h5,
.gt-body-dark h6 { color: var(--gt-white); }
/* ═══════════════════════════════════════════════════════════════════
3. TYPOGRAPHY SCALE
═══════════════════════════════════════════════════════════════════ */
.gt-display-xl { font-size: var(--gt-text-6xl); font-weight: var(--gt-font-extrabold); letter-spacing: -0.04em; line-height: 1.05; }
.gt-display-lg { font-size: var(--gt-text-5xl); font-weight: var(--gt-font-extrabold); letter-spacing: -0.03em; line-height: 1.1; }
.gt-h1 { font-size: var(--gt-text-4xl); font-weight: var(--gt-font-bold); letter-spacing: -0.025em; line-height: 1.15; }
.gt-h2 { font-size: var(--gt-text-3xl); font-weight: var(--gt-font-bold); letter-spacing: -0.02em; }
.gt-h3 { font-size: var(--gt-text-2xl); font-weight: var(--gt-font-semibold); letter-spacing: -0.015em; }
.gt-h4 { font-size: var(--gt-text-xl); font-weight: var(--gt-font-semibold); }
.gt-h5 { font-size: var(--gt-text-lg); font-weight: var(--gt-font-semibold); }
.gt-h6 { font-size: var(--gt-text-base); font-weight: var(--gt-font-semibold); }
.gt-text-xs { font-size: var(--gt-text-xs); }
.gt-text-sm { font-size: var(--gt-text-sm); }
.gt-text-base { font-size: var(--gt-text-base); }
.gt-text-lg { font-size: var(--gt-text-lg); }
.gt-text-xl { font-size: var(--gt-text-xl); }
.gt-font-light { font-weight: var(--gt-font-light); }
.gt-font-normal { font-weight: var(--gt-font-normal); }
.gt-font-medium { font-weight: var(--gt-font-medium); }
.gt-font-semibold { font-weight: var(--gt-font-semibold); }
.gt-font-bold { font-weight: var(--gt-font-bold); }
.gt-font-extrabold { font-weight: var(--gt-font-extrabold); }
.gt-text-primary { color: var(--gt-text-primary); }
.gt-text-secondary { color: var(--gt-text-secondary); }
.gt-text-muted { color: var(--gt-text-muted); }
.gt-text-light { color: var(--gt-text-light); }
.gt-text-inverse { color: var(--gt-text-inverse); }
.gt-text-accent { color: var(--gt-accent); }
.gt-text-success { color: var(--gt-success); }
.gt-text-warning { color: var(--gt-warning); }
.gt-text-danger { color: var(--gt-danger); }
.gt-text-center { text-align: center; }
.gt-text-left { text-align: left; }
.gt-text-right { text-align: right; }
.gt-uppercase { text-transform: uppercase; letter-spacing: 0.08em; }
.gt-tracking-tight { letter-spacing: -0.025em; }
.gt-tracking-wide { letter-spacing: 0.05em; }
.gt-leading-tight { line-height: var(--gt-leading-tight); }
.gt-leading-relaxed { line-height: var(--gt-leading-relaxed); }
/* Gradient Text */
.gt-text-gradient {
background: linear-gradient(135deg, var(--gt-accent) 0%, #56bcf0 50%, #89d4f7 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.gt-text-gradient-primary {
background: linear-gradient(135deg, #2EA7E7 0%, #5CBDEE 50%, var(--gt-white) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Label / Overline */
.gt-overline {
font-size: var(--gt-text-xs);
font-weight: var(--gt-font-semibold);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--gt-text-muted);
}
/* ═══════════════════════════════════════════════════════════════════
4. LAYOUT UTILITIES
═══════════════════════════════════════════════════════════════════ */
.gt-container {
width: 100%;
max-width: var(--gt-container-xl);
margin-inline: auto;
padding-inline: var(--gt-space-6);
}
.gt-container-sm { max-width: var(--gt-container-sm); }
.gt-container-md { max-width: var(--gt-container-md); }
.gt-container-lg { max-width: var(--gt-container-lg); }
.gt-container-2xl { max-width: var(--gt-container-2xl); }
.gt-section { padding-block: var(--gt-space-20); }
.gt-section-sm { padding-block: var(--gt-space-12); }
.gt-section-lg { padding-block: var(--gt-space-24); }
.gt-flex { display: flex; }
.gt-flex-col { display: flex; flex-direction: column; }
.gt-inline-flex { display: inline-flex; }
.gt-grid { display: grid; }
.gt-hidden { display: none; }
.gt-block { display: block; }
.gt-inline-block { display: inline-block; }
.gt-items-center { align-items: center; }
.gt-items-start { align-items: flex-start; }
.gt-items-end { align-items: flex-end; }
.gt-items-stretch { align-items: stretch; }
.gt-justify-center { justify-content: center; }
.gt-justify-between { justify-content: space-between; }
.gt-justify-end { justify-content: flex-end; }
.gt-justify-start { justify-content: flex-start; }
.gt-flex-wrap { flex-wrap: wrap; }
.gt-flex-1 { flex: 1; }
.gt-flex-shrink-0 { flex-shrink: 0; }
.gt-gap-1 { gap: var(--gt-space-1); }
.gt-gap-2 { gap: var(--gt-space-2); }
.gt-gap-3 { gap: var(--gt-space-3); }
.gt-gap-4 { gap: var(--gt-space-4); }
.gt-gap-5 { gap: var(--gt-space-5); }
.gt-gap-6 { gap: var(--gt-space-6); }
.gt-gap-8 { gap: var(--gt-space-8); }
.gt-gap-10 { gap: var(--gt-space-10); }
.gt-relative { position: relative; }
.gt-absolute { position: absolute; }
.gt-sticky { position: sticky; }
.gt-fixed { position: fixed; }
.gt-inset-0 { inset: 0; }
.gt-z-dropdown { z-index: var(--gt-z-dropdown); }
.gt-z-sticky { z-index: var(--gt-z-sticky); }
.gt-z-modal { z-index: var(--gt-z-modal); }
.gt-w-full { width: 100%; }
.gt-h-full { height: 100%; }
.gt-h-screen { min-height: 100vh; }
.gt-overflow-hidden { overflow: hidden; }
.gt-overflow-auto { overflow: auto; }
/* ═══════════════════════════════════════════════════════════════════
5. COLOR UTILITIES (Background)
═══════════════════════════════════════════════════════════════════ */
.gt-bg-primary { background-color: var(--gt-primary); }
.gt-bg-secondary { background-color: var(--gt-secondary); }
.gt-bg-accent { background-color: var(--gt-accent); }
.gt-bg-white { background-color: var(--gt-white); }
.gt-bg-surface { background-color: var(--gt-surface); }
.gt-bg-bg { background-color: var(--gt-bg); }
.gt-bg-grad-hero { background: var(--gt-grad-hero); }
.gt-bg-grad-primary { background: var(--gt-grad-primary); }
/* ═══════════════════════════════════════════════════════════════════
6. SPACING UTILITIES
═══════════════════════════════════════════════════════════════════ */
.gt-p-0 { padding: 0; }
.gt-p-2 { padding: var(--gt-space-2); }
.gt-p-3 { padding: var(--gt-space-3); }
.gt-p-4 { padding: var(--gt-space-4); }
.gt-p-5 { padding: var(--gt-space-5); }
.gt-p-6 { padding: var(--gt-space-6); }
.gt-p-8 { padding: var(--gt-space-8); }
.gt-px-4 { padding-inline: var(--gt-space-4); }
.gt-px-6 { padding-inline: var(--gt-space-6); }
.gt-px-8 { padding-inline: var(--gt-space-8); }
.gt-py-2 { padding-block: var(--gt-space-2); }
.gt-py-3 { padding-block: var(--gt-space-3); }
.gt-py-4 { padding-block: var(--gt-space-4); }
.gt-py-6 { padding-block: var(--gt-space-6); }
.gt-py-8 { padding-block: var(--gt-space-8); }
.gt-mt-2 { margin-top: var(--gt-space-2); }
.gt-mt-4 { margin-top: var(--gt-space-4); }
.gt-mt-6 { margin-top: var(--gt-space-6); }
.gt-mt-8 { margin-top: var(--gt-space-8); }
.gt-mb-2 { margin-bottom: var(--gt-space-2); }
.gt-mb-4 { margin-bottom: var(--gt-space-4); }
.gt-mb-6 { margin-bottom: var(--gt-space-6); }
.gt-mb-8 { margin-bottom: var(--gt-space-8); }
.gt-mx-auto { margin-inline: auto; }
/* ═══════════════════════════════════════════════════════════════════
7a. NAVIGATION / NAVBAR
═══════════════════════════════════════════════════════════════════ */
/* ── Light Navbar (for light pages) ── */
.gt-navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--gt-space-4) var(--gt-space-8);
background: var(--gt-white);
border-bottom: 1px solid var(--gt-border);
box-shadow: var(--gt-shadow-sm);
position: sticky;
top: 0;
z-index: var(--gt-z-sticky);
gap: var(--gt-space-6);
}
/* ── Dark Navbar (for dark/hero pages) ── */
.gt-navbar-dark {
background: rgba(3, 3, 53, 0.92);
border-bottom: 1px solid rgba(46, 167, 231, 0.12);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
/* ── Glass Navbar ── */
.gt-navbar-glass {
background: rgba(255, 255, 255, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
}
/* ── Brand / Logo ── */
.gt-brand {
display: flex;
align-items: center;
gap: var(--gt-space-3);
text-decoration: none;
flex-shrink: 0;
}
.gt-brand-icon {
width: 42px;
height: 42px;
border-radius: var(--gt-radius-lg);
background: linear-gradient(135deg, var(--gt-secondary) 0%, var(--gt-accent) 100%);
display: flex;
align-items: center;
justify-content: center;
color: var(--gt-white);
font-size: var(--gt-text-lg);
box-shadow: 0 4px 16px rgba(46, 167, 231, 0.35);
transition: transform var(--gt-ease-bounce), box-shadow var(--gt-ease-base);
flex-shrink: 0;
}
.gt-brand:hover .gt-brand-icon {
transform: scale(1.08) rotate(-4deg);
box-shadow: 0 6px 22px rgba(46, 167, 231, 0.5);
}
.gt-brand-name {
font-family: var(--gt-font-sans);
font-size: var(--gt-text-xl);
font-weight: var(--gt-font-extrabold);
letter-spacing: -0.03em;
color: var(--gt-primary);
line-height: 1;
}
.gt-brand-name span { color: var(--gt-accent); }
.gt-navbar-dark .gt-brand-name,
.gt-navbar-glass .gt-brand-name { color: var(--gt-white); }
/* ── Nav Links ── */
.gt-nav-links {
display: flex;
align-items: center;
gap: var(--gt-space-1);
}
.gt-nav-link {
font-size: var(--gt-text-sm);
font-weight: var(--gt-font-semibold);
color: var(--gt-text-secondary);
padding: var(--gt-space-2) var(--gt-space-3);
border-radius: var(--gt-radius-md);
text-decoration: none;
transition: color var(--gt-ease-fast), background var(--gt-ease-fast);
white-space: nowrap;
}
.gt-nav-link:hover {
color: var(--gt-primary);
background: var(--gt-bg);
}
.gt-nav-link.active {
color: var(--gt-accent);
background: var(--gt-info-bg);
}
.gt-navbar-dark .gt-nav-link,
.gt-navbar-glass .gt-nav-link { color: rgba(255,255,255,0.72); }
.gt-navbar-dark .gt-nav-link:hover,
.gt-navbar-glass .gt-nav-link:hover {
color: var(--gt-white);
background: rgba(255,255,255,0.08);
}
.gt-navbar-dark .gt-nav-link.active,
.gt-navbar-glass .gt-nav-link.active {
color: var(--gt-accent-light);
background: rgba(46, 167, 231, 0.15);
}
/* ── Promo Topbar ── */
.gt-promo-bar {
background: linear-gradient(90deg, var(--gt-secondary) 0%, #050890 50%, var(--gt-secondary) 100%);
color: rgba(255,255,255,0.9);
padding: var(--gt-space-2) var(--gt-space-6);
font-size: var(--gt-text-xs);
font-weight: var(--gt-font-medium);
display: flex;
align-items: center;
justify-content: center;
gap: var(--gt-space-3);
text-align: center;
}
.gt-promo-bar strong { color: var(--gt-accent-light); }
.gt-promo-badge {
background: var(--gt-accent);
color: var(--gt-white);
padding: 2px 8px;
border-radius: var(--gt-radius-full);
font-size: 10px;
font-weight: var(--gt-font-bold);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* ═══════════════════════════════════════════════════════════════════
7b. PREMIUM BUTTONS
═══════════════════════════════════════════════════════════════════ */
/* ── Base Button ── */
.gt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--gt-space-2);
padding: 0.625rem var(--gt-space-5);
font-family: var(--gt-font-sans);
font-size: var(--gt-text-sm);
font-weight: var(--gt-font-semibold);
line-height: 1.4;
border-radius: var(--gt-radius-lg);
border: none;
cursor: pointer;
white-space: nowrap;
text-decoration: none;
position: relative;
overflow: hidden;
transition:
background var(--gt-ease-base),
transform var(--gt-ease-bounce),
box-shadow var(--gt-ease-base),
color var(--gt-ease-fast);
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.gt-btn::after {
content: '';
position: absolute;
inset: 0;
background: rgba(255,255,255,0);
transition: background var(--gt-ease-fast);
}
.gt-btn:hover::after { background: rgba(255,255,255,0.07); }
.gt-btn:active { transform: scale(0.97); }
.gt-btn:disabled,
.gt-btn[disabled] { opacity: 0.52; cursor: not-allowed; transform: none; }
/* ── Primary Button ── */
.gt-btn-primary {
background: var(--gt-grad-primary);
color: var(--gt-white);
box-shadow: 0 4px 16px rgba(3, 3, 53, 0.35);
}
.gt-btn-primary:hover {
box-shadow: 0 8px 24px rgba(3, 3, 53, 0.5);
transform: translateY(-1px);
color: var(--gt-white);
}
/* ── Accent Button ── */
.gt-btn-accent {
background: var(--gt-grad-accent);
color: var(--gt-white);
box-shadow: var(--gt-shadow-accent);
}
.gt-btn-accent:hover {
box-shadow: 0 12px 32px rgba(46, 167, 231, 0.5);
transform: translateY(-1px);
color: var(--gt-white);
}
/* ── Outlined Primary ── */
.gt-btn-outline {
background: transparent;
color: var(--gt-primary);
border: 2px solid var(--gt-primary);
box-shadow: none;
}
.gt-btn-outline:hover {
background: var(--gt-primary);
color: var(--gt-white);
box-shadow: var(--gt-shadow-primary);
transform: translateY(-1px);
}
/* ── Outlined Accent ── */
.gt-btn-outline-accent {
background: transparent;
color: var(--gt-accent);
border: 2px solid var(--gt-accent);
}
.gt-btn-outline-accent:hover {
background: var(--gt-accent);
color: var(--gt-white);
box-shadow: var(--gt-shadow-accent);
transform: translateY(-1px);
}
/* ── Ghost / Subtle ── */
.gt-btn-ghost {
background: transparent;
color: var(--gt-text-secondary);
border: 1px solid var(--gt-border);
}
.gt-btn-ghost:hover {
background: var(--gt-bg);
color: var(--gt-text-primary);
border-color: var(--gt-border-dark);
}
/* ── Ghost Dark (on dark backgrounds) ── */
.gt-btn-ghost-dark {
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.88);
border: 1px solid rgba(255,255,255,0.15);
backdrop-filter: blur(8px);
}
.gt-btn-ghost-dark:hover {
background: rgba(255,255,255,0.15);
color: var(--gt-white);
border-color: rgba(255,255,255,0.28);
}
/* ── Danger Button ── */
.gt-btn-danger {
background: var(--gt-danger);
color: var(--gt-white);
box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}
.gt-btn-danger:hover {
background: #dc2626;
box-shadow: 0 8px 22px rgba(239, 68, 68, 0.5);
transform: translateY(-1px);
color: var(--gt-white);
}
/* ── Success Button ── */
.gt-btn-success {
background: var(--gt-success);
color: var(--gt-white);
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}
.gt-btn-success:hover {
background: #059669;
transform: translateY(-1px);
color: var(--gt-white);
}
/* ── Social Button ── */
.gt-btn-social {
background: var(--gt-surface);
color: var(--gt-text-primary);
border: 1.5px solid var(--gt-border);
font-weight: var(--gt-font-semibold);
}
.gt-btn-social:hover {
background: var(--gt-bg);
border-color: var(--gt-border-dark);
transform: translateY(-1px);
box-shadow: var(--gt-shadow-md);
}
/* ── Sizes ── */
.gt-btn-xs { padding: 0.375rem var(--gt-space-3); font-size: 0.7rem; border-radius: var(--gt-radius-sm); }
.gt-btn-sm { padding: 0.5rem var(--gt-space-4); font-size: var(--gt-text-xs); border-radius: var(--gt-radius-md); }
.gt-btn-md { padding: 0.625rem var(--gt-space-5); font-size: var(--gt-text-sm); }
.gt-btn-lg { padding: 0.875rem var(--gt-space-6); font-size: var(--gt-text-base); border-radius: var(--gt-radius-xl); }
.gt-btn-xl { padding: 1rem var(--gt-space-8); font-size: var(--gt-text-lg); border-radius: var(--gt-radius-xl); }
.gt-btn-2xl { padding: 1.25rem var(--gt-space-10); font-size: var(--gt-text-xl); border-radius: var(--gt-radius-2xl); font-weight: var(--gt-font-bold); }
.gt-btn-block { width: 100%; }
.gt-btn-icon { padding: 0.625rem; aspect-ratio: 1; border-radius: var(--gt-radius-md); }
.gt-btn-pill { border-radius: var(--gt-radius-full); }
/* ── Loading State ── */
.gt-btn-loading {
pointer-events: none;
opacity: 0.8;
}
.gt-btn-loading::before {
content: '';
width: 1em;
height: 1em;
border: 2px solid rgba(255,255,255,0.4);
border-top-color: var(--gt-white);
border-radius: 50%;
animation: gt-spin 0.6s linear infinite;
flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════════════════════
7c. GLASS SEARCH BAR
═══════════════════════════════════════════════════════════════════ */
.gt-search-bar {
background: var(--gt-white);
border: 1px solid var(--gt-border);
border-radius: var(--gt-radius-2xl);
padding: var(--gt-space-5) var(--gt-space-6);
box-shadow: var(--gt-shadow-lg);
display: flex;
align-items: stretch;
gap: 0;
flex-wrap: wrap;
position: relative;
}
/* Dark / Glass variant */
.gt-search-bar-glass {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255,255,255,0.14);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
box-shadow: 0 24px 64px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.05) inset;
}
/* ── Tab Switcher (One-way / Round-trip) ── */
.gt-search-tabs {
display: flex;
gap: var(--gt-space-1);
margin-bottom: var(--gt-space-4);
background: var(--gt-bg);
padding: var(--gt-space-1);
border-radius: var(--gt-radius-lg);
width: fit-content;
}
.gt-search-bar-glass .gt-search-tabs {
background: rgba(255,255,255,0.08);
}
.gt-search-tab {
padding: var(--gt-space-2) var(--gt-space-4);
border-radius: var(--gt-radius-md);
font-size: var(--gt-text-sm);
font-weight: var(--gt-font-semibold);
color: var(--gt-text-muted);
cursor: pointer;
transition: all var(--gt-ease-base);
border: none;
background: none;
font-family: var(--gt-font-sans);
}
.gt-search-tab:hover { color: var(--gt-text-primary); }
.gt-search-tab.active {
background: var(--gt-white);
color: var(--gt-primary);
box-shadow: var(--gt-shadow-sm);
}
.gt-search-bar-glass .gt-search-tab.active {
background: rgba(255,255,255,0.15);
color: var(--gt-white);
}
/* ── Search Fields ── */
.gt-search-fields {
display: flex;
align-items: stretch;
flex: 1;
gap: 0;
}
.gt-search-field {
flex: 1;
padding: var(--gt-space-3) var(--gt-space-4);
border-right: 1px solid var(--gt-border);
min-width: 0;
cursor: pointer;
transition: background var(--gt-ease-fast);
border-radius: 0;
}
.gt-search-field:first-child { border-radius: var(--gt-radius-xl) 0 0 var(--gt-radius-xl); }
.gt-search-field:last-of-type { border-right: none; border-radius: 0; }
.gt-search-field:hover { background: var(--gt-bg); }
.gt-search-bar-glass .gt-search-field { border-right-color: rgba(255,255,255,0.1); }
.gt-search-bar-glass .gt-search-field:hover { background: rgba(255,255,255,0.06); }
.gt-search-field-label {
font-size: 10px;
font-weight: var(--gt-font-bold);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--gt-text-muted);
margin-bottom: var(--gt-space-1);
display: flex;
align-items: center;
gap: var(--gt-space-1);
}
.gt-search-bar-glass .gt-search-field-label { color: rgba(255,255,255,0.55); }
.gt-search-field-value {
font-size: var(--gt-text-base);
font-weight: var(--gt-font-semibold);
color: var(--gt-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gt-search-bar-glass .gt-search-field-value { color: var(--gt-white); }
.gt-search-field-placeholder {
color: var(--gt-text-light);
font-weight: var(--gt-font-normal);
}
.gt-search-bar-glass .gt-search-field-placeholder { color: rgba(255,255,255,0.38); }
/* ── Search Input (inside field) ── */
.gt-search-input {
width: 100%;
background: none;
border: none;
outline: none;
font-family: var(--gt-font-sans);
font-size: var(--gt-text-base);
font-weight: var(--gt-font-semibold);
color: var(--gt-text-primary);
padding: 0;
}
.gt-search-bar-glass .gt-search-input { color: var(--gt-white); }
.gt-search-input::placeholder { color: var(--gt-text-light); font-weight: var(--gt-font-normal); }
.gt-search-bar-glass .gt-search-input::placeholder { color: rgba(255,255,255,0.35); }
/* ── Search Submit Button ── */
.gt-search-submit {
margin-left: var(--gt-space-4);
align-self: center;
flex-shrink: 0;
background: var(--gt-grad-accent);
color: var(--gt-white);
border: none;
border-radius: var(--gt-radius-xl);
padding: var(--gt-space-4) var(--gt-space-6);
font-family: var(--gt-font-sans);
font-size: var(--gt-text-base);
font-weight: var(--gt-font-bold);
cursor: pointer;
display: flex;
align-items: center;
gap: var(--gt-space-2);
box-shadow: var(--gt-shadow-accent);
transition: all var(--gt-ease-bounce);
white-space: nowrap;
}
.gt-search-submit:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 12px 32px rgba(46, 167, 231, 0.5);
}
.gt-search-submit:active { transform: scale(0.98); }
/* ═══════════════════════════════════════════════════════════════════
7d. FORM INPUTS & SELECTS
═══════════════════════════════════════════════════════════════════ */
.gt-input,
.gt-select,
.gt-textarea {
width: 100%;
background: var(--gt-white);
border: 1.5px solid var(--gt-border);
border-radius: var(--gt-radius-lg);
padding: 0.75rem var(--gt-space-4);
font-family: var(--gt-font-sans);
font-size: var(--gt-text-sm);
font-weight: var(--gt-font-medium);
color: var(--gt-text-primary);
line-height: 1.5;
outline: none;
transition:
border-color var(--gt-ease-base),
box-shadow var(--gt-ease-base),
background var(--gt-ease-fast);
-webkit-appearance: none;
appearance: none;
}
.gt-input::placeholder,
.gt-textarea::placeholder { color: var(--gt-text-light); font-weight: var(--gt-font-normal); }
.gt-input:hover,
.gt-select:hover,
.gt-textarea:hover {
border-color: var(--gt-border-dark);
}
.gt-input:focus,
.gt-select:focus,
.gt-textarea:focus {
border-color: var(--gt-accent);
box-shadow: 0 0 0 4px rgba(46, 167, 231, 0.15);
background: var(--gt-white);
}
.gt-input-error,
.gt-select-error { border-color: var(--gt-danger) !important; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12) !important; }
.gt-input-success { border-color: var(--gt-success) !important; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12) !important; }
/* ── Sizes ── */
.gt-input-sm { padding: 0.5rem var(--gt-space-3); font-size: var(--gt-text-xs); border-radius: var(--gt-radius-md); }
.gt-input-lg { padding: 1rem var(--gt-space-5); font-size: var(--gt-text-base); border-radius: var(--gt-radius-xl); }
/* ── Dark Input ── */
.gt-input-dark,
.gt-select-dark,
.gt-textarea-dark {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.12);
color: var(--gt-white);
}
.gt-input-dark::placeholder { color: rgba(255,255,255,0.35); }
.gt-input-dark:focus {
border-color: var(--gt-accent);
background: rgba(255,255,255,0.09);
box-shadow: 0 0 0 4px rgba(46, 167, 231, 0.20);
}
/* ── Select Arrow ── */
.gt-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237A90A4' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 40px;
cursor: pointer;
}
.gt-textarea { resize: vertical; min-height: 120px; line-height: var(--gt-leading-relaxed); }
/* ── Input with Icon ── */
.gt-input-group {
position: relative;
display: flex;
align-items: center;
}
.gt-input-icon-left,
.gt-input-icon-right {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: var(--gt-text-muted);
pointer-events: none;
font-size: var(--gt-text-base);
z-index: 1;
}
.gt-input-icon-left { left: var(--gt-space-4); }
.gt-input-icon-right { right: var(--gt-space-4); }
.gt-input-with-icon-left { padding-left: calc(var(--gt-space-4) + 1.5rem); }
.gt-input-with-icon-right { padding-right: calc(var(--gt-space-4) + 1.5rem); }
/* ── Range Input ── */
.gt-range {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
background: var(--gt-border);
border-radius: var(--gt-radius-full);
outline: none;
cursor: pointer;
}
.gt-range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: var(--gt-accent);
border-radius: 50%;
box-shadow: 0 2px 8px rgba(46, 167, 231, 0.4);
transition: transform var(--gt-ease-bounce);
}
.gt-range::-webkit-slider-thumb:hover { transform: scale(1.2); }
/* ── Checkbox & Radio ── */
.gt-checkbox,
.gt-radio {
display: flex;
align-items: center;
gap: var(--gt-space-3);
cursor: pointer;
user-select: none;
}
.gt-checkbox input[type="checkbox"],
.gt-radio input[type="radio"] {
width: 18px;
height: 18px;
border: 2px solid var(--gt-border-dark);
border-radius: 4px;
background: var(--gt-white);
appearance: none;
-webkit-appearance: none;
cursor: pointer;
transition: all var(--gt-ease-base);
flex-shrink: 0;
position: relative;
}
.gt-radio input[type="radio"] { border-radius: 50%; }
.gt-checkbox input:checked,
.gt-radio input:checked {
background: var(--gt-accent);
border-color: var(--gt-accent);
}
.gt-checkbox input:checked::after {
content: '';
position: absolute;
inset: 3px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath fill='white' d='M1 4l3 3 5-6'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.gt-radio input:checked::after {
content: '';
position: absolute;
inset: 3px;
background: var(--gt-white);
border-radius: 50%;
}
/* ── Toggle Switch ── */
.gt-toggle {
display: flex;
align-items: center;
gap: var(--gt-space-3);
cursor: pointer;
}
.gt-toggle-track {
position: relative;
width: 44px;
height: 24px;
background: var(--gt-border-dark);
border-radius: var(--gt-radius-full);
transition: background var(--gt-ease-base);
flex-shrink: 0;
}
.gt-toggle input { display: none; }
.gt-toggle input:checked ~ .gt-toggle-track { background: var(--gt-accent); }
.gt-toggle-thumb {
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
background: var(--gt-white);
border-radius: 50%;
box-shadow: var(--gt-shadow-sm);
transition: transform var(--gt-ease-bounce);
}
.gt-toggle input:checked ~ .gt-toggle-track .gt-toggle-thumb { transform: translateX(20px); }
/* ═══════════════════════════════════════════════════════════════════
7e. BEAUTIFUL FORMS
═══════════════════════════════════════════════════════════════════ */
.gt-form { display: flex; flex-direction: column; gap: var(--gt-space-5); }
.gt-form-group { display: flex; flex-direction: column; gap: var(--gt-space-2); }
.gt-form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--gt-space-4);
}
.gt-label {
font-size: var(--gt-text-sm);
font-weight: var(--gt-font-semibold);
color: var(--gt-text-secondary);
display: flex;
align-items: center;
gap: var(--gt-space-2);
}
.gt-label-required::after {
content: '*';
color: var(--gt-danger);
font-weight: var(--gt-font-bold);
}
.gt-form-hint {
font-size: var(--gt-text-xs);
color: var(--gt-text-muted);
margin-top: var(--gt-space-1);
}
.gt-form-error {
font-size: var(--gt-text-xs);
color: var(--gt-danger);
display: flex;
align-items: center;
gap: var(--gt-space-1);
margin-top: var(--gt-space-1);
}
/* ── Form Section ── */
.gt-form-section {
border: 1px solid var(--gt-border);
border-radius: var(--gt-radius-xl);
padding: var(--gt-space-6);
background: var(--gt-surface);
display: flex;
flex-direction: column;
gap: var(--gt-space-5);
}
.gt-form-section-title {
font-size: var(--gt-text-base);
font-weight: var(--gt-font-bold);
color: var(--gt-text-primary);
padding-bottom: var(--gt-space-4);
border-bottom: 1px solid var(--gt-border);
display: flex;
align-items: center;
gap: var(--gt-space-3);
}
.gt-form-section-icon {
width: 34px;
height: 34px;
border-radius: var(--gt-radius-md);
background: var(--gt-info-bg);
color: var(--gt-accent);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--gt-text-base);
flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════════════════════
7f. MODERN CARDS
═══════════════════════════════════════════════════════════════════ */
/* ── Base Card ── */
.gt-card {
background: var(--gt-white);
border: 1px solid var(--gt-border);
border-radius: var(--gt-radius-2xl);
overflow: hidden;
transition: transform var(--gt-ease-base), box-shadow var(--gt-ease-base);
}
.gt-card-hover:hover {
transform: translateY(-4px);
box-shadow: var(--gt-shadow-xl);
}
.gt-card-body { padding: var(--gt-space-6); }
.gt-card-body-sm { padding: var(--gt-space-4); }
.gt-card-body-lg { padding: var(--gt-space-8); }
.gt-card-header {
padding: var(--gt-space-5) var(--gt-space-6);
border-bottom: 1px solid var(--gt-border);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gt-space-4);
}
.gt-card-footer {
padding: var(--gt-space-4) var(--gt-space-6);
border-top: 1px solid var(--gt-border);
background: var(--gt-surface-2);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gt-space-4);
}
/* ── Glass Card (dark backgrounds) ── */
.gt-card-glass {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.10);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: var(--gt-radius-2xl);
overflow: hidden;
}
.gt-card-glass-hover:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(46, 167, 231, 0.25);
transform: translateY(-3px);
box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}
/* ── Hotel / Listing Card ── */
.gt-listing-card {
background: var(--gt-white);
border: 1px solid var(--gt-border);
border-radius: var(--gt-radius-2xl);
overflow: hidden;
transition: transform var(--gt-ease-base), box-shadow var(--gt-ease-base);
display: flex;
flex-direction: column;
}
.gt-listing-card:hover {
transform: translateY(-4px);
box-shadow: var(--gt-shadow-xl);
border-color: var(--gt-accent);
}
.gt-listing-card-image {
position: relative;
height: 200px;
overflow: hidden;
background: var(--gt-bg);
}
.gt-listing-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.gt-listing-card:hover .gt-listing-card-image img { transform: scale(1.06); }
.gt-listing-card-image-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(3,3,53,0.6) 0%, transparent 50%);
}
.gt-listing-card-badge-overlay {
position: absolute;
top: var(--gt-space-3);
left: var(--gt-space-3);
display: flex;
gap: var(--gt-space-2);
flex-wrap: wrap;
}
.gt-listing-card-action {
position: absolute;
top: var(--gt-space-3);
right: var(--gt-space-3);
}
.gt-listing-card-content {
padding: var(--gt-space-5);
flex: 1;
display: flex;
flex-direction: column;
gap: var(--gt-space-3);
}
.gt-listing-card-footer {
padding: var(--gt-space-4) var(--gt-space-5);
border-top: 1px solid var(--gt-border-light);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gt-space-3);
}
/* ── Flight Card ── */
.gt-flight-card {
background: var(--gt-white);
border: 1.5px solid var(--gt-border);
border-radius: var(--gt-radius-xl);
padding: var(--gt-space-5) var(--gt-space-6);
display: flex;
align-items: center;
gap: var(--gt-space-6);
transition: all var(--gt-ease-base);
position: relative;
overflow: hidden;
}
.gt-flight-card::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--gt-grad-accent);
opacity: 0;
transition: opacity var(--gt-ease-base);
}
.gt-flight-card:hover {
border-color: var(--gt-accent);
box-shadow: var(--gt-shadow-lg);
transform: translateX(2px);
}
.gt-flight-card:hover::before { opacity: 1; }
.gt-flight-airline { font-weight: var(--gt-font-bold); color: var(--gt-primary); }
.gt-flight-times {
display: flex;
align-items: center;
gap: var(--gt-space-4);
flex: 1;
}
.gt-flight-time { font-size: var(--gt-text-xl); font-weight: var(--gt-font-extrabold); color: var(--gt-text-primary); }
.gt-flight-airport { font-size: var(--gt-text-xs); color: var(--gt-text-muted); font-weight: var(--gt-font-medium); }
.gt-flight-duration-line {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.gt-flight-line {
width: 100%;
height: 2px;
background: linear-gradient(90deg, var(--gt-border) 0%, var(--gt-accent) 50%, var(--gt-border) 100%);
border-radius: 2px;
position: relative;
}
.gt-flight-line::before,
.gt-flight-line::after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
background: var(--gt-accent);
border-radius: 50%;
}
.gt-flight-line::before { left: 0; }
.gt-flight-line::after { right: 0; }
.gt-flight-duration-label { font-size: var(--gt-text-xs); color: var(--gt-text-muted); font-weight: var(--gt-font-semibold); }
/* ── Stat / KPI Card ── */
.gt-stat-card {
background: var(--gt-white);
border: 1px solid var(--gt-border);
border-radius: var(--gt-radius-xl);
padding: var(--gt-space-6);
display: flex;
flex-direction: column;
gap: var(--gt-space-3);
position: relative;
overflow: hidden;
transition: transform var(--gt-ease-base), box-shadow var(--gt-ease-base);
}
.gt-stat-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--gt-grad-accent);
opacity: 0;
transition: opacity var(--gt-ease-base);
}
.gt-stat-card:hover {
transform: translateY(-2px);
box-shadow: var(--gt-shadow-lg);
}
.gt-stat-card:hover::after { opacity: 1; }
.gt-stat-card-glass {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.09);
}
.gt-stat-icon {
width: 48px;
height: 48px;
border-radius: var(--gt-radius-lg);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
flex-shrink: 0;
}
.gt-stat-icon-accent { background: var(--gt-info-bg); color: var(--gt-accent); }
.gt-stat-icon-success { background: var(--gt-success-bg); color: var(--gt-success); }
.gt-stat-icon-warning { background: var(--gt-warning-bg); color: var(--gt-warning); }
.gt-stat-icon-danger { background: var(--gt-danger-bg); color: var(--gt-danger); }
.gt-stat-icon-primary { background: rgba(3, 4, 96, 0.1); color: var(--gt-secondary); }
.gt-stat-label { font-size: var(--gt-text-xs); font-weight: var(--gt-font-semibold); color: var(--gt-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.gt-stat-value { font-size: var(--gt-text-3xl); font-weight: var(--gt-font-extrabold); color: var(--gt-text-primary); line-height: 1; letter-spacing: -0.03em; }
.gt-stat-card-glass .gt-stat-label { color: rgba(255,255,255,0.5); }
.gt-stat-card-glass .gt-stat-value { color: var(--gt-white); }
.gt-stat-delta {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--gt-text-xs);
font-weight: var(--gt-font-semibold);
padding: 2px 8px;
border-radius: var(--gt-radius-full);
}
.gt-stat-delta-up { background: var(--gt-success-bg); color: var(--gt-success); }
.gt-stat-delta-down { background: var(--gt-danger-bg); color: var(--gt-danger); }
/* ═══════════════════════════════════════════════════════════════════
7g. STATUS BADGES & CHIPS
═══════════════════════════════════════════════════════════════════ */
.gt-badge {
display: inline-flex;
align-items: center;
gap: var(--gt-space-1);
padding: 3px var(--gt-space-3);
border-radius: var(--gt-radius-full);
font-size: var(--gt-text-xs);
font-weight: var(--gt-font-semibold);
white-space: nowrap;
letter-spacing: 0.02em;
}
/* Status dot */
.gt-badge-dot::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
/* ── Semantic Badges ── */
.gt-badge-success { background: var(--gt-success-bg); color: var(--gt-success); border: 1px solid var(--gt-success-border); }
.gt-badge-warning { background: var(--gt-warning-bg); color: var(--gt-warning); border: 1px solid var(--gt-warning-border); }
.gt-badge-danger { background: var(--gt-danger-bg); color: var(--gt-danger); border: 1px solid var(--gt-danger-border); }
.gt-badge-info { background: var(--gt-info-bg); color: var(--gt-accent); border: 1px solid var(--gt-info-border); }
.gt-badge-primary { background: rgba(3,3,53,0.08); color: var(--gt-primary); border: 1px solid rgba(3,3,53,0.15); }
.gt-badge-neutral { background: var(--gt-bg); color: var(--gt-text-secondary); border: 1px solid var(--gt-border); }
/* ── Dark Variants ── */
.gt-badge-success-dark { background: rgba(16,185,129,0.15); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.25); }
.gt-badge-warning-dark { background: rgba(245,158,11,0.15); color: #fcd34d; border: 1px solid rgba(245,158,11,0.25); }
.gt-badge-danger-dark { background: rgba(239,68,68,0.15); color: #fca5a5; border: 1px solid rgba(239,68,68,0.25); }
.gt-badge-info-dark { background: rgba(46,167,231,0.15); color: #7dd3fc; border: 1px solid rgba(46,167,231,0.25); }
/* ── Solid Badges ── */
.gt-badge-solid-accent { background: var(--gt-accent); color: white; }
.gt-badge-solid-primary { background: var(--gt-primary); color: white; }
.gt-badge-solid-success { background: var(--gt-success); color: white; }
.gt-badge-solid-warning { background: var(--gt-warning); color: white; }
.gt-badge-solid-danger { background: var(--gt-danger); color: white; }
/* ── Chip (larger interactive badge) ── */
.gt-chip {
display: inline-flex;
align-items: center;
gap: var(--gt-space-2);
padding: var(--gt-space-2) var(--gt-space-4);
border-radius: var(--gt-radius-full);
font-size: var(--gt-text-sm);
font-weight: var(--gt-font-semibold);
border: 1.5px solid var(--gt-border);
background: var(--gt-surface);
color: var(--gt-text-secondary);
cursor: pointer;
transition: all var(--gt-ease-base);
white-space: nowrap;
}
.gt-chip:hover,
.gt-chip.active {
background: var(--gt-info-bg);
border-color: var(--gt-accent);
color: var(--gt-accent);
}
.gt-chip-close {
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--gt-bg);
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: var(--gt-text-muted);
cursor: pointer;
}
.gt-chip-close:hover { background: var(--gt-danger-bg); color: var(--gt-danger); }
/* ═══════════════════════════════════════════════════════════════════
7h. PROFESSIONAL TABLES
═══════════════════════════════════════════════════════════════════ */
.gt-table-wrapper {
border: 1px solid var(--gt-border);
border-radius: var(--gt-radius-xl);
overflow: hidden;
background: var(--gt-white);
box-shadow: var(--gt-shadow-sm);
}
.gt-table-wrapper-glass {
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.03);
backdrop-filter: blur(12px);
}
.gt-table {
width: 100%;
border-collapse: collapse;
font-size: var(--gt-text-sm);
}
.gt-table thead {
background: var(--gt-surface-2);
border-bottom: 1px solid var(--gt-border);
}
.gt-table-wrapper-glass .gt-table thead {
background: rgba(255,255,255,0.04);
border-bottom-color: rgba(255,255,255,0.08);
}
.gt-table th {
padding: var(--gt-space-4) var(--gt-space-5);
font-size: var(--gt-text-xs);
font-weight: var(--gt-font-bold);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--gt-text-muted);
text-align: left;
white-space: nowrap;
}
.gt-table-wrapper-glass .gt-table th { color: rgba(255,255,255,0.45); }
.gt-table td {
padding: var(--gt-space-4) var(--gt-space-5);
color: var(--gt-text-primary);
border-bottom: 1px solid var(--gt-border-light);
vertical-align: middle;
}
.gt-table-wrapper-glass .gt-table td {
color: rgba(255,255,255,0.85);
border-bottom-color: rgba(255,255,255,0.06);
}
.gt-table tbody tr { transition: background var(--gt-ease-fast); }
.gt-table tbody tr:hover { background: var(--gt-bg); }
.gt-table-wrapper-glass .gt-table tbody tr:hover { background: rgba(255,255,255,0.04); }
.gt-table tbody tr:last-child td { border-bottom: none; }
/* ── Table Actions ── */
.gt-table-actions {
display: flex;
align-items: center;
gap: var(--gt-space-2);
}
/* ── Table Toolbar ── */
.gt-table-toolbar {
padding: var(--gt-space-4) var(--gt-space-5);
border-bottom: 1px solid var(--gt-border);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gt-space-4);
flex-wrap: wrap;
background: var(--gt-white);
}
.gt-table-wrapper-glass .gt-table-toolbar {
background: rgba(255,255,255,0.03);
border-bottom-color: rgba(255,255,255,0.07);
}
/* ── Sortable headers ── */
.gt-table-sort {
cursor: pointer;
user-select: none;
display: inline-flex;
align-items: center;
gap: var(--gt-space-1);
}
.gt-table-sort:hover { color: var(--gt-accent); }
/* ═══════════════════════════════════════════════════════════════════
7i. AI WIDGETS
═══════════════════════════════════════════════════════════════════ */
/* ── AI Chat Container ── */
.gt-ai-widget {
border: 1px solid var(--gt-border);
border-radius: var(--gt-radius-2xl);
background: var(--gt-white);
overflow: hidden;
display: flex;
flex-direction: column;
height: 500px;
}
.gt-ai-widget-dark {
background: rgba(3, 4, 96, 0.25);
border: 1px solid rgba(46, 167, 231, 0.15);
backdrop-filter: blur(16px);
}
.gt-ai-widget-header {
padding: var(--gt-space-4) var(--gt-space-5);
border-bottom: 1px solid var(--gt-border);
display: flex;
align-items: center;
gap: var(--gt-space-3);
background: linear-gradient(135deg, var(--gt-primary) 0%, var(--gt-secondary) 100%);
color: var(--gt-white);
flex-shrink: 0;
}
.gt-ai-avatar {
width: 38px;
height: 38px;
border-radius: var(--gt-radius-lg);
background: linear-gradient(135deg, var(--gt-accent) 0%, #56bcf0 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
position: relative;
}
.gt-ai-avatar::after {
content: '';
position: absolute;
bottom: -2px;
right: -2px;
width: 10px;
height: 10px;
background: var(--gt-success);
border-radius: 50%;
border: 2px solid var(--gt-primary);
}
.gt-ai-name { font-weight: var(--gt-font-bold); font-size: var(--gt-text-sm); }
.gt-ai-status { font-size: var(--gt-text-xs); color: rgba(255,255,255,0.6); }
.gt-ai-messages {
flex: 1;
overflow-y: auto;
padding: var(--gt-space-5);
display: flex;
flex-direction: column;
gap: var(--gt-space-4);
}
.gt-ai-bubble {
max-width: 80%;
padding: var(--gt-space-3) var(--gt-space-4);
border-radius: var(--gt-radius-xl);
font-size: var(--gt-text-sm);
line-height: var(--gt-leading-relaxed);
}
.gt-ai-bubble-bot {
background: var(--gt-bg);
border: 1px solid var(--gt-border);
color: var(--gt-text-primary);
border-radius: var(--gt-radius-xl) var(--gt-radius-xl) var(--gt-radius-xl) var(--gt-radius-sm);
align-self: flex-start;
}
.gt-ai-bubble-user {
background: linear-gradient(135deg, var(--gt-secondary) 0%, var(--gt-accent) 100%);
color: var(--gt-white);
border-radius: var(--gt-radius-xl) var(--gt-radius-xl) var(--gt-radius-sm) var(--gt-radius-xl);
align-self: flex-end;
}
.gt-ai-widget-dark .gt-ai-bubble-bot {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.1);
color: rgba(255,255,255,0.88);
}
/* ── AI Typing Indicator ── */
.gt-ai-typing {
display: flex;
align-items: center;
gap: 6px;
padding: var(--gt-space-3) var(--gt-space-4);
background: var(--gt-bg);
border: 1px solid var(--gt-border);
border-radius: var(--gt-radius-xl) var(--gt-radius-xl) var(--gt-radius-xl) var(--gt-radius-sm);
width: fit-content;
align-self: flex-start;
}
.gt-ai-typing span {
width: 7px;
height: 7px;
background: var(--gt-accent);
border-radius: 50%;
animation: gt-typing-bounce 1.2s infinite ease-in-out;
}
.gt-ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.gt-ai-typing span:nth-child(3) { animation-delay: 0.4s; }
.gt-ai-input-row {
padding: var(--gt-space-4) var(--gt-space-5);
border-top: 1px solid var(--gt-border);
display: flex;
align-items: center;
gap: var(--gt-space-3);
flex-shrink: 0;
}
.gt-ai-input {
flex: 1;
background: var(--gt-bg);
border: 1.5px solid var(--gt-border);
border-radius: var(--gt-radius-full);
padding: var(--gt-space-3) var(--gt-space-5);
font-family: var(--gt-font-sans);
font-size: var(--gt-text-sm);
color: var(--gt-text-primary);
outline: none;
transition: border-color var(--gt-ease-base);
}
.gt-ai-input:focus { border-color: var(--gt-accent); }
.gt-ai-widget-dark .gt-ai-input {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.12);
color: var(--gt-white);
}
.gt-ai-send {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--gt-grad-accent);
color: var(--gt-white);
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--gt-ease-bounce);
flex-shrink: 0;
font-size: var(--gt-text-sm);
box-shadow: var(--gt-shadow-accent);
}
.gt-ai-send:hover { transform: scale(1.1) rotate(10deg); }
/* ── AI Recommendation Card ── */
.gt-ai-recommend-card {
border: 1px solid var(--gt-info-border);
border-radius: var(--gt-radius-xl);
padding: var(--gt-space-5);
background: linear-gradient(135deg, var(--gt-info-bg) 0%, rgba(46,167,231,0.05) 100%);
position: relative;
overflow: hidden;
}
.gt-ai-recommend-card::before {
content: '✦ AI';
position: absolute;
top: var(--gt-space-3);
right: var(--gt-space-4);
font-size: 10px;
font-weight: var(--gt-font-bold);
color: var(--gt-accent);
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* ═══════════════════════════════════════════════════════════════════
7j. INTERACTIVE MAP CONTAINER
═══════════════════════════════════════════════════════════════════ */
.gt-map-wrapper {
border: 1px solid var(--gt-border);
border-radius: var(--gt-radius-2xl);
overflow: hidden;
position: relative;
background: var(--gt-bg);
box-shadow: var(--gt-shadow-md);
}
.gt-map-container {
width: 100%;
height: 400px;
display: block;
}
.gt-map-overlay {
position: absolute;
top: var(--gt-space-4);
left: var(--gt-space-4);
z-index: 10;
display: flex;
flex-direction: column;
gap: var(--gt-space-2);
}
.gt-map-controls {
position: absolute;
bottom: var(--gt-space-4);
right: var(--gt-space-4);
z-index: 10;
display: flex;
gap: var(--gt-space-2);
}
.gt-map-btn {
background: var(--gt-white);
border: 1px solid var(--gt-border);
border-radius: var(--gt-radius-md);
padding: var(--gt-space-2) var(--gt-space-3);
font-size: var(--gt-text-xs);
font-weight: var(--gt-font-semibold);
color: var(--gt-text-primary);
cursor: pointer;
box-shadow: var(--gt-shadow-sm);
transition: all var(--gt-ease-fast);
font-family: var(--gt-font-sans);
}
.gt-map-btn:hover {
border-color: var(--gt-accent);
color: var(--gt-accent);
}
/* ── Map Price Bubble (Leaflet custom marker) ── */
.gt-map-price-bubble {
background: var(--gt-white);
border: 2px solid var(--gt-primary);
border-radius: var(--gt-radius-full);
padding: 4px 10px;
font-size: var(--gt-text-xs);
font-weight: var(--gt-font-bold);
color: var(--gt-primary);
box-shadow: var(--gt-shadow-md);
white-space: nowrap;
cursor: pointer;
transition: all var(--gt-ease-fast);
}
.gt-map-price-bubble:hover,
.gt-map-price-bubble.active {
background: var(--gt-primary);
color: var(--gt-white);
transform: scale(1.1);
z-index: 20;
}
/* ═══════════════════════════════════════════════════════════════════
7k. TIMELINE COMPONENT
═══════════════════════════════════════════════════════════════════ */
.gt-timeline {
position: relative;
display: flex;
flex-direction: column;
gap: 0;
}
.gt-timeline::before {
content: '';
position: absolute;
left: 20px;
top: 24px;
bottom: 24px;
width: 2px;
background: linear-gradient(to bottom, var(--gt-accent), var(--gt-border));
}
.gt-timeline-item {
display: flex;
gap: var(--gt-space-4);
position: relative;
padding-bottom: var(--gt-space-6);
}
.gt-timeline-item:last-child { padding-bottom: 0; }
.gt-timeline-dot {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--gt-white);
border: 2px solid var(--gt-accent);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--gt-text-sm);
color: var(--gt-accent);
flex-shrink: 0;
position: relative;
z-index: 1;
box-shadow: 0 0 0 4px rgba(46, 167, 231, 0.12);
transition: all var(--gt-ease-base);
}
.gt-timeline-dot-filled {
background: var(--gt-accent);
color: var(--gt-white);
}
.gt-timeline-dot-success {
background: var(--gt-success);
border-color: var(--gt-success);
color: var(--gt-white);
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}
.gt-timeline-dot-warning {
background: var(--gt-warning);
border-color: var(--gt-warning);
color: var(--gt-white);
}
.gt-timeline-content {
flex: 1;
padding-top: var(--gt-space-2);
min-width: 0;
}
.gt-timeline-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gt-space-3);
margin-bottom: var(--gt-space-2);
}
.gt-timeline-title {
font-size: var(--gt-text-base);
font-weight: var(--gt-font-semibold);
color: var(--gt-text-primary);
}
.gt-timeline-time {
font-size: var(--gt-text-xs);
color: var(--gt-text-muted);
white-space: nowrap;
}
.gt-timeline-body {
font-size: var(--gt-text-sm);
color: var(--gt-text-secondary);
line-height: var(--gt-leading-relaxed);
}
/* ── Step Progress (horizontal) ── */
.gt-steps {
display: flex;
align-items: center;
gap: 0;
width: 100%;
}
.gt-step {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--gt-space-2);
flex: 1;
position: relative;
}
.gt-step::before {
content: '';
position: absolute;
top: 20px;
left: 50%;
width: 100%;
height: 2px;
background: var(--gt-border);
z-index: 0;
}
.gt-step:last-child::before { display: none; }
.gt-step.done::before { background: var(--gt-accent); }
.gt-step-dot {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--gt-white);
border: 2px solid var(--gt-border);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--gt-text-sm);
font-weight: var(--gt-font-bold);
color: var(--gt-text-muted);
position: relative;
z-index: 1;
transition: all var(--gt-ease-base);
}
.gt-step.active .gt-step-dot {
border-color: var(--gt-accent);
background: var(--gt-accent);
color: var(--gt-white);
box-shadow: 0 0 0 6px rgba(46,167,231,0.15);
}
.gt-step.done .gt-step-dot {
border-color: var(--gt-accent);
background: var(--gt-accent);
color: var(--gt-white);
}
.gt-step-label {
font-size: var(--gt-text-xs);
font-weight: var(--gt-font-semibold);
color: var(--gt-text-muted);
text-align: center;
white-space: nowrap;
}
.gt-step.active .gt-step-label { color: var(--gt-accent); }
.gt-step.done .gt-step-label { color: var(--gt-text-secondary); }
/* ═══════════════════════════════════════════════════════════════════
7l. MODALS & DRAWERS
═══════════════════════════════════════════════════════════════════ */
.gt-modal-overlay {
position: fixed;
inset: 0;
background: rgba(3, 3, 53, 0.7);
backdrop-filter: blur(4px);
z-index: var(--gt-z-modal);
display: flex;
align-items: center;
justify-content: center;
padding: var(--gt-space-6);
animation: gt-fade-in 0.2s ease;
}
.gt-modal {
background: var(--gt-white);
border-radius: var(--gt-radius-2xl);
box-shadow: var(--gt-shadow-2xl);
width: 100%;
max-width: 560px;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
animation: gt-scale-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gt-modal-dark {
background: #0a0c1e;
border: 1px solid rgba(46, 167, 231, 0.15);
}
.gt-modal-sm { max-width: 400px; }
.gt-modal-lg { max-width: 720px; }
.gt-modal-xl { max-width: 960px; }
.gt-modal-full { max-width: 96vw; max-height: 96vh; }
.gt-modal-header {
padding: var(--gt-space-6);
border-bottom: 1px solid var(--gt-border);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gt-space-4);
flex-shrink: 0;
}
.gt-modal-dark .gt-modal-header { border-bottom-color: rgba(255,255,255,0.08); }
.gt-modal-title {
font-size: var(--gt-text-xl);
font-weight: var(--gt-font-bold);
color: var(--gt-text-primary);
}
.gt-modal-dark .gt-modal-title { color: var(--gt-white); }
.gt-modal-close {
width: 36px;
height: 36px;
border-radius: var(--gt-radius-md);
border: 1px solid var(--gt-border);
background: var(--gt-surface-2);
color: var(--gt-text-muted);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--gt-ease-fast);
flex-shrink: 0;
font-size: var(--gt-text-base);
}
.gt-modal-close:hover { background: var(--gt-danger-bg); color: var(--gt-danger); border-color: var(--gt-danger-border); }
.gt-modal-body { padding: var(--gt-space-6); overflow-y: auto; flex: 1; }
.gt-modal-footer {
padding: var(--gt-space-5) var(--gt-space-6);
border-top: 1px solid var(--gt-border);
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--gt-space-3);
flex-shrink: 0;
background: var(--gt-surface-2);
}
.gt-modal-dark .gt-modal-footer {
background: rgba(255,255,255,0.03);
border-top-color: rgba(255,255,255,0.07);
}
/* ═══════════════════════════════════════════════════════════════════
7m. ALERTS & TOAST NOTIFICATIONS
═══════════════════════════════════════════════════════════════════ */
.gt-alert {
display: flex;
align-items: flex-start;
gap: var(--gt-space-4);
padding: var(--gt-space-4) var(--gt-space-5);
border-radius: var(--gt-radius-xl);
border: 1px solid;
font-size: var(--gt-text-sm);
line-height: var(--gt-leading-relaxed);
}
.gt-alert-icon {
width: 22px;
height: 22px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--gt-text-base);
margin-top: 1px;
}
.gt-alert-content { flex: 1; }
.gt-alert-title { font-weight: var(--gt-font-bold); margin-bottom: 4px; }
.gt-alert-body { opacity: 0.85; }
.gt-alert-success { background: var(--gt-success-bg); border-color: var(--gt-success-border); color: #065f46; }
.gt-alert-warning { background: var(--gt-warning-bg); border-color: var(--gt-warning-border); color: #78350f; }
.gt-alert-danger { background: var(--gt-danger-bg); border-color: var(--gt-danger-border); color: #7f1d1d; }
.gt-alert-info { background: var(--gt-info-bg); border-color: var(--gt-info-border); color: #0c4a6e; }
/* ── Toast Notification ── */
.gt-toast-container {
position: fixed;
top: var(--gt-space-6);
right: var(--gt-space-6);
z-index: var(--gt-z-toast);
display: flex;
flex-direction: column;
gap: var(--gt-space-3);
pointer-events: none;
}
.gt-toast {
pointer-events: all;
background: var(--gt-white);
border: 1px solid var(--gt-border);
border-radius: var(--gt-radius-xl);
padding: var(--gt-space-4) var(--gt-space-5);
box-shadow: var(--gt-shadow-xl);
display: flex;
align-items: center;
gap: var(--gt-space-3);
min-width: 300px;
max-width: 420px;
animation: gt-slide-in-right 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gt-toast-icon { font-size: 1.25rem; flex-shrink: 0; }
.gt-toast-body { flex: 1; }
.gt-toast-title { font-size: var(--gt-text-sm); font-weight: var(--gt-font-bold); color: var(--gt-text-primary); }
.gt-toast-msg { font-size: var(--gt-text-xs); color: var(--gt-text-muted); margin-top: 2px; }
.gt-toast-close { color: var(--gt-text-muted); cursor: pointer; font-size: var(--gt-text-base); flex-shrink: 0; transition: color var(--gt-ease-fast); }
.gt-toast-close:hover { color: var(--gt-text-primary); }
.gt-toast-success { border-left: 4px solid var(--gt-success); }
.gt-toast-warning { border-left: 4px solid var(--gt-warning); }
.gt-toast-danger { border-left: 4px solid var(--gt-danger); }
.gt-toast-info { border-left: 4px solid var(--gt-accent); }
.gt-toast-exit { animation: gt-slide-out-right 0.25s ease forwards; }
/* ═══════════════════════════════════════════════════════════════════
7n. PRICE CARDS & BOOKING SUMMARY
═══════════════════════════════════════════════════════════════════ */
.gt-price-card {
background: var(--gt-white);
border: 1px solid var(--gt-border);
border-radius: var(--gt-radius-2xl);
padding: var(--gt-space-6);
box-shadow: var(--gt-shadow-lg);
position: sticky;
top: calc(70px + var(--gt-space-6));
}
.gt-price-card-dark {
background: rgba(3, 4, 96, 0.35);
border: 1px solid rgba(46,167,231,0.15);
backdrop-filter: blur(16px);
}
.gt-price-amount {
font-size: var(--gt-text-4xl);
font-weight: var(--gt-font-extrabold);
color: var(--gt-primary);
letter-spacing: -0.04em;
line-height: 1;
}
.gt-price-card-dark .gt-price-amount { color: var(--gt-white); }
.gt-price-currency {
font-size: var(--gt-text-xl);
font-weight: var(--gt-font-semibold);
color: var(--gt-text-muted);
}
.gt-price-per { font-size: var(--gt-text-sm); color: var(--gt-text-muted); }
.gt-price-original {
font-size: var(--gt-text-sm);
color: var(--gt-text-light);
text-decoration: line-through;
}
.gt-price-discount {
font-size: var(--gt-text-sm);
font-weight: var(--gt-font-bold);
color: var(--gt-success);
background: var(--gt-success-bg);
padding: 2px 8px;
border-radius: var(--gt-radius-full);
}
.gt-booking-summary-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--gt-space-3) 0;
border-bottom: 1px solid var(--gt-border-light);
font-size: var(--gt-text-sm);
}
.gt-booking-summary-row:last-child { border-bottom: none; }
.gt-booking-summary-label { color: var(--gt-text-muted); }
.gt-booking-summary-value { font-weight: var(--gt-font-semibold); color: var(--gt-text-primary); }
.gt-booking-summary-total .gt-booking-summary-label { font-size: var(--gt-text-base); font-weight: var(--gt-font-bold); color: var(--gt-text-primary); }
.gt-booking-summary-total .gt-booking-summary-value { font-size: var(--gt-text-2xl); font-weight: var(--gt-font-extrabold); color: var(--gt-accent); }
.gt-price-card-dark .gt-booking-summary-row { border-bottom-color: rgba(255,255,255,0.06); }
.gt-price-card-dark .gt-booking-summary-label { color: rgba(255,255,255,0.5); }
.gt-price-card-dark .gt-booking-summary-value { color: var(--gt-white); }
.gt-price-card-dark .gt-booking-summary-total .gt-booking-summary-label { color: rgba(255,255,255,0.85); }
/* ═══════════════════════════════════════════════════════════════════
7o. PROGRESS & STEP INDICATORS
═══════════════════════════════════════════════════════════════════ */
.gt-progress {
width: 100%;
height: 8px;
background: var(--gt-border);
border-radius: var(--gt-radius-full);
overflow: hidden;
}
.gt-progress-bar {
height: 100%;
background: var(--gt-grad-accent);
border-radius: var(--gt-radius-full);
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.gt-progress-sm { height: 4px; }
.gt-progress-lg { height: 12px; }
.gt-progress-striped .gt-progress-bar {
background-image: linear-gradient(
45deg,
rgba(255,255,255,0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255,255,255,0.15) 50%,
rgba(255,255,255,0.15) 75%,
transparent 75%,
transparent
);
background-size: 1rem 1rem;
animation: gt-progress-stripes 1s linear infinite;
}
/* ═══════════════════════════════════════════════════════════════════
7p. TABS
═══════════════════════════════════════════════════════════════════ */
.gt-tabs {
display: flex;
border-bottom: 2px solid var(--gt-border);
gap: 0;
overflow-x: auto;
scrollbar-width: none;
}
.gt-tabs::-webkit-scrollbar { display: none; }
.gt-tab {
padding: var(--gt-space-3) var(--gt-space-5);
font-size: var(--gt-text-sm);
font-weight: var(--gt-font-semibold);
color: var(--gt-text-muted);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
white-space: nowrap;
transition: color var(--gt-ease-fast), border-color var(--gt-ease-fast);
background: none;
border-left: none;
border-right: none;
border-top: none;
font-family: var(--gt-font-sans);
display: inline-flex;
align-items: center;
gap: var(--gt-space-2);
text-decoration: none;
}
.gt-tab:hover { color: var(--gt-text-primary); }
.gt-tab.active {
color: var(--gt-accent);
border-bottom-color: var(--gt-accent);
}
/* ── Pill Tabs ── */
.gt-tabs-pill {
display: flex;
background: var(--gt-bg);
border: 1px solid var(--gt-border);
border-radius: var(--gt-radius-xl);
padding: var(--gt-space-1);
gap: var(--gt-space-1);
width: fit-content;
}
.gt-tab-pill {
padding: var(--gt-space-2) var(--gt-space-4);
border-radius: var(--gt-radius-lg);
font-size: var(--gt-text-sm);
font-weight: var(--gt-font-semibold);
color: var(--gt-text-muted);
cursor: pointer;
transition: all var(--gt-ease-base);
border: none;
background: none;
font-family: var(--gt-font-sans);
white-space: nowrap;
}
.gt-tab-pill:hover { color: var(--gt-text-primary); background: rgba(255,255,255,0.6); }
.gt-tab-pill.active { background: var(--gt-white); color: var(--gt-primary); box-shadow: var(--gt-shadow-sm); }
/* ── Dark Pill Tabs ── */
.gt-tabs-pill-dark {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.1);
}
.gt-tab-pill-dark { color: rgba(255,255,255,0.5); }
.gt-tab-pill-dark:hover { color: var(--gt-white); background: rgba(255,255,255,0.1); }
.gt-tab-pill-dark.active { background: rgba(46,167,231,0.2); color: var(--gt-accent-light); box-shadow: none; }
/* ═══════════════════════════════════════════════════════════════════
7q. DROPDOWN MENUS
═══════════════════════════════════════════════════════════════════ */
.gt-dropdown { position: relative; display: inline-block; }
.gt-dropdown-menu {
position: absolute;
top: calc(100% + var(--gt-space-2));
right: 0;
background: var(--gt-white);
border: 1px solid var(--gt-border);
border-radius: var(--gt-radius-xl);
box-shadow: var(--gt-shadow-xl);
padding: var(--gt-space-2);
min-width: 200px;
z-index: var(--gt-z-dropdown);
display: none;
animation: gt-scale-in 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gt-dropdown-menu.open { display: block; }
.gt-dropdown-item {
display: flex;
align-items: center;
gap: var(--gt-space-3);
padding: var(--gt-space-3) var(--gt-space-4);
border-radius: var(--gt-radius-md);
font-size: var(--gt-text-sm);
font-weight: var(--gt-font-medium);
color: var(--gt-text-primary);
cursor: pointer;
transition: background var(--gt-ease-fast);
text-decoration: none;
border: none;
background: none;
width: 100%;
text-align: left;
font-family: var(--gt-font-sans);
}
.gt-dropdown-item:hover { background: var(--gt-bg); color: var(--gt-text-primary); }
.gt-dropdown-item.danger:hover { background: var(--gt-danger-bg); color: var(--gt-danger); }
.gt-dropdown-divider {
height: 1px;
background: var(--gt-border);
margin: var(--gt-space-2) 0;
}
.gt-dropdown-label {
padding: var(--gt-space-2) var(--gt-space-4);
font-size: 10px;
font-weight: var(--gt-font-bold);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--gt-text-light);
}
/* ═══════════════════════════════════════════════════════════════════
7r. RATING / STARS
═══════════════════════════════════════════════════════════════════ */
.gt-stars {
display: inline-flex;
align-items: center;
gap: 2px;
}
.gt-star {
font-size: var(--gt-text-sm);
color: var(--gt-border);
transition: color var(--gt-ease-fast);
}
.gt-star.filled { color: var(--gt-warning); }
.gt-star.half { color: var(--gt-warning); opacity: 0.5; }
.gt-star.selected { color: var(--gt-warning); transform: scale(1.2); }
.gt-rating-score {
font-size: var(--gt-text-sm);
font-weight: var(--gt-font-bold);
color: var(--gt-text-primary);
margin-left: var(--gt-space-2);
}
.gt-rating-count {
font-size: var(--gt-text-xs);
color: var(--gt-text-muted);
margin-left: var(--gt-space-1);
}
.gt-review-score {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--gt-radius-md);
background: var(--gt-primary);
color: var(--gt-white);
font-size: var(--gt-text-sm);
font-weight: var(--gt-font-extrabold);
}
.gt-review-score-good { background: var(--gt-success); }
.gt-review-score-great { background: var(--gt-accent); }
/* ═══════════════════════════════════════════════════════════════════
7s. AVATAR & USER INFO
═══════════════════════════════════════════════════════════════════ */
.gt-avatar {
border-radius: 50%;
object-fit: cover;
background: var(--gt-bg);
border: 2px solid var(--gt-border);
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--gt-font-bold);
color: var(--gt-text-muted);
flex-shrink: 0;
overflow: hidden;
}
.gt-avatar-xs { width: 24px; height: 24px; font-size: 10px; }
.gt-avatar-sm { width: 32px; height: 32px; font-size: var(--gt-text-xs); }
.gt-avatar-md { width: 42px; height: 42px; font-size: var(--gt-text-sm); }
.gt-avatar-lg { width: 56px; height: 56px; font-size: var(--gt-text-base); }
.gt-avatar-xl { width: 72px; height: 72px; font-size: var(--gt-text-xl); }
.gt-avatar-2xl { width: 96px; height: 96px; font-size: var(--gt-text-2xl); }
.gt-avatar-accent { border-color: var(--gt-accent); background: var(--gt-info-bg); color: var(--gt-accent); }
.gt-avatar-primary { border-color: var(--gt-primary); background: rgba(3,3,53,0.08); color: var(--gt-primary); }
.gt-avatar-group { display: flex; }
.gt-avatar-group .gt-avatar { margin-left: -8px; border: 2px solid var(--gt-white); }
.gt-avatar-group .gt-avatar:first-child { margin-left: 0; }
/* User Info Pill */
.gt-user-info {
display: flex;
align-items: center;
gap: var(--gt-space-3);
padding: var(--gt-space-2) var(--gt-space-3);
border-radius: var(--gt-radius-full);
cursor: pointer;
transition: background var(--gt-ease-fast);
}
.gt-user-info:hover { background: var(--gt-bg); }
.gt-user-name { font-size: var(--gt-text-sm); font-weight: var(--gt-font-semibold); color: var(--gt-text-primary); }
.gt-user-email { font-size: var(--gt-text-xs); color: var(--gt-text-muted); }
/* ═══════════════════════════════════════════════════════════════════
7t. EMPTY STATE
═══════════════════════════════════════════════════════════════════ */
.gt-empty-state {
text-align: center;
padding: var(--gt-space-20) var(--gt-space-8);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--gt-space-4);
}
.gt-empty-state-icon {
width: 80px;
height: 80px;
border-radius: var(--gt-radius-2xl);
background: var(--gt-bg);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--gt-text-light);
margin-bottom: var(--gt-space-2);
}
.gt-empty-state-title {
font-size: var(--gt-text-xl);
font-weight: var(--gt-font-bold);
color: var(--gt-text-primary);
}
.gt-empty-state-body {
font-size: var(--gt-text-sm);
color: var(--gt-text-muted);
max-width: 360px;
line-height: var(--gt-leading-relaxed);
}
/* ═══════════════════════════════════════════════════════════════════
7u. SKELETON LOADERS
═══════════════════════════════════════════════════════════════════ */
.gt-skeleton {
background: linear-gradient(90deg, var(--gt-bg) 25%, var(--gt-border-light) 50%, var(--gt-bg) 75%);
background-size: 200% 100%;
animation: gt-shimmer 1.5s infinite;
border-radius: var(--gt-radius-md);
}
.gt-skeleton-text { height: 14px; border-radius: var(--gt-radius-sm); }
.gt-skeleton-title { height: 24px; border-radius: var(--gt-radius-sm); }
.gt-skeleton-avatar { border-radius: 50%; }
.gt-skeleton-card { height: 200px; border-radius: var(--gt-radius-xl); }
.gt-skeleton-image { height: 160px; border-radius: var(--gt-radius-lg); }
.gt-skeleton-dark {
background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
background-size: 200% 100%;
animation: gt-shimmer 1.5s infinite;
}
/* ═══════════════════════════════════════════════════════════════════
7v. PAGINATION
═══════════════════════════════════════════════════════════════════ */
.gt-pagination {
display: flex;
align-items: center;
gap: var(--gt-space-1);
flex-wrap: wrap;
}
.gt-page-btn {
min-width: 38px;
height: 38px;
border-radius: var(--gt-radius-md);
border: 1px solid var(--gt-border);
background: var(--gt-white);
color: var(--gt-text-secondary);
font-size: var(--gt-text-sm);
font-weight: var(--gt-font-semibold);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--gt-ease-fast);
padding: 0 var(--gt-space-3);
font-family: var(--gt-font-sans);
text-decoration: none;
}
.gt-page-btn:hover {
background: var(--gt-bg);
border-color: var(--gt-border-dark);
color: var(--gt-text-primary);
}
.gt-page-btn.active {
background: var(--gt-accent);
border-color: var(--gt-accent);
color: var(--gt-white);
box-shadow: var(--gt-shadow-accent);
}
.gt-page-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* ═══════════════════════════════════════════════════════════════════
8. ANIMATION UTILITIES
═══════════════════════════════════════════════════════════════════ */
/* ── Keyframes ── */
@keyframes gt-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes gt-fade-in-up {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes gt-fade-in-down {
from { opacity: 0; transform: translateY(-24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes gt-scale-in {
from { opacity: 0; transform: scale(0.92); }
to { opacity: 1; transform: scale(1); }
}
@keyframes gt-slide-in-right {
from { opacity: 0; transform: translateX(100px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes gt-slide-out-right {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(100px); }
}
@keyframes gt-spin {
to { transform: rotate(360deg); }
}
@keyframes gt-pulse-glow {
0%, 100% { box-shadow: 0 0 0 0 rgba(46, 167, 231, 0.4); }
50% { box-shadow: 0 0 0 12px rgba(46, 167, 231, 0); }
}
@keyframes gt-typing-bounce {
0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
40% { transform: scale(1.1); opacity: 1; }
}
@keyframes gt-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
@keyframes gt-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes gt-progress-stripes {
from { background-position: 1rem 0; }
to { background-position: 0 0; }
}
@keyframes gt-bounce-in {
0% { transform: scale(0.3); opacity: 0; }
50% { transform: scale(1.05); }
70% { transform: scale(0.95); }
100% { transform: scale(1); opacity: 1; }
}
@keyframes gt-hero-slide {
0% { opacity: 0; }
10% { opacity: 1; }
80% { opacity: 1; }
100% { opacity: 0; }
}
/* ── Animation Classes ── */
.gt-animate-fade-in { animation: gt-fade-in 0.4s ease forwards; }
.gt-animate-fade-in-up { animation: gt-fade-in-up 0.5s ease forwards; }
.gt-animate-fade-in-down { animation: gt-fade-in-down 0.5s ease forwards; }
.gt-animate-scale-in { animation: gt-scale-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.gt-animate-float { animation: gt-float 3s ease-in-out infinite; }
.gt-animate-pulse-glow { animation: gt-pulse-glow 2.5s ease infinite; }
.gt-animate-spin { animation: gt-spin 1s linear infinite; }
.gt-animate-bounce-in { animation: gt-bounce-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
/* Staggered delays */
.gt-delay-100 { animation-delay: 100ms; }
.gt-delay-200 { animation-delay: 200ms; }
.gt-delay-300 { animation-delay: 300ms; }
.gt-delay-400 { animation-delay: 400ms; }
.gt-delay-500 { animation-delay: 500ms; }
/* ── Hover Effects ── */
.gt-hover-lift { transition: transform var(--gt-ease-base), box-shadow var(--gt-ease-base); }
.gt-hover-lift:hover { transform: translateY(-4px); box-shadow: var(--gt-shadow-xl); }
.gt-hover-glow:hover { box-shadow: 0 0 0 3px rgba(46, 167, 231, 0.3); }
.gt-hover-scale { transition: transform var(--gt-ease-bounce); }
.gt-hover-scale:hover { transform: scale(1.04); }
/* ── Transition Utilities ── */
.gt-transition { transition: all var(--gt-ease-base); }
.gt-transition-fast { transition: all var(--gt-ease-fast); }
.gt-transition-slow { transition: all var(--gt-ease-slow); }
.gt-transition-none { transition: none; }
/* ═══════════════════════════════════════════════════════════════════
9. RESPONSIVE UTILITIES & MOBILE OVERRIDES
═══════════════════════════════════════════════════════════════════ */
/* Global Mobile Layout Rules */
img, video, canvas, svg, iframe {
max-width: 100%;
height: auto;
}
.table-responsive {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
/* Horizontal scrollable nav tab helper */
.scrollbar-hidden::-webkit-scrollbar,
.scroll-x-auto::-webkit-scrollbar {
display: none !important;
}
.scrollbar-hidden,
.scroll-x-auto {
-ms-overflow-style: none !important;
scrollbar-width: none !important;
}
/* Breakpoint: Desktop & Tablet (xl / lg) */
@media (min-width: 1024px) {
.gt-show-lg { display: block !important; }
.gt-nav-links { display: flex !important; }
.gt-nav-mobile-toggle { display: none !important; }
}
/* Breakpoint: Large Mobile & Tablet (< 1024px) */
@media (max-width: 1023.98px) {
.gt-hidden-md { display: none !important; }
.gt-nav-links { display: none !important; }
.gt-nav-mobile-toggle { display: flex !important; }
.gt-navbar { padding: 10px 16px !important; }
}
/* Breakpoint: Mobile Devices (< 768px) */
@media (max-width: 767.98px) {
.gt-hidden-sm { display: none !important; }
.gt-form-row { grid-template-columns: 1fr !important; }
.gt-modal { border-radius: var(--gt-radius-2xl) var(--gt-radius-2xl) 0 0 !important; max-width: 100% !important; }
.gt-modal-overlay { align-items: flex-end !important; padding: 0 !important; }
.gt-toast-container {
right: 12px !important;
left: 12px !important;
top: auto !important;
bottom: 70px !important;
}
.gt-toast { min-width: unset !important; max-width: 100% !important; }
/* Responsive Headings & Hero */
.display-1 { font-size: 2.2rem !important; line-height: 1.15 !important; }
.display-2 { font-size: 2.0rem !important; line-height: 1.15 !important; }
.display-3 { font-size: 1.75rem !important; line-height: 1.15 !important; }
.display-4 { font-size: 1.5rem !important; line-height: 1.2 !important; }
.display-5 { font-size: 1.3rem !important; line-height: 1.2 !important; }
.gt-hero-section {
min-height: auto !important;
padding-block: 2.5rem 2rem !important;
}
.gt-promo-bar {
font-size: 0.76rem !important;
padding: 5px 10px !important;
}
.gt-promo-bar span {
display: inline-block;
}
/* Cards & Layout collapse */
.gt-flight-card,
.gt-hotel-card,
.gt-car-card,
.gt-tour-card {
flex-direction: column !important;
align-items: stretch !important;
gap: 12px !important;
}
.gt-flight-card-route {
flex-direction: column !important;
text-align: center !important;
gap: 8px !important;
}
/* AI Drawer on Mobile */
#aiChatDrawer {
width: 94vw !important;
max-width: 94vw !important;
right: 3vw !important;
left: 3vw !important;
bottom: 80px !important;
height: 75vh !important;
max-height: 500px !important;
border-radius: 20px !important;
}
}
/* Breakpoint: Small Mobile (< 576px) */
@media (max-width: 575.98px) {
.gt-hidden-xs { display: none !important; }
.gt-container { padding-inline: 12px !important; }
.gt-section { padding-block: 2rem !important; }
.gt-navbar {
padding: 8px 12px !important;
}
.gt-brand-name {
font-size: 1.1rem !important;
}
/* Grid & Form column fixes */
.row > [class*="col-"] {
margin-bottom: 0.5rem;
}
.row > [class*="col-"]:last-child {
margin-bottom: 0;
}
.btn {
font-size: 0.88rem !important;
}
/* Full width buttons on small screens */
.w-xs-100 {
width: 100% !important;
}
}
@media (min-width: 640px) { .gt-show-sm { display: block !important; } }
@media (min-width: 768px) { .gt-show-md { display: block !important; } }
/* Mobile Nav Toggle */
.gt-nav-mobile-toggle {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: var(--gt-space-2);
}
.gt-nav-mobile-toggle span {
width: 22px;
height: 2px;
background: var(--gt-text-primary);
border-radius: 2px;
transition: all var(--gt-ease-base);
display: block;
}
.gt-navbar-dark .gt-nav-mobile-toggle span { background: var(--gt-white); }
.gt-nav-mobile-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gt-nav-mobile-toggle.open span:nth-child(2) { opacity: 0; }
.gt-nav-mobile-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.gt-nav-mobile-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--gt-white);
border-top: 1px solid var(--gt-border);
border-bottom: 2px solid var(--gt-accent);
padding: 16px;
flex-direction: column;
gap: 8px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
max-height: 80vh;
overflow-y: auto;
}
.gt-nav-mobile-menu.open { display: flex; }
.gt-navbar-dark .gt-nav-mobile-menu {
background: var(--gt-primary);
border-color: rgba(255,255,255,0.08);
}
/* ═══════════════════════════════════════════════════════════════════
10. SCROLLBAR STYLING
═══════════════════════════════════════════════════════════════════ */
.gt-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.gt-scrollbar::-webkit-scrollbar-track { background: var(--gt-bg); border-radius: 3px; }
.gt-scrollbar::-webkit-scrollbar-thumb { background: var(--gt-border-dark); border-radius: 3px; }
.gt-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--gt-text-light); }
.gt-scrollbar-none::-webkit-scrollbar { display: none; }
.gt-scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }
/* Custom global scrollbar (when gt-body is applied) */
.gt-body::-webkit-scrollbar { width: 8px; }
.gt-body::-webkit-scrollbar-track { background: var(--gt-bg); }
.gt-body::-webkit-scrollbar-thumb { background: var(--gt-border-dark); border-radius: 4px; }
.gt-body::-webkit-scrollbar-thumb:hover { background: var(--gt-text-muted); }
/* ═══════════════════════════════════════════════════════════════════
BONUS: UTILITY HELPERS
═══════════════════════════════════════════════════════════════════ */
.gt-divider {
height: 1px;
background: var(--gt-border);
margin-block: var(--gt-space-6);
}
.gt-divider-dark { background: rgba(255,255,255,0.08); }
.gt-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
.gt-rounded-sm { border-radius: var(--gt-radius-sm); }
.gt-rounded-md { border-radius: var(--gt-radius-md); }
.gt-rounded-lg { border-radius: var(--gt-radius-lg); }
.gt-rounded-xl { border-radius: var(--gt-radius-xl); }
.gt-rounded-2xl { border-radius: var(--gt-radius-2xl); }
.gt-rounded-full { border-radius: var(--gt-radius-full); }
.gt-shadow-sm { box-shadow: var(--gt-shadow-sm); }
.gt-shadow-md { box-shadow: var(--gt-shadow-md); }
.gt-shadow-lg { box-shadow: var(--gt-shadow-lg); }
.gt-shadow-xl { box-shadow: var(--gt-shadow-xl); }
.gt-shadow-none { box-shadow: none; }
.gt-cursor-pointer { cursor: pointer; }
.gt-select-none { user-select: none; }
.gt-pointer-none { pointer-events: none; }
.gt-opacity-50 { opacity: 0.5; }
.gt-opacity-75 { opacity: 0.75; }
.gt-opacity-0 { opacity: 0; }
/* Focus-visible outline for accessibility */
:focus-visible {
outline: 2px solid var(--gt-accent);
outline-offset: 3px;
border-radius: var(--gt-radius-sm);
}
/* Print */
@media print {
.gt-no-print { display: none !important; }
body { background: white !important; color: black !important; }
}
/* ═══════════════════════════════════════════════════════════════════
PHASE 4: DESIGN STANDARD EXTENSIONS
═══════════════════════════════════════════════════════════════════ */
/* ── 1. Image Aspect Ratios & Presentation ── */
.gt-aspect-16-9 {
aspect-ratio: 16 / 9;
width: 100%;
overflow: hidden;
position: relative;
}
.gt-aspect-4-3 {
aspect-ratio: 4 / 3;
width: 100%;
overflow: hidden;
position: relative;
}
.gt-aspect-square {
aspect-ratio: 1 / 1;
width: 100%;
overflow: hidden;
position: relative;
}
.gt-img-cover {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.gt-card:hover .gt-img-scale-hover,
.gt-listing-card:hover .gt-img-scale-hover {
transform: scale(1.06);
}
/* ── 2. Gifted Trip Luxury Presentation & Vouchers ── */
.gt-gift-voucher {
background: linear-gradient(135deg, #030335 0%, #030460 60%, #0c1885 100%);
border: 1px solid rgba(46, 167, 231, 0.3);
border-radius: var(--gt-radius-2xl);
padding: var(--gt-space-6);
color: var(--gt-white);
position: relative;
overflow: hidden;
box-shadow: 0 16px 40px rgba(3, 3, 53, 0.25);
}
.gt-gift-voucher::before {
content: '';
position: absolute;
top: -50px;
right: -50px;
width: 180px;
height: 180px;
background: radial-gradient(circle, rgba(46, 167, 231, 0.25) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.gt-gift-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, #2EA7E7 0%, #1a8ecf 100%);
color: #ffffff;
font-size: var(--gt-text-xs);
font-weight: var(--gt-font-bold);
padding: 4px 12px;
border-radius: var(--gt-radius-full);
text-transform: uppercase;
letter-spacing: 0.08em;
box-shadow: 0 4px 12px rgba(46, 167, 231, 0.3);
}
.gt-gift-code-box {
background: rgba(255, 255, 255, 0.1);
border: 1px dashed rgba(255, 255, 255, 0.3);
border-radius: var(--gt-radius-lg);
padding: 10px 16px;
font-family: var(--gt-font-mono);
font-weight: var(--gt-font-bold);
letter-spacing: 0.15em;
font-size: 1.1rem;
color: #2EA7E7;
display: flex;
align-items: center;
justify-content: space-between;
}
/* ── 3. Enhanced Form Validation Feedback ── */
.form-control, .form-select, .gt-input, .gt-select {
min-height: 46px;
}
.form-control:focus, .form-select:focus {
border-color: #2EA7E7 !important;
box-shadow: 0 0 0 4px rgba(46, 167, 231, 0.15) !important;
}
.is-invalid, .gt-input-error {
border-color: #EF4444 !important;
background-image: none !important;
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15) !important;
}
.invalid-feedback {
display: block;
color: #EF4444;
font-size: 0.82rem;
font-weight: 500;
margin-top: 4px;
}
.is-valid, .gt-input-success {
border-color: #10B981 !important;
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15) !important;
}
.valid-feedback {
display: block;
color: #10B981;
font-size: 0.82rem;
font-weight: 500;
margin-top: 4px;
}
/* ── 4. Mobile & Touch Friendly Buttons ── */
.btn, .gt-btn {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
@media (max-width: 575.98px) {
.btn-mobile-full, .gt-btn-mobile-full {
width: 100% !important;
margin-bottom: 8px;
}
}
/* ── 5. Standardized Card Hierarchy ── */
.gt-card-title {
font-size: 1.15rem;
font-weight: 700;
color: #030335;
line-height: 1.3;
margin-bottom: 4px;
}
.gt-card-subtitle {
font-size: 0.88rem;
color: #6B7280;
font-weight: 500;
}
.gt-card-price {
font-size: 1.35rem;
font-weight: 800;
color: #030460;
}
.gt-card-price span {
font-size: 0.82rem;
font-weight: 500;
color: #6B7280;
}
/* ═══════════════════════════════════════════════════════════════════
PHASE 5: MOBILE FIRST RESPONSIVENESS EXTENSIONS
═══════════════════════════════════════════════════════════════════ */
/* 1. Global Page Overflow & Touch Targets */
html, body {
max-width: 100% !important;
overflow-x: hidden !important;
}
@media (max-width: 767.98px) {
/* Prevent iOS Safari input zooming by using font-size 16px on inputs */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="date"],
select,
textarea,
.form-control,
.form-select,
.gt-input,
.gt-select {
font-size: 16px !important;
}
}
/* 2. Responsive Tables */
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 12px;
}
.table-responsive::-webkit-scrollbar {
height: 6px;
}
.table-responsive::-webkit-scrollbar-thumb {
background: #CBD5E1;
border-radius: 99px;
}
/* 3. Hero Scaling & Typography */
.gt-hero-title {
font-size: clamp(1.65rem, 5vw, 3rem);
line-height: 1.15;
word-break: break-word;
}
.gt-hero-subtitle {
font-size: clamp(0.88rem, 2.5vw, 1.15rem);
line-height: 1.5;
}
/* 4. Dashboard Mobile Sidebar & Drawer */
@media (max-width: 991.98px) {
.dash-wrapper {
flex-direction: column !important;
}
.dash-sidebar {
width: 100% !important;
min-height: auto !important;
position: relative !important;
border-right: none !important;
border-bottom: 1px solid var(--dash-border);
}
.dash-main {
padding: 16px 12px 80px 12px !important;
}
}
/* 5. Mobile Chart & Canvas Scaling */
.chart-container, .gt-chart-wrap {
position: relative;
width: 100%;
max-width: 100%;
overflow: hidden;
}
canvas {
max-width: 100% !important;
}