/**
 * ============================================
 * KEISHA FREEDOM - CUSTOM STYLESHEET (LIGHT)
 * ============================================
 * 
 * Version: 2.0 (Simplified)
 * Last Updated: January 2026
 * 
 * This file contains ONLY opt-in utility classes.
 * Nothing is auto-applied - you control when to use each style.
 * 
 * HOW TO USE:
 * In Elementor → Advanced → CSS Classes, add any class below.
 * 
 * AVAILABLE CLASSES:
 * -----------------
 * Cards:      pro-card, glass-card, card-minimal
 * Buttons:    pro-button, btn-outline
 * Accents:    gold-accent, gold-icon, gold-text
 * Hover:      hover-lift, hover-zoom, hover-glow
 * Sections:   section-dark, section-alt (use sparingly)
 * 
 * BRAND COLORS (Reference)
 * ------------------------
 * Gold Primary:  #E0AC3C
 * Gold Light:    #E8C866
 * Gold Dark:     #B8941F
 * 
 * ============================================
 */

/* ============================================
   1. SMOOTH TRANSITIONS (subtle, non-intrusive)
   ============================================ */
.elementor-widget-container,
.elementor-column {
  transition: all 0.3s ease;
}

/* ============================================
   2. CARD UTILITY CLASSES (opt-in only)
   ============================================ */

/* Professional Card - adds glass background + hover */
.pro-card {
  background: linear-gradient(145deg, #1a1a1f 0%, #252530 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.1) !important;
  border-radius: 12px !important;
  padding: 40px 30px !important;
  transition: all 0.4s ease !important;
}

.pro-card:hover {
  transform: translateY(-8px);
  border-color: rgba(212, 175, 55, 0.4) !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4), 
              0 0 30px rgba(212, 175, 55, 0.1) !important;
}

/* Glass Card - frosted glass effect */
.glass-card {
  background: rgba(30, 30, 35, 0.7) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
}

/* Minimal Card - subtle styling */
.card-minimal {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 16px !important;
  padding: 30px !important;
  transition: all 0.3s ease !important;
}

.card-minimal:hover {
  border-color: rgba(212, 175, 55, 0.2) !important;
}

/* ============================================
   3. BUTTON UTILITY CLASSES
   ============================================ */

/* Pro Button - premium gold gradient */
.pro-button .elementor-button {
  background: linear-gradient(135deg, #E0AC3C 0%, #B8941F 100%) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 16px 32px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3) !important;
}

.pro-button .elementor-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4) !important;
}

/* Outline Button */
.btn-outline .elementor-button {
  background: transparent !important;
  border: 2px solid #E0AC3C !important;
  color: #E0AC3C !important;
}

.btn-outline .elementor-button:hover {
  background: #E0AC3C !important;
  color: #000000 !important;
}

/* ============================================
   4. GOLD ACCENT CLASSES
   ============================================ */

/* Gold line above content */
.gold-accent .elementor-widget-container::before {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #E0AC3C, #E8C866);
  margin-bottom: 20px;
}

/* Gold icon color */
.gold-icon .elementor-icon,
.gold-icon .elementor-icon i,
.gold-icon .elementor-icon-box-icon i {
  color: #E0AC3C !important;
}

