/* =====================================================
 *  CWA — Frontend: area container, alignment, layout
 * ===================================================== */

.custom-widget-area {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

/* ── Alignment (mobile-first) ── */
.cwa-align-mobile-left   { align-items: flex-start; justify-content: flex-start; text-align: left; }
.cwa-align-mobile-center { align-items: center;     justify-content: center;     text-align: center; }
.cwa-align-mobile-right  { align-items: flex-end;   justify-content: flex-end;   text-align: right; }

/* ── Layout mobile ── */
.cwa-layout-mobile-stacked { flex-direction: column; }
.cwa-layout-mobile-inline  { flex-direction: row; align-items: center; }
.cwa-layout-mobile-inline.cwa-align-mobile-left   { justify-content: flex-start; }
.cwa-layout-mobile-inline.cwa-align-mobile-center { justify-content: center; }
.cwa-layout-mobile-inline.cwa-align-mobile-right  { justify-content: flex-end; }

/* ── Tablet ── */
.is-tablet .cwa-align-tablet-left,
.is-desktop .cwa-align-tablet-left   { align-items: flex-start; justify-content: flex-start; text-align: left; }
.is-tablet .cwa-align-tablet-center,
.is-desktop .cwa-align-tablet-center { align-items: center;     justify-content: center;     text-align: center; }
.is-tablet .cwa-align-tablet-right,
.is-desktop .cwa-align-tablet-right  { align-items: flex-end;   justify-content: flex-end;   text-align: right; }

.is-tablet .cwa-layout-tablet-stacked,
.is-desktop .cwa-layout-tablet-stacked { flex-direction: column; }
.is-tablet .cwa-layout-tablet-inline,
.is-desktop .cwa-layout-tablet-inline  { flex-direction: row; align-items: center; }
.is-tablet .cwa-layout-tablet-inline.cwa-align-tablet-left,
.is-desktop .cwa-layout-tablet-inline.cwa-align-tablet-left   { justify-content: flex-start; }
.is-tablet .cwa-layout-tablet-inline.cwa-align-tablet-center,
.is-desktop .cwa-layout-tablet-inline.cwa-align-tablet-center { justify-content: center; }
.is-tablet .cwa-layout-tablet-inline.cwa-align-tablet-right,
.is-desktop .cwa-layout-tablet-inline.cwa-align-tablet-right  { justify-content: flex-end; }

/* ── Desktop ── */
.is-desktop .cwa-align-desktop-left   { align-items: flex-start; justify-content: flex-start; text-align: left; }
.is-desktop .cwa-align-desktop-center { align-items: center;     justify-content: center;     text-align: center; }
.is-desktop .cwa-align-desktop-right  { align-items: flex-end;   justify-content: flex-end;   text-align: right; }

.is-desktop .cwa-layout-desktop-stacked { flex-direction: column; }
.is-desktop .cwa-layout-desktop-inline  { flex-direction: row; align-items: center; }
.is-desktop .cwa-layout-desktop-inline.cwa-align-desktop-left   { justify-content: flex-start; }
.is-desktop .cwa-layout-desktop-inline.cwa-align-desktop-center { justify-content: center; }
.is-desktop .cwa-layout-desktop-inline.cwa-align-desktop-right  { justify-content: flex-end; }

/* ── Tratteggio area editabile nel customizer ── */
body.customizer-open .custom-widget-area {
  border: 1.5px dashed rgba(255, 255, 255, 0.35);
  border-radius: 3px;
  transition: outline-color 0.15s;
}

body.customizer-open .custom-widget-area:hover {
  outline-color: rgba(0, 120, 255, 0.7);
}

/* ── Placeholder vuoto (solo nel customizer) ── */
.cwa-preview-placeholder {
  display: none;
}

body.customizer-open .cwa-preview-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 16px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 500;
  transition: border-color 0.15s, color 0.15s;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body.customizer-open .cwa-preview-placeholder:hover {
  background: rgba(255,255,255,0.3);
}

body.customizer-open .custom-widget-area:not(:has(.cwa-preview-placeholder)) {
  cursor: pointer;
}

.is-tablet body.customizer-open .site-header .cwa-preview-placeholder span,
.is-mobile body.customizer-open .site-header .cwa-preview-placeholder span {
  display: none;
}


/* =====================================================
 *  CWA — Frontend: icone social
 * ===================================================== */

.social-icons-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--si-gap, 10px);
  align-items: center;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--si-color, currentColor);
  background: var(--si-bg, transparent);
  text-decoration: none;
  transition: color 0.15s, background 0.15s, transform 0.15s;
}

