/**
 * Pure CSS fix for contact drawer and hamburger menu collision
 * Save this as css/contact-drawer-fix.css in your child theme
 */

/* Ensure proper z-index hierarchy with very high values */
#dme-contact-tab {
    position: fixed !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 9999999 !important; /* Extremely high z-index */
    transition: opacity 0.3s ease, right 0.3s ease !important;
    border-radius: 5px 0 0 5px !important;
}

#dme-contact-drawer {
    position: fixed !important;
    top: 0 !important;
    right: -350px !important; /* Start off-screen */
    width: 350px !important;
    height: 100% !important;
    z-index: 9999998 !important;
    transition: right 0.3s ease !important;
    overflow-y: auto !important;
    background-color: rgba(0, 0, 0, 0.95) !important;
    border-left: 2px solid white !important;
}

#dme-contact-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 9999997 !important;
    display: none !important;
}

/* Active states */
#dme-contact-drawer.active {
    right: 0 !important;
}

#dme-contact-overlay.active {
    display: block !important;
}

/* When drawer is open, adjust tab position */
body.dme-contact-drawer-open #dme-contact-tab {
    right: 350px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Force hide hamburger menu when drawer is open */
body.dme-contact-drawer-open .mobile_menu_bar,
body.dme-contact-drawer-open .et_mobile_nav_menu,
body.dme-contact-drawer-open .et_toggle_slide_menu,
body.dme-contact-drawer-open .menu-toggle,
body.dme-contact-drawer-open .et_pb_menu__icon {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Hide any open menus */
body.dme-contact-drawer-open .et_mobile_menu,
body.dme-contact-drawer-open #mobile_menu,
body.dme-contact-drawer-open .dropdown-menu,
body.dme-contact-drawer-open #drawer-menu {
    display: none !important;
    visibility: hidden !important;
}

/* Close button styling */
#drawer-close {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    background: none !important;
    border: none !important;
    color: white !important;
    font-size: 24px !important;
    cursor: pointer !important;
    z-index: 1 !important;
}

/* Drawer content styling */
.drawer-content {
    padding: 20px !important;
    color: white !important;
}

.drawer-header {
    padding: 20px !important;
    padding-right: 50px !important; /* Make room for close button */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    margin-bottom: 20px !important;
}

.drawer-header h2 {
    color: white !important;
    margin: 0 !important;
}

/* Form controls */
#dme-contact-drawer .form-group {
    margin-bottom: 20px !important;
}

#dme-contact-drawer label {
    display: block !important;
    margin-bottom: 5px !important;
    color: white !important;
}

#dme-contact-drawer input,
#dme-contact-drawer textarea {
    width: 100% !important;
    background-color: #333333 !important;
    color: white !important;
    border: 1px solid #555555 !important;
    padding: 10px !important;
    border-radius: 0 !important;
}

#dme-contact-drawer textarea {
    min-height: 120px !important;
    resize: vertical !important;
}

#dme-contact-drawer .submit-button {
    background-color: transparent !important;
    color: white !important;
    border: 2px solid white !important;
    padding: 12px 20px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
}

#dme-contact-drawer .submit-button:hover {
    background-color: white !important;
    color: black !important;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    #dme-contact-drawer {
        width: 300px !important;
        right: -300px !important;
    }
    
    body.dme-contact-drawer-open #dme-contact-tab {
        right: 300px !important;
    }
}

/* Make sure drawer contains the form properly */
#dme-contact-drawer:after {
    content: "";
    display: table;
    clear: both;
}

/* Ensure body doesn't scroll when drawer is open */
body.dme-contact-drawer-open {
    overflow: hidden !important;
}

/* Additional specific fixes for Divi */
#et-top-navigation,
.et_pb_module,
.et_pb_row,
.et_pb_menu__wrap {
    position: static !important; /* Prevent stacking context issues */
}

/* Cart icon fix */
body.dme-contact-drawer-open .et_pb_menu__icon--cart {
    opacity: 0 !important;
}

