/*
BACANCY COMMISSION CALCULATOR - IFRAME STYLES
=============================================

This file contains CSS styles for the iframe version of the calculator.

CUSTOMIZATION INSTRUCTIONS:
- Change colors by modifying the CSS custom properties below
- Adjust spacing by changing padding and margin values  
- Modify responsive breakpoints in the media queries
- Add your own custom styles at the bottom of this file

USAGE:
This CSS is automatically loaded when you use the [bacancy_calculator] shortcode
*/

/* CSS Custom Properties for easy customization */
:root {
  --bc-primary-color: #F48323; /* Main brand color (green) */
  --bc-secondary-color: #1f2937; /* Dark text color */
  --bc-border-color: #e5e7eb; /* Light border color */
  --bc-background: #ffffff; /* Background color */
  --bc-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Box shadow */
  --bc-border-radius: 8px; /* Border radius */
}

/* Main calculator wrapper */
.bacancy-calculator-wrapper {
  width: 100%;
  max-width: 1000px;
  margin: 2rem auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

/* Loading message (shown while iframe loads) */
.calculator-loading {
  text-align: center;
  padding: 2rem;
  background: var(--bc-background);
  border: 1px solid var(--bc-border-color);
  border-radius: var(--bc-border-radius);
  margin-bottom: 1rem;
}

.calculator-loading p {
  margin: 0;
  color: var(--bc-secondary-color);
  font-size: 1.1rem;
}

/* Iframe styling */
.bacancy-calculator-iframe {
  width: 100%;
  border: 1px solid var(--bc-border-color);
  border-radius: var(--bc-border-radius);
  box-shadow: var(--bc-shadow);
  background: var(--bc-background);
  transition: opacity 0.3s ease;
}

/* Responsive iframe */
@media (max-width: 768px) {
  .bacancy-calculator-wrapper {
    padding: 0 0.5rem;
    margin: 1rem auto;
  }

  .bacancy-calculator-iframe {
    height: 700px !important; /* Override inline height on mobile */
  }
}

@media (max-width: 480px) {
  .bacancy-calculator-iframe {
    height: 600px !important;
  }
}

/* Custom styling for WordPress themes compatibility */
.bacancy-calculator-wrapper * {
  box-sizing: border-box;
}

/* Ensure iframe doesn't break out of containers */
.bacancy-calculator-wrapper {
  overflow: hidden;
}

/*
CUSTOM STYLES
=============
Add your custom styles below this line to override the default styling
*/

/* Example: Custom brand colors
.bacancy-calculator-wrapper {
    --bc-primary-color: #your-brand-color;
    --bc-secondary-color: #your-text-color;
}
*/

/* Example: Custom spacing
.bacancy-calculator-wrapper {
    margin: 3rem auto;
    padding: 0 2rem;
}
*/