.social-icon svg {
  width: var(--si-size, 20px);
  height: var(--si-size, 20px);
  display: block;
}

.social-icon:hover {
  color: var(--si-color-h, var(--si-color, currentColor));
  background: var(--si-bg-h, var(--si-bg, transparent));
}

.si-style--circle .social-icon {
  border-radius: 50%;
  padding: calc(var(--si-size, 20px) * 0.3);
  border: var(--si-border-width, 0) solid var(--si-border-color, transparent);
}

.si-style--square .social-icon {
  border-radius: 5px;
  padding: calc(var(--si-size, 20px) * 0.3);
  border: var(--si-border-width, 0) solid var(--si-border-color, transparent);
}

.social-sep {
  color: var(--si-sep-color, #cccccc);
  font-size: calc(var(--si-size, 20px) * 0.9);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  user-select: none;
}


/* =====================================================
 *  CWA — Frontend: immagine e shortcode
 * ===================================================== */

.image-widget img {
  display: block;
  width: var(--img-w-mobile, auto);
  max-width: 100%;
  height: auto;
}

.is-tablet .image-widget img {
  width: var(--img-w-tablet, var(--img-w-mobile, auto));
}

.is-desktop .image-widget img {
  width: var(--img-w-desktop, var(--img-w-tablet, var(--img-w-mobile, auto)));
}

.cwa-shortcode-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: rgba(180, 83, 9, 0.06);
  border: 1px dashed rgba(180, 83, 9, 0.3);
  border-radius: 4px;
}

.cwa-shortcode-badge {
  font-family: 'Menlo', 'Monaco', monospace;
  font-size: 12px;
  color: #b45309;
}


/* =====================================================
 *  CWA — Frontend: bottone custom (.cwa-custom-btn)
 * ===================================================== */

.cwa-custom-btn {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  background: var(--cbtn-bg, transparent);
  color: var(--cbtn-tx, inherit);
  border-style: solid;
  border-color: var(--cbtn-bc, transparent);
  border-width: var(--cbtn-bw-m, var(--cbtn-bw-t, var(--cbtn-bw-d, 0px)));
  border-radius: var(--cbtn-r-m, var(--cbtn-r-t, var(--cbtn-r-d, 0px)));
  font-size: var(--cbtn-fs-m, var(--cbtn-fs-t, var(--cbtn-fs-d, inherit)));
  padding: var(--cbtn-p-m, var(--cbtn-p-t, var(--cbtn-p-d, 0)));
  margin: var(--cbtn-m-m, var(--cbtn-m-t, var(--cbtn-m-d, 0)));
}

.cwa-custom-btn:hover {
  background: var(--cbtn-bg-h, var(--cbtn-bg, transparent));
  color: var(--cbtn-tx-h, var(--cbtn-tx, inherit));
  border-color: var(--cbtn-bc-h, var(--cbtn-bc, transparent));
}

.is-tablet .cwa-custom-btn {
  border-width: var(--cbtn-bw-t, var(--cbtn-bw-d, 0px));
  border-radius: var(--cbtn-r-t, var(--cbtn-r-d, 0px));
  font-size: var(--cbtn-fs-t, var(--cbtn-fs-d, inherit));
  padding: var(--cbtn-p-t, var(--cbtn-p-d, 0));
  margin: var(--cbtn-m-t, var(--cbtn-m-d, 0));
}

.is-desktop .cwa-custom-btn {
  border-width: var(--cbtn-bw-d, 0px);
  border-radius: var(--cbtn-r-d, 0px);
  font-size: var(--cbtn-fs-d, inherit);
  padding: var(--cbtn-p-d, 0);
  margin: var(--cbtn-m-d, 0);
}