/**
Theme Name: Astra-child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/


/* =========================================
   1. Design System Variables (Performance Optimized)
   ========================================= */
:root {
  --trip-primary: #061021;
  --trip-secondary: #273850;
  --trip-accent: #FFC107;
  --trip-success: #28a745;
  --trip-danger: #dc3545;
  --trip-warning: #FFC107;
  --trip-bg-light: #f8f9fa;
  --trip-text-dark: #1a1a1a;
  --trip-text-gray: #495057;
  --trip-radius: 8px;
  --trip-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --trip-gradient: linear-gradient(135deg, #5cacee 0%, #397dac 100%);
  --whatsapp-color: #0c3c5e;
  --whatsapp-gradient: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
}

	
	/* =========================================
   2. Global Resets & Accessibility
   ========================================= */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; padding: 0; line-height: 1.6; color: var(--trip-text-dark); }
h2, h3 { margin-top: 0; }

.accordion-trigger:focus-visible,
.booking-btn:focus-visible,
.related-trips-list a:focus-visible,
.whatsapp-float-btn:focus-visible {
  outline: 3px solid var(--trip-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.accordion-trigger, .booking-btn {
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  border: none; background: none; font: inherit;
}

/* =========================================
   3. Lists & Icons Reset (DRY Principle)
   ========================================= */
.intro-advantages, .key-details-list, .features-list, 
.pricing-details, .payment-methods, .pricing-includes, 
.pricing-excludes, .things-to-bring-list, .related-trips-list {
  list-style: none; padding: 0; margin: 0;
}

.intro-advantages li, .feature-item, .price-item, 
.payment-item, .pricing-includes li, .pricing-excludes li, .bring-item {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px;
}

/* Hardware Accelerated Icon Colors */
.check-icon i, .bring-icon i { color: var(--trip-success); }
.cross-icon i { color: var(--trip-danger); }
.feature-icon i { color: var(--trip-warning); }
.payment-icon i.fa-paypal { color: #00457C; }
.payment-icon i.fa-money-bill-wave { color: var(--trip-success); }

/* =========================================
   4. Accordion System (GPU Accelerated)
   ========================================= */
.accordion-section { margin-bottom: 24px; }
.accordion-item {
  border-radius: var(--trip-radius);
  margin-bottom: 12px;
  background: #fff;
  box-shadow: var(--trip-shadow);
  overflow: hidden;
  will-change: transform;
}

.accordion-header {
  background: var(--trip-gradient);
  padding: 16px 20px;
  display: flex; justify-content: space-between; align-items: center;
  position: relative; z-index: 1;
}

.accordion-trigger {
  color: #fff; width: 100%; text-align: start;
  font-weight: 700; font-size: 1.05rem; padding: 0;
}

.accordion-icon {
  color: var(--trip-primary); background: #fff;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-left: 15px; font-size: 1.1rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-item.active .accordion-icon { transform: rotate(180deg); }

.accordion-content {
  display: none; padding: 20px;
  color: var(--trip-text-gray); border: 1px solid #e9ecef;
  border-top: none;
  border-bottom-left-radius: var(--trip-radius);
  border-bottom-right-radius: var(--trip-radius);
}

.accordion-item.active .accordion-content {
  display: block;
  animation: fastFadeIn 0.2s ease-out forwards;
}

@keyframes fastFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* =========================================
   5. Custom UI Components (Cards & Timelines)
   ========================================= */
.intro-section { margin-bottom: 30px; padding: 15px 0; }
.intro-description { font-size: 1.05rem; }

.detail-item {
  display: flex; align-items: flex-start; gap: 15px;
  margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #eee;
}
.detail-item:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.detail-icon { color: var(--trip-secondary); font-size: 1.2rem; width: 25px; text-align: center; margin-top: 2px;}
.detail-text { flex-grow: 1; display: flex; flex-direction: column; }
.detail-text strong { color: var(--trip-primary); margin-bottom: 4px; }

.program-point {
  display: flex; gap: 15px; margin-bottom: 24px; position: relative;
}
.program-point:not(:last-child)::before {
  content: ''; position: absolute; left: 14px; top: 35px; bottom: -20px;
  width: 2px; background: #e9ecef;
}

.program-icon {
  background: var(--trip-bg-light); width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--trip-primary); border: 1px solid #ddd; z-index: 1;
}
.program-text { display: flex; flex-direction: column; }
.program-text strong { color: var(--trip-text-dark); margin-bottom: 5px; font-weight: 700; }
.program-text p { margin: 0; font-size: 0.95rem; }

/* =========================================
   6. Conversion Zones (Booking & CTA)
   ========================================= */
.booking-section {
  background: var(--trip-gradient); color: #fff;
  padding: 30px 20px; border-radius: var(--trip-radius);
  text-align: center; margin: 30px 0;
  box-shadow: var(--trip-shadow);
}
.booking-section h2 { color: #fff; margin-bottom: 15px; }
.booking-section p { color: #e9ecef; margin-bottom: 25px; }

.booking-buttons { display: flex; flex-direction: column; gap: 15px; }

.booking-btn {
  display: inline-flex; justify-content: center; align-items: center;
  padding: 14px 25px; border-radius: 50px; text-decoration: none; font-weight: bold;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  width: 100%; text-align: center; color: var(--trip-primary); background: #fff;
}
.booking-btn:hover { transform: scale(1.03); }

.whatsapp-btn {
  background-color: var(--whatsapp-color); color: #fff; border: 2px solid var(--whatsapp-color);
}

.related-trips-list li { border-bottom: 1px dashed #eee; padding: 12px 0; }
.related-trips-list li:last-child { border-bottom: none; }
.related-trips-list a { color: var(--trip-primary); text-decoration: none; font-weight: 600; display: block; transition: color 0.2s; }
.related-trips-list a:hover { color: var(--trip-secondary); }

/* =========================================
   7. Optimized Floating WhatsApp Button
   ========================================= */
.whatsapp-float-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  flex-direction: row-reverse; /* Keeps text on the left without breaking English LTR */
  text-decoration: none;
  z-index: 9999;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease;
  animation: slideInUp 0.6s ease-out forwards;
}

.whatsapp-float-btn:hover {
  transform: translateY(-4px);
  filter: brightness(1.05);
}

.whatsapp-icon-container {
  width: 56px;
  height: 56px;
  background: var(--whatsapp-gradient);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.3);
  flex-shrink: 0;
  transition: transform 0.3s ease;
  position: relative;
}

/* GPU Accelerated Ripple Effect instead of Box-Shadow Pulse */
.whatsapp-icon-container::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 50%;
  border: 2px solid var(--whatsapp-color);
  animation: ripple 2s infinite cubic-bezier(0.1, 0.7, 0.1, 1);
  pointer-events: none;
}

.whatsapp-float-btn:hover .whatsapp-icon-container {
  transform: scale(1.08);
}

.whatsapp-icon {
  width: 32px;
  height: 32px;
  position: relative;
  z-index: 2;
}

.whatsapp-label {
  background-color: white;
  color: var(--trip-text-dark);
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 20px;
  margin-left: 12px;
  font-size: 14px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
  font-family: inherit;
  white-space: nowrap;
  transition: transform 0.3s ease, background-color 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.whatsapp-float-btn:hover .whatsapp-label {
  background-color: var(--trip-bg-light);
  transform: translateX(-4px);
}

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ripple {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* =========================================
   8. Media Queries
   ========================================= */
@media (min-width: 600px) {
  .booking-buttons { flex-direction: row; justify-content: center; flex-wrap: wrap; }
  .booking-btn { width: auto; min-width: 200px; }
}

@media (max-width: 768px) {
  .whatsapp-float-btn { bottom: 16px; right: 16px; }
  .whatsapp-icon-container { width: 50px; height: 50px; }
  .whatsapp-icon { width: 28px; height: 28px; }
  .whatsapp-label { font-size: 13px; padding: 6px 12px; margin-right: 10px; }
}

@media (max-width: 480px) {
  .whatsapp-float-btn { bottom: 12px; right: 12px; }
}

@media (max-width: 320px) {
  .whatsapp-label { display: none; }
}

@media (prefers-color-scheme: dark) {
  .whatsapp-label {
    background-color: #2a2a2a;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  .whatsapp-float-btn:hover .whatsapp-label { background-color: #3a3a3a; }
}
	
/* =========================================
   3. شبكة كروت الرحلات (Trip Grid System)
   ========================================= */
.trip-grid {
  display: grid;
  gap: 25px;
  /* الموبايل: عمود واحد تلقائياً */
  grid-template-columns: 1fr;
  margin-bottom: 30px;
}

/* التابلت والديسك توب: أعمدة مرنة */
@media (min-width: 768px) {
  .trip-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

.trip-card {
  background: #fff;
  border-radius: var(--trip-radius);
  box-shadow: var(--trip-shadow);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}

.trip-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.trip-badge {
  position: absolute;
  top: 15px;
  right: -35px;
  background-color: var(--trip-accent);
  color: #333;
  padding: 5px 35px;
  font-size: 0.8rem;
  font-weight: bold;
  transform: rotate(45deg);
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.trip-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.trip-title {
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  margin: 15px 10px;
  color: var(--trip-primary);
  line-height: 1.4;
}

/* التقييم والنجوم */
.trip-rating {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
  color: var(--trip-accent);
  font-size: 0.9rem;
}
.rating-value {
  color: #555;
  font-weight: bold;
}

.trip-description {
  padding: 0 15px;
  font-size: 0.9rem;
  color: #666;
  text-align: center;
  margin-bottom: 15px;
  line-height: 1.6;
}

.trip-icons {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 15px;
  color: var(--trip-secondary);
}

.price {
  text-align: center;
  font-weight: bold;
  color: var(--trip-primary);
  margin-bottom: 15px;
  margin-top: auto; /* يدفع السعر للأسفل */
}

.trip-btn {
  display: block;
  background: linear-gradient(135deg, var(--trip-primary), var(--trip-secondary));
  color: #fff;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-weight: bold;
  transition: opacity 0.3s;
}
.trip-btn:hover {
  color: #fff;
  opacity: 0.9;
}
/* توسيط عناوين الأقسام في صفحات الرحلات فقط */
.category-title {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
  width: 100%; /* لضمان أخذ المساحة كاملة والتوسط بدقة */
}