/**
 * Fix for black box replacing hamburger menu when drawer is open
 * Add this to your contact-drawer-fix.css file
 */

/* Target the black box background of the hamburger menu container */
body.dme-contact-drawer-open .et_mobile_nav_menu,
body.dme-contact-drawer-open .et_pb_menu_0_tb_header .et_pb_menu__wrap,
body.dme-contact-drawer-open .mobile_nav,
body.dme-contact-drawer-open .et_pb_menu__menu,
body.dme-contact-drawer-open .et_mobile_menu,
body.dme-contact-drawer-open #et_mobile_nav_menu,
body.dme-contact-drawer-open .et_pb_module.et_pb_menu {
    background-color: transparent !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Make the container itself invisible, not just the icon */
body.dme-contact-drawer-open .et_mobile_nav_menu,
body.dme-contact-drawer-open .et_pb_menu__icon {
    opacity: 0 !important;
    visibility: hidden !important;
    background-color: transparent !important;
    background: transparent !important;
}

/* Target any Divi containers that might have a background */
body.dme-contact-drawer-open .et_pb_menu,
body.dme-contact-drawer-open .et_pb_menu__wrap {
    background-color: transparent !important;
}

/* Ensure the logo area remains visible */
body.dme-contact-drawer-open .logo_container,
body.dme-contact-drawer-open .et_pb_image {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Contact Form 7 Styling for DME Tuning Contact Drawer */

/* Form container */
#dme-contact-drawer .wpcf7 form.wpcf7-form {
  margin: 0 !important;
  padding: 0 !important;
}

/* Text styling for labels */
#dme-contact-drawer .wpcf7 form.wpcf7-form label {
  display: block !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  margin-bottom: 4px !important;
}

/* Remove break tags spacing */
#dme-contact-drawer .wpcf7 form.wpcf7-form br {
  display: none !important;
}

/* Paragraph spacing */
#dme-contact-drawer .wpcf7 form.wpcf7-form p {
  margin-bottom: 20px !important;
}

/* Input fields */
#dme-contact-drawer .wpcf7-form-control-wrap input.wpcf7-form-control,
#dme-contact-drawer .wpcf7-form-control-wrap textarea.wpcf7-form-control {
  width: 100% !important;
  background-color: #333333 !important;
  border: 1px solid #555555 !important;
  color: #ffffff !important;
  padding: 12px 15px !important;
  font-size: 15px !important;
  border-radius: 3px !important;
  margin-top: 5px !important;
  box-sizing: border-box !important;
}

/* Textarea specific styling */
#dme-contact-drawer .wpcf7-form-control-wrap textarea.wpcf7-form-control {
  min-height: 150px !important;
  resize: vertical !important;
}

/* Input focus states */
#dme-contact-drawer .wpcf7-form-control-wrap input.wpcf7-form-control:focus,
#dme-contact-drawer .wpcf7-form-control-wrap textarea.wpcf7-form-control:focus {
  background-color: #3a3a3a !important;
  border-color: #ffffff !important;
  outline: none !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.2) !important;
}

/* Submit button */
#dme-contact-drawer .wpcf7-submit {
  display: block !important;
  width: 100% !important;
  background-color: #333333 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  padding: 15px 20px !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border-radius: 3px !important;
  transition: all 0.3s ease !important;
  line-height: 1.3 !important;
}

/* Submit button hover state */
#dme-contact-drawer .wpcf7-submit:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* Intro paragraph */
#dme-contact-drawer .drawer-content > p {
  margin-bottom: 25px !important;
  line-height: 1.5 !important;
  font-size: 16px !important;
  color: #ffffff !important;
}

/* Loading spinner */
#dme-contact-drawer .wpcf7-spinner {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background-color: rgba(255, 255, 255, 0.7) !important;
  opacity: 0.7 !important;
}

