/* Chrome Metal Button Widget */
.chrome-metal-button-wrapper {
    display: flex;
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center; /* No !important - alignment classes must override */
}

/* CSS Variables for dynamic control */
.chrome-metal-btn {
    --btn-border-radius: 4px;
    --btn-padding: 8px 12px;
    --btn-margin-top: 10px;
    --btn-margin-bottom: 10px;
    --btn-width: auto;
    --btn-height: auto;
}

/* Center first, then left/right AFTER so they win when Elementor stacks both classes */
.chrome-metal-align-center .chrome-metal-button-wrapper {
    justify-content: center !important;
    text-align: center !important;
}

.chrome-metal-align-left .chrome-metal-button-wrapper {
    justify-content: flex-start !important;
    text-align: left !important;
}

.chrome-metal-align-right .chrome-metal-button-wrapper {
    justify-content: flex-end !important;
    text-align: right !important;
}

/* Double-class fallback: when Elementor keeps both align-left AND align-center */
.chrome-metal-align-left.chrome-metal-align-center .chrome-metal-button-wrapper {
    justify-content: flex-start !important;
    text-align: left !important;
}

.chrome-metal-align-right.chrome-metal-align-center .chrome-metal-button-wrapper {
    justify-content: flex-end !important;
    text-align: right !important;
}

.chrome-metal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: rgba(143, 145, 151, 1);
  
  /* Use CSS variables with fallbacks */
  border-radius: var(--btn-border-radius, 4px);
  padding: var(--btn-padding, 8px 12px);
  margin: var(--btn-margin-top, 10px) 0 var(--btn-margin-bottom, 10px) 0;
  width: var(--btn-width, auto);
  height: var(--btn-height, auto);
  
  /* Chrome metal background - same as Service Floating widget */
  background: linear-gradient(105deg, 
    rgba(57,56,56,1) 4%, 
    rgba(254,227,216,1) 8%, 
    rgba(239,240,243,1) 10%, 
    rgba(255,255,229,1) 13%, 
    rgba(254,192,171,1) 17%, 
    rgba(86,87,89,1) 23%, 
    rgba(86,87,89,1) 35%, 
    rgba(194,169,138,1) 39%, 
    rgba(184,184,184,1) 43%, 
    rgba(184,184,184,1) 53%, 
    rgba(229,255,254,1) 58%, 
    rgba(239,240,243,1) 60%, 
    rgba(255,247,234,1) 67%, 
    rgba(249,232,225,1) 69%, 
    rgba(180,178,181,1) 75%, 
    rgba(208,216,248,1) 78%, 
    rgba(89,81,87,1) 82%, 
    rgba(89,81,87,1) 87%, 
    rgba(203,207,219,1) 89%, 
    rgba(89,81,87,1) 92%, 
    rgba(57,56,56,1) 96%
  );
  
  text-shadow: 0 1px rgba(255, 255, 255, .9), 0 -1px rgba(30, 30, 30, 1);
  transition: all 350ms ease;
  border-top: 1px solid rgba(238, 238, 220, 0.9);
  border-right: 1px solid rgba(40, 40, 40, 0.8);
  border-bottom: 1px solid rgba(40, 40, 40, 0.9);
  border-left: 1px solid rgba(91, 107, 128, 0.7);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
  position: relative;
  cursor: pointer;
  background-size: 200% 100%;
  background-repeat: repeat-x;
  background-position: 100% 100%;
}

.chrome-metal-btn:hover {
  background-position: 0% 100%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Reflection effect - matching Service Floating widget */
.chrome-metal-btn:after {
  content: "";
  position: absolute;
  top: 10px; /* 10px from top of button */
  left: 10px; /* 10px from left of button */
  right: 10px; /* 10px from right of button */
  bottom: 10px; /* 10px from bottom of button */
  background: linear-gradient(to bottom, #f0f0f0 0%, #d0d0d0 100%); /* Lighter silver gradient */
  border-radius: var(--btn-border-radius, 4px); /* Match button border-radius */
  z-index: 1; /* Behind text, above main button background */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -1px 0 rgba(255,255,255,0.3);
}

.chrome-metal-btn span {
  position: relative;
  z-index: 2;
  display: block;
  padding: 20px;
  text-align: center;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(97, 99, 106, 1);
}

.chrome-metal-btn.active {
  background-size: 200% 100%;
}

/* Mobile touch animation enhancement */
.chrome-metal-btn.mobile-active {
  transition: all 150ms ease-out !important;
  transform: scale(0.98) !important;
}

.chrome-metal-btn.mobile-active:after {
  transition: all 150ms ease-out !important;
  transform: scale(0.98) !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .chrome-metal-button-wrapper {
    padding: 0 15px; /* Add padding for mobile */
  }
  
  .chrome-metal-btn {
    font-size: 1.8rem;
    padding: 6px 10px;
    margin: 8px;
    max-width: 100%; /* Ensure button doesn't overflow */
  }
}

@media (max-width: 480px) {
  .chrome-metal-button-wrapper {
    padding: 0 10px; /* Reduce padding for small mobile */
  }
  
  .chrome-metal-btn {
    font-size: 1.6rem;
    padding: 4px 8px;
    margin: 6px;
    width: auto; /* Allow natural width */
    min-width: 120px; /* Minimum touch target size */
  }
}

/* Responsive alignment support - Fixed selectors */
@media (max-width: 1024px) {
    .chrome-metal-align-tablet-left .chrome-metal-button-wrapper {
        justify-content: flex-start !important;
        text-align: left !important;
    }
    
    .chrome-metal-align-tablet-center .chrome-metal-button-wrapper {
        justify-content: center !important;
        text-align: center !important;
    }
    
    .chrome-metal-align-tablet-right .chrome-metal-button-wrapper {
        justify-content: flex-end !important;
        text-align: right !important;
    }
}

@media (max-width: 768px) {
    .chrome-metal-align-mobile-left .chrome-metal-button-wrapper {
        justify-content: flex-start !important;
        text-align: left !important;
    }
    
    .chrome-metal-align-mobile-center .chrome-metal-button-wrapper {
        justify-content: center !important;
        text-align: center !important;
    }
    
    .chrome-metal-align-mobile-right .chrome-metal-button-wrapper {
        justify-content: flex-end !important;
        text-align: right !important;
    }
}

/* Elementor Editor Compatibility */
.elementor-editor-active .chrome-metal-btn {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .chrome-metal-btn * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}