/*
 * Plugin Name: Attractive Age Calculator
 * Description: Stylesheet for the Age Calculator plugin.
 */

/* Import Inter font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* --- REMOVED: @import url('https://cdn.tailwindcss.com'); --- */
/* Tailwind CSS import has been removed to prevent global style conflicts.
   The plugin will now rely on your theme's existing CSS for basic resets,
   and its own scoped styles for specific elements. */

/* All plugin-specific styles are now scoped within .age-calculator-container */
.age-calculator-container {
  /* Box model and general layout */
  font-family: 'Inter', sans-serif;
  background-color: #f0f2f5; /* Light gray background */
  padding: 2.5rem; /* 40px */
  border-radius: 1.5rem; /* 24px */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* Soft shadow */
  max-width: 48rem; /* Increased width for laptops */
  margin: 2rem auto; /* 32px top/bottom, auto side */
  border: 1px solid #e0e0e0; /* Thin border */
  transition: all 0.3s ease-in-out; /* Smooth transition */
  box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
}

.age-calculator-container:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); /* Deeper shadow on hover */
  transform: translateY(-0.25rem); /* Slight lift on hover */
}

/* Header styles */
.age-calculator-container .age-calculator-header {
  font-size: 2.5rem; /* Slightly larger font for header */
  font-weight: 700; /* Bold */
  color: #333; /* Dark text */
  text-align: center;
  margin-bottom: 2.5rem; /* Increased margin-bottom */
  position: relative;
  padding-bottom: 0.75rem; /* 12px */
}

.age-calculator-container .age-calculator-header::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 5rem; /* Slightly wider underline */
  height: 0.3rem; /* Slightly thicker underline */
  background-color: #f97316; /* Orange color */
  border-radius: 0.125rem; /* 2px */
}

/* Section separation styles */
.age-calculator-container .date-section {
  background-color: #ffffff; /* White background for sections */
  padding: 1.5rem;
  border-radius: 1rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
}

.age-calculator-container .date-section-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1rem;
  border-bottom: 2px solid #f97316; /* Orange underline for section title */
  padding-bottom: 0.5rem;
  display: inline-block; /* To make underline fit content */
}

/* Form group styles */
.age-calculator-container .form-group {
  margin-bottom: 1.75rem; /* Slightly increased margin */
}

.age-calculator-container .form-label {
  display: block;
  font-size: 1.125rem; /* 18px */
  font-weight: 500; /* Medium */
  color: #555; /* Gray text */
  margin-bottom: 0.6rem; /* Slightly increased margin */
}

/* Form select styles */
.age-calculator-container .form-select {
  width: 100%;
  padding: 0.85rem 1.1rem; /* Slightly increased padding */
  border: 1px solid #ccc; /* Light gray border */
  border-radius: 0.75rem; /* 12px */
  font-size: 1rem; /* 16px */
  color: #444; /* Dark text */
  background-color: #fff; /* White background */
  appearance: none; /* Remove default arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20fill%3D%22%23666%22%20d%3D%22M5.293%207.293a1%201%200%20011.414%200L10%2010.586l3.293-3.293a1%201%200%20111.414%201.414l-4%204a1%201%200%2001-1.414%200l-4-4a1%201%200%20010-1.414z%22%2F%3E%3C%2Fsvg%3E'); /* Custom arrow */
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1em;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.age-calculator-container .form-select:focus {
  outline: none;
  border-color: #f97316; /* Orange border on focus */
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.25); /* Slightly larger shadow on focus */
}

