/*
Theme Name: Triply Pro Horizon
Theme URI: https://triplypro.com
Author: Triply Pro
Author URI: https://triplypro.com
Description: Premium travel booking WordPress theme with modern design system
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: triplypro-horizon
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
	/* Brand Colors */
	--primary: #FF6B35;
	--primary-light: #FF8F5C;
	--primary-soft: #FFE8DE;
	--primary-dark: #E55A2B;
	--accent: #0EA5E9;
	--accent-light: #38BDF8;
	--accent-soft: #E0F2FE;
	
	/* Semantic */
	--emerald: #10B981;
	--emerald-soft: #D1FAE5;
	--violet: #8B5CF6;
	--violet-soft: #EDE9FE;
	--success: #10B981;
	--warning: #F59E0B;
	--error: #EF4444;
	--info: #3B82F6;
	
	/* Neutral */
	--white: #FFF;
	--cream: #FFFCF9;
	--cream-warm: #FFF8F3;
	--peach-soft: #FFF5EE;
	--gray-50: #FAFAFA;
	--gray-100: #F5F5F5;
	--gray-200: #E5E5E5;
	--gray-300: #D4D4D4;
	--gray-400: #A3A3A3;
	--gray-500: #737373;
	--gray-600: #525252;
	--gray-700: #404040;
	--gray-800: #262626;
	--gray-900: #171717;
	
	/* Spacing (numeric scale) */
	--sp-1: .25rem;
	--sp-2: .5rem;
	--sp-3: .75rem;
	--sp-4: 1rem;
	--sp-5: 1.25rem;
	--sp-6: 1.5rem;
	--sp-8: 2rem;
	--sp-10: 2.5rem;
	--sp-12: 3rem;
	--sp-16: 4rem;
	--sp-20: 5rem;
	--sp-24: 6rem;
	
	/* Typography */
	--font-display: 'Uncut Sans', sans-serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	--text-xs: .75rem;
	--text-sm: .875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.875rem;
	--text-4xl: 2.25rem;
	--text-5xl: 3rem;
	--text-6xl: 3.75rem;
	
	/* Radius */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 20px;
	--radius-2xl: 24px;
	--radius-full: 100px;
	
	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(0,0,0,.02), 0 4px 8px rgba(0,0,0,.02);
	--shadow-md: 0 4px 20px rgba(0,0,0,.03), 0 1px 4px rgba(0,0,0,.02);
	--shadow-lg: 0 20px 60px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.04);
	--shadow-primary: 0 6px 20px rgba(255,107,53,.3), 0 3px 8px rgba(255,107,53,.2);
	
	/* Transitions */
	--ease: cubic-bezier(.4,0,.2,1);
	--dur: .2s;
	--dur-lg: .3s;
	
	/* Layout */
	--container-max: 1400px;
	--container-narrow: 900px;
}

/* ==========================================================================
   2. BASE RESET
   ========================================================================== */
*,*::before,*::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.6;
	color: var(--gray-800);
	background: var(--white);
	letter-spacing: -.01em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,h2,h3,h4,h5,h6 { margin: 0 0 var(--sp-4); font-family: var(--font-display); }
p { margin: 0 0 var(--sp-4); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }

/* ==========================================================================
   3. LAYOUT UTILITIES
   ========================================================================== */
/* Container */
.tph-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--sp-4); }
.tph-container-sm { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--sp-4); }

/* Flex */
.tph-flex { display: flex; }
.tph-flex-col { flex-direction: column; }
.tph-flex-wrap { flex-wrap: wrap; }
.tph-items-start { align-items: flex-start; }
.tph-items-center { align-items: center; }
.tph-items-end { align-items: flex-end; }
.tph-items-stretch { align-items: stretch; }
.tph-justify-start { justify-content: flex-start; }
.tph-justify-center { justify-content: center; }
.tph-justify-end { justify-content: flex-end; }
.tph-justify-between { justify-content: space-between; }
.tph-flex-1 { flex: 1; }
.tph-shrink-0 { flex-shrink: 0; }

