/* ==========================================================================
   APF • CONTROLS LAYOUT (now also applies scoped fonts)
   FILE: controls-layout.css
   Scope root: [data-apf="common"]
   Note: Per your request, this file applies fonts:
         - Orbitron Regular for headings/titles
         - Inter for labels/body text
   ========================================================================== */


/* --------------------------- Typography (scoped) -------------------------- */
/* Body/base text -> Inter */
[data-apf="common"] .apf-controls {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
}

/* Headings/titles -> Orbitron Regular */
[data-apf="common"] .apf-controls :is(h1,h2,h3,h4,h5,h6,.apf-section__title, summary.apf-sec__title) {
  font-family: "Orbitron Regular", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
  font-weight: 700;
  letter-spacing: .01em;
}

/* Labels & general copy -> Inter (explicit to beat theme defaults if needed) */
[data-apf="common"] .apf-controls :is(p,li,label,span,small,table,th,td,code,pre,input,select,textarea,button) {
  font-family: inherit;
}


/* ------------------------------- Container ------------------------------- */
[data-apf="common"] .apf-controls {
  /* local layout tokens (structure-only) */
  --apf-gap: var(--gap, 8px);
  --apf-pad: clamp(0rem, 1.2vw, 0rem);

  display: grid;
  gap: var(--apf-gap);
  padding: var(--apf-pad);
  position: relative;
  isolation: isolate;
  min-width: 0;
  max-inline-size: 100%;
  overflow-x: clip;
  box-sizing: border-box;
}

/* Prevent children from forcing width */
[data-apf="common"] .apf-controls > * {
  min-width: 0;
  max-inline-size: 100%;
  box-sizing: border-box;
}


/* ------------------------- Column / Scroll Variants ---------------------- */
[data-apf="common"] .apf-col.apf-controls {
  min-width: 0;
  min-height: 0; /* critical for nested scrollers */
  box-sizing: border-box;
}

[data-apf="common"] .apf-col.apf-controls.apf-controls--scroll {
  display: flex;
  flex-direction: column;
  --apf-controls-offset: 120px;
  max-block-size: calc(min(100dvh, 100svh) - var(--apf-controls-offset));
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Or scroll on inner .apf-controls */
[data-apf="common"] .apf-controls.apf-controls--scroll {
  --apf-controls-offset: 120px;
  max-block-size: calc(min(100dvh, 100svh) - var(--apf-controls-offset));
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}


/* ------------------------------ Safe Wrapping ---------------------------- */
[data-apf="common"] .apf-controls,
[data-apf="common"] .apf-controls * {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Tables scroll horizontally if they overflow */
[data-apf="common"] .apf-controls table {
  display: block;
  width: 100% !important;
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
}


/* ------------------------------ Grid Helpers ----------------------------- */
[data-apf="common"] .apf-controls .apf-media,
[data-apf="common"] .apf-controls .apf-product {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--apf-gap);
}

[data-apf="common"] .apf-controls .apf-variation-selects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: clamp(.55rem, .9vw, .75rem);
}

/* Stacks / actions rows */
[data-apf="common"] .apf-controls .apf-upload,
[data-apf="common"] .apf-controls .apf-media-picker,
[data-apf="common"] .apf-controls .apf-stock,
[data-apf="common"] .apf-controls .apf-variations {
  display: flex;
  flex-direction: column;
  gap: clamp(.45rem, .8vw, .6rem);
}

[data-apf="common"] .apf-controls .apf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.5rem, .9vw, .8rem);
  min-width: 0;
}


/* ------------------------------ Sections --------------------------------- */
[data-apf="common"] .apf-controls .apf-section {
  --apf-card-pad: clamp(.65rem, .95vw, .85rem);
  display: grid;
  gap: clamp(.45rem, .8vw, .6rem);
  padding: var(--apf-card-pad);
  min-width: 0;
}

[data-apf="common"] .apf-controls .apf-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .6rem .7rem;
  min-width: 0;
}

[data-apf="common"] .apf-controls .apf-section__title {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}

[data-apf="common"] .apf-controls .apf-section__content {
  display: grid;
  gap: clamp(.45rem, .8vw, .6rem);
  padding: .6rem .75rem;
  min-width: 0;
}

/* <details> scaffold */
[data-apf="common"] .apf-controls details.apf-sec {
  margin: .35rem 0;
  overflow: hidden;
  min-width: 0;
}

[data-apf="common"] .apf-controls .apf-sec > summary.apf-sec__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .6rem .75rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  outline: none;
  min-width: 0;
}
[data-apf="common"] .apf-controls .apf-sec > summary.apf-sec__title::-webkit-details-marker {
  display: none;
}

[data-apf="common"] .apf-controls .apf-sec__body {
  display: grid;
  gap: .6rem;
  padding: .6rem .75rem .7rem;
  min-width: 0;
}