/* Response messages */
#dme-contact-drawer .wpcf7-response-output {
  margin: 20px 0 10px !important;
  padding: 12px 15px !important;
  border-radius: 3px !important;
  text-align: center !important;
  font-size: 14px !important;
  border: 1px solid !important;
}

/* Success message */
#dme-contact-drawer .wpcf7-mail-sent-ok {
  background-color: rgba(46, 204, 113, 0.2) !important;
  border-color: #2ecc71 !important;
  color: #2ecc71 !important;
}

/* Error message */
#dme-contact-drawer .wpcf7-validation-errors,
#dme-contact-drawer .wpcf7-not-valid {
  background-color: rgba(231, 76, 60, 0.2) !important;
  border-color: #e74c3c !important;
  color: #ff6b6b !important;
}

/* Individual field errors */
#dme-contact-drawer .wpcf7-not-valid-tip {
  color: #ff6b6b !important;
  font-size: 12px !important;
  margin-top: 5px !important;
  display: block !important;
}

/* Placeholder text */
#dme-contact-drawer .wpcf7-form-control::placeholder {
  color: #999999 !important;
  opacity: 1 !important;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  #dme-contact-drawer .wpcf7 form.wpcf7-form label {
    font-size: 15px !important;
  }
  
  #dme-contact-drawer .wpcf7-form-control-wrap input.wpcf7-form-control,
  #dme-contact-drawer .wpcf7-form-control-wrap textarea.wpcf7-form-control {
    padding: 10px 12px !important;
    font-size: 14px !important;
  }
  
  #dme-contact-drawer .wpcf7-submit {
    padding: 12px 15px !important;
    font-size: 15px !important;
  }
}

/* Contact Form 7 Styling for DME Tuning Contact Drawer - With Performance Red Accents */

/* Tab button - red racing style */
#dme-contact-tab {
  background-color: #e60000 !important; /* Bright racing red */
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-right: none !important;
  padding: 20px 10px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 0 15px rgba(230, 0, 0, 0.5) !important; /* Red glow effect */
}

#dme-contact-tab:hover {
  background-color: #ff0000 !important; /* Brighter red on hover */
  transform: translateX(-5px) translateY(-50%) !important; /* Slight movement on hover */
}

/* Form container */
#dme-contact-drawer .wpcf7 form.wpcf7-form {
  margin: 0 !important;
  padding: 0 !important;
}

/* Text styling for labels */
#dme-contact-drawer .wpcf7 form.wpcf7-form label {
  display: block !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  margin-bottom: 4px !important;
}

/* Remove break tags spacing */
#dme-contact-drawer .wpcf7 form.wpcf7-form br {
  display: none !important;
}

/* Paragraph spacing */
#dme-contact-drawer .wpcf7 form.wpcf7-form p {
  margin-bottom: 20px !important;
}

/* Input fields */
#dme-contact-drawer .wpcf7-form-control-wrap input.wpcf7-form-control,
#dme-contact-drawer .wpcf7-form-control-wrap textarea.wpcf7-form-control {
  width: 100% !important;
  background-color: #333333 !important;
  border: 1px solid #555555 !important;
  color: #ffffff !important;
  padding: 12px 15px !important;
  font-size: 15px !important;
  border-radius: 3px !important;
  margin-top: 5px !important;
  box-sizing: border-box !important;
  transition: all 0.3s ease !important;
}

/* Input focus states - racing red accent */
#dme-contact-drawer .wpcf7-form-control-wrap input.wpcf7-form-control:focus,
#dme-contact-drawer .wpcf7-form-control-wrap textarea.wpcf7-form-control:focus {
  background-color: #3a3a3a !important;
  border-color: #e60000 !important; /* Racing red border */
  outline: none !important;
  box-shadow: 0 0 8px rgba(230, 0, 0, 0.3) !important; /* Red glow effect */
}

