/* Google Fonts are loaded via a in (see includes/header.php,
admin/header.php, admin/login.php, admin/2fa.php) instead of @import here — @import inside
a CSS file blocks rendering until it resolves a second round-trip; a tag lets the
browser fetch fonts and this stylesheet in parallel. */
/* =============================================
CSS CUSTOM PROPERTIES — DESIGN TOKENS
============================================= */
:root {
/* Colors */
--color-black: #0a0a0a;
--color-dark: #111111;
--color-dark-2: #1a1a1a;
--color-dark-3: #222222;
--color-dark-card: #161616;
--color-gray: #2d2d2d;
--color-gray-2: #3d3d3d;
--color-gray-3: #555555;
--color-gray-light: #888888;
--color-white: #fafafa;
--color-white-2: #f0f0f0;
/* Gold palette */
--color-gold: #C9A84C;
--color-gold-light: #E8C97A;
--color-gold-dark: #A87D28;
--color-gold-pale: rgba(201, 168, 76, 0.12);
--color-gold-glow: rgba(201, 168, 76, 0.25);
/* Semantic */
--color-bg: var(--color-dark);
--color-bg-card: var(--color-dark-card);
--color-text: var(--color-white);
--color-text-muted: var(--color-gray-light);
--color-border: rgba(201, 168, 76, 0.2);
--color-border-subtle: rgba(255, 255, 255, 0.06);
/* Typography */
--font-serif: 'Playfair Display', Georgia, serif;
--font-sans: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
/* Spacing */
--section-py: clamp(60px, 8vw, 100px);
--container-max: 1280px;
--container-px: clamp(16px, 4vw, 48px);
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 32px;
/* Shadows */
--shadow-gold: 0 0 30px rgba(201, 168, 76, 0.15);
--shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
--shadow-hover: 0 8px 40px rgba(0, 0, 0, 0.6);
/* Transitions */
--transition-fast: 0.15s ease;
--transition-base: 0.25s ease;
--transition-slow: 0.4s ease;
--transition-bounce: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* =============================================
RESET & BASE
============================================= */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-sans);
background: var(--color-bg);
color: var(--color-text);
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#main-content {
width: 100%;
max-width: 100vw;
overflow-x: hidden;
}
img, video {
max-width: 100%;
display: block;
}
/* Fix Leaflet map image tiling conflict */
.leaflet-container img {
max-width: none !important;
display: inline !important;
}
a {
color: inherit;
text-decoration: none;
}
button {
cursor: pointer;
border: none;
background: none;
font-family: inherit;
}
input, textarea, select {
font-family: inherit;
}
ul, ol {
list-style: none;
}
/* =============================================
SCROLLBAR
============================================= */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: var(--color-dark-2);
}
::-webkit-scrollbar-thumb {
background: var(--color-gold);
border-radius: 3px;
}
/* =============================================
TYPOGRAPHY
============================================= */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-serif);
line-height: 1.2;
font-weight: 700;
}
.heading-xl {
font-size: clamp(2.5rem, 5vw, 4.5rem);
font-weight: 900;
letter-spacing: -0.02em;
}
.heading-lg {
font-size: clamp(1.8rem, 3.5vw, 3rem);
font-weight: 700;
}
.heading-md {
font-size: clamp(1.4rem, 2.5vw, 2rem);
font-weight: 600;
}
.heading-sm {
font-size: clamp(1.1rem, 2vw, 1.4rem);
font-weight: 600;
}
.text-gold {
color: var(--color-gold);
}
.text-muted {
color: var(--color-text-muted);
}
/* =============================================
LAYOUT
============================================= */
.container {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-px);
}
.section {
padding: var(--section-py) 0;
}
.section-header {
text-align: center;
margin-bottom: clamp(40px, 6vw, 72px);
}
.section-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-gold);
margin-bottom: 12px;
}
.section-label::before,
.section-label::after {
content: '';
display: block;
width: 30px;
height: 1px;
background: var(--color-gold);
}
.section-title {
font-family: var(--font-serif);
font-size: clamp(1.8rem, 3.5vw, 3rem);
font-weight: 700;
color: var(--color-white);
margin-bottom: 16px;
}
.section-subtitle {
font-size: clamp(0.95rem, 1.5vw, 1.1rem);
color: var(--color-text-muted);
max-width: 560px;
margin: 0 auto;
}
/* =============================================
BUTTONS
============================================= */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 28px;
border-radius: var(--radius-sm);
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.05em;
transition: all var(--transition-base);
cursor: pointer;
white-space: nowrap;
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.btn::after {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.08);
opacity: 0;
transition: opacity var(--transition-fast);
}
.btn:hover::after {
opacity: 1;
}
.btn-gold {
background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
color: var(--color-black);
border-color: var(--color-gold);
box-shadow: 0 4px 20px var(--color-gold-glow);
}
.btn-gold:hover {
transform: translateY(-2px);
box-shadow: 0 8px 32px var(--color-gold-glow);
}
.btn-outline {
background: transparent;
color: var(--color-white);
border-color: rgba(255, 255, 255, 0.3);
}
.btn-outline:hover {
border-color: var(--color-gold);
color: var(--color-gold);
transform: translateY(-2px);
}
.btn-whatsapp {
background: #25D366;
color: var(--color-white);
border-color: #25D366;
}
.btn-whatsapp:hover {
background: #1ebe5d;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3);
}
.btn-lg {
padding: 18px 36px;
font-size: 1rem;
}
.btn-sm {
padding: 10px 20px;
font-size: 0.8rem;
}
/* =============================================
CARDS
============================================= */
.card {
background: var(--color-bg-card);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-md);
overflow: hidden;
transition: all var(--transition-base);
}
.card:hover {
border-color: var(--color-border);
box-shadow: var(--shadow-gold);
transform: translateY(-4px);
}
.glass-card {
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-md);
}
/* =============================================
DIVIDERS & DECORATIONS
============================================= */
.gold-line {
width: 60px;
height: 2px;
background: linear-gradient(90deg, var(--color-gold), transparent);
margin: 0 auto;
}
.gold-dot {
width: 6px;
height: 6px;
background: var(--color-gold);
border-radius: 50%;
display: inline-block;
}
/* =============================================
NAVBAR
============================================= */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
transition: all var(--transition-base);
padding: 0;
}
.navbar-scrolled {
background: rgba(10, 10, 10, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--color-border-subtle);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}
.navbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 80px;
gap: 24px;
}
.navbar-logo {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.navbar-logo-icon {
width: 42px;
height: 42px;
background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
}
.navbar-logo-text {
display: flex;
flex-direction: column;
}
.navbar-logo-title {
font-family: var(--font-serif);
font-size: 1.1rem;
font-weight: 700;
color: var(--color-white);
line-height: 1.1;
}
.navbar-logo-sub {
font-size: 0.65rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-gold);
font-weight: 500;
}
.navbar-links {
display: flex;
align-items: center;
gap: 4px;
list-style: none;
}
.navbar-link {
display: block;
padding: 8px 14px;
font-size: 0.85rem;
font-weight: 500;
color: rgba(255,255,255,0.8);
border-radius: var(--radius-sm);
transition: all var(--transition-fast);
position: relative;
}
.navbar-link::after {
content: '';
position: absolute;
bottom: 4px;
left: 14px;
right: 14px;
height: 1px;
background: var(--color-gold);
transform: scaleX(0);
transition: transform var(--transition-fast);
}
.navbar-link:hover {
color: var(--color-white);
}
.navbar-link:hover::after {
transform: scaleX(1);
}
.navbar-actions {
display: flex;
align-items: center;
gap: 8px;
}
.lang-switcher {
position: relative;
}
.lang-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-radius: var(--radius-sm);
font-size: 0.8rem;
font-weight: 500;
color: var(--color-white);
background: rgba(255,255,255,0.06);
border: 1px solid var(--color-border-subtle);
cursor: pointer;
transition: all var(--transition-fast);
}
.lang-btn:hover {
background: rgba(255,255,255,0.1);
border-color: var(--color-gold);
}
.lang-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: var(--color-dark-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 8px;
min-width: 140px;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: all var(--transition-base);
z-index: 100;
box-shadow: var(--shadow-card);
}
.lang-dropdown.open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.lang-option {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: var(--radius-sm);
font-size: 0.85rem;
cursor: pointer;
transition: background var(--transition-fast);
}
.lang-option:hover {
background: var(--color-gold-pale);
color: var(--color-gold);
}
.lang-option.active {
color: var(--color-gold);
font-weight: 600;
}
.mobile-menu-btn {
display: none;
flex-direction: column;
gap: 5px;
padding: 8px;
cursor: pointer;
}
.mobile-menu-btn span {
display: block;
width: 24px;
height: 2px;
background: var(--color-white);
border-radius: 2px;
transition: all var(--transition-base);
}
.mobile-menu-btn.open span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.mobile-menu-btn.open span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.mobile-menu-btn.open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.mobile-nav {
position: fixed;
top: 80px;
left: 0;
right: 0;
background: rgba(10, 10, 10, 0.98);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--color-border-subtle);
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition: all var(--transition-base);
z-index: 999;
padding: 24px var(--container-px);
}
.mobile-nav.open {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.mobile-nav-links {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 24px;
}
.mobile-nav-link {
display: block;
padding: 12px 16px;
border-radius: var(--radius-sm);
font-size: 1rem;
font-weight: 500;
color: rgba(255,255,255,0.8);
transition: all var(--transition-fast);
border-left: 2px solid transparent;
}
.mobile-nav-link:hover {
background: var(--color-gold-pale);
border-left-color: var(--color-gold);
color: var(--color-gold);
padding-left: 20px;
}
/* =============================================
HERO SECTION
============================================= */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
background: var(--color-black);
}
.hero-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.hero-slideshow {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.hero-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transform: scale(1.05);
transition: opacity 1.8s ease-in-out, transform 6s ease-in-out;
z-index: 0;
}
.hero-slide.active {
opacity: 0.4;
transform: scale(1.1);
z-index: 1;
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(0, 0, 0, 0.85) 0%,
rgba(10, 10, 10, 0.6) 50%,
rgba(0, 0, 0, 0.8) 100%
);
pointer-events: none;
}
.hero-glow {
position: absolute;
bottom: -100px;
left: 50%;
transform: translateX(-50%);
width: min(600px, 100vw);
height: 300px;
background: radial-gradient(ellipse, rgba(201, 168, 76, 0.08) 0%, transparent 70%);
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 1;
max-width: 800px;
animation: heroFadeIn 1s ease forwards;
}
@keyframes heroFadeIn {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
background: var(--color-gold-pale);
border: 1px solid var(--color-border);
border-radius: 50px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-gold);
margin-bottom: 24px;
}
.hero-title {
font-family: var(--font-serif);
font-size: clamp(2.4rem, 5.5vw, 5rem);
font-weight: 900;
line-height: 1.1;
color: var(--color-white);
margin-bottom: 20px;
}
.hero-title .gold-text {
color: var(--color-gold);
display: block;
font-style: italic;
}
.hero-subtitle {
font-size: clamp(1rem, 1.8vw, 1.2rem);
color: rgba(255, 255, 255, 0.75);
margin-bottom: 40px;
line-height: 1.7;
max-width: 600px;
}
.hero-ctas {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.hero-stats {
display: flex;
align-items: center;
gap: 40px;
margin-top: 60px;
padding-top: 40px;
border-top: 1px solid var(--color-border-subtle);
}
.hero-stat {
text-align: center;
}
.hero-stat-number {
font-family: var(--font-serif);
font-size: 2rem;
font-weight: 700;
color: var(--color-gold);
line-height: 1;
}
.hero-stat-label {
font-size: 0.75rem;
color: rgba(255,255,255,0.5);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: 4px;
}
/* =============================================
SERVICES SECTION
============================================= */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 20px;
}
.service-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-md);
padding: 28px 24px;
display: flex;
flex-direction: column;
gap: 12px;
cursor: pointer;
transition: all var(--transition-base);
position: relative;
overflow: hidden;
text-decoration: none;
color: inherit;
}
.service-card::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, var(--color-gold), var(--color-gold-dark));
transform: scaleX(0);
transition: transform var(--transition-base);
}
.service-card:hover {
border-color: var(--color-border);
transform: translateY(-6px);
box-shadow: var(--shadow-gold);
}
.service-card:hover::before {
transform: scaleX(1);
}
.service-icon {
width: 52px;
height: 52px;
background: var(--color-gold-pale);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
transition: all var(--transition-base);
}
.service-icon svg {
color: var(--color-gold);
width: 24px;
height: 24px;
transition: color var(--transition-base);
}
.service-card:hover .service-icon {
background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
}
.service-card:hover .service-icon svg {
color: var(--color-black);
}
.service-name {
font-family: var(--font-serif);
font-size: 1rem;
font-weight: 600;
color: var(--color-white);
}
.service-desc {
font-size: 0.85rem;
color: var(--color-text-muted);
line-height: 1.5;
}
.service-arrow {
margin-top: auto;
color: var(--color-gold);
font-size: 1.2rem;
transition: transform var(--transition-base);
}
.service-card:hover .service-arrow {
transform: translateX(4px);
}
/* =============================================
FLEET SECTION
============================================= */
.fleet-bg {
background: linear-gradient(180deg, var(--color-dark) 0%, var(--color-black) 100%);
}
.fleet-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 24px;
}
.vehicle-card {
background: var(--color-bg-card);
border: 2px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-lg);
overflow: hidden;
transition: all var(--transition-base);
position: relative;
}
.vehicle-card:hover {
border-color: var(--color-gold);
box-shadow: var(--shadow-gold);
transform: translateY(-6px);
}
.vehicle-badge {
position: absolute;
top: 16px;
right: 16px;
z-index: 2;
padding: 4px 12px;
background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
border-radius: 50px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-black);
}
.vehicle-image-wrap {
position: relative;
height: 220px;
overflow: hidden;
background: linear-gradient(135deg, #0d0d0d, #1a1a1a);
}
.vehicle-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.vehicle-card:hover .vehicle-image {
transform: scale(1.05);
}
/* Premium Image Slider Arrow Buttons */
.vehicle-arrow-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
background: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.15);
color: var(--color-white);
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition-base);
opacity: 0;
}
.vehicle-card:hover .vehicle-arrow-btn {
opacity: 1;
}
.vehicle-arrow-btn:hover {
background: var(--color-gold);
color: var(--color-black);
border-color: var(--color-gold);
transform: translateY(-50%) scale(1.1);
}
.vehicle-arrow-btn.prev {
left: 12px;
}
.vehicle-arrow-btn.next {
right: 12px;
}
@media (max-width: 768px) {
.vehicle-arrow-btn {
opacity: 1;
width: 32px;
height: 32px;
}
}
/* Premium Image Slider Dots */
.vehicle-slider-dots {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
z-index: 5;
background: rgba(0, 0, 0, 0.65);
padding: 6px 14px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.v-dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: none;
cursor: pointer;
padding: 0;
background: rgba(255, 255, 255, 0.4);
transition: all var(--transition-base);
}
.v-dot.active {
background: var(--color-gold);
transform: scale(1.2);
width: 14px;
border-radius: 4px;
}
.vehicle-body {
padding: 28px;
}
.vehicle-name {
font-family: var(--font-serif);
font-size: 1.3rem;
font-weight: 700;
color: var(--color-white);
margin-bottom: 8px;
}
.vehicle-desc {
font-size: 0.85rem;
color: var(--color-text-muted);
margin-bottom: 20px;
line-height: 1.6;
}
.vehicle-specs {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.vehicle-spec {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.8rem;
color: var(--color-text-muted);
}
.vehicle-spec-icon {
color: var(--color-gold);
font-size: 1rem;
}
.vehicle-features {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 20px;
}
.vehicle-feature-tag {
padding: 4px 10px;
background: var(--color-gold-pale);
border: 1px solid var(--color-border);
border-radius: 50px;
font-size: 0.72rem;
color: var(--color-gold-light);
font-weight: 500;
}
.vehicle-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 20px;
border-top: 1px solid var(--color-border-subtle);
}
.vehicle-price {
display: flex;
flex-direction: column;
}
.vehicle-price-from {
font-size: 0.7rem;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.vehicle-price-amount {
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 700;
color: var(--color-gold);
}
/* =============================================
WHY US SECTION
============================================= */
.whyus-bg {
background: linear-gradient(135deg, var(--color-dark-2) 0%, var(--color-dark) 100%);
position: relative;
overflow: hidden;
}
.whyus-bg::before {
content: '';
position: absolute;
top: -200px;
right: -200px;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(201,168,76,0.04) 0%, transparent 70%);
pointer-events: none;
}
.whyus-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
}
.whyus-card {
padding: 32px;
background: rgba(255,255,255,0.025);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-md);
transition: all var(--transition-base);
position: relative;
overflow: hidden;
}
.whyus-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, var(--color-gold), transparent);
opacity: 0;
transition: opacity var(--transition-base);
}
.whyus-card:hover {
background: rgba(201, 168, 76, 0.04);
border-color: var(--color-border);
transform: translateY(-4px);
box-shadow: var(--shadow-gold);
}
.whyus-card:hover::after {
opacity: 1;
}
.whyus-icon {
width: 60px;
height: 60px;
background: var(--color-gold-pale);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
margin-bottom: 20px;
transition: all var(--transition-base);
}
.whyus-card:hover .whyus-icon {
background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
}
.whyus-title {
font-family: var(--font-serif);
font-size: 1.1rem;
font-weight: 600;
color: var(--color-white);
margin-bottom: 10px;
}
.whyus-desc {
font-size: 0.87rem;
color: var(--color-text-muted);
line-height: 1.6;
}
/* =============================================
TESTIMONIALS
============================================= */
.testimonials-bg {
background: var(--color-black);
overflow: hidden;
}
.testimonials-track-wrap {
overflow: hidden;
position: relative;
}
.testimonials-track {
display: flex;
gap: 24px;
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.testimonial-slide {
min-width: 380px;
flex-shrink: 0;
}
.testimonial-card {
background: var(--color-dark-card);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-lg);
padding: 32px;
height: 100%;
position: relative;
transition: all var(--transition-base);
}
.testimonial-card:hover {
border-color: var(--color-border);
box-shadow: var(--shadow-gold);
}
.testimonial-quote {
font-size: 3rem;
color: var(--color-gold);
line-height: 1;
margin-bottom: 16px;
font-family: Georgia, serif;
opacity: 0.6;
}
.testimonial-text {
font-size: 0.92rem;
color: rgba(255,255,255,0.8);
line-height: 1.7;
margin-bottom: 24px;
font-style: italic;
}
.testimonial-stars {
display: flex;
gap: 3px;
margin-bottom: 20px;
color: var(--color-gold);
font-size: 0.9rem;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 12px;
padding-top: 20px;
border-top: 1px solid var(--color-border-subtle);
}
.testimonial-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.1rem;
color: var(--color-black);
flex-shrink: 0;
}
.testimonial-name {
font-weight: 600;
font-size: 0.9rem;
color: var(--color-white);
}
.testimonial-country {
font-size: 0.78rem;
color: var(--color-gold);
}
.slider-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 40px;
}
.slider-btn {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--color-dark-card);
border: 1px solid var(--color-border-subtle);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition-base);
color: var(--color-white);
font-size: 1.1rem;
}
.slider-btn:hover {
background: var(--color-gold);
border-color: var(--color-gold);
color: var(--color-black);
}
.slider-dots {
display: flex;
gap: 8px;
}
.slider-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-gray);
cursor: pointer;
transition: all var(--transition-base);
}
.slider-dot.active {
background: var(--color-gold);
transform: scale(1.3);
}
/* =============================================
BOOKING FORM
============================================= */
.booking-section {
background: linear-gradient(180deg, var(--color-dark-2) 0%, var(--color-dark) 100%);
position: relative;
}
.booking-section::before {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C9A84C' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
}
.booking-layout {
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 60px;
align-items: start;
position: relative;
}
.booking-info {
position: sticky;
top: 100px;
}
.booking-info-title {
font-family: var(--font-serif);
font-size: clamp(1.8rem, 2.5vw, 2.4rem);
font-weight: 700;
color: var(--color-white);
margin-bottom: 20px;
}
.booking-info-list {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 32px;
}
.booking-info-item {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 0.9rem;
color: rgba(255,255,255,0.75);
}
.booking-info-icon {
width: 32px;
height: 32px;
background: var(--color-gold-pale);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-gold);
flex-shrink: 0;
font-size: 1rem;
}
.booking-contact {
padding: 24px;
background: var(--color-gold-pale);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
.booking-contact-title {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-gold);
margin-bottom: 16px;
font-weight: 600;
}
.booking-contact-phone {
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 700;
color: var(--color-white);
margin-bottom: 4px;
}
.booking-form-card {
background: var(--color-dark-card);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-xl);
padding: clamp(24px, 4vw, 48px);
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-group.full-width {
grid-column: 1 / -1;
}
.form-label {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.form-label .required {
color: var(--color-gold);
margin-left: 3px;
}
.form-input,
.form-select,
.form-textarea {
width: 100%;
padding: 12px 14px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-sm);
color: var(--color-white);
font-size: 1rem; /* minimum 16px to prevent iOS auto-zoom */
font-family: var(--font-sans);
transition: all var(--transition-fast);
outline: none;
appearance: none;
-webkit-appearance: none;
box-sizing: border-box;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
border-color: var(--color-gold);
background: rgba(201, 168, 76, 0.05);
box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.1);
}
.form-input::placeholder {
color: var(--color-gray-3);
}
.form-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C9A84C' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 40px;
cursor: pointer;
}
.form-select option {
background: var(--color-dark-2);
color: var(--color-white);
}
.form-textarea {
resize: vertical;
min-height: 100px;
}
.form-submit {
margin-top: 8px;
width: 100%;
padding: 18px;
font-size: 1rem;
}
/* =============================================
FAQ SECTION
============================================= */
.faq-bg {
background: var(--color-black);
}
.faq-list {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-item {
background: var(--color-dark-card);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-md);
overflow: hidden;
transition: border-color var(--transition-fast);
}
.faq-item.open {
border-color: var(--color-border);
}
.faq-question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 24px;
cursor: pointer;
transition: background var(--transition-fast);
width: 100%;
text-align: left;
}
.faq-question:hover {
background: var(--color-gold-pale);
}
.faq-question-text {
font-weight: 600;
font-size: 0.95rem;
color: var(--color-white);
line-height: 1.4;
}
.faq-icon {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--color-gold-pale);
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-gold);
font-size: 1rem;
transition: all var(--transition-base);
flex-shrink: 0;
}
.faq-item.open .faq-icon {
background: var(--color-gold);
color: var(--color-black);
transform: rotate(45deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease, padding 0.4s ease;
}
.faq-item.open .faq-answer {
max-height: 500px;
}
.faq-answer-inner {
padding: 0 24px 20px;
font-size: 0.9rem;
color: var(--color-text-muted);
line-height: 1.7;
border-top: 1px solid var(--color-border-subtle);
padding-top: 20px;
}
/* =============================================
REGIONS SECTION
============================================= */
.regions-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 20px;
}
.region-card {
position: relative;
background: var(--color-dark-card);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-md);
padding: 28px;
text-decoration: none;
color: inherit;
transition: all var(--transition-base);
overflow: hidden;
}
.region-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 60px;
background: radial-gradient(circle at top right, rgba(201,168,76,0.1), transparent 70%);
transition: all var(--transition-base);
}
.region-card:hover {
border-color: var(--color-border);
transform: translateY(-4px);
box-shadow: var(--shadow-gold);
}
.region-card:hover::before {
width: 120px;
height: 120px;
}
.region-icon {
font-size: 2rem;
margin-bottom: 16px;
}
.region-name {
font-family: var(--font-serif);
font-size: 1.1rem;
font-weight: 600;
color: var(--color-white);
margin-bottom: 8px;
}
.region-desc {
font-size: 0.82rem;
color: var(--color-text-muted);
margin-bottom: 16px;
line-height: 1.5;
}
.region-meta {
display: flex;
gap: 16px;
}
.region-meta-item {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.77rem;
color: var(--color-gold);
font-weight: 500;
}
/* =============================================
BLOG SECTION
============================================= */
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 24px;
}
.blog-card {
background: var(--color-dark-card);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-lg);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: all var(--transition-base);
}
.blog-card:hover {
border-color: var(--color-border);
transform: translateY(-4px);
box-shadow: var(--shadow-gold);
}
.blog-image {
height: 200px;
background: linear-gradient(135deg, var(--color-dark-2), var(--color-gray));
position: relative;
overflow: hidden;
}
.blog-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.blog-card:hover .blog-image img {
transform: scale(1.06);
}
.blog-category {
position: absolute;
bottom: 12px;
left: 12px;
padding: 4px 10px;
background: var(--color-gold);
border-radius: 50px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-black);
}
.blog-body {
padding: 24px;
}
.blog-date {
font-size: 0.75rem;
color: var(--color-text-muted);
margin-bottom: 10px;
}
.blog-title {
font-family: var(--font-serif);
font-size: 1.1rem;
font-weight: 600;
color: var(--color-white);
margin-bottom: 12px;
line-height: 1.4;
}
.blog-excerpt {
font-size: 0.85rem;
color: var(--color-text-muted);
line-height: 1.6;
margin-bottom: 20px;
}
.blog-read-more {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.82rem;
font-weight: 600;
color: var(--color-gold);
transition: gap var(--transition-fast);
}
.blog-card:hover .blog-read-more {
gap: 10px;
}
/* =============================================
FOOTER
============================================= */
.footer {
background: var(--color-black);
border-top: 1px solid var(--color-border-subtle);
padding: 60px 0 0;
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
gap: 48px;
padding-bottom: 48px;
}
.footer-brand {
max-width: 280px;
}
.footer-logo {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.footer-tagline {
font-size: 0.88rem;
color: var(--color-text-muted);
line-height: 1.6;
margin-bottom: 24px;
}
.footer-social {
display: flex;
gap: 10px;
}
.social-link {
width: 38px;
height: 38px;
border-radius: var(--radius-sm);
background: rgba(255,255,255,0.05);
border: 1px solid var(--color-border-subtle);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
color: var(--color-text-muted);
transition: all var(--transition-base);
}
.social-link:hover {
background: var(--color-gold);
border-color: var(--color-gold);
color: var(--color-black);
transform: translateY(-2px);
}
.footer-section-title {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--color-gold);
margin-bottom: 20px;
}
.footer-links {
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-link {
font-size: 0.87rem;
color: var(--color-text-muted);
transition: all var(--transition-fast);
display: flex;
align-items: center;
gap: 6px;
}
.footer-link::before {
content: '›';
color: var(--color-gold);
font-size: 1rem;
line-height: 1;
}
.footer-link:hover {
color: var(--color-white);
transform: translateX(4px);
}
.footer-contact-item {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.87rem;
color: var(--color-text-muted);
margin-bottom: 12px;
}
.footer-contact-icon {
color: var(--color-gold);
font-size: 1rem;
flex-shrink: 0;
margin-top: 1px;
}
.footer-bottom {
border-top: 1px solid var(--color-border-subtle);
padding: 20px 0;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
.footer-bottom-text {
font-size: 0.8rem;
color: var(--color-text-muted);
}
.footer-bottom-links {
display: flex;
gap: 20px;
}
.footer-bottom-link {
font-size: 0.8rem;
color: var(--color-text-muted);
transition: color var(--transition-fast);
}
.footer-bottom-link:hover {
color: var(--color-gold);
}
/* =============================================
WHATSAPP FLOAT BUTTON
============================================= */
.whatsapp-float {
position: fixed;
bottom: 28px;
right: 28px;
z-index: 999;
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.7rem;
box-shadow: 0 8px 30px rgba(37, 211, 102, 0.4);
cursor: pointer;
transition: all var(--transition-bounce);
text-decoration: none;
color: white;
animation: waPulse 2.5s infinite;
}
@keyframes waPulse {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
}
70% {
transform: scale(1.05);
box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
}
}
.whatsapp-float:hover {
transform: scale(1.1) rotate(8deg);
box-shadow: 0 12px 35px rgba(37, 211, 102, 0.6);
background: linear-gradient(135deg, #28e06d 0%, #149c8d 100%);
}
.whatsapp-float-tooltip {
position: absolute;
right: 70px;
background: var(--color-dark-2);
color: var(--color-white);
padding: 8px 14px;
border-radius: var(--radius-sm);
font-size: 0.82rem;
font-weight: 500;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all var(--transition-base);
border: 1px solid var(--color-border-subtle);
box-shadow: var(--shadow-card);
}
.whatsapp-float:hover .whatsapp-float-tooltip {
opacity: 1;
visibility: visible;
}
/* =============================================
CURRENCY SWITCHER
============================================= */
.currency-switcher {
display: flex;
gap: 2px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-sm);
padding: 3px;
}
.currency-btn {
padding: 5px 10px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
color: var(--color-text-muted);
cursor: pointer;
transition: all var(--transition-fast);
}
.currency-btn.active {
background: var(--color-gold);
color: var(--color-black);
}
/* =============================================
PAGE TRANSITIONS & ANIMATIONS
============================================= */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideInLeft {
from { opacity: 0; transform: translateX(-30px); }
to { opacity: 1; transform: translateX(0); }
}
.animate-fade-in { animation: fadeIn 0.6s ease forwards; }
.animate-fade-up { animation: fadeInUp 0.6s ease forwards; }
.animate-slide-left { animation: slideInLeft 0.6s ease forwards; }
/* Staggered animations */
.stagger > * { opacity: 0; animation: fadeInUp 0.6s ease forwards; }
.stagger > *:nth-child(1) { animation-delay: 0.1s; }
.stagger > *:nth-child(2) { animation-delay: 0.2s; }
.stagger > *:nth-child(3) { animation-delay: 0.3s; }
.stagger > *:nth-child(4) { animation-delay: 0.4s; }
.stagger > *:nth-child(5) { animation-delay: 0.5s; }
.stagger > *:nth-child(6) { animation-delay: 0.6s; }
/* =============================================
REGION PAGE / BLOG PAGE
============================================= */
.page-hero {
padding: 140px 0 80px;
background: linear-gradient(180deg, var(--color-black) 0%, var(--color-dark-2) 100%);
position: relative;
overflow: hidden;
}
.page-hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at top center, rgba(201,168,76,0.06) 0%, transparent 60%);
}
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.8rem;
color: var(--color-text-muted);
margin-bottom: 24px;
}
.breadcrumb a {
color: var(--color-gold);
transition: opacity var(--transition-fast);
}
.breadcrumb a:hover { opacity: 0.7; }
.breadcrumb-sep {
color: var(--color-gray-3);
}
/* =============================================
ADMIN PANEL — FULLY RESPONSIVE
============================================= */
.admin-layout {
display: flex;
min-height: 100vh;
background: #0d0d0d;
}
.admin-sidebar {
width: 260px;
background: #111111;
border-right: 1px solid rgba(255,255,255,0.06);
display: flex;
flex-direction: column;
flex-shrink: 0;
position: fixed;
top: 0;
left: 0;
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
z-index: 1000;
transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}
/* Sidebar overlay backdrop */
.admin-sidebar-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.7);
z-index: 999;
backdrop-filter: blur(2px);
}
.admin-sidebar-header {
padding: 24px 20px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.admin-sidebar-logo {
display: flex;
align-items: center;
gap: 10px;
}
.admin-sidebar-logo-icon {
width: 36px;
height: 36px;
background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
}
.admin-sidebar-logo-text {
font-family: var(--font-serif);
font-size: 0.95rem;
font-weight: 700;
color: var(--color-white);
}
.admin-sidebar-logo-sub {
font-size: 0.6rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-gold);
}
.admin-nav {
flex: 1;
padding: 16px 12px;
display: flex;
flex-direction: column;
gap: 2px;
}
.admin-nav-section-label {
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--color-gray-3);
padding: 12px 8px 6px;
margin-top: 8px;
}
.admin-nav-link {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: var(--radius-sm);
font-size: 0.85rem;
color: rgba(255,255,255,0.6);
transition: all var(--transition-fast);
text-decoration: none;
}
.admin-nav-link:hover {
background: rgba(255,255,255,0.05);
color: var(--color-white);
}
.admin-nav-link.active {
background: var(--color-gold-pale);
color: var(--color-gold);
border-left: 2px solid var(--color-gold);
padding-left: 10px;
}
.admin-nav-icon {
font-size: 1rem;
width: 20px;
text-align: center;
flex-shrink: 0;
}
.admin-nav-badge {
margin-left: auto;
padding: 2px 7px;
background: var(--color-gold);
border-radius: 10px;
font-size: 0.65rem;
font-weight: 700;
color: var(--color-black);
}
.admin-main {
flex: 1;
margin-left: 260px;
display: flex;
flex-direction: column;
min-height: 100vh;
min-width: 0;
}
.admin-topbar {
min-height: 64px;
background: #111111;
border-bottom: 1px solid rgba(255,255,255,0.06);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
position: sticky;
top: 0;
z-index: 50;
gap: 12px;
flex-wrap: wrap;
}
.admin-topbar-title {
font-family: var(--font-serif);
font-size: 1.1rem;
font-weight: 600;
color: var(--color-white);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
/* Topbar left cluster */
.admin-topbar-left {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
flex: 1;
}
/* Topbar icon buttons */
.admin-topbar-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
border-radius: 8px;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.04);
color: var(--color-text-muted);
text-decoration: none;
transition: all var(--transition-fast);
white-space: nowrap;
position: relative;
flex-shrink: 0;
}
.admin-topbar-btn:hover {
background: rgba(255,255,255,0.08);
color: var(--color-white);
}
.admin-topbar-btn-label {
display: inline-block;
}
.admin-audio-btn {
background: rgba(239,68,68,0.08);
border-color: rgba(239,68,68,0.35);
color: #ef4444;
}
.admin-notif-btn {
width: 36px;
height: 36px;
padding: 0;
justify-content: center;
border-radius: 50%;
}
.admin-notif-badge {
position: absolute;
top: -4px;
right: -4px;
background: #ef4444;
color: white;
border-radius: 50%;
font-size: 0.6rem;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
border: 1.5px solid #0d0d0d;
}
/* User badge */
.admin-user-badge {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: var(--radius-sm);
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
font-size: 0.8rem;
color: var(--color-text-muted);
cursor: pointer;
white-space: nowrap;
text-decoration: none;
transition: all var(--transition-fast);
flex-shrink: 0;
}
.admin-user-badge:hover {
background: rgba(255,255,255,0.07);
color: var(--color-white);
}
.admin-user-avatar {
width: 28px;
height: 28px;
background: rgba(201,168,76,0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-gold);
flex-shrink: 0;
}
.admin-user-info {
display: flex;
flex-direction: column;
gap: 1px;
text-align: left;
}
.admin-user-info strong {
display: block;
font-size: 0.82rem;
line-height: 1.2;
color: var(--color-white);
}
.admin-user-role {
display: block;
font-size: 0.65rem;
color: var(--color-gold);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.admin-logout-text {
font-size: 0.7rem;
color: #f87171;
margin-left: 2px;
}
/* Sidebar footer */
.admin-sidebar-footer {
padding: 12px;
border-top: 1px solid rgba(255,255,255,0.06);
margin-top: auto;
}
/* Sidebar toggle — CSS controlled, not inline */
.admin-sidebar-toggle {
background: none;
border: none;
color: var(--color-text-muted);
cursor: pointer;
padding: 6px;
border-radius: 6px;
display: none;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all var(--transition-fast);
}
.admin-sidebar-toggle:hover {
background: rgba(255,255,255,0.06);
color: var(--color-white);
}
.admin-topbar-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
flex-wrap: nowrap;
}
.admin-content {
flex: 1;
padding: clamp(14px, 3vw, 28px);
overflow-x: hidden;
}
.admin-page-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 20px;
gap: 12px;
flex-wrap: wrap;
}
.admin-page-header-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.admin-page-title {
font-family: var(--font-serif);
font-size: clamp(1.2rem, 3vw, 1.6rem);
font-weight: 700;
color: var(--color-white);
line-height: 1.2;
}
/* Admin Stats */
.admin-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
margin-bottom: 20px;
}
.admin-stat-card {
background: #161616;
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--radius-md);
padding: 16px 18px;
display: flex;
align-items: flex-start;
gap: 12px;
}
.admin-stat-icon {
width: 44px;
height: 44px;
border-radius: var(--radius-sm);
background: var(--color-gold-pale);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
color: var(--color-gold);
flex-shrink: 0;
}
.admin-stat-label {
font-size: 0.75rem;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 4px;
}
.admin-stat-value {
font-family: var(--font-serif);
font-size: 1.7rem;
font-weight: 700;
color: var(--color-white);
line-height: 1;
}
.admin-stat-change {
font-size: 0.75rem;
color: #4ade80;
margin-top: 4px;
}
/* Admin Table */
.admin-table-wrap {
background: #161616;
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--radius-md);
overflow: hidden;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Mobile card-style table hint */
.admin-table-wrap::before {
content: '';
display: none;
}
.admin-table {
width: 100%;
border-collapse: collapse;
min-width: 600px;
}
.admin-table th {
padding: 10px 14px;
text-align: left;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-muted);
background: rgba(255,255,255,0.02);
border-bottom: 1px solid rgba(255,255,255,0.06);
white-space: nowrap;
}
.admin-table td {
padding: 12px 14px;
font-size: 0.84rem;
color: var(--color-text-muted);
border-bottom: 1px solid rgba(255,255,255,0.04);
vertical-align: middle;
}
.admin-table tbody tr:last-child td {
border-bottom: none;
}
.admin-table tbody tr:hover td {
background: rgba(255,255,255,0.02);
color: var(--color-white);
}
.admin-table-actions {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.admin-action-btn {
padding: 5px 9px;
border-radius: 6px;
font-size: 0.72rem;
font-weight: 600;
cursor: pointer;
transition: all var(--transition-fast);
border: 1px solid transparent;
white-space: nowrap;
}
.admin-action-edit {
background: rgba(201,168,76,0.1);
border-color: rgba(201,168,76,0.2);
color: var(--color-gold);
}
.admin-action-edit:hover {
background: var(--color-gold);
color: var(--color-black);
}
.admin-action-delete {
background: rgba(239,68,68,0.1);
border-color: rgba(239,68,68,0.2);
color: #f87171;
}
.admin-action-delete:hover {
background: #ef4444;
color: var(--color-white);
}
/* Admin form */
.admin-form-card {
background: #161616;
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--radius-md);
padding: clamp(16px, 3vw, 28px);
}
.admin-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.admin-form-grid .form-group.full-width {
grid-column: 1 / -1;
}
.admin-form-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.06);
}
/* Admin filter bar */
.admin-filter-bar {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: flex-end;
margin-bottom: 16px;
background: #161616;
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--radius-md);
padding: 16px;
}
.admin-filter-bar .form-group {
flex: 1;
min-width: 120px;
}
/* Admin mobile section cards */
.admin-mobile-card {
display: none;
}
/* Status badges */
.status-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: 50px;
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.status-pending {
background: rgba(251,191,36,0.15);
color: #fbbf24;
}
.status-confirmed {
background: rgba(74,222,128,0.15);
color: #4ade80;
}
.status-completed {
background: rgba(96,165,250,0.15);
color: #60a5fa;
}
.status-cancelled {
background: rgba(248,113,113,0.15);
color: #f87171;
}
/* =============================================
RESPONSIVE
============================================= */
@media (max-width: 1024px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.booking-layout {
grid-template-columns: 1fr;
gap: 40px;
}
.booking-info {
position: static;
}
}
@media (max-width: 991px) {
/* --- ADMIN SIDEBAR SLIDE-OVER --- */
.admin-layout {
display: block !important;
}
.admin-sidebar {
left: -280px;
width: 280px;
z-index: 1000;
box-shadow: none;
}
.admin-sidebar.open {
left: 0;
box-shadow: 8px 0 40px rgba(0, 0, 0, 0.8);
}
.admin-sidebar-overlay.active {
display: block;
}
.admin-main {
margin-left: 0 !important;
width: 100% !important;
max-width: 100vw !important;
overflow-x: hidden !important;
}
.admin-sidebar-toggle {
display: flex !important;
}
/* --- ADMIN TOPBAR COMPACT --- */
.admin-topbar {
padding: 0 12px;
min-height: 56px;
gap: 8px;
}
.admin-topbar-title {
font-size: 0.95rem;
max-width: 160px;
}
/* Hide less important topbar items on tablet */
.admin-topbar-actions .system-status {
display: none;
}
/* --- ADMIN CONTENT --- */
.admin-content {
padding: 14px;
}
/* --- ADMIN PAGE HEADER --- */
.admin-page-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
margin-bottom: 14px;
}
.admin-page-title {
font-size: 1.3rem;
}
/* --- ADMIN STATS GRID --- */
.admin-stats-grid {
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 14px;
}
.admin-stat-card {
padding: 14px;
gap: 10px;
}
.admin-stat-icon {
width: 36px;
height: 36px;
font-size: 1rem;
}
.admin-stat-value {
font-size: 1.4rem;
}
/* --- ADMIN FORMS --- */
.admin-form-grid {
grid-template-columns: 1fr;
}
.admin-form-card {
padding: 16px;
}
.admin-form-container {
padding: 16px !important;
max-width: 100% !important;
}
/* --- ADMIN TABLE --- */
.admin-table-wrap {
border-radius: 8px;
margin: 0 0 14px 0;
}
.admin-table {
min-width: 550px;
font-size: 0.8rem;
}
.admin-table th,
.admin-table td {
padding: 9px 10px;
font-size: 0.78rem;
}
/* --- ADMIN USER BADGE COMPACT --- */
.admin-user-info,
.admin-logout-text {
display: none;
}
/* Audio toggle: icon only */
.admin-topbar-btn-label {
display: none;
}
}
@media (max-width: 768px) {
.navbar-links { display: none; }
.mobile-menu-btn { display: flex; }
.hero-stats {
gap: 24px;
flex-wrap: wrap;
}
.hero-ctas {
flex-direction: column;
align-items: flex-start;
}
.services-grid {
grid-template-columns: 1fr 1fr;
}
.fleet-grid {
grid-template-columns: 1fr;
}
.whyus-grid {
grid-template-columns: 1fr;
}
.testimonial-slide {
min-width: calc(100vw - 48px);
}
.form-grid {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 28px;
}
.footer-bottom {
flex-direction: column;
text-align: center;
}
.regions-grid {
grid-template-columns: 1fr 1fr;
}
.blog-grid {
grid-template-columns: 1fr;
}
/* --- ADMIN 768px --- */
.admin-topbar-title {
display: none !important;
}
.admin-action-btns {
flex-direction: column !important;
gap: 4px !important;
}
.admin-stats-grid {
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.admin-stat-card {
padding: 12px;
flex-direction: column;
gap: 8px;
}
.admin-stat-icon {
width: 32px;
height: 32px;
font-size: 0.9rem;
}
.admin-stat-value {
font-size: 1.3rem;
}
.admin-stat-label {
font-size: 0.68rem;
}
.admin-form-grid {
grid-template-columns: 1fr;
}
.admin-form-actions {
flex-direction: column;
}
.admin-form-actions .btn {
width: 100%;
justify-content: center;
text-align: center;
}
/* Admin filter bar full width items */
.admin-filter-bar {
padding: 12px;
gap: 8px;
}
.admin-filter-bar .form-group {
min-width: calc(50% - 8px);
flex: 1 1 calc(50% - 8px);
}
.admin-filter-bar .btn {
flex: 1;
}
/* Table horizontal scroll hint */
.admin-table-wrap {
position: relative;
}
}
@media (max-width: 480px) {
#navbar-book-btn {
display: none !important;
}
.services-grid { grid-template-columns: 1fr; }
.regions-grid { grid-template-columns: 1fr; }
.hero-stats { display: none; }
/* Testimonial cards were overflowing on narrow phones (iPhone SE etc.)
because .testimonial-slide had a fixed min-width: 380px with no override here. */
.testimonial-slide {
min-width: calc(100vw - 48px);
}
/* --- ADMIN 480px (Phone) --- */
.admin-topbar {
min-height: 52px;
padding: 0 10px;
}
.admin-topbar-title {
font-size: 0.85rem;
max-width: 120px;
}
.admin-content {
padding: 10px;
}
.admin-stats-grid {
grid-template-columns: 1fr;
gap: 6px;
}
.admin-stat-card {
padding: 10px;
gap: 6px;
border-radius: 8px;
}
.admin-stat-icon {
width: 28px;
height: 28px;
font-size: 0.8rem;
border-radius: 6px;
}
.admin-stat-value {
font-size: 1.1rem;
}
.admin-stat-label {
font-size: 0.62rem;
}
.admin-page-title {
font-size: 1.1rem;
}
.admin-sidebar-footer a span:last-child,
.admin-sidebar-footer svg:last-child { display: none; }
/* Phone filter bar: stack everything */
.admin-filter-bar .form-group {
min-width: 100%;
flex: 1 1 100%;
}
/* Admin table on phone: very compact */
.admin-table th,
.admin-table td {
padding: 8px 8px;
font-size: 0.74rem;
}
.admin-table {
min-width: 480px;
}
/* Sidebar slightly narrower on small phones */
.admin-sidebar {
width: 260px;
left: -260px;
}
/* Nav links compact */
.admin-nav-link {
padding: 10px 10px;
font-size: 0.9rem;
}
.admin-nav-icon {
font-size: 1.1rem;
width: 22px;
}
/* Form buttons full width */
.admin-form-actions {
flex-direction: column;
}
.admin-action-btn {
padding: 7px 10px;
font-size: 0.76rem;
}
/* Audio button compact */
#admin-audio-toggle {
padding: 5px 10px !important;
font-size: 0.72rem !important;
}
/* Topbar user badge minimal */
.admin-user-badge {
padding: 5px 8px;
font-size: 0.74rem;
}
}
/* =============================================
UTILITIES
============================================= */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.w-full { width: 100%; }
/* Notification */
.toast {
position: fixed;
bottom: 28px;
left: 50%;
transform: translateX(-50%) translateY(20px);
background: var(--color-dark-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 14px 24px;
font-size: 0.9rem;
color: var(--color-white);
box-shadow: var(--shadow-card);
z-index: 9999;
opacity: 0;
transition: all var(--transition-base);
pointer-events: none;
max-width: 380px;
text-align: center;
}
.toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.toast.success {
border-color: rgba(74,222,128,0.3);
background: rgba(74,222,128,0.1);
}
.toast.error {
border-color: rgba(248,113,113,0.3);
background: rgba(248,113,113,0.1);
}
/* =============================================
ADMIN PANEL — MOBILE EXTRA POLISH
============================================= */
/* Touch-friendly minimum tap targets */
.admin-nav-link {
min-height: 44px;
}
.admin-action-btn,
.btn-sm {
min-height: 36px;
}
/* Smooth sidebar scroll on mobile */
.admin-sidebar {
-webkit-overflow-scrolling: touch;
}
/* Admin table: horizontal scroll visual hint */
@supports (overflow: auto) {
.admin-table-wrap {
scrollbar-width: thin;
scrollbar-color: rgba(201,168,76,0.3) transparent;
}
.admin-table-wrap::-webkit-scrollbar {
height: 4px;
}
.admin-table-wrap::-webkit-scrollbar-thumb {
background: rgba(201,168,76,0.3);
border-radius: 2px;
}
.admin-table-wrap::-webkit-scrollbar-track {
background: transparent;
}
}
/* Admin page content max width on very wide screens */
.admin-content {
max-width: 1400px;
}
/* Forms in admin: touch-friendly */
@media (max-width: 991px) {
/* Larger touch targets for form elements */
.form-input,
.form-select,
.form-textarea {
padding: 13px 14px;
font-size: 1rem; /* Prevents iOS zoom */
}
/* Larger touch targets for buttons */
.btn-sm {
padding: 10px 16px;
min-height: 40px;
}
/* Admin tables: show scroll hint on mobile */
.admin-table-wrap::after {
content: '';
display: block;
height: 0;
}
/* Stat cards: make numbers readable */
.admin-stat-value {
line-height: 1.1;
}
/* Toast notifications: full width on mobile */
#admin-toast-container {
left: 12px !important;
right: 12px !important;
bottom: 12px !important;
width: auto !important;
}
#admin-toast-container > div {
max-width: 100% !important;
width: 100% !important;
}
/* Accounting and form containers */
.admin-form-container {
max-width: 100% !important;
margin: 0 0 16px 0 !important;
}
}
@media (max-width: 480px) {
/* Very small phone: even more compact */
.form-input,
.form-select,
.form-textarea {
padding: 12px 12px;
}
/* Sidebar header: tighter */
.admin-sidebar-header {
padding: 16px 14px;
}
.admin-sidebar-logo-text {
font-size: 0.88rem;
}
/* Status badges: slightly smaller */
.status-badge {
font-size: 0.65rem;
padding: 2px 8px;
}
/* Admin topbar: make room */
.admin-topbar {
flex-wrap: nowrap;
overflow: hidden;
}
/* Quick actions bars */
.quick-actions-bar {
flex-direction: column;
align-items: flex-start !important;
}
/* Table actions: stack on tiny screen */
.admin-table-actions {
flex-direction: column;
gap: 3px;
}
.admin-action-btn {
width: 100%;
text-align: center;
justify-content: center;
}
}
/* Hard Overrides for Admin Mobile Viewport Cut-off Prevention */
@media (max-width: 991px) {
html, body {
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
.admin-layout {
display: block !important;
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
}
.admin-main {
margin-left: 0 !important;
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
position: relative;
}
.admin-topbar {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
box-sizing: border-box !important;
padding: 0 10px !important;
}
.admin-content {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
padding: 12px !important;
}
.admin-form-container {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
padding: 16px !important;
}
/* Guarantee elements inside form don't stretch */
.form-grid, .form-group {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Force responsive table wraps */
.admin-table-wrap {
width: 100% !important;
max-width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
box-sizing: border-box !important;
}
}
/* Why Us Intro Card */
.whyus-intro-card {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 32px;
align-items: stretch;
background: var(--color-dark-card);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius-lg);
padding: clamp(20px, 4vw, 36px);
margin-bottom: 40px;
}
@media (max-width: 768px) {
.whyus-intro-card {
grid-template-columns: 1fr;
gap: 24px;
padding: 20px;
}
}
/* ============================================
MAP LOCATION SELECTOR STYLES
============================================ */
.map-location-wrapper {
position: relative;
}
.map-input-row {
display: flex;
gap: 8px;
align-items: stretch;
}
.map-input-row .form-input {
flex: 1;
min-width: 0;
}
.btn-map-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
min-width: 48px;
background: rgba(201, 168, 76, 0.1);
border: 1px solid rgba(201, 168, 76, 0.25);
border-radius: var(--radius-md, 10px);
color: var(--color-gold, #C9A84C);
cursor: pointer;
transition: all 0.3s ease;
padding: 0;
}
.btn-map-toggle:hover {
background: rgba(201, 168, 76, 0.2);
border-color: rgba(201, 168, 76, 0.5);
transform: scale(1.05);
box-shadow: 0 0 20px rgba(201, 168, 76, 0.15);
}
.btn-map-toggle:active {
transform: scale(0.95);
}
.map-container {
margin-top: 12px;
border-radius: var(--radius-lg, 16px);
overflow: hidden;
border: 1px solid rgba(201, 168, 76, 0.2);
background: #0e0e0e;
position: relative;
animation: mapFadeIn 0.4s ease;
}
@keyframes mapFadeIn {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.leaflet-map {
height: 350px;
min-height: 350px;
width: 100%;
background: #1a1a1a;
z-index: 1;
display: block;
}
/* Override Leaflet controls for dark theme */
.leaflet-control-zoom a {
background: #1a1a1a !important;
color: #C9A84C !important;
border-color: rgba(201, 168, 76, 0.2) !important;
width: 32px !important;
height: 32px !important;
line-height: 32px !important;
font-size: 16px !important;
}
.leaflet-control-zoom a:hover {
background: #252525 !important;
color: #e6c85a !important;
}
.leaflet-control-attribution {
background: rgba(10, 10, 10, 0.85) !important;
color: rgba(255, 255, 255, 0.3) !important;
font-size: 9px !important;
padding: 2px 6px !important;
}
.leaflet-control-attribution a {
color: rgba(201, 168, 76, 0.5) !important;
}
/* Custom marker */
.custom-map-marker {
background: transparent !important;
border: none !important;
}
.map-marker-pin {
animation: markerDrop 0.4s ease;
filter: drop-shadow(0 4px 8px rgba(201, 168, 76, 0.3));
}
@keyframes markerDrop {
from {
transform: translateY(-30px);
opacity: 0;
}
50% {
transform: translateY(4px);
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Map search bar */
.map-search-bar {
padding: 10px 12px;
background: #0e0e0e;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.map-search-input {
width: 100%;
padding: 10px 14px;
background: #1a1a1a;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
color: #fafafa;
font-size: 0.88rem;
font-family: inherit;
outline: none;
transition: all 0.25s;
box-sizing: border-box;
}
.map-search-input:focus {
border-color: rgba(201, 168, 76, 0.4);
box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.08);
background: #1e1e1e;
}
.map-search-input::placeholder {
color: rgba(255, 255, 255, 0.3);
}
/* Map search results dropdown */
.map-search-results {
max-height: 280px;
overflow-y: auto;
background: #111;
}
.map-search-results::-webkit-scrollbar {
width: 4px;
}
.map-search-results::-webkit-scrollbar-track {
background: transparent;
}
.map-search-results::-webkit-scrollbar-thumb {
background: rgba(201, 168, 76, 0.3);
border-radius: 2px;
}
.map-search-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
cursor: pointer;
transition: all 0.2s;
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.map-search-item:hover {
background: rgba(201, 168, 76, 0.06);
}
.map-search-item:active {
background: rgba(201, 168, 76, 0.12);
}
.map-result-icon {
font-size: 1.2rem;
flex-shrink: 0;
margin-top: 2px;
}
.map-result-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.map-result-name {
color: #fafafa;
font-weight: 600;
font-size: 0.88rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.map-result-addr {
color: rgba(255, 255, 255, 0.4);
font-size: 0.75rem;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.map-search-loading,
.map-search-empty {
padding: 16px;
text-align: center;
color: rgba(255, 255, 255, 0.35);
font-size: 0.85rem;
}
/* Selected info bar */
.map-selected-info {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: rgba(201, 168, 76, 0.06);
border-top: 1px solid rgba(201, 168, 76, 0.12);
animation: fadeIn 0.3s ease;
}
.map-selected-icon {
font-size: 1rem;
flex-shrink: 0;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Map clear/reset button */
.map-clear-btn {
margin-left: auto;
flex-shrink: 0;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
color: rgba(255,255,255,0.5);
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
cursor: pointer;
transition: all 0.2s;
line-height: 1;
padding: 0;
}
.map-clear-btn:hover {
background: rgba(255,60,60,0.15);
border-color: rgba(255,60,60,0.3);
color: #ff6b6b;
}
.map-selected-text {
color: var(--color-gold, #C9A84C);
font-size: 0.82rem;
font-weight: 500;
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Responsive map */
@media (max-width: 768px) {
.leaflet-map {
height: 260px;
}
.btn-map-toggle {
width: 44px;
min-width: 44px;
}
.map-search-input {
font-size: 16px; /* Prevent iOS zoom */
}
}
@media (max-width: 480px) {
.leaflet-map {
height: 220px;
}
}