/* Grid */
.tph-grid { display: grid; }
.tph-grid-1 { grid-template-columns: 1fr; }
.tph-grid-2 { grid-template-columns: repeat(2,1fr); }
.tph-grid-3 { grid-template-columns: repeat(3,1fr); }
.tph-grid-4 { grid-template-columns: repeat(4,1fr); }
.tph-grid-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Gap */
.tph-gap-1 { gap: var(--sp-1); }
.tph-gap-2 { gap: var(--sp-2); }
.tph-gap-3 { gap: var(--sp-3); }
.tph-gap-4 { gap: var(--sp-4); }
.tph-gap-5 { gap: var(--sp-5); }
.tph-gap-6 { gap: var(--sp-6); }
.tph-gap-8 { gap: var(--sp-8); }
.tph-gap-10 { gap: var(--sp-10); }
.tph-gap-12 { gap: var(--sp-12); }

/* ==========================================================================
   4. SPACING UTILITIES
   ========================================================================== */
/* Margin */
.tph-m-0 { margin: 0; }
.tph-m-auto { margin: auto; }
.tph-mx-auto { margin-left: auto; margin-right: auto; }
.tph-mt-0 { margin-top: 0; }
.tph-mt-1 { margin-top: var(--sp-1); }
.tph-mt-2 { margin-top: var(--sp-2); }
.tph-mt-3 { margin-top: var(--sp-3); }
.tph-mt-4 { margin-top: var(--sp-4); }
.tph-mt-6 { margin-top: var(--sp-6); }
.tph-mt-8 { margin-top: var(--sp-8); }
.tph-mt-10 { margin-top: var(--sp-10); }
.tph-mt-12 { margin-top: var(--sp-12); }
.tph-mt-16 { margin-top: var(--sp-16); }
.tph-mt-auto { margin-top: auto; }
.tph-mb-0 { margin-bottom: 0; }
.tph-mb-1 { margin-bottom: var(--sp-1); }
.tph-mb-2 { margin-bottom: var(--sp-2); }
.tph-mb-3 { margin-bottom: var(--sp-3); }
.tph-mb-4 { margin-bottom: var(--sp-4); }
.tph-mb-6 { margin-bottom: var(--sp-6); }
.tph-mb-8 { margin-bottom: var(--sp-8); }
.tph-mb-10 { margin-bottom: var(--sp-10); }
.tph-mb-12 { margin-bottom: var(--sp-12); }
.tph-mb-16 { margin-bottom: var(--sp-16); }
.tph-ml-auto { margin-left: auto; }
.tph-mr-auto { margin-right: auto; }