/* Submit button - racing red style */
#dme-contact-drawer .wpcf7-submit {
  display: block !important;
  width: 100% !important;
  background-color: #e60000 !important; /* Racing red background */
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  padding: 15px 20px !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border-radius: 3px !important;
  transition: all 0.3s ease !important;
  line-height: 1.3 !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important; /* Add depth */
}

/* Submit button hover state */
#dme-contact-drawer .wpcf7-submit:hover {
  background-color: #ff0000 !important; /* Brighter red on hover */
  transform: translateY(-2px) !important; /* Subtle lift effect */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4) !important; /* Enhanced shadow on hover */
}

/* Submit button active state */
#dme-contact-drawer .wpcf7-submit:active {
  transform: translateY(1px) !important; /* Press effect */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

/* Intro paragraph */
#dme-contact-drawer .drawer-content > p {
  margin-bottom: 25px !important;
  line-height: 1.5 !important;
  font-size: 16px !important;
  color: #ffffff !important;
}

/* Form header - add red accent */
#dme-contact-drawer .drawer-header {
  border-bottom: 2px solid #e60000 !important; /* Racing red border */
}

#dme-contact-drawer .drawer-header h2 {
  color: #ffffff !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

/* Loading spinner */
#dme-contact-drawer .wpcf7-spinner {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background-color: rgba(255, 255, 255, 0.7) !important;
  opacity: 0.7 !important;
}

/* Response messages */
#dme-contact-drawer .wpcf7-response-output {
  margin: 20px 0 10px !important;
  padding: 12px 15px !important;
  border-radius: 3px !important;
  text-align: center !important;
  font-size: 14px !important;
  border: 1px solid !important;
}

/* Success message */
#dme-contact-drawer .wpcf7-mail-sent-ok {
  background-color: rgba(46, 204, 113, 0.2) !important;
  border-color: #27ae60 !important;
  color: #2ecc71 !important;
}

/* Error message */
#dme-contact-drawer .wpcf7-validation-errors,
#dme-contact-drawer .wpcf7-not-valid {
  background-color: rgba(231, 76, 60, 0.2) !important;
  border-color: #e74c3c !important;
  color: #ff6b6b !important;
}

/* Individual field errors */
#dme-contact-drawer .wpcf7-not-valid-tip {
  color: #ff6b6b !important;
  font-size: 12px !important;
  margin-top: 5px !important;
  display: block !important;
}

/* Placeholder text */
#dme-contact-drawer .wpcf7-form-control::placeholder {
  color: #999999 !important;
  opacity: 1 !important;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  #dme-contact-drawer .wpcf7 form.wpcf7-form label {
    font-size: 15px !important;
  }
  
  #dme-contact-drawer .wpcf7-form-control-wrap input.wpcf7-form-control,
  #dme-contact-drawer .wpcf7-form-control-wrap textarea.wpcf7-form-control {
    padding: 10px 12px !important;
    font-size: 14px !important;
  }
  
  #dme-contact-drawer .wpcf7-submit {
    padding: 12px 15px !important;
    font-size: 15px !important;
  }
}

/* Animation for the tab button - subtle pulse effect */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(230, 0, 0, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(230, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(230, 0, 0, 0); }
}

#dme-contact-tab {
  animation: pulse 2s infinite;
}

/* Contact Form 7 Styling for DME Tuning Contact Drawer - With Performance Red Accents */

/* Tab button - always red racing style (no longer only on hover) */
#dme-contact-tab {
  background-color: #e60000 !important; /* Bright racing red background by default */
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-right: none !important;
  padding: 20px 10px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 0 15px rgba(230, 0, 0, 0.5) !important; /* Red glow effect */
  font-weight: bold !important;
}

/* Hover effect for the tab - now just enhances the existing red */
#dme-contact-tab:hover {
  background-color: #ff0000 !important; /* Slightly brighter red on hover */
  transform: translateX(-5px) translateY(-50%) !important; /* Slight movement on hover */
}

/* Form header styling - add red accent line to match site */
#dme-contact-drawer .drawer-header {
  border-bottom: 2px solid #e60000 !important; /* Racing red border */
  position: relative !important;
}

