/* All title bars use the theme in the site publication snapshot. */
.v4-body,.v4-title-settings { --v4-title-bar-font-size:18px; --v4-title-bar-padding-block:14px; }
@media(max-width:700px) { .v4-body,.v4-title-settings { --v4-title-bar-font-size:16px; --v4-title-bar-padding-block:12px; } }
.v4-body .v4-section-title { font-size:var(--module-title-size,var(--v4-title-bar-font-size)); padding-block:var(--v4-title-bar-padding-block); }
[data-title-theme] {
  --title-background:var(--v4-title-custom-background,var(--red,#df0030));
  --title-color:var(--v4-title-custom-color,#fff);
  --title-flower:var(--v4-title-custom-color,#fff);
  --title-flower-display:none;
  --title-second-display:none;
  --title-flower-size:var(--title-corner-size,62px);
  --title-flower-left:var(--title-corner-left,-19px);
  --title-flower-top:var(--title-corner-top,-21px);
  --title-flower-transform:none;
  --title-heading-padding:52px;
  --title-shadow:var(--v4-heading-shadow,none);
}
[data-title-theme="dual-flower"], [data-title-theme="red-flower"] {
  --title-background:var(--v4-title-custom-background,#fff);
  --title-color:var(--v4-title-custom-color,var(--red,#df0030));
  --title-flower:var(--v4-title-custom-color,var(--red,#df0030));
  --title-shadow:none;
  --title-flower-size:28px;
  --title-flower-left:18px;
  --title-flower-top:50%;
  --title-flower-transform:translateY(-50%);
}
[data-title-theme="dual-flower"] { --title-second-display:block; --title-heading-padding:58px; }
[data-title-theme="red-white"], [data-title-theme="red-flower"], [data-title-theme="dual-flower"] { --title-flower-display:block; }

.v4-body .v4-section-title, .v4-title-theme-sample {
  position:relative; overflow:hidden;
  background:var(--title-background,var(--red,#df0030));
  color:var(--title-color,#fff);
  text-shadow:var(--title-shadow,var(--v4-heading-shadow,none));
}
.v4-body .v4-section-heading { background:var(--title-background,var(--red)); }
.v4-body .v4-section-heading .v4-section-title { padding-right:var(--title-heading-padding,20px); }
.v4-body .v4-dialog-header { background:var(--title-background,var(--red)); }
.v4-body .v4-module .v4-dialog .v4-dialog-header>.v4-section-title {
  background:var(--title-background,var(--red)); color:var(--title-color,#fff);
}
.v4-body .v4-dialog-close { color:var(--title-color,#fff); }
.v4-body .v4-dialog-close:focus-visible { outline-color:var(--title-color,#fff); }
.v4-body .v4-dialog-header .v4-section-title:before { right:64px; }
.v4-body .v4-section-title:after, .v4-title-theme-sample:after {
  content:""; position:absolute; display:var(--title-flower-display,none);
  background:var(--title-flower,#fff);
  mask:url('/static/v4/flower-red.svg') center/contain no-repeat;
  pointer-events:none;
}
.v4-body .v4-section-title:before, .v4-title-theme-sample:before {
  content:""; position:absolute; display:var(--title-second-display,none);
  width:28px; height:28px; right:18px; top:50%; transform:translateY(-50%);
  background:url('/static/v4/flower-yellow.svg') center/contain no-repeat;
  pointer-events:none;
}
.v4-body .v4-section-title:after {
  width:var(--title-flower-size,62px); height:var(--title-flower-size,62px);
  left:var(--title-flower-left,-19px); top:var(--title-flower-top,-21px);
  transform:var(--title-flower-transform,none);
}
@media(max-width:600px) {
  .v4-body { --title-corner-size:50px; --title-corner-left:-16px; --title-corner-top:-17px; }
  .v4-body [data-title-theme="red-flower"], .v4-body [data-title-theme="dual-flower"] { --title-flower-left:12px; }
  .v4-body .v4-section-title:before { right:12px; }
  .v4-body .v4-section-heading .v4-section-title { padding-right:42px; }
}

.v4-title-theme-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; min-width:0; margin:14px 0; padding:0; border:0; }
.v4-title-theme-picker legend { margin-bottom:9px; font-size:13px; font-weight:600; }
.v4-title-theme-option { display:flex; flex-direction:column; position:relative; gap:8px; min-width:0; padding:8px; border:1px solid #ddd; border-radius:8px; cursor:pointer; font-size:12px; }
.v4-title-theme-option:has(:checked) { border-color:#c6003d; box-shadow:0 0 0 1px #c6003d; }
.v4-title-theme-option:focus-within { outline:2px solid #305dba; outline-offset:3px; }
.v4-title-theme-option input { position:absolute; opacity:0; width:1px; height:1px; }
.v4-title-theme-sample { display:block; padding:12px 25px; border:1px solid #f0ecee; border-radius:5px; text-align:center; font-size:12px; line-height:1.5; font-weight:600; }
.v4-title-theme-sample:after { left:-13px; top:-14px; width:42px; height:42px; }
.v4-title-theme-sample:before { width:17px; height:17px; right:5px; }
[data-title-theme="red-flower"] .v4-title-theme-sample:after,
[data-title-theme="dual-flower"] .v4-title-theme-sample:after { width:17px; height:17px; left:5px; top:50%; transform:translateY(-50%); }

/* Component library samples follow the same selected theme. */
.v4-preset-preview .v4-mini-heading { background:var(--title-background); color:var(--title-color); text-shadow:none; }
.v4-preset-preview .v4-mini-heading:before { display:var(--title-flower-display); background:var(--title-flower); mask:url('/static/v4/flower-red.svg') center/contain no-repeat; }
.v4-preset-preview .v4-mini-heading:after { content:""; display:var(--title-second-display); position:absolute; right:4px; top:5px; width:7px; height:7px; background:url('/static/v4/flower-yellow.svg') center/contain no-repeat; }