/* Padding */
.tph-p-0 { padding: 0; }
.tph-p-1 { padding: var(--sp-1); }
.tph-p-2 { padding: var(--sp-2); }
.tph-p-3 { padding: var(--sp-3); }
.tph-p-4 { padding: var(--sp-4); }
.tph-p-5 { padding: var(--sp-5); }
.tph-p-6 { padding: var(--sp-6); }
.tph-p-8 { padding: var(--sp-8); }
.tph-p-10 { padding: var(--sp-10); }
.tph-p-12 { padding: var(--sp-12); }
.tph-px-4 { padding-left: var(--sp-4); padding-right: var(--sp-4); }
.tph-px-6 { padding-left: var(--sp-6); padding-right: var(--sp-6); }
.tph-px-8 { padding-left: var(--sp-8); padding-right: var(--sp-8); }
.tph-py-4 { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
.tph-py-6 { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.tph-py-8 { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
.tph-py-10 { padding-top: var(--sp-10); padding-bottom: var(--sp-10); }
.tph-py-12 { padding-top: var(--sp-12); padding-bottom: var(--sp-12); }
.tph-py-16 { padding-top: var(--sp-16); padding-bottom: var(--sp-16); }
.tph-py-20 { padding-top: var(--sp-20); padding-bottom: var(--sp-20); }
.tph-py-24 { padding-top: var(--sp-24); padding-bottom: var(--sp-24); }
.tph-pt-0 { padding-top: 0; }
.tph-pt-4 { padding-top: var(--sp-4); }
.tph-pt-6 { padding-top: var(--sp-6); }
.tph-pt-8 { padding-top: var(--sp-8); }
.tph-pt-12 { padding-top: var(--sp-12); }
.tph-pt-16 { padding-top: var(--sp-16); }
.tph-pb-0 { padding-bottom: 0; }
.tph-pb-4 { padding-bottom: var(--sp-4); }
.tph-pb-6 { padding-bottom: var(--sp-6); }
.tph-pb-8 { padding-bottom: var(--sp-8); }
.tph-pb-12 { padding-bottom: var(--sp-12); }
.tph-pb-16 { padding-bottom: var(--sp-16); }

/* Section spacing (responsive by default) */
.tph-section { padding-top: var(--sp-12); padding-bottom: var(--sp-12); }

/* ==========================================================================
   5. TYPOGRAPHY UTILITIES
   ========================================================================== */
/* Display */
.tph-display { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: 700; line-height: 1.1; letter-spacing: -.035em; }
.tph-display-lg { font-family: var(--font-display); font-size: var(--text-6xl); font-weight: 700; line-height: 1.1; letter-spacing: -.04em; }

/* Headings */
.tph-h1 { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 700; line-height: 1.15; letter-spacing: -.03em; }
.tph-h2 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; }
.tph-h3 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; line-height: 1.3; letter-spacing: -.02em; }
.tph-h4 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; line-height: 1.4; letter-spacing: -.015em; }

/* Body sizes */
.tph-text-xs { font-size: var(--text-xs); }
.tph-text-sm { font-size: var(--text-sm); }
.tph-text-base { font-size: var(--text-base); }
.tph-text-lg { font-size: var(--text-lg); }
.tph-text-xl { font-size: var(--text-xl); }
.tph-text-2xl { font-size: var(--text-2xl); }

/* Weight */
.tph-font-light { font-weight: 300; }
.tph-font-normal { font-weight: 400; }
.tph-font-medium { font-weight: 500; }
.tph-font-semibold { font-weight: 600; }
.tph-font-bold { font-weight: 700; }

/* Align */
.tph-text-left { text-align: left; }
.tph-text-center { text-align: center; }
.tph-text-right { text-align: right; }

/* Line height */
.tph-leading-none { line-height: 1; }
.tph-leading-tight { line-height: 1.2; }
.tph-leading-snug { line-height: 1.4; }
.tph-leading-normal { line-height: 1.6; }
.tph-leading-relaxed { line-height: 1.8; }

/* Transform */
.tph-uppercase { text-transform: uppercase; letter-spacing: .05em; }
.tph-capitalize { text-transform: capitalize; }

/* ==========================================================================
   6. COLOR UTILITIES
   ========================================================================== */
/* Text */
.tph-text-primary { color: var(--primary); }
.tph-text-accent { color: var(--accent); }
.tph-text-success { color: var(--success); }
.tph-text-warning { color: var(--warning); }
.tph-text-error { color: var(--error); }
.tph-text-white { color: var(--white); }
.tph-text-muted { color: var(--gray-500); }
.tph-text-subtle { color: var(--gray-400); }
.tph-text-body { color: var(--gray-700); }
.tph-text-heading { color: var(--gray-900); }

/* Background */
.tph-bg-white { background: var(--white); }
.tph-bg-cream { background: var(--cream); }
.tph-bg-cream-warm { background: var(--cream-warm); }
.tph-bg-peach { background: var(--peach-soft); }
.tph-bg-primary { background: var(--primary); }
.tph-bg-primary-soft { background: var(--primary-soft); }
.tph-bg-accent { background: var(--accent); }
.tph-bg-accent-soft { background: var(--accent-soft); }
.tph-bg-success-soft { background: var(--emerald-soft); }
.tph-bg-gray-50 { background: var(--gray-50); }
.tph-bg-gray-100 { background: var(--gray-100); }
.tph-bg-gray-800 { background: var(--gray-800); }
.tph-bg-gray-900 { background: var(--gray-900); }