/* Add red underline to the header */
#dme-contact-drawer .drawer-header:after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background-color: #e60000 !important;
}

/* Form container */
#dme-contact-drawer .wpcf7 form.wpcf7-form {
  margin: 0 !important;
  padding: 0 !important;
}

/* Text styling for labels */
#dme-contact-drawer .wpcf7 form.wpcf7-form label {
  display: block !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  margin-bottom: 4px !important;
}

/* Remove break tags spacing */
#dme-contact-drawer .wpcf7 form.wpcf7-form br {
  display: none !important;
}

/* Paragraph spacing */
#dme-contact-drawer .wpcf7 form.wpcf7-form p {
  margin-bottom: 20px !important;
}

/* Input fields */
#dme-contact-drawer .wpcf7-form-control-wrap input.wpcf7-form-control,
#dme-contact-drawer .wpcf7-form-control-wrap textarea.wpcf7-form-control {
  width: 100% !important;
  background-color: #333333 !important;
  border: 1px solid #555555 !important;
  color: #ffffff !important;
  padding: 12px 15px !important;
  font-size: 15px !important;
  border-radius: 3px !important;
  margin-top: 5px !important;
  box-sizing: border-box !important;
  transition: all 0.3s ease !important;
}

/* Input focus states - racing red accent */
#dme-contact-drawer .wpcf7-form-control-wrap input.wpcf7-form-control:focus,
#dme-contact-drawer .wpcf7-form-control-wrap textarea.wpcf7-form-control:focus {
  background-color: #3a3a3a !important;
  border-color: #e60000 !important; /* Racing red border */
  outline: none !important;
  box-shadow: 0 0 8px rgba(230, 0, 0, 0.3) !important; /* Red glow effect */
}

/* Submit button - racing red style - match the color from image 3 */
#dme-contact-drawer .wpcf7-submit {
  display: block !important;
  width: 100% !important;
  background-color: #e60000 !important; /* Racing red background */
  color: #ffffff !important;
  border: none !important; /* Remove border to match image 3 */
  padding: 15px 20px !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border-radius: 3px !important;
  transition: all 0.3s ease !important;
  line-height: 1.3 !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important; /* Add depth */
}

/* Submit button hover state */
#dme-contact-drawer .wpcf7-submit:hover {
  background-color: #ff0000 !important; /* Brighter red on hover */
  transform: translateY(-2px) !important; /* Subtle lift effect */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4) !important; /* Enhanced shadow on hover */
}

/* Submit button active state */
#dme-contact-drawer .wpcf7-submit:active {
  transform: translateY(1px) !important; /* Press effect */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

/* Intro paragraph */
#dme-contact-drawer .drawer-content > p {
  margin-bottom: 25px !important;
  line-height: 1.5 !important;
  font-size: 16px !important;
  color: #ffffff !important;
}

/* Loading spinner */
#dme-contact-drawer .wpcf7-spinner {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background-color: rgba(255, 255, 255, 0.7) !important;
  opacity: 0.7 !important;
}

/* Response messages */
#dme-contact-drawer .wpcf7-response-output {
  margin: 20px 0 10px !important;
  padding: 12px 15px !important;
  border-radius: 3px !important;
  text-align: center !important;
  font-size: 14px !important;
  border: 1px solid !important;
}

/* Success message */
#dme-contact-drawer .wpcf7-mail-sent-ok {
  background-color: rgba(46, 204, 113, 0.2) !important;
  border-color: #27ae60 !important;
  color: #2ecc71 !important;
}

/* Error message */
#dme-contact-drawer .wpcf7-validation-errors,
#dme-contact-drawer .wpcf7-not-valid {
  background-color: rgba(231, 76, 60, 0.2) !important;
  border-color: #e74c3c !important;
  color: #ff6b6b !important;
}

