/* =============================================================================
   FORMCRAFTS EXTERNAL STYLESHEET
   
   This file controls the CONTAINER/WRAPPER styling for FormCrafts embeds.
   FormCrafts renders form content inside an iframe, so this CSS cannot
   reach buttons, fields, or other form elements inside the iframe.
   
   FOR FORM CONTENT STYLING (buttons, fields, spacing):
   See /public/styles/formcrafts-internal.css
   That file contains CSS to manually copy into FormCrafts dashboard.
   
   Target container using: div[data-fc-key]
   ============================================================================= */

/* -----------------------------------------------------------------------------
   FORM CONTAINER STYLES
   ----------------------------------------------------------------------------- */
div[data-fc-key] {
  /* Prevent bottom cut-off from FormCrafts height calculation */
  padding-bottom: 4px !important;
  overflow: visible !important;
}

/* -----------------------------------------------------------------------------
   IFRAME STYLES - Match Chatwoot widget border radius (16px)
   ----------------------------------------------------------------------------- */
.formcrafts-iframe,
.fc-inline-iframe,
div[data-fc-key] iframe {
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* -----------------------------------------------------------------------------
   WRAPPER STYLES
   ----------------------------------------------------------------------------- */
.formcrafts-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

/* Centered variant */
.formcrafts-container--centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Full width variant */
.formcrafts-container--full {
  max-width: 100%;
}

/* -----------------------------------------------------------------------------
   RESPONSIVE STYLES
   ----------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .formcrafts-container {
    max-width: 100%;
    padding: 0 16px;
  }
}