/* ==========================================================================
   7. WIDTH & HEIGHT UTILITIES
   ========================================================================== */
.tph-w-full { width: 100%; }
.tph-w-auto { width: auto; }
.tph-w-1\/2 { width: 50%; }
.tph-w-1\/3 { width: 33.333%; }
.tph-w-2\/3 { width: 66.666%; }
.tph-w-1\/4 { width: 25%; }
.tph-w-3\/4 { width: 75%; }
.tph-max-w-xs { max-width: 20rem; }
.tph-max-w-sm { max-width: 24rem; }
.tph-max-w-md { max-width: 28rem; }
.tph-max-w-lg { max-width: 32rem; }
.tph-max-w-xl { max-width: 36rem; }
.tph-max-w-2xl { max-width: 42rem; }
.tph-max-w-3xl { max-width: 48rem; }
.tph-max-w-4xl { max-width: 56rem; }
.tph-max-w-5xl { max-width: 64rem; }
.tph-max-w-full { max-width: 100%; }
.tph-max-w-prose { max-width: 65ch; }
.tph-h-full { height: 100%; }
.tph-h-screen { height: 100vh; }
.tph-min-h-screen { min-height: 100vh; }

/* ==========================================================================
   8. BORDER & RADIUS UTILITIES
   ========================================================================== */
.tph-rounded-sm { border-radius: var(--radius-sm); }
.tph-rounded-md { border-radius: var(--radius-md); }
.tph-rounded-lg { border-radius: var(--radius-lg); }
.tph-rounded-xl { border-radius: var(--radius-xl); }
.tph-rounded-2xl { border-radius: var(--radius-2xl); }
.tph-rounded-full { border-radius: var(--radius-full); }
.tph-border { border: 1px solid var(--gray-200); }
.tph-border-2 { border-width: 2px; }
.tph-border-primary { border-color: var(--primary); }
.tph-border-gray-100 { border-color: var(--gray-100); }
.tph-border-gray-200 { border-color: var(--gray-200); }
.tph-border-gray-300 { border-color: var(--gray-300); }

/* ==========================================================================
   9. SHADOW UTILITIES
   ========================================================================== */
.tph-shadow-sm { box-shadow: var(--shadow-sm); }
.tph-shadow-md { box-shadow: var(--shadow-md); }
.tph-shadow-lg { box-shadow: var(--shadow-lg); }
.tph-shadow-primary { box-shadow: var(--shadow-primary); }
.tph-shadow-none { box-shadow: none; }

/* ==========================================================================
   10. DISPLAY & POSITION UTILITIES
   ========================================================================== */
.tph-block { display: block; }
.tph-inline-block { display: inline-block; }
.tph-inline { display: inline; }
.tph-hidden { display: none; }
.tph-relative { position: relative; }
.tph-absolute { position: absolute; }
.tph-fixed { position: fixed; }
.tph-sticky { position: sticky; top: 0; }
.tph-inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.tph-z-0 { z-index: 0; }
.tph-z-10 { z-index: 10; }
.tph-z-20 { z-index: 20; }
.tph-z-50 { z-index: 50; }
.tph-z-100 { z-index: 100; }
.tph-overflow-hidden { overflow: hidden; }
.tph-overflow-auto { overflow: auto; }
.tph-overflow-x-auto { overflow-x: auto; }

/* ==========================================================================
   11. TRANSITION & ANIMATION UTILITIES
   ========================================================================== */