/* Individual field errors */
#dme-contact-drawer .wpcf7-not-valid-tip {
  color: #ff6b6b !important;
  font-size: 12px !important;
  margin-top: 5px !important;
  display: block !important;
}

/* Placeholder text */
#dme-contact-drawer .wpcf7-form-control::placeholder {
  color: #999999 !important;
  opacity: 1 !important;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  #dme-contact-drawer .wpcf7 form.wpcf7-form label {
    font-size: 15px !important;
  }
  
  #dme-contact-drawer .wpcf7-form-control-wrap input.wpcf7-form-control,
  #dme-contact-drawer .wpcf7-form-control-wrap textarea.wpcf7-form-control {
    padding: 10px 12px !important;
    font-size: 14px !important;
  }
  
  #dme-contact-drawer .wpcf7-submit {
    padding: 12px 15px !important;
    font-size: 15px !important;
  }
}

/* Animation for the tab button - subtle pulse effect */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(230, 0, 0, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(230, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(230, 0, 0, 0); }
}

#dme-contact-tab {
  animation: pulse 2s infinite;
}

/* Contact Form 7 Styling - Form Elements Only */

/* Target just the tab element itself */
#dme-contact-tab {
  background-color: #e60000 !important; /* Bright racing red */
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-right: none !important;
  padding: 20px 10px !important;
  position: fixed !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  border-radius: 5px 0 0 5px !important;
  font-weight: bold !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  z-index: 199999 !important;
  box-shadow: 0 0 15px rgba(230, 0, 0, 0.5) !important; /* Add glow */
}

/* Form container */
#dme-contact-drawer .wpcf7 form.wpcf7-form {
  margin: 0 !important;
  padding: 0 !important;
}

/* Add red accent line below header */
#dme-contact-drawer .drawer-header {
  border-bottom: 2px solid #e60000 !important; /* Racing red border */
}

/* Submit button - racing red style to match the tab */
#dme-contact-drawer .wpcf7-submit {
  display: block !important;
  width: 100% !important;
  background-color: #e60000 !important; /* Racing red to match tab */
  color: #ffffff !important;
  border: none !important; /* No border to match image 3 */
  padding: 15px 20px !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border-radius: 3px !important;
  transition: all 0.3s ease !important;
  line-height: 1.3 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important; /* Add depth */
}

/* Submit button hover state */
#dme-contact-drawer .wpcf7-submit:hover {
  background-color: #ff0000 !important; /* Brighter red on hover */
  transform: translateY(-2px) !important; /* Subtle lift effect */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4) !important; /* Enhanced shadow on hover */
}

/* Rest of form styling remains the same */

/* Target just the tab itself with high specificity */
body #dme-contact-tab,
body .tune-my-car-btn,
body div[id*="contact-tab"],
body a[class*="tune"],
body .request-a-tune {
  background-color: #e60000 !important; /* Bright racing red */
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  transition: all 0.3s ease !important;
  display: block !important;
}

/* Additional targeting specifically for the structure in your screenshot */
.vertical-text,
[class*="request"] a,
[id*="request"] a,
span[class*="tune"] {
  background-color: #e60000 !important;
  color: #ffffff !important;
}

/* Override any hover states */
body #dme-contact-tab:hover,
body .tune-my-car-btn:hover,
body div[id*="contact-tab"]:hover,
body a[class*="tune"]:hover,
body .request-a-tune:hover {
  background-color: #ff0000 !important; /* Slightly brighter red on hover */
}

/* Add subtle animation to draw attention */
@keyframes subtle-glow {
  0% { box-shadow: 0 0 5px rgba(230, 0, 0, 0.5); }
  50% { box-shadow: 0 0 10px rgba(230, 0, 0, 0.7); }
  100% { box-shadow: 0 0 5px rgba(230, 0, 0, 0.5); }
}

body #dme-contact-tab,
body .tune-my-car-btn,
body div[id*="contact-tab"],
body a[class*="tune"],
body .request-a-tune {
  animation: subtle-glow 2s infinite !important;
}