/* SEXT-723 — Widerrufsbutton dialog styles. Plain CSS, no SCSS rebuild needed. */

/* Default trigger appearance: a real <a> element (see Button.html), so the host
   site's own `a {}` rules style it via the normal cascade — no colours hardcoded
   here. We add only cursor:pointer because the anchor has no href. The button
   look is opt-in via the plugin's FlexForm checkbox (settings.useButtonStyle),
   which renders a <button class="ws-button"> instead. */
.wsshop--revocation-trigger--link {
    cursor: pointer;
}

.wsshop--revocation-dialog {
    border: none;
    border-radius: 8px;
    padding: 0;
    max-width: 560px;
    width: calc(100% - 32px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    /* Base size for everything inside the dialog. Children inherit unless overridden.
       Anchored in px so a surrounding theme's html { font-size: 14px } can't shrink it. */
    font-size: 17px;
    line-height: 1.5;
}

/* --- Black-on-white lock --------------------------------------------------
   The host site's CSS lives outside this dialog and can cascade colours in: an
   inherited light text colour, a dark-mode body, or a theme rule such as
   `dialog h2 {}` or `#content p {}`. These rules are scoped with the dialog's
   own id (#wsshop--revocation-dialog, set in Button.html) so they outrank the
   host's element-, class-, and single-id selectors and force a readable
   black-on-white surface. Only colours are locked here — layout stays in the
   rules above/below. The result-tone colours are id-scoped too (further down),
   so they still win over this base. */
#wsshop--revocation-dialog {
    background: #fff;
    color: #1a1a1a;
    /* Keep the native form controls and ::backdrop light even under a dark host theme. */
    color-scheme: light;
}
#wsshop--revocation-dialog .wsshop--revocation-dialog__header h2,
#wsshop--revocation-dialog .wsshop--revocation-step h3,
#wsshop--revocation-dialog .wsshop--revocation-field > span,
#wsshop--revocation-dialog .wsshop--revocation-summary dd,
#wsshop--revocation-dialog [data-wsshop-revocation-result] {
    color: #1a1a1a;
}
#wsshop--revocation-dialog .wsshop--revocation-field input,
#wsshop--revocation-dialog .wsshop--revocation-field textarea {
    color: #1a1a1a;
    background-color: #fff;
}

.wsshop--revocation-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.wsshop--revocation-dialog__header {
    padding: 28px 28px 0;
}

.wsshop--revocation-dialog__header h2 {
    margin: 0 0 8px;
    font-size: 24px;
    line-height: 1.3;
}

.wsshop--revocation-dialog__header p {
    margin: 0;
    color: #555;
    font-size: 16px;
}

.wsshop--revocation-dialog form {
    margin: 0;
}

.wsshop--revocation-step {
    border: none;
    padding: 20px 28px 28px;
    margin: 0;
}

.wsshop--revocation-step[hidden] {
    display: none;
}

.wsshop--revocation-step h3 {
    margin: 0 0 16px;
    font-size: 19px;
}

.wsshop--revocation-field {
    display: block;
    margin-bottom: 14px;
}

.wsshop--revocation-field > span {
    display: block;
    font-size: 16px;
    margin-bottom: 6px;
}

.wsshop--revocation-field input,
.wsshop--revocation-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #bbb;
    border-radius: 4px;
    font-size: 17px;
    line-height: 1.4;
    font-family: inherit;
}

.wsshop--revocation-field textarea {
    resize: vertical;
    min-height: 80px;
}

.wsshop--revocation-field input:focus-visible,
.wsshop--revocation-field textarea:focus-visible {
    outline: 2px solid var(--color-primary, #3070b0);
    outline-offset: 2px;
}

/* Red border only AFTER the user has interacted with the field. The previous
   :invalid:not(:placeholder-shown) trick required every input to carry a
   placeholder attribute, which we don't want (placeholders aren't labels).
   :user-invalid is the purpose-built pseudo-class. */
.wsshop--revocation-field input:user-invalid,
.wsshop--revocation-field textarea:user-invalid {
    border-color: #c0392b;
}

.wsshop--revocation-help {
    display: block;
    color: #666;
    margin: -8px 0 12px;
    font-size: 15px;
}

.wsshop--revocation-summary {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 16px;
    margin: 0 0 16px;
}

.wsshop--revocation-summary dt {
    font-weight: 600;
    color: #555;
}

.wsshop--revocation-summary dd {
    margin: 0;
    word-break: break-word;
    white-space: pre-line;
}

.wsshop--revocation-declaration {
    margin: 0 0 16px;
    padding: 10px 12px;
    background: #f4f4f4;
    border-left: 3px solid var(--color-primary, #3070b0);
    font-size: 14px;
    color: #444;
}

.wsshop--revocation-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 8px;
}

[data-wsshop-revocation-result] {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 4px;
    background: #f4f4f4;
}

#wsshop--revocation-dialog [data-wsshop-revocation-result][data-tone="positive"] {
    background: #e6f4ea;
    color: #1d6b34;
}

#wsshop--revocation-dialog [data-wsshop-revocation-result][data-tone="negative"] {
    background: #fcebea;
    color: #a32a1d;
}

#wsshop--revocation-dialog [data-wsshop-revocation-result][data-tone="warning"] {
    background: #fff4d6;
    color: #806000;
}