.tph-transition { transition: all var(--dur) var(--ease); }
.tph-transition-colors { transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.tph-transition-transform { transition: transform var(--dur) var(--ease); }
.tph-hover-lift { transition: transform var(--dur-lg) var(--ease), box-shadow var(--dur-lg) var(--ease); }
.tph-hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

@keyframes tph-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tph-fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tph-slide-left { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes tph-slide-right { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

.tph-animate-fade-in { animation: tph-fade-in .6s var(--ease); }
.tph-animate-fade-up { animation: tph-fade-up .6s var(--ease); }
.tph-animate-slide-left { animation: tph-slide-left .6s var(--ease); }
.tph-animate-slide-right { animation: tph-slide-right .6s var(--ease); }

/* ==========================================================================
   12. RESPONSIVE SYSTEM (3 breakpoints: base, md:768px, lg:1024px)
   ========================================================================== */

/* Medium screens (≥768px) */
@media (min-width: 768px) {
	.tph-container { padding: 0 var(--sp-8); }
	.tph-section { padding-top: var(--sp-16); padding-bottom: var(--sp-16); }
	
	/* Display */
	.tph-md\:block { display: block; }
	.tph-md\:flex { display: flex; }
	.tph-md\:grid { display: grid; }
	.tph-md\:hidden { display: none; }
	.tph-md\:inline-block { display: inline-block; }
	
	/* Flex */
	.tph-md\:flex-row { flex-direction: row; }
	.tph-md\:flex-col { flex-direction: column; }
	.tph-md\:items-center { align-items: center; }
	.tph-md\:justify-between { justify-content: space-between; }
	
	/* Grid */
	.tph-md\:grid-2 { grid-template-columns: repeat(2,1fr); }
	.tph-md\:grid-3 { grid-template-columns: repeat(3,1fr); }
	.tph-md\:grid-4 { grid-template-columns: repeat(4,1fr); }
	
	/* Gap */
	.tph-md\:gap-6 { gap: var(--sp-6); }
	.tph-md\:gap-8 { gap: var(--sp-8); }
	.tph-md\:gap-10 { gap: var(--sp-10); }
	
	/* Width */
	.tph-md\:w-1\/2 { width: 50%; }
	.tph-md\:w-1\/3 { width: 33.333%; }
	.tph-md\:w-2\/3 { width: 66.666%; }
	.tph-md\:w-auto { width: auto; }
	
	/* Spacing */
	.tph-md\:p-6 { padding: var(--sp-6); }
	.tph-md\:p-8 { padding: var(--sp-8); }
	.tph-md\:py-12 { padding-top: var(--sp-12); padding-bottom: var(--sp-12); }
	.tph-md\:py-16 { padding-top: var(--sp-16); padding-bottom: var(--sp-16); }
	.tph-md\:mt-0 { margin-top: 0; }
	.tph-md\:mb-0 { margin-bottom: 0; }
	
	/* Text */
	.tph-md\:text-left { text-align: left; }
	.tph-md\:text-center { text-align: center; }
	.tph-md\:text-lg { font-size: var(--text-lg); }
	.tph-md\:text-xl { font-size: var(--text-xl); }
	.tph-md\:text-2xl { font-size: var(--text-2xl); }
	.tph-md\:h3 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; }
	.tph-md\:h2 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; }
}

/* Large screens (≥1024px) */
@media (min-width: 1024px) {
	.tph-section { padding-top: var(--sp-20); padding-bottom: var(--sp-20); }
	
	/* Display */
	.tph-lg\:block { display: block; }
	.tph-lg\:flex { display: flex; }
	.tph-lg\:grid { display: grid; }
	.tph-lg\:hidden { display: none; }
	
	/* Flex */
	.tph-lg\:flex-row { flex-direction: row; }
	.tph-lg\:flex-col { flex-direction: column; }
	
	/* Grid */
	.tph-lg\:grid-2 { grid-template-columns: repeat(2,1fr); }
	.tph-lg\:grid-3 { grid-template-columns: repeat(3,1fr); }
	.tph-lg\:grid-4 { grid-template-columns: repeat(4,1fr); }
	
	/* Gap */
	.tph-lg\:gap-8 { gap: var(--sp-8); }
	.tph-lg\:gap-10 { gap: var(--sp-10); }
	.tph-lg\:gap-12 { gap: var(--sp-12); }
	
	/* Width */
	.tph-lg\:w-1\/2 { width: 50%; }
	.tph-lg\:w-1\/3 { width: 33.333%; }
	.tph-lg\:w-1\/4 { width: 25%; }
	.tph-lg\:w-2\/3 { width: 66.666%; }
	
	/* Spacing */
	.tph-lg\:p-8 { padding: var(--sp-8); }
	.tph-lg\:p-10 { padding: var(--sp-10); }
	.tph-lg\:py-16 { padding-top: var(--sp-16); padding-bottom: var(--sp-16); }
	.tph-lg\:py-20 { padding-top: var(--sp-20); padding-bottom: var(--sp-20); }
	.tph-lg\:py-24 { padding-top: var(--sp-24); padding-bottom: var(--sp-24); }
	
	/* Text */
	.tph-lg\:text-xl { font-size: var(--text-xl); }
	.tph-lg\:text-2xl { font-size: var(--text-2xl); }
	.tph-lg\:display { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: 700; line-height: 1.1; }
	.tph-lg\:display-lg { font-family: var(--font-display); font-size: var(--text-6xl); font-weight: 700; line-height: 1.1; }
}

/* Mobile-only & tablet-only visibility */
@media (max-width: 767px) {
	.tph-hide-mobile { display: none; }
	.tph-grid-2,.tph-grid-3,.tph-grid-4 { grid-template-columns: 1fr; }
	.tph-display { font-size: var(--text-4xl); }
	.tph-display-lg { font-size: var(--text-5xl); }
	.tph-h1 { font-size: var(--text-3xl); }
	.tph-h2 { font-size: var(--text-2xl); }
}

@media (max-width: 1023px) {
	.tph-hide-tablet { display: none; }
}

/* Show only on specific screens */
.tph-show-mobile { display: none; }
.tph-show-tablet { display: none; }
@media (max-width: 767px) { .tph-show-mobile { display: block; } }
@media (min-width: 768px) and (max-width: 1023px) { .tph-show-tablet { display: block; } }

/* ==========================================================================
   13. COMPONENT: Buttons
   ========================================================================== */
.tph-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: .75rem 1.5rem;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: 1;
	border-radius: var(--radius-md);
	border: none;
	cursor: pointer;
	transition: all var(--dur-lg) var(--ease);
	text-decoration: none;
	position: relative;
	overflow: hidden;
}

