/**
 * 4Square Button Component Stylesheet
 *
 * This file contains standardized button styling for the 4Square application.
 * It defines a consistent button style system using class-based selectors rather than
 * targeting specific URLs or DOM positions. This ensures buttons maintain styling
 * when URLs change or DOM structures are modified.
 *
 * Button Classes:
 * - foursquare-button: Base button class with shared styling
 * - foursquare-button-primary: Primary action buttons (blue)
 * - foursquare-button-secondary: Secondary/outline buttons
 * - foursquare-button-success: Success/confirmation buttons (green)
 * - foursquare-button-danger: Destructive action buttons (red)
 * 
 * This file also maintains compatibility with Bootstrap-style button classes:
 * - .btn: Base button class
 * - .btn-primary: Primary action buttons (blue)
 * - .btn-success: Success/confirmation buttons (green)
 * - .btn-large: Larger sized buttons
 */

/* ---------------------------------------------
   Base Button Styles
   Applied to all buttons regardless of variant
--------------------------------------------- */
.foursquare-button {
  /* Structure */
  display: inline-block;
  padding: 8px 16px; /* Reduced padding to match dashboard buttons */
  border-radius: var(--border-radius-sm, 6px);
  
  /* Typography */
  font-weight: 600; /* Increased from 500 to 600 to match dashboard buttons */
  font-size: 14px !important;
  text-decoration: none;
  text-align: center;
  line-height: normal; /* Ensure proper vertical text alignment */
  
  /* Behavior */
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  
  /* Sizing */
  width: fit-content;
}

/* Hover state for all buttons */
.foursquare-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Focus state for accessibility */
.foursquare-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.4);
}

/* ---------------------------------------------
   Primary Button Variant
   Used for primary/main call-to-action buttons
--------------------------------------------- */
.foursquare-button-primary {
  background-color: var(--primary, #3498db);
  color: white;
}

.foursquare-button-primary:hover {
  background-color: var(--primary-dark, #2980b9);
}

/* ---------------------------------------------
   Secondary Button Variant
   Used for secondary actions, often paired with primary
--------------------------------------------- */
.foursquare-button-secondary {
  background-color: transparent;
  border: 1px solid var(--text-secondary, #7f8c8d);
  color: var(--text-secondary, #7f8c8d);
}

.foursquare-button-secondary:hover {
  background-color: var(--text-secondary, #7f8c8d);
  color: white;
}

/* ---------------------------------------------
   Success Button Variant
   Used for confirmation/positive actions
--------------------------------------------- */
.foursquare-button-success {
  background-color: var(--success, #2ecc71);
  color: white;
}

.foursquare-button-success:hover {
  background-color: var(--success-dark, #27ae60);
}

/* ---------------------------------------------
   Danger Button Variant
   Used for destructive actions that require caution
--------------------------------------------- */
.foursquare-button-danger {
  background-color: var(--danger, #e74c3c);
  color: white;
}

.foursquare-button-danger:hover {
  background-color: var(--danger-dark, #c0392b);
}

/* ---------------------------------------------
   Disabled State
   Applied to any button that is disabled
--------------------------------------------- */
.foursquare-button[disabled],
.foursquare-button.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ---------------------------------------------
   Size Variants
   Optional size modifiers for buttons
--------------------------------------------- */
.foursquare-button-sm {
  padding: 6px 12px;
  font-size: 0.875rem;
}

.foursquare-button-lg {
  padding: 12px 24px;
  font-size: 1.125rem;
}

/* ---------------------------------------------
   Full Width Option
   Makes a button expand to fill its container
--------------------------------------------- */
.foursquare-button-block {
  display: block;
  width: 100%;
}

/* ---------------------------------------------
   Bootstrap-style Button Compatibility
   Ensures existing Bootstrap button classes continue to work
--------------------------------------------- */

/* .btn - Base button class */
.btn,
a.btn,
input[type="submit"] {
  /* Apply the same base styles as foursquare-button */
  display: inline-block;
  padding: 8px 16px; /* Reduced padding to match dashboard buttons */
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px; /* Smaller font size to match dashboard buttons */
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  text-align: center;
  width: fit-content;
  line-height: normal; /* Ensure proper vertical text alignment */
}

/* .btn-primary - Primary button variant */
.btn-primary,
a.btn-primary,
input[type="submit"] {
  background-color: var(--primary, #3498db);
  color: white;
  /* Adjusted padding to match the design mockup */
  padding: 10px 20px; /* Increased from 8px 16px for better visual appearance */
}

.btn-primary:hover {
  background-color: var(--primary-dark, #2980b9);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* .btn-success - Success button variant */
.btn-success,
a.btn-success {
  background-color: var(--success, #2ecc71);
  color: white;
}

.btn-success:hover {
  background-color: var(--success-dark, #27ae60);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* .btn-large - Large button size variant */
.btn-large,
a.btn-large {
  padding: 15px 30px;
  font-size: 18px;
}

/* ---------------------------------------------
   Form Submit Buttons
   Ensures input[type="submit"] buttons have consistent styling
--------------------------------------------- */
input[type="submit"] {
  height: 40px; /* Maintains a consistent height for form submit buttons */
  vertical-align: middle;
  appearance: none; /* Removes browser default styling */
  -webkit-appearance: none;
}

/* Submit button hover state */
input[type="submit"]:hover {
  background-color: var(--primary-dark, #2980b9);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* ---------------------------------------------
   Component-Specific Overrides
   These target specific components that need additional styling
--------------------------------------------- */

/* ---------------------------------------------
   Link Button Styling
   Ensures <a> tags with button classes look like buttons
   
   ⚠️ CRITICAL SECTION - DO NOT REMOVE ⚠️
   This section ensures that anchor links with button classes
   are properly styled as buttons throughout the application.
   Removing this would break button styling on many links.
--------------------------------------------- */

/* 
 * Apply basic anchor tag fixes for all buttons
 * These overrides are needed because anchor tags have
 * different default styling than buttons (underlines, colors, etc)
 */
a.btn,
a.foursquare-button {
  /* Critical to prevent underlines and maintain text color */
  text-decoration: none !important;
  /* Handle border-box and dimensions like buttons */
  box-sizing: border-box !important;
  /* Display as block for proper click target */
  display: inline-block !important;
  /* Vertical alignment for mixed content */
  vertical-align: middle !important;
  /* Ensure we never get browser default colors */
  border: none !important;
  /* Text color should be determined by specific button class */
}

/* Prevent hover underline from theme CSS */
a.btn:hover,
a.foursquare-button:hover {
  text-decoration: none !important;
}

/* 
 * Target link buttons in various contexts
 * This helps ensure buttons render consistently across the application
 * regardless of their parent container
 */
.points-balance-actions a.btn,
.view-footer a.btn,
.checkout-section a.btn,
.actions a.btn {
  /* Ensure all standard properties get applied */
  margin: 0 !important;
  /* Other properties come from the standard .btn class */
}

/* 
 * Note: The ultra-specific override for buttons was removed
 * The issue was identified as a Drupal configuration problem:
 * The text field format was set to "basic HTML" which filtered out HTML classes
 * General button styling above provides consistent appearance for all buttons
 * when the correct HTML classes are present in the markup
 */