/* Calculate button styles */
.age-calculator-container .calculate-button {
  width: 100%;
  padding: 1.1rem 1.75rem; /* Slightly increased padding */
  background: linear-gradient(to right, #f97316, #fb923c); /* Orange gradient */
  color: #fff; /* White text */
  font-size: 1.35rem; /* Slightly larger font */
  font-weight: 600; /* Semi-bold */
  border: none;
  border-radius: 0.75rem; /* 12px */
  cursor: pointer;
  transition: all 0.3s ease; /* Smooth transition */
  box-shadow: 0 6px 18px rgba(249, 115, 22, 0.35); /* Stronger button shadow */
}

.age-calculator-container .calculate-button:hover {
  background: linear-gradient(to right, #fb923c, #f97316); /* Reverse gradient */
  box-shadow: 0 10px 25px rgba(249, 115, 22, 0.5); /* Deeper shadow on hover */
  transform: translateY(-0.15rem); /* Slight lift on hover */
}

/* Result section styles */
.age-calculator-container .result-section {
  margin-top: 2.5rem; /* Increased margin-top */
  background-color: #fff; /* White background */
  border-radius: 1.5rem; /* 24px */
  padding: 2.25rem; /* Slightly increased padding */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* Soft shadow */
  border: 1px solid #e0e0e0; /* Thin border */
}

.age-calculator-container .result-title {
  font-size: 1.85rem; /* Slightly larger font */
  font-weight: 600; /* Semi-bold */
  color: #333; /* Dark text */
  margin-bottom: 1.75rem; /* Increased margin */
  text-align: center;
}

.age-calculator-container .result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 0; /* Slightly increased padding */
  border-bottom: 1px dashed #eee; /* Dashed line */
}

.age-calculator-container .result-item:last-child {
  border-bottom: none; /* No border on last item */
}

.age-calculator-container .result-label {
  font-size: 1.05rem; /* Slightly larger font */
  font-weight: 500; /* Medium */
  color: #666; /* Gray text */
}

.age-calculator-container .result-value {
  font-size: 1.25rem; /* Slightly larger font */
  font-weight: 600; /* Semi-bold */
  color: #f97316; /* Orange text */
}

/* Copy button styles */
.age-calculator-container .copy-button {
  background-color: #f0f2f5; /* Light gray */
  color: #f97316; /* Orange text */
  border: 1px solid #f97316; /* Orange border */
  padding: 0.6rem 0.85rem; /* Slightly increased padding */
  border-radius: 0.5rem; /* 8px */
  cursor: pointer;
  font-size: 0.9rem; /* Slightly larger font */
  font-weight: 500;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.age-calculator-container .copy-button:hover {
  background-color: #f97316; /* Orange background on hover */
  color: #fff; /* White text on hover */
  box-shadow: 0 3px 10px rgba(249, 115, 22, 0.3); /* Stronger shadow on hover */
}

.age-calculator-container .copy-button svg {
  margin-right: 0.3rem; /* Slightly increased margin */
}

/* Ensure the hidden class works correctly */
.age-calculator-container .hidden {
  display: none !important;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
  .age-calculator-container {
    padding: 1.5rem; /* 24px */
    margin: 1rem auto; /* 16px top/bottom */
    max-width: 95%; /* Adjust for smaller screens */
  }

  .age-calculator-container .age-calculator-header {
    font-size: 1.75rem; /* 28px */
    margin-bottom: 1.5rem; /* 24px */
  }

  .age-calculator-container .form-select,
  .age-calculator-container .calculate-button {
    padding: 0.75rem 1rem; /* Smaller padding */
    font-size: 1rem; /* 16px */
  }

  .age-calculator-container .result-section {
    padding: 1.5rem; /* 24px */
  }

  .age-calculator-container .result-title {
    font-size: 1.5rem; /* 24px */
    margin-bottom: 1rem; /* 16px */
  }

  .age-calculator-container .result-item {
    flex-direction: column; /* Column layout on mobile */
    align-items: flex-start;
    padding: 0.75rem 0; /* 12px top/bottom */
  }

  .age-calculator-container .result-label {
    margin-bottom: 0.25rem; /* 4px */
  }

  .age-calculator-container .copy-button {
    margin-top: 0.5rem; /* 8px */
    align-self: flex-end; /* Align to right */
  }
}

/* Laptop and larger screens */
@media (min-width: 1024px) {
  .age-calculator-container {
    max-width: 60rem; /* Further increased width for larger laptops/desktops */
    padding: 3rem; /* More padding */
  }
  .age-calculator-container .age-calculator-header {
    font-size: 3rem; /* Larger header font */
  }
  .age-calculator-container .form-label {
    font-size: 1.25rem; /* Larger labels */
  }
  .age-calculator-container .form-select {
    font-size: 1.1rem; /* Larger select font */
  }
  .age-calculator-container .calculate-button {
    font-size: 1.5rem; /* Larger button font */
  }
  .age-calculator-container .result-title {
    font-size: 2.25rem; /* Larger result title */
  }
  .age-calculator-container .result-label,
  .age-calculator-container .result-value {
    font-size: 1.15rem; /* Larger result text */
  }
}