.tph-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
	transform: translateX(-100%);
	transition: transform .5s var(--ease);
}

.tph-btn:hover::before { transform: translateX(100%); }

.tph-btn-primary {
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
	color: var(--white);
	box-shadow: var(--shadow-primary);
}

.tph-btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 28px rgba(255,107,53,.35), 0 4px 12px rgba(255,107,53,.25);
}

.tph-btn-secondary {
	background: var(--white);
	color: var(--gray-700);
	border: 1.5px solid var(--gray-300);
}

.tph-btn-secondary:hover {
	background: var(--gray-50);
	border-color: var(--gray-400);
}

.tph-btn-ghost {
	background: transparent;
	color: var(--primary);
}

.tph-btn-ghost:hover { background: var(--primary-soft); }

.tph-btn-accent {
	background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
	color: var(--white);
	box-shadow: 0 4px 14px rgba(14,165,233,.25);
}

.tph-btn-accent:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(14,165,233,.3);
}

.tph-btn-sm { padding: .5rem 1rem; font-size: var(--text-xs); }
.tph-btn-lg { padding: 1rem 2rem; font-size: var(--text-base); }
.tph-btn-full { width: 100%; }
.tph-btn-icon { padding: .75rem; border-radius: 50%; }

/* ==========================================================================
   14. COMPONENT: Cards
   ========================================================================== */
.tph-card {
	background: var(--white);
	border-radius: var(--radius-xl);
	padding: var(--sp-6);
	box-shadow: var(--shadow-md);
	border: 1px solid var(--gray-100);
	transition: all var(--dur-lg) var(--ease);
}

.tph-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.tph-card-elevated {
	background: var(--white);
	border-radius: var(--radius-2xl);
	padding: var(--sp-6);
	box-shadow: var(--shadow-lg);
	border: 1px solid rgba(255,255,255,.9);
	position: relative;
}

