/* 1. Remove the theme's weird white pill container */
.wp-block-social-links .wp-social-link:has(a[href*="apple.com"]) {
    background-color: transparent !important;
    background: none !important;
    box-shadow: none !important;
}

/* 2. Build a brand new, correctly sized black circle for the Apple logo */
.wp-block-social-links a[href*="apple.com"],
.wp-block-social-links .wp-social-link-anchor[href*="apple.com"] {
    background-image: url('https://davidcaines.com/wp-content/uploads/2026/06/png-apple-logo-9718.png') !important;
    
    /* Perfect proportions to let the apple sit naturally in a larger circle */
    background-size: 28px 28px !important; 
    background-repeat: no-repeat !important;
    background-position: center !important;
    
    background-color: #fc3c44 !important; /* Flawless black background */
    border-radius: 50% !important;        /* Forces a perfect round shape */
    
    display: inline-block !important;
    
    /* Bumped up from 32px to 42px to match the native WordPress circles */
    width: 38px !important;
    height: 38px !important;
    box-sizing: border-box !important;
    
    /* Centers it vertically alongside Spotify and X */
    margin-top: 0px !important; 
    vertical-align: middle !important;
}

/* 3. Keep the default fallback icon completely hidden */
.wp-block-social-links .wp-social-link:has(a[href*="apple.com"]) svg,
.wp-block-social-links a[href*="apple.com"] svg,
.wp-block-social-links .wp-social-link-anchor[href*="apple.com"] svg {
    display: none !important;
    opacity: 0 !important;
}
/* Container for the 4 columns on a single row */
.form-four-columns {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important; /* Forces them to stay on one line */
  gap: 15px !important; /* Space between fields */
  margin-bottom: 25px !important;
  width: 100% !important;
}

/* Individual column behavior */
.form-four-columns .form-column {
  flex: 1 !important; /* Gives every field equal width */
  min-width: 0 !important; /* Prevents fields from breaking layout */
  box-sizing: border-box !important;
}

/* Input field styling matching your screenshot */
.form-four-columns input[type="text"],
.form-four-columns input[type="email"],
.form-four-columns input[type="tel"] {
  width: 100% !important;
  padding: 14px 12px !important;
  background: #ffffff !important;
  border: none !important;
  font-size: 16px !important;
  color: #222 !important;
  box-sizing: border-box !important;
}

/* Submit button styling */
.form-submit-row input[type="submit"] {
  background: #ffffff !important;
  color: #000000 !important;
  padding: 14px 40px !important;
  font-weight: bold !important;
  border: none !important;
  cursor: pointer !important;
  text-transform: uppercase;
}

.form-submit-row input[type="submit"]:hover {
  background: #f0f0f0 !important;
}

/* Responsive adjustment for small mobile screens if needed */
@media (max-width: 768px) {
  .form-four-columns {
    flex-wrap: wrap !important; /* Allows stacking on mobile phones */
  }
  .form-four-columns .form-column {
    flex: 1 1 100% !important; /* Full width on small screens */
  }
}
/* Full-width message container */
.form-full-width {
  width: 100% !important;
  margin-bottom: 25px !important;
  box-sizing: border-box !important;
}

/* Textarea styling matching your input fields */
.form-full-width textarea {
  width: 100% !important;
  padding: 14px 12px !important;
  background: #ffffff !important;
  border: none !important;
  font-size: 16px !important;
  color: #222 !important;
  font-family: inherit; /* Keeps the font matching the inputs */
  resize: vertical; /* Allows users to drag it taller if they need to */
  box-sizing: border-box !important;
}