/* ------------------------------ Form Sizing ------------------------------ */
[data-apf="common"] .apf-controls :is(select, input[type="text"], input[type="number"], input[type="email"], input[type="tel"], textarea) {
  inline-size: 100%;
  max-inline-size: 100%;
  min-width: 0;
  box-sizing: border-box;
}


/* -------------------------------- Utilities ------------------------------ */
.apf-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.apf-row--tight { gap: .35rem; }

.apf-grid { display: grid; gap: .6rem; }
.apf-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.apf-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.apf-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.apf-grid-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }

/* Segmented controls (layout only) */
.apf-seg { display: inline-flex; gap: .4rem; align-items: center; flex-wrap: wrap; }

/* Footer actions row in styling panel */
.apf-actions--footer { display: flex; gap: .5rem; margin-top: .6rem; }

/* Visually hidden helper */
.apf-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* --------- Remove pricing wrapper from flow (structure-first) ------------ */
/* Preferred: use display: contents when available */
@supports (display: contents) {
  [data-apf="common"] section[data-apf-control="pricing"].apf-control {
    display: contents !important;
  }
}
/* Fallback: neutralize spacing without visual rules */
[data-apf="common"] section[data-apf-control="pricing"].apf-control {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}
[data-apf="common"] section[data-apf-control="pricing"].apf-compact { padding: 0 !important; }


/* --------------------------- Responsive Layout --------------------------- */
@media (max-width: 900px) {
  [data-apf="common"] .apf-col.apf-controls,
  [data-apf="common"] .apf-controls {
    min-height: 0;
  }

  [data-apf="common"] .apf-col.apf-controls.apf-controls--scroll,
  [data-apf="common"] .apf-controls.apf-controls--scroll {
    max-block-size: 100%;
    block-size: 100%;
    overflow: auto;
  }

  [data-apf="common"] .apf-controls { grid-auto-flow: row; }

  .apf-grid-5, .apf-grid-4, .apf-grid-3 {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
/* ===== APF • AI media/control FLEX for new layout (append after controls-layout.css) ===== */

/* Row A: Reference + Quality + Resolution + Pimp (same line) */
[data-apf="common"] .apf-controls .apf-ai__body .apf-ai-qres-row{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:.5rem;
  min-width:0;
}

/* Normalize the three fields to share the row; beat inline flex with !important */
[data-apf="common"] .apf-controls .apf-ai__body .apf-ai-qres-row .apf-field{
  flex:1 1 220px !important;
  min-width:160px !important;
}

/* Reference block slightly roomier */
[data-apf="common"] .apf-controls .apf-ai__body .apf-ai-qres-row .apf-field:first-child{
  flex:1.2 1 260px !important;
  min-width:200px !important;
}

/* Pimp button sits at the end of Row A */
[data-apf="common"] .apf-controls .apf-ai__body .apf-ai-qres-row .mid-pimp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  order:99;                    /* keep it after the selects */
  flex:0 0 auto;
  min-height:2.6rem;           /* align heights with selects */
  padding-inline:.9rem;
  line-height:1.1;
  font-weight:600;
  font-size:clamp(.9rem, .6vw + .55rem, 1rem);
  white-space:nowrap;
}

/* Make selects match heights neatly */
[data-apf="common"] .apf-controls .apf-ai__body .apf-ai-qres-row :is(select,.apf-select){
  height:2.6rem;
}

/* Remove any spacer in this row */
[data-apf="common"] .apf-controls .apf-ai__body .apf-ai-qres-row .apf-grow{ display:none; }

/* Row B: Generate only (full width, larger text, same height logic) */
[data-apf="common"] .apf-controls .apf-ai__body .apf-ai-actions-row{
  display:flex;
  align-items:stretch;
  min-width:0;
}
[data-apf="common"] .apf-controls .apf-ai__body .apf-ai-actions-row .mid-generate-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:1 1 100%;
  width:100%;
  min-height:2.9rem;
  padding-block:.9rem;
  font-size:clamp(1rem, .85vw + .6rem, 1.15rem);
  font-weight:650;
  line-height:1.1;
}

/* Prompt Options: hidden by default; show when JS removes [hidden] or adds .is-visible */
#apf-prompt-options-row{ display:none; }
#apf-prompt-options-row:not([hidden]),
#apf-prompt-options-row.is-visible{ display:flex; }
#apf-prompt-options-row{ gap:.35rem; align-items:center; }

/* Responsive: stack Row A compactly on narrow screens */
@media (max-width: 720px){
  [data-apf="common"] .apf-controls .apf-ai__body .apf-ai-qres-row .apf-field{
    flex:1 1 100% !important;
    min-width:0 !important;
  }
  [data-apf="common"] .apf-controls .apf-ai__body .apf-ai-qres-row .mid-pimp-btn{
    flex:1 1 100%;
    order:100;                 /* keep it last when stacking */
    min-height:2.8rem;
  }
}