/* Gold gradient text */
.gold-text,
.gold-text .elementor-heading-title {
  background: linear-gradient(135deg, #E8C866 0%, #E0AC3C 50%, #B8941F 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================
   5. HOVER EFFECT CLASSES
   ============================================ */

/* Lift on hover */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.hover-lift:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important;
}

/* Image zoom on hover */
.hover-zoom .elementor-image img {
  transition: transform 0.5s ease;
}

.hover-zoom:hover .elementor-image img {
  transform: scale(1.05);
}

/* Gold glow on hover */
.hover-glow:hover {
  box-shadow: 0 0 40px rgba(212, 175, 55, 0.15) !important;
}

/* ============================================
   6. SECTION BACKGROUND CLASSES (use sparingly)
   ============================================ */

.section-dark {
  background: linear-gradient(180deg, #1a1a1f 0%, #0f0f12 100%) !important;
}

.section-alt {
  background: linear-gradient(180deg, #202026 0%, #1a1a1f 100%) !important;
}

/* ============================================
   7. FLUENT FORMS STYLING
   ============================================ */

/* Form Container */
.fluentform {
  background: rgba(20, 20, 25, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(212, 175, 55, 0.12);
  border-radius: 20px;
  padding: 40px;
  max-width: 600px;
}

/* Labels */
.fluentform .ff-el-input--label label {
  color: #E0AC3C !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
}

/* Input Fields */
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform select,
.fluentform textarea {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  color: #ffffff !important;
  font-size: 15px !important;
  transition: all 0.3s ease !important;
  width: 100% !important;
}

/* Focus State */
.fluentform input:focus,
.fluentform select:focus,
.fluentform textarea:focus {
  outline: none !important;
  border-color: #E0AC3C !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15) !important;
}

/* Placeholder */
.fluentform input::placeholder,
.fluentform textarea::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Dropdown */
.fluentform select,
.fluentform .ff-el-form-control,
.fluentform select.ff-el-form-control {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: rgba(30, 30, 35, 0.9) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23E0AC3C' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  padding-right: 45px !important;
  cursor: pointer !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Fix Focus/Active State (Stop whitish background) */
.fluentform select:focus,
.fluentform select:active,
.fluentform .ff-el-form-control:focus {
  background-color: #1A1A1F !important;
  color: #ffffff !important;
  border-color: #E0AC3C !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(224, 172, 60, 0.2) !important;
}

/* Dropdown Options */
.fluentform select option {
  background-color: #1A1A1F !important;
  color: #ffffff !important;
  padding: 10px !important;
}

/* Remove default blue selection in some browsers */
.fluentform ::selection {
  background: #E0AC3C !important;
  color: #000000 !important;
}

/* Select container wrapper fix - target ALL parent elements */
.fluentform .select_container,
.fluentform .ff-el-input--content,
.fluentform .ff-el-group,
.fluentform .ff-field_container,
.fluentform .select_container::before,
.fluentform .select_container::after {
  background: transparent !important;
  background-color: transparent !important;
}

/* Override any pseudo-elements on select container */
.fluentform .select_container {
  position: relative !important;
  overflow: hidden !important;
}

/* Force select to fill container completely */
.fluentform .select_container select {
  width: 100% !important;
  background-color: rgba(30, 30, 35, 0.9) !important;
}

/* Submit Button */
.fluentform .ff-btn-submit {
  background: linear-gradient(135deg, #E0AC3C 0%, #A8882B 100%) !important;
  color: #000000 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 18px 40px !important;
  border: none !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  transition: all 0.4s ease !important;
  box-shadow: 0 4px 25px rgba(212, 175, 55, 0.35) !important;
}

.fluentform .ff-btn-submit:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 35px rgba(212, 175, 55, 0.5) !important;
}

/* Success/Error Messages */
.fluentform .ff-message-success {
  background: rgba(40, 167, 69, 0.15) !important;
  border: 1px solid rgba(40, 167, 69, 0.3) !important;
  border-radius: 12px !important;
  color: #4ade80 !important;
  padding: 20px !important;
}

.fluentform .error {
  color: #ff6b6b !important;
  font-size: 12px !important;
}

/* ============================================
   8. SCROLL TO TOP BUTTON
   ============================================ */
.trx_addons_scroll_to_top,
.scroll_to_top,
a.trx_addons_scroll_to_top {
  background: linear-gradient(135deg, #E0AC3C 0%, #B8941F 100%) !important;
  color: #000000 !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4) !important;
  transition: all 0.3s ease !important;
}

.trx_addons_scroll_to_top:hover,
.scroll_to_top:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 25px rgba(212, 175, 55, 0.5) !important;
}

.trx_addons_scroll_to_top i,
.scroll_to_top i {
  color: #000000 !important;
}

/* ============================================
   9. RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .pro-card {
    padding: 25px 20px !important;
  }
  
  /* Fix justified text on mobile - prevents ugly word gaps */
  .elementor-widget-text-editor,
  .elementor-widget-text-editor p,
  .elementor-widget-heading .elementor-heading-title,
  p, .entry-content p {
    text-align: left !important;
  }
}

/* Mobile & Tablet submenu hover highlight (applies to all mobile menu views) */
.menu_mobile .sub-menu a:hover,
.menu_mobile .sub-menu a:active,
.menu_mobile .sub-menu a:focus {
  color: #E0AC3C !important;
  background: rgba(224, 172, 60, 0.1) !important;
  padding-left: 15px !important;
  transition: all 0.2s ease !important;
}