.tph-card-elevated::before {
	content: '';
	position: absolute;
	top: -1px;
	left: 10%;
	right: 10%;
	height: 2px;
	background: linear-gradient(90deg, transparent 0%, rgba(255,107,53,.4) 30%, rgba(255,143,92,.3) 50%, rgba(14,165,233,.2) 70%, transparent 100%);
	border-radius: 2px;
}

.tph-card-glass {
	background: rgba(255,255,255,.85);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255,255,255,.9);
	border-radius: var(--radius-xl);
	padding: var(--sp-6);
	box-shadow: var(--shadow-md);
}

/* ==========================================================================
   15. COMPONENT: Badge
   ========================================================================== */
.tph-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	padding: .375rem .75rem;
	border-radius: var(--radius-full);
	font-size: .7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.tph-badge-success { background: var(--emerald-soft); color: var(--emerald); }
.tph-badge-accent { background: var(--accent-soft); color: var(--accent); }
.tph-badge-primary { background: var(--primary-soft); color: var(--primary); }
.tph-badge-violet { background: var(--violet-soft); color: var(--violet); }
.tph-badge svg { width: 12px; height: 12px; }

/* ==========================================================================
   16. COMPONENT: Forms
   ========================================================================== */
.tph-form-field { margin-bottom: var(--sp-4); }

.tph-label {
	display: block;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--gray-700);
	margin-bottom: var(--sp-2);
}

.tph-label-sm {
	display: block;
	font-size: .65rem;
	font-weight: 600;
	color: var(--gray-400);
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-bottom: var(--sp-1);
}

.tph-input {
	width: 100%;
	padding: .75rem 1rem;
	background: var(--gray-50);
	border: 1.5px solid var(--gray-100);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--gray-800);
	transition: all var(--dur) var(--ease);
}

.tph-input:hover {
	border-color: var(--gray-200);
	background: var(--white);
}

.tph-input:focus {
	outline: none;
	border-color: var(--primary);
	background: var(--white);
	box-shadow: 0 0 0 3px rgba(255,107,53,.1);
}

.tph-input-icon { position: relative; }
.tph-input-icon input { padding-left: 2.75rem; }
.tph-input-icon svg {
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	stroke: var(--gray-400);
	pointer-events: none;
}

/* ==========================================================================
   17. COMPONENT: Rating
   ========================================================================== */
.tph-rating { display: flex; align-items: center; gap: var(--sp-2); }
.tph-stars { display: flex; gap: 2px; }
.tph-star { width: 18px; height: 18px; fill: #FBBF24; }
.tph-rating-score { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--gray-900); }
.tph-rating-count { color: var(--gray-400); font-size: var(--text-sm); }

/* ==========================================================================
   18. COMPONENT: Amenities
   ========================================================================== */
.tph-amenity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); }

.tph-amenity {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-4);
	background: var(--gray-50);
	border-radius: var(--radius-lg);
	border: 1px solid var(--gray-100);
	transition: all var(--dur) var(--ease);
}

.tph-amenity:hover {
	background: var(--white);
	border-color: var(--gray-200);
	box-shadow: var(--shadow-sm);
}

.tph-amenity-icon {
	width: 36px;
	height: 36px;
	background: var(--white);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-sm);
	flex-shrink: 0;
}

.tph-amenity-icon svg { width: 18px; height: 18px; stroke: var(--gray-600); }
.tph-amenity-icon.highlight svg { stroke: var(--primary); }
.tph-amenity-label { font-size: var(--text-sm); font-weight: 500; color: var(--gray-700); }

/* ==========================================================================
   19. AMBIENT BACKGROUND
   ========================================================================== */
.tph-ambient-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.tph-gradient {
	position: absolute;
	border-radius: 50%;
	filter: blur(120px);
	opacity: .4;
}

