/* Online store screen (online-store.js). Rows and tabs come from components.css. */

#store-theme-picker { padding-bottom: var(--space-4); }
.panel-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.panel-bar p { margin: 0; }

.swatches { display: inline-flex; gap: 6px; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--outline-variant); display: inline-block; }

.section-rows { list-style: none; margin: var(--space-2) 0 0; }
.section-row {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center;
    gap: var(--space-2); min-height: 56px; border-top: 1px solid var(--outline-variant);
}
.section-row:first-child { border-top: 0; }
.section-row .drag-handle { cursor: grab; color: var(--on-surface-variant); padding-inline: 2px; letter-spacing: -2px; user-select: none; }
.section-row .reorder { display: inline-flex; }
.section-row .section-label { font-weight: 500; }
.section-row.sortable-ghost { opacity: .4; }
@media (hover: hover) and (pointer: fine) {
    /* Drag is there with a mouse; the arrow buttons stay for keyboards and touch. */
    .section-row .reorder .btn { opacity: .6; }
    .section-row:hover .reorder .btn, .section-row .reorder .btn:focus-visible { opacity: 1; }
}

/* ---- Design editor (design.js): controls beside a live preview of the store ---- */
.design-editor { display: flex; flex-direction: column; gap: var(--space-4); }
.design-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.design-title { display: flex; align-items: center; gap: var(--space-3); }
.design-title h3 { margin: 0; }
.design-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.design-split { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.design-controls { display: flex; flex-direction: column; gap: var(--space-3); max-height: 780px; overflow-y: auto; padding-inline-end: var(--space-1); }
.design-group { border: 1px solid var(--outline-variant); border-radius: var(--shape-md); padding: var(--space-3) var(--space-4) var(--space-4); margin: 0; min-width: 0; }
.design-group legend { font-family: var(--font-headline); font-weight: 600; padding: 0 var(--space-1); }
.design-sub { display: block; margin: var(--space-3) 0 var(--space-2); font-size: var(--typo-body-sm); color: var(--on-surface-variant); }
.design-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); }
.design-row select { max-inline-size: 180px; font: inherit; padding: 6px 8px; border: 1px solid var(--outline); border-radius: var(--shape-xs); background: var(--surface-container-lowest); color: var(--on-surface); }
.design-row .own-thumb { inline-size: 160px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--shape-xs); border: 1px solid var(--outline-variant); }
.own-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.own-actions .btn { white-space: nowrap; }
/* A long category name keeps its words: the buttons move under it instead. */
.design-row.cat-photo { flex-wrap: wrap; }
.cat-photo .own-actions { margin-inline-start: auto; }
.cat-photo .own-thumb { inline-size: 40px; aspect-ratio: 1; }
.design-group .hint { margin: var(--space-1) 0 0; }
.minis { display: flex; flex-wrap: wrap; gap: 6px; }
.mini { border: 1px solid var(--outline); background: none; border-radius: var(--shape-full); padding: 4px 12px; min-height: 32px; font: inherit; font-size: var(--typo-label-md); color: var(--on-surface); cursor: pointer; }
.mini[aria-pressed="true"] { background: var(--secondary-container); color: var(--on-secondary-container); border-color: transparent; font-weight: 600; }
.swatch-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sw { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--surface-container-lowest); box-shadow: 0 0 0 1px var(--outline-variant); padding: 0; cursor: pointer; }
.sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--primary); }
.sw-custom { width: 32px; height: 32px; border: 0; padding: 0; background: none; cursor: pointer; }
.font-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.font-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: start; padding: var(--space-2) var(--space-3); border: 1px solid var(--outline-variant); border-radius: var(--shape-sm); background: var(--surface-container-lowest); color: var(--on-surface); font: inherit; cursor: pointer; }
.font-card small { color: var(--on-surface-variant); font-size: var(--typo-body-sm); }
.font-card[aria-pressed="true"] { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.design-preview { border: 1px solid var(--outline-variant); border-radius: var(--shape-md); overflow: hidden; background: var(--surface-container); min-width: 0; }
.design-preview-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3); background: var(--surface-container-low); border-bottom: 1px solid var(--outline-variant); }
.design-preview-note { margin-inline-start: auto; font-size: var(--typo-label-md); font-weight: 600; color: var(--on-surface-variant); }
.design-preview-note.is-draft { color: var(--st-warning-fg); }
.design-stage { position: relative; height: 720px; overflow: hidden; }
/* Physical left on purpose: the frame is a scaled picture of the store, scaled
   from its top-left corner, so it is not mirrored in the Arabic admin. */
.design-stage iframe { position: absolute; top: 0; left: 0; border: 0; background: #fff; transform-origin: 0 0; }
.design-stage.phone iframe { left: 50%; margin-left: -195px; top: var(--space-3); border-radius: 18px; box-shadow: var(--elev-2); }
@media (max-width: 1100px) {
    .design-split { grid-template-columns: 1fr; }
    .design-controls { max-height: none; overflow: visible; }
}

/* ---- AI (ai.js): one look for every AI button, and the Design with AI dialog ---- */
.ai-btn::before { content: "✦ "; }
.ai-context { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3); }
.ai-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--shape-sm); border: 1px solid var(--outline-variant); font-size: var(--typo-label-md); }
.ai-chip i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1px var(--outline-variant); }
.ai-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.ai-results:empty { display: none; }
.ai-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--outline-variant); border-radius: var(--shape-md); background: var(--surface-container-lowest); min-width: 0; }
.ai-card small { color: var(--on-surface-variant); }
.ai-card-swatches { display: flex; gap: 6px; }
.ai-card-swatches .sw { width: 24px; height: 24px; cursor: default; }
.ai-card-copy { margin: 0; font-style: italic; color: var(--on-surface-variant); }
.ai-card .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 720px) { .ai-results { grid-template-columns: 1fr; } }
.announce-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.announce-row p { margin: 2px 0 0; }