/* ==================================================
   FIGUROOS CONFIGURATOR V3
   PHOTO ALIGNMENT — STANDALONE STYLESHEET
   ==================================================

   Responsibilities:

   - Style the photo-alignment modal
   - Style the photo preview and alignment guides
   - Style manual adjustment controls
   - Style confirmation and cancellation buttons
   - Provide responsive layouts for smaller screens

   IMPORTANT:

   All styles are scoped to the photo-alignment
   interface using the fpa- class prefix.

   No existing Configurator selectors are modified.

   ================================================== */


/* ==================================================
   01 — PHOTO ALIGNMENT DIALOG
   ================================================== */

.fpa-dialog {

  box-sizing: border-box;

  width: min(94vw, 510px);

  max-height: 94vh;
  max-height: 94dvh;

  margin: auto;

  padding: 0;

  border: 0;
  border-radius: 18px;

  background: #ffffff;

  color: #172139;

  box-shadow: 0 20px 80px #0005;

  font: 15px/1.45 system-ui, sans-serif;

  overscroll-behavior: contain;

}


/* --------------------------------------------------
   MODAL BACKDROP
   -------------------------------------------------- */

.fpa-dialog::backdrop {

  background: #10192bd9;

}


/* --------------------------------------------------
   BOX SIZING
   -------------------------------------------------- */

.fpa-dialog *,
.fpa-dialog *::before,
.fpa-dialog *::after {

  box-sizing: border-box;

}



/* ==================================================
   02 — MODAL CONTENT CONTAINER
   ================================================== */

.fpa-shell {

  padding: 22px;

}



/* ==================================================
   03 — MODAL TYPOGRAPHY
   ================================================== */

/* --------------------------------------------------
   MAIN HEADING
   -------------------------------------------------- */

.fpa-dialog h2 {

  margin: 3px 0 10px;

  font-size: 25px;

  line-height: 1.2;

  color: inherit;

}


/* --------------------------------------------------
   PARAGRAPHS
   -------------------------------------------------- */

.fpa-dialog p {

  margin: 8px 0 12px;

}


/* --------------------------------------------------
   SECTION LABEL
   -------------------------------------------------- */

.fpa-dialog .fpa-kicker {

  margin: 0;

  color: #5c527d;

  font-size: 11px;

  font-weight: 750;

  letter-spacing: 0.14em;

}



/* ==================================================
   04 — PHOTO PREVIEW STAGE
   ================================================== */

.fpa-stage {

  position: relative;

  width: min(100%, 44dvh);

  margin-inline: auto;

  aspect-ratio: 1;

  background: #ffffff;

  border-radius: 10px;

  overflow: hidden;

  touch-action: none;

  cursor: grab;

  user-select: none;

}


/* --------------------------------------------------
   ACTIVE DRAG CURSOR
   -------------------------------------------------- */

.fpa-stage:active {

  cursor: grabbing;

}



/* ==================================================
   05 — PHOTO CANVAS AND ALIGNMENT GUIDE
   ================================================== */

/* --------------------------------------------------
   SHARED PREVIEW DIMENSIONS
   -------------------------------------------------- */

.fpa-preview,
.fpa-guide {

  display: block;

  width: 100%;

  height: 100%;

}


/* --------------------------------------------------
   ALIGNMENT GUIDE OVERLAY
   -------------------------------------------------- */

.fpa-guide {

  position: absolute;

  inset: 0;

  pointer-events: none;

  fill: none;

  stroke: #ffffff;

  stroke-width: 0.65;

  filter: drop-shadow(0 1px 1px #000a);

}


/* --------------------------------------------------
   VERTICAL CENTRELINE
   -------------------------------------------------- */

.fpa-guide .fpa-centre {

  opacity: 0.45;

  stroke-dasharray: 1.5 2;

}


/* ==================================================
   06 — ALIGNMENT STATUS MESSAGE
   ================================================== */

.fpa-dialog .fpa-status {

  min-height: 2.9em;

  font-size: 13px;

  color: #40516b;

}



/* ==================================================
   07 — MANUAL ADJUSTMENT CONTROLS
   ================================================== */

/* --------------------------------------------------
   CONTROLS CONTAINER
   -------------------------------------------------- */

.fpa-controls {

  display: grid;

  gap: 6px;

}


/* --------------------------------------------------
   CONTROL LABELS
   -------------------------------------------------- */

.fpa-controls label {

  display: grid;

  grid-template-columns: 80px 1fr;

  align-items: center;

  gap: 10px;

  font-size: 13px;

}


/* --------------------------------------------------
   SLIDERS
   -------------------------------------------------- */

.fpa-controls input {

  width: 100%;

  min-width: 0;

  height: 36px;

  margin: 0;

  accent-color: #5634c7;

}



/* ==================================================
   08 — ACTION BUTTONS
   ================================================== */

/* --------------------------------------------------
   BUTTON CONTAINER
   -------------------------------------------------- */

.fpa-actions {

  display: flex;

  gap: 8px;

  margin-top: 14px;

}


/* --------------------------------------------------
   SHARED BUTTON STYLING
   -------------------------------------------------- */

.fpa-actions button {

  min-height: 44px;

  padding: 10px 13px;

  border: 1px solid #ccd1dc;

  border-radius: 9px;

  background: #ffffff;

  color: #172139;

  font: inherit;

  font-size: 13px;

  font-weight: 650;

  cursor: pointer;

}


/* --------------------------------------------------
   CONFIRM PHOTO BUTTON
   -------------------------------------------------- */

.fpa-actions .fpa-confirm {

  margin-left: auto;

  color: #ffffff;

  border-color: #5634c7;

  background: #5634c7;

}



/* ==================================================
   09 — DISABLED CONTROLS
   ================================================== */

.fpa-dialog :disabled {

  opacity: 0.5;

  cursor: wait;

}



/* ==================================================
   10 — KEYBOARD FOCUS INDICATOR
   ================================================== */

.fpa-dialog :focus-visible {

  outline: 3px solid #1687b8;

  outline-offset: 3px;

}



/* ==================================================
   11 — PRIVACY / INFORMATION NOTE
   ================================================== */

.fpa-dialog .fpa-note {

  margin: 12px 0 0;

  font-size: 11px;

  color: #586579;

}



/* ==================================================
   12 — RESPONSIVE LAYOUT
   ==================================================

   Applies when:

   - Viewport width is 380px or less
   - OR viewport height is 650px or less

   ================================================== */

@media (max-width: 380px), (max-height: 650px) {


  /* ----------------------------------------------
     REDUCED MODAL PADDING
     ---------------------------------------------- */

  .fpa-shell {

    padding: 14px;

  }


  /* ----------------------------------------------
     SMALLER HEADING
     ---------------------------------------------- */

  .fpa-dialog h2 {

    font-size: 22px;

  }


  /* ----------------------------------------------
     SMALLER PHOTO PREVIEW
     ---------------------------------------------- */

  .fpa-stage {

    width: min(100%, 36dvh);

  }


  /* ----------------------------------------------
     COMPACT PARAGRAPH SPACING
     ---------------------------------------------- */

  .fpa-dialog p {

    margin-block: 6px 8px;

  }


  /* ----------------------------------------------
     COMPACT ACTION BUTTONS
     ---------------------------------------------- */

  .fpa-actions {

    gap: 5px;

    margin-top: 8px;

  }


  /* ----------------------------------------------
     REDUCED BUTTON HORIZONTAL PADDING
     ---------------------------------------------- */

  .fpa-actions button {

    padding-inline: 9px;

  }

}