.tph-gradient-1 {
	width: 700px;
	height: 700px;
	background: radial-gradient(circle, rgba(255,200,170,.35) 0%, rgba(255,237,213,.15) 50%, transparent 70%);
	top: -200px;
	right: -100px;
}

.tph-gradient-2 {
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, rgba(14,165,233,.08) 0%, rgba(186,230,253,.04) 50%, transparent 70%);
	top: 50%;
	left: -100px;
}

.tph-gradient-3 {
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(16,185,129,.06) 0%, rgba(209,250,229,.04) 50%, transparent 70%);
	bottom: 10%;
	right: 10%;
}

/* ==========================================================================
   20. WORDPRESS BLOCK STYLES
   ========================================================================== */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: .875rem 1.5rem;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-base);
	line-height: 1;
	letter-spacing: -.02em;
	border-radius: var(--radius-md);
	border: none;
	transition: all var(--dur-lg) var(--ease);
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
	color: var(--white);
	box-shadow: var(--shadow-primary);
	text-decoration: none;
}

.wp-block-button__link::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
	transform: translateX(-100%);
	transition: transform .5s var(--ease);
}

.wp-block-button__link:hover::before { transform: translateX(100%); }

.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 28px rgba(255,107,53,.35), 0 4px 12px rgba(255,107,53,.25);
}

.is-style-outline .wp-block-button__link {
	background: var(--white);
	font-weight: 500;
	color: var(--gray-700);
	border: 1.5px solid var(--gray-200);
	box-shadow: none;
}

.is-style-outline .wp-block-button__link:hover {
	background: var(--primary-soft);
	border-color: var(--primary);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(255,107,53,.15);
}

.wp-block-group { position: relative; z-index: 1; }
.alignwide { max-width: var(--wp--style--global--wide-size, var(--container-max)); }
.alignfull { max-width: none; width: 100vw; margin-left: calc(50% - 50vw); }

.triple-btn-white .wp-block-button__link {
	background: var(--white);
	color: var(--primary);
	padding: 1rem 1.5rem;
}

.triple-btn-white .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 28px rgba(255,107,53,.35), 0 4px 12px rgba(255,107,53,.25);
}

/* ==========================================================================
   21. NAVIGATION
   ========================================================================== */
.tph-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	padding: var(--sp-4) var(--sp-8);
}

.tph-nav-bar {
	background: rgba(255,255,255,.75);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255,255,255,.9);
	border-radius: var(--radius-xl);
	box-shadow: 0 4px 24px rgba(0,0,0,.03), 0 1px 2px rgba(0,0,0,.02), inset 0 1px 0 rgba(255,255,255,.9);
}

.triplypro-nav-container,
.triplypro-nav-container--fixed,
.triplypro-g-nav-container--fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	padding: var(--sp-4) var(--sp-8);
	transition: background-color var(--dur-lg) var(--ease);
}

.triplypro-nav-bar {
	background: rgba(255,255,255,.75);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255,255,255,.9);
	border-radius: var(--radius-xl);
	box-shadow: 0 4px 24px rgba(0,0,0,.03), 0 1px 2px rgba(0,0,0,.02), inset 0 1px 0 rgba(255,255,255,.9);
}

.triplypro-g-nav-container--fixed {
	box-shadow: 0 4px 24px rgba(0,0,0,.03), 0 1px 2px rgba(0,0,0,.02), inset 0 1px 0 rgba(255,255,255,.9);
}

.triplypro-nav-container--fixed.scrolled {
	background-color: var(--white);
	box-shadow: 0 4px 24px rgba(0,0,0,.03), 0 1px 2px rgba(0,0,0,.02), inset 0 1px 0 rgba(255,255,255,.9);
}

.triplypro-nav-container--fixed.scrolled .wp-block-navigation-item__label {
	color: var(--gray-900);
}

/* ==========================================================================
   22. PRINT STYLES
   ========================================================================== */
@media print {
	.tph-ambient-bg,.tph-nav,.triplypro-nav-container { display: none; }
	.tph-hover-lift:hover { transform: none; }
	body { color: #000; background: #fff; }
}