/* =========================================================
   Webstudio GDPR — Admin Styles
   ========================================================= */

/* ---------- Reset & base ---------- */
.wsgdpr-wrap *,
.wsgdpr-wrap *::before,
.wsgdpr-wrap *::after { box-sizing: border-box; }

.wsgdpr-wrap {
    --c-primary:   rgb(76, 34, 188);
    --c-primary-h: #1d4ed8;
    --c-success:   #16a34a;
    --c-danger:    #dc2626;
    --c-gray-50:   #f9fafb;
    --c-gray-100:  #f3f4f6;
    --c-gray-200:  #e5e7eb;
    --c-gray-400:  #9ca3af;
    --c-gray-600:  #4b5563;
    --c-gray-800:  #1f2937;
    --c-gray-900:  #111827;
    --radius-sm:   6px;
    --radius:      10px;
    --radius-lg:   14px;
    --shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --shadow:      0 4px 16px rgba(0,0,0,.08);
    --font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-family:   var(--font);
    font-size:     14px;
    color:         var(--c-gray-800);
    max-width:     100%;
    margin-top:    16px;
    padding-right: 20px;
}

/* ---------- Header ---------- */
.wsgdpr-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         16px 20px;
    background:      #fff;
    border:          1px solid var(--c-gray-200);
    border-radius:   var(--radius-lg);
    margin-bottom:   12px;
    box-shadow:      var(--shadow-sm);
}

.wsgdpr-header__brand {
    display:     flex;
    align-items: center;
    gap:         10px;
    font-size:   18px;
    font-weight: 700;
    color:       var(--c-gray-900);
}

.wsgdpr-header__brand svg { color: var(--c-primary); }

.wsgdpr-header__version {
    font-size:   12px;
    color:       var(--c-gray-400);
    background:  var(--c-gray-100);
    padding:     2px 8px;
    border-radius: 99px;
}

/* ---------- Nav ---------- */
.wsgdpr-nav {
    display:       flex;
    gap:           4px;
    margin-bottom: 16px;
    padding:       4px;
    background:    var(--c-gray-100);
    border-radius: var(--radius);
    border:        1px solid var(--c-gray-200);
}

.wsgdpr-nav__item {
    display:       flex;
    align-items:   center;
    gap:           6px;
    padding:       8px 14px;
    border-radius: var(--radius-sm);
    font-weight:   500;
    font-size:     13px;
    color:         var(--c-gray-600);
    text-decoration: none;
    transition:    all .15s;
    flex:          1;
    justify-content: center;
}

.wsgdpr-nav__item:hover { background: #fff; color: var(--c-gray-900); }
.wsgdpr-nav__item.is-active { background: #fff; color: var(--c-primary); box-shadow: var(--shadow-sm); }

/* ---------- Card ---------- */
.wsgdpr-card {
    background:    #fff;
    border:        1px solid var(--c-gray-200);
    border-radius: var(--radius-lg);
    padding:       24px;
    margin-bottom: 16px;
    box-shadow:    var(--shadow-sm);
}

.wsgdpr-card__title {
    display:       flex;
    align-items:   center;
    gap:           8px;
    margin:        0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--c-gray-200);
    font-size:   16px;
    font-weight: 700;
    color:       var(--c-gray-900);
}

.wsgdpr-card__desc {
    margin:     0 0 20px;
    color:      var(--c-gray-600);
    font-size:  13px;
    line-height: 1.5;
}

.wsgdpr-card__header-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   4px;
}

.wsgdpr-card__header-row .wsgdpr-card__title { margin: 0; padding-bottom: 0; border-bottom: none; }

/* ---------- Grid ---------- */
.wsgdpr-grid { display: grid; gap: 16px; }
.wsgdpr-grid--1 { grid-template-columns: 1fr; }
.wsgdpr-grid--2 { grid-template-columns: 1fr 1fr; }
.wsgdpr-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.wsgdpr-grid--4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

@media (max-width: 700px) {
    .wsgdpr-grid--2,
    .wsgdpr-grid--3,
    .wsgdpr-grid--4 { grid-template-columns: 1fr; }
}

/* ---------- Fields ---------- */
.wsgdpr-field { display: flex; flex-direction: column; gap: 6px; }

.wsgdpr-field label {
    font-size:   12px;
    font-weight: 600;
    color:       var(--c-gray-600);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.wsgdpr-field label .req { color: var(--c-danger); }

.wsgdpr-field input[type="text"],
.wsgdpr-field input[type="url"],
.wsgdpr-field input[type="email"],
.wsgdpr-field select,
.wsgdpr-field textarea {
    width:         100%;
    box-sizing:    border-box;
    padding:       8px 12px;
    border:        1px solid var(--c-gray-200);
    border-radius: var(--radius-sm);
    font-size:     14px;
    font-family:   var(--font);
    color:         var(--c-gray-900);
    background:    #fff;
    transition:    border-color .15s, box-shadow .15s;
    outline:       none;
}

/* WP admin overrides select width — force it */
.wsgdpr-field select { width: 100% !important; max-width: 100% !important; }

.wsgdpr-field input:focus,
.wsgdpr-field select:focus,
.wsgdpr-field textarea:focus {
    border-color: var(--c-primary);
    box-shadow:   0 0 0 3px rgba(37,99,235,.12);
}

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

.wsgdpr-hint {
    font-size: 12px;
    color:     var(--c-gray-400);
    margin:    6px 0 0;
}

/* ---------- Toggle switch ---------- */
.wsgdpr-toggle {
    display:     flex;
    align-items: center;
    gap:         12px;
    cursor:      pointer;
    user-select: none;
}

.wsgdpr-toggle input { position: absolute; opacity: 0; pointer-events: none; }

.wsgdpr-toggle__track {
    position:      relative;
    width:         44px;
    height:        24px;
    border-radius: 99px;
    background:    var(--c-gray-300, #d1d5db);
    transition:    background .2s, box-shadow .2s;
    flex-shrink:   0;
}

.wsgdpr-toggle:hover .wsgdpr-toggle__track {
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

.wsgdpr-toggle__track::after {
    content:       '';
    position:      absolute;
    top:           50%;
    left:          4px;
    transform:     translateY(-50%);
    width:         16px;
    height:        16px;
    border-radius: 50%;
    background:    #fff;
    box-shadow:    0 1px 3px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.15);
    transition:    transform .2s cubic-bezier(.34,1.56,.64,1);
}

.wsgdpr-toggle input:checked ~ .wsgdpr-toggle__track {
    background: var(--c-primary);
}
.wsgdpr-toggle input:checked ~ .wsgdpr-toggle__track::after {
    transform: translateX(20px) translateY(-50%);
}

.wsgdpr-toggle__label {
    display:       flex;
    flex-direction: column;
    gap:           2px;
    flex:          1;
}

.wsgdpr-toggle__label strong { font-size: 13px; font-weight: 600; color: var(--c-gray-900); line-height: 1.3; }
.wsgdpr-toggle__label small  { font-size: 12px; color: var(--c-gray-500, #6b7280); line-height: 1.4; }

.wsgdpr-toggle--small .wsgdpr-toggle__track { width: 34px; height: 20px; }
.wsgdpr-toggle--small .wsgdpr-toggle__track::after { width: 12px; height: 12px; top: 50%; left: 4px; transform: translateY(-50%); }
.wsgdpr-toggle--small input:checked ~ .wsgdpr-toggle__track::after { transform: translateX(14px) translateY(-50%); }

/* ---------- Toggle group ---------- */
.wsgdpr-toggle-group {
    display:        flex;
    flex-direction: column;
    gap:            0;
    border:         1px solid var(--c-gray-200);
    border-radius:  var(--radius);
    overflow:       hidden;
    margin-bottom:  16px;
}

.wsgdpr-toggle-group .wsgdpr-toggle {
    padding:        14px 16px;
    background:     #fff;
    border-bottom:  1px solid var(--c-gray-100);
    border-radius:  0;
    transition:     background .15s;
}

.wsgdpr-toggle-group .wsgdpr-toggle:last-child {
    border-bottom: none;
}

.wsgdpr-toggle-group .wsgdpr-toggle:hover {
    background: var(--c-gray-50);
}

/* ---------- Cookie categories ---------- */
.wsgdpr-cookie-cats {
    display:        flex;
    flex-direction: column;
    gap:            0;
    border:         1px solid var(--c-gray-200);
    border-radius:  var(--radius);
    overflow:       hidden;
}

.wsgdpr-cookie-cat {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             8px;
    padding:         10px 12px;
    background:      #fff;
    cursor:          pointer;
    transition:      background .15s;
    border-bottom:   1px solid var(--c-gray-100);
}

.wsgdpr-cookie-cat:last-child { border-bottom: none; }

.wsgdpr-cookie-cat:hover { background: var(--c-gray-50); }

.wsgdpr-cookie-cat--always { cursor: default; }
.wsgdpr-cookie-cat--always:hover { background: #fff; }

.wsgdpr-cookie-cat__info {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    flex:           1;
    min-width:      0;
}

.wsgdpr-cookie-cat__info strong { font-size: 13px; color: var(--c-gray-900); line-height: 1.3; }
.wsgdpr-cookie-cat__info small  { font-size: 11px; color: var(--c-gray-400); line-height: 1.3; }

/* ---------- Badge ---------- */
.wsgdpr-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    padding:       4px 10px;
    border-radius: 99px;
    font-size:     11px;
    font-weight:   600;
    white-space:   nowrap;
    flex-shrink:   0;
}

.wsgdpr-badge--green { background: #dcfce7; color: #15803d; }
.wsgdpr-badge--gray  { background: var(--c-gray-100); color: var(--c-gray-600); }

/* ---------- Two-column layouts (3/4 + 1/4) ---------- */
.wsgdpr-general-layout,
.wsgdpr-banner-layout {
    display:               grid;
    grid-template-columns: 3fr 1fr;
    gap:                   20px;
    align-items:           stretch;
}

.wsgdpr-general-layout { margin-bottom: 20px; }

.wsgdpr-general-main,
.wsgdpr-general-side,
.wsgdpr-banner-main,
.wsgdpr-banner-side { display: flex; flex-direction: column; }

.wsgdpr-general-main .wsgdpr-card,
.wsgdpr-general-side .wsgdpr-card,
.wsgdpr-banner-main .wsgdpr-card,
.wsgdpr-banner-side .wsgdpr-card { flex: 1; margin-bottom: 0; }

@media (max-width: 960px) {
    .wsgdpr-general-layout,
    .wsgdpr-banner-layout { grid-template-columns: 1fr; }
    .wsgdpr-general-main .wsgdpr-card,
    .wsgdpr-general-side .wsgdpr-card,
    .wsgdpr-banner-main .wsgdpr-card,
    .wsgdpr-banner-side .wsgdpr-card { margin-bottom: 16px; }
}

/* ---------- Page section ---------- */
.wsgdpr-page-section {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            10px;
    margin-top:     0;
    padding-top:    16px;
    border-top:     1px solid var(--c-gray-200);
}
.wsgdpr-page-section.is-hidden { display: none; }
.wsgdpr-page-section .wsgdpr-btn--full,
.wsgdpr-page-section .wsgdpr-page-links { align-self: stretch; }
.wsgdpr-page-section .wsgdpr-hint { margin: 0; }

.wsgdpr-page-links {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   8px;
    margin-top:            8px;
}

.wsgdpr-page-link {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    font-size:       13px;
    font-weight:     500;
    color:           var(--c-gray-700, #374151);
    text-decoration: none;
    padding:         8px 10px;
    border:          1px solid var(--c-gray-200);
    border-radius:   8px;
    background:      #fff;
    transition:      border-color .15s, color .15s, background .15s;
    white-space:     nowrap;
}

.wsgdpr-page-link:hover {
    border-color: var(--c-primary);
    color:        var(--c-primary);
    background:   rgba(37,99,235,.04);
}

/* ---------- Full-width button modifier ---------- */
.wsgdpr-btn--full {
    width:           100%;
    justify-content: center;
}

/* ---------- Banner text with page-title suffix ---------- */
.wsgdpr-banner-text-wrap { position: relative; }
.wsgdpr-banner-text-wrap textarea { padding-bottom: 28px; }

.wsgdpr-banner-text-suffix {
    position:      absolute;
    bottom:        10px;
    left:          13px;
    font-size:     13px;
    color:         var(--c-gray-400);
    pointer-events: none;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    max-width:     calc(100% - 26px);
}

/* ---------- Button saving / saved states ---------- */
.wsgdpr-btn-icon--saving { display: none !important; }
.wsgdpr-btn.is-saving .wsgdpr-btn-icon         { display: none !important; }
.wsgdpr-btn.is-saving .wsgdpr-btn-icon--saving  { display: inline-block !important; }

.wsgdpr-btn.is-saved       { background: var(--c-success, #16a34a) !important; }
.wsgdpr-btn.is-save-error  { background: var(--c-danger,  #dc2626) !important; }

/* ---------- Hint page link ---------- */
.wsgdpr-hint__page-link {
    display:       inline-block;
    margin-left:   4px;
    padding:       1px 7px;
    background:    var(--c-gray-100);
    border:        1px solid var(--c-gray-200);
    border-radius: 4px;
    font-size:     11px;
    color:         var(--c-gray-500, #6b7280);
    font-style:    italic;
}

/* ---------- Header icon ---------- */
.wsgdpr-header__icon { display: block; flex-shrink: 0; }

/* ---------- Position picker ---------- */
.wsgdpr-position-picker {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   12px;
}

@media (max-width: 700px) {
    .wsgdpr-position-picker { grid-template-columns: 1fr 1fr; }
}

.wsgdpr-pos-card {
    display:       flex;
    flex-direction: column;
    align-items:   center;
    gap:           10px;
    padding:       16px;
    border:        2px solid var(--c-gray-200);
    border-radius: var(--radius);
    cursor:        pointer;
    transition:    border-color .15s, box-shadow .15s;
}

.wsgdpr-pos-card input { display: none; }

.wsgdpr-pos-card:hover { border-color: var(--c-primary); }
.wsgdpr-pos-card.is-active { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

.wsgdpr-pos-card span { font-size: 13px; font-weight: 500; text-align: center; }

.wsgdpr-pos-card__preview { width: 100%; }

.preview-screen {
    position:      relative;
    width:         100%;
    aspect-ratio:  16/9;
    background:    var(--c-gray-100);
    border-radius: var(--radius-sm);
    overflow:      hidden;
    border:        1px solid var(--c-gray-200);
}

.preview-banner {
    position:      absolute;
    width:         44%;
    height:        28%;
    background:    var(--c-primary);
    border-radius: 4px;
    opacity:       .85;
}

.pos-bottom-left  .preview-banner { bottom: 6%; left:  6%; }
.pos-bottom-right .preview-banner { bottom: 6%; right: 6%; }
.pos-center       .preview-banner { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56%; height: 36%; }
.pos-bottom-bar   .preview-banner { bottom: 0; left: 0; width: 100%; height: 22%; border-radius: 0; }

/* ---------- Range slider ---------- */
.wsgdpr-range-wrap {
    display:     flex;
    align-items: center;
    gap:         10px;
}

.wsgdpr-range {
    -webkit-appearance: none;
    appearance:         none;
    flex:               1;
    height:             4px;
    border-radius:      99px;
    background:         linear-gradient(to right, var(--c-primary) 0%, var(--c-primary) var(--range-pct, 50%), var(--c-gray-200) var(--range-pct, 50%), var(--c-gray-200) 100%);
    cursor:             pointer;
    outline:            none;
    border:             none;
}

/* Webkit thumb */
.wsgdpr-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance:         none;
    width:              18px;
    height:             18px;
    border-radius:      50%;
    background:         var(--c-primary);
    border:             3px solid #fff;
    box-shadow:         0 0 0 1.5px var(--c-primary), 0 1px 4px rgba(0,0,0,.18);
    cursor:             pointer;
    transition:         box-shadow .15s, transform .15s;
}

.wsgdpr-range::-webkit-slider-thumb:hover,
.wsgdpr-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 5px rgba(76,34,188,.15), 0 1px 4px rgba(0,0,0,.18);
    transform:  scale(1.1);
}

/* Firefox thumb */
.wsgdpr-range::-moz-range-thumb {
    width:        18px;
    height:       18px;
    border-radius: 50%;
    background:   var(--c-primary);
    border:       3px solid #fff;
    box-shadow:   0 0 0 1.5px var(--c-primary), 0 1px 4px rgba(0,0,0,.18);
    cursor:       pointer;
    transition:   box-shadow .15s;
}

.wsgdpr-range::-moz-range-thumb:hover {
    box-shadow: 0 0 0 5px rgba(76,34,188,.15), 0 1px 4px rgba(0,0,0,.18);
}

/* Firefox track */
.wsgdpr-range::-moz-range-track {
    height:       4px;
    border-radius: 99px;
    background:   var(--c-gray-200);
    border:       none;
}

.wsgdpr-range::-moz-range-progress {
    height:       4px;
    border-radius: 99px;
    background:   var(--c-primary);
}

.wsgdpr-range-val {
    min-width:     38px;
    text-align:    center;
    font-size:     14px;
    font-weight:   500;
    font-family:   var(--font);
    color:         var(--c-gray-900);
    background:    #fff;
    border:        1px solid var(--c-gray-200);
    border-radius: var(--radius-sm);
    padding:       5px 8px;
    line-height:   1;
    flex-shrink:   0;
}

/* ---------- Coloris — custom color field ---------- */

/* Outer wrapper: swatch + input side by side */
.wsgdpr-color-wrap {
    display:     flex;
    align-items: stretch;
    width:       100%;
    height:      38px;
    border:      1.5px solid var(--c-gray-200);
    border-radius: var(--radius-sm);
    overflow:    hidden;
    transition:  border-color .15s, box-shadow .15s;
    background:  var(--c-gray-50);
}

.wsgdpr-color-wrap:focus-within {
    border-color: var(--c-primary);
    box-shadow:   0 0 0 3px rgba(76,34,188,.12);
}

/* Colored square swatch on the left */
.wsgdpr-color-swatch {
    display:      block;
    flex-shrink:  0;
    width:        38px;
    cursor:       pointer;
    border-right: 1.5px solid var(--c-gray-200);
    transition:   border-color .15s;
    position:     relative;
    overflow:     hidden;
}

/* Checkerboard — base layer (::before) */
.wsgdpr-color-swatch::before {
    content:  '';
    position: absolute;
    inset:    0;
    background-image:
        linear-gradient(45deg, #d1d5db 25%, transparent 25%),
        linear-gradient(-45deg, #d1d5db 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #d1d5db 75%),
        linear-gradient(-45deg, transparent 75%, #d1d5db 75%);
    background-size:     10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0;
    background-color:    #fff;
}

/* Actual color layer on top of checkerboard — uses CSS var set by JS */
.wsgdpr-color-swatch::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: var(--swatch-color, transparent);
}

/* Hide the Coloris-generated button (we have our own swatch) */
.wsgdpr-color-wrap .clr-field button,
.wsgdpr-color-wrap + .clr-field button,
input.wsgdpr-color + button[aria-label],
.wsgdpr-color-wrap > button {
    display: none !important;
}

/* The text input — no own border, the wrapper handles it */
.wsgdpr-color-wrap input.wsgdpr-color {
    flex:          1 !important;
    min-width:     0 !important;
    height:        100% !important;
    border:        none !important;
    border-radius: 0 !important;
    box-shadow:    none !important;
    background:    var(--c-gray-50) !important;
    font-family:   'SF Mono', 'Fira Mono', 'Consolas', monospace !important;
    font-size:     11px !important;
    color:         var(--c-gray-700, #374151) !important;
    padding:       0 10px !important;
    cursor:        pointer !important;
    outline:       none !important;
    overflow:      hidden !important;
    text-overflow: ellipsis !important;
    white-space:   nowrap !important;
    width:         100% !important;
    box-sizing:    border-box !important;
}

/* Coloris dialog */
#clr-picker {
    border-radius: 12px !important;
    box-shadow:    0 8px 32px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08) !important;
    border:        1px solid #e5e7eb !important;
    font-family:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Hue + opacity sliders */
#clr-picker .clr-hue,
#clr-picker .clr-alpha { border-radius: 99px !important; }

#clr-picker .clr-hue .clr-slider,
#clr-picker .clr-alpha .clr-slider {
    width:        18px !important;
    height:       18px !important;
    border:       2px solid #fff !important;
    box-shadow:   0 1px 6px rgba(0,0,0,.28) !important;
    border-radius: 50% !important;
}

/* Color value input */
#clr-picker .clr-color-area { border-radius: 8px !important; }
#clr-picker .clr-color-marker {
    border:     2px solid #fff !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.3) !important;
}

#clr-picker #clr-color-value {
    border-radius: 6px !important;
    border:        1.5px solid #e5e7eb !important;
    font-family:   'SF Mono', 'Fira Mono', 'Consolas', monospace !important;
    font-size:     12px !important;
    padding:       6px 10px !important;
    color:         #1f2937 !important;
    box-shadow:    none !important;
}

#clr-picker #clr-color-value:focus {
    border-color: rgb(76,34,188) !important;
    box-shadow:   0 0 0 3px rgba(76,34,188,.1) !important;
    outline:      none !important;
}

/* Format toggle button */
#clr-picker .clr-format .clr-segmented {
    border-radius: 6px !important;
    border:        1.5px solid #e5e7eb !important;
    overflow:      hidden !important;
}

#clr-picker .clr-format .clr-segmented label {
    font-size:   11px !important;
    font-weight: 600 !important;
    color:       #4b5563 !important;
    padding:     4px 8px !important;
    transition:  all .15s !important;
}

#clr-picker .clr-format .clr-segmented input:checked + label {
    background: rgb(76,34,188) !important;
    color:      #fff !important;
}

/* Swatches — clean rounded squares, no dashed outline */
#clr-picker .clr-swatches button {
    border-radius: 6px !important;
    border:        none !important;
    outline:       none !important;
    box-shadow:    inset 0 0 0 1px rgba(0,0,0,.12) !important;
    width:         26px !important;
    height:        26px !important;
    padding:       0 !important;
    margin:        0 !important;
    transition:    transform .12s, box-shadow .12s !important;
    position:      relative !important;
}

#clr-picker .clr-swatches button:hover {
    transform:  scale(1.18) !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), 0 2px 8px rgba(0,0,0,.18) !important;
}

#clr-picker .clr-swatches button:focus {
    outline:    none !important;
    box-shadow: 0 0 0 2px rgb(76,34,188) !important;
}

/* Swatch container spacing — Coloris nests buttons inside a <div> inside .clr-swatches */
#clr-picker .clr-swatches {
    padding: 0 !important;
}
#clr-picker .clr-swatches > div {
    display:   flex !important;
    flex-wrap: wrap !important;
    gap:       6px !important;
    padding:   8px 10px !important;
}

/* Close / OK button — equal padding on all sides */
#clr-picker .clr-close {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    background:      rgb(76,34,188) !important;
    color:           #fff !important;
    border:          none !important;
    border-radius:   6px !important;
    font-family:     -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size:       12px !important;
    font-weight:     600 !important;
    line-height:     1 !important;
    height:          32px !important;
    padding:         0 18px !important;
    cursor:          pointer !important;
    transition:      background .15s !important;
    box-sizing:      border-box !important;
    vertical-align:  middle !important;
    text-align:      center !important;
}

#clr-picker .clr-close:hover { background: rgb(59,20,168) !important; }

/* ---------- Button preview ---------- */
.wsgdpr-banner-preview {
    background:    var(--c-gray-50);
    border:        1px solid var(--c-gray-200);
    border-radius: var(--radius);
    padding:       20px;
    margin-bottom: 20px;
    text-align:    center;
}

.wsgdpr-banner-preview p { margin: 0 0 14px; font-size: 13px; color: var(--c-gray-400); }

.preview-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.preview-btn {
    padding:       8px 18px;
    border:        none;
    cursor:        default;
    font-size:     14px;
    font-weight:   500;
    transition:    all .2s;
}

.preview-btn--accept   { background: var(--wsgdpr-btn-accept-bg, rgb(76, 34, 188)); color: var(--wsgdpr-btn-accept-color, #fff); border-radius: var(--wsgdpr-btn-accept-radius, 8px); }
.preview-btn--settings { background: var(--wsgdpr-btn-settings-bg, transparent); color: var(--wsgdpr-btn-settings-color, #6b7280); border-radius: var(--wsgdpr-btn-settings-radius, 8px); border: 1px solid var(--c-gray-200); }
.preview-btn--reject   { background: var(--wsgdpr-btn-reject-bg, #f3f4f6); color: var(--wsgdpr-btn-reject-color, #374151); border-radius: var(--wsgdpr-btn-reject-radius, 8px); }

/* ---------- Button styles ---------- */
.wsgdpr-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       9px 18px;
    border-radius: var(--radius-sm);
    font-size:     14px;
    font-weight:   600;
    border:        none;
    cursor:        pointer;
    transition:    all .15s;
    text-decoration: none;
}

.wsgdpr-btn--primary {
    background: var(--c-primary);
    color:      #fff;
}

.wsgdpr-btn--primary:hover { background: var(--c-primary-h); color: #fff; }

.wsgdpr-btn--secondary {
    background: var(--c-gray-100);
    color:      var(--c-gray-800);
    border:     1px solid var(--c-gray-200);
}

.wsgdpr-btn--secondary:hover { background: var(--c-gray-200); color: var(--c-gray-900); }

/* ---------- Form actions ---------- */
.wsgdpr-form__actions {
    display:     flex;
    align-items: center;
    gap:         14px;
    padding:     16px 0 8px;
}

.wsgdpr-save-msg { font-size: 13px; font-weight: 500; }
.wsgdpr-save-msg.is-success { color: var(--c-success); }
.wsgdpr-save-msg.is-error   { color: var(--c-danger); }

/* ---------- Script manager ---------- */
.wsgdpr-scripts-empty {
    text-align:  center;
    padding:     40px;
    color:       var(--c-gray-400);
}

.wsgdpr-scripts-empty svg { margin-bottom: 12px; }
.wsgdpr-scripts-empty p   { margin: 0; font-size: 14px; }

.wsgdpr-scripts-actions {
    display:     flex;
    align-items: center;
    gap:         12px;
    margin-top:  16px;
}

.wsgdpr-script-row {
    display:       flex;
    align-items:   flex-start;
    gap:           12px;
    padding:       16px;
    border:        1px solid var(--c-gray-200);
    border-radius: var(--radius);
    margin-bottom: 10px;
    background:    var(--c-gray-50);
    position:      relative;
}

.wsgdpr-script-row__drag {
    padding-top: 10px;
    color:       var(--c-gray-400);
    cursor:      grab;
    flex-shrink: 0;
}

.wsgdpr-script-row__body { flex: 1; min-width: 0; }

.wsgdpr-script-row__remove {
    flex-shrink: 0;
    background:  none;
    border:      none;
    cursor:      pointer;
    color:       var(--c-gray-400);
    padding:     6px;
    border-radius: var(--radius-sm);
    transition:  all .15s;
    margin-top:  6px;
}

.wsgdpr-script-row__remove:hover { background: #fee2e2; color: var(--c-danger); }

.wsgdpr-script-src-wrap,
.wsgdpr-script-inline-wrap { margin-top: 12px; }

.wsgdpr-script-src-wrap.is-hidden,
.wsgdpr-script-inline-wrap.is-hidden { display: none; }

/* Script templates */
.wsgdpr-script-templates {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   10px;
}

@media (max-width: 700px) { .wsgdpr-script-templates { grid-template-columns: 1fr 1fr; } }

.wsgdpr-tpl-btn {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       12px;
    border:        1px solid var(--c-gray-200);
    border-radius: var(--radius);
    background:    #fff;
    cursor:        pointer;
    font-size:     13px;
    font-weight:   500;
    transition:    all .15s;
    text-align:    left;
}

.wsgdpr-tpl-btn:hover { border-color: var(--c-primary); background: #eff6ff; }

.wsgdpr-tpl-icon {
    width:         30px;
    height:        30px;
    border-radius: var(--radius-sm);
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     10px;
    font-weight:   800;
    color:         #fff;
    flex-shrink:   0;
}

/* ---------- Btn sections ---------- */
.wsgdpr-btn-grid {
    display:        flex;
    flex-direction: column;
    gap:            0;
}

.wsgdpr-btn-section {
    padding:       20px 0;
    border-bottom: 1px solid var(--c-gray-100);
}

.wsgdpr-btn-section:first-child { padding-top: 4px; }
.wsgdpr-btn-section:last-child  { padding-bottom: 4px; border-bottom: none; }

.wsgdpr-btn-section h3 {
    margin:         0 0 14px;
    font-size:      12px;
    font-weight:    700;
    color:          var(--c-gray-500);
    text-transform: uppercase;
    letter-spacing: .6px;
}

/* ---------- Table ---------- */
.wsgdpr-table-wrap { overflow-x: auto; }

.wsgdpr-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       13px;
}

.wsgdpr-table th,
.wsgdpr-table td {
    padding:    10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--c-gray-100);
}

.wsgdpr-table th {
    font-weight:    700;
    font-size:      11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color:          var(--c-gray-400);
    background:     var(--c-gray-50);
}

.wsgdpr-table td.mono { font-family: monospace; font-size: 12px; }

/* ---------- Pagination ---------- */
.wsgdpr-pagination {
    display:     flex;
    gap:         4px;
    margin-top:  16px;
    flex-wrap:   wrap;
}

.wsgdpr-page-btn {
    padding:       5px 10px;
    border:        1px solid var(--c-gray-200);
    border-radius: var(--radius-sm);
    font-size:     13px;
    font-weight:   500;
    color:         var(--c-gray-600);
    text-decoration: none;
    transition:    all .15s;
}

.wsgdpr-page-btn:hover,
.wsgdpr-page-btn.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* ---------- Sticky save bar ---------- */
@keyframes wsgdpr-pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(76,34,188,.5); }
    50%       { box-shadow: 0 0 0 5px rgba(76,34,188,0); }
}
@keyframes wsgdpr-bar-in  {
    from { bottom: -80px; opacity: 0; }
    to   { bottom: 20px;  opacity: 1; }
}
@keyframes wsgdpr-bar-out {
    from { bottom: 20px;  opacity: 1; }
    to   { bottom: -80px; opacity: 0; }
}

.wsgdpr-sticky-save {
    position:   fixed;
    bottom:     20px;
    /* left set by JS; margin-left: -50% of own width via JS */
    z-index:    9999;
    background: rgba(17,24,39,.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border:     1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-lg, 14px);
    box-shadow: 0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.16);
    min-width:  420px;
    max-width:  calc(100vw - 200px);
}

.wsgdpr-sticky-save.is-hidden   { display: none; }
.wsgdpr-sticky-save.is-entering { animation: wsgdpr-bar-in  .35s cubic-bezier(.34,1.4,.64,1) both; }
.wsgdpr-sticky-save.is-leaving  { animation: wsgdpr-bar-out .2s ease-in both; }

.wsgdpr-sticky-save__inner {
    display:     flex;
    align-items: center;
    gap:         16px;
    padding:     10px 12px 10px 16px;
}

.wsgdpr-sticky-save__label {
    display:     flex;
    align-items: center;
    gap:         10px;
    font-size:   13px;
    font-weight: 500;
    color:       rgba(255,255,255,.85);
    flex:        1;
}

/* animated pulsing dot */
.wsgdpr-sticky-dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--c-primary);
    flex-shrink:   0;
    animation:     wsgdpr-pulse-dot 1.8s ease-out infinite;
    transition:    background .3s;
}

.wsgdpr-sticky-save.is-saved .wsgdpr-sticky-dot { background: #4ade80; animation: none; }
.wsgdpr-sticky-save.is-saved .wsgdpr-sticky-save__label-text { color: #4ade80; }

.wsgdpr-sticky-save__actions {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-shrink: 0;
}

.wsgdpr-sticky-save__msg { display: none; }

@media (max-width: 782px) {
    .wsgdpr-sticky-save { min-width: calc(100vw - 32px); bottom: 12px; }
}

/* ---------- Appearance tab layout ---------- */
.wsgdpr-appearance-layout {
    display:               grid;
    grid-template-columns: 3fr 1fr;
    gap:                   20px;
    align-items:           start;
}

.wsgdpr-appearance-main { display: flex; flex-direction: column; }
.wsgdpr-appearance-side { position: sticky; top: 32px; }

@media (max-width: 1100px) {
    .wsgdpr-appearance-layout { grid-template-columns: 1fr; }
    .wsgdpr-appearance-side   { position: static; }
}

/* ---------- Preview card ---------- */
.wsgdpr-preview-card { margin-bottom: 0; }

/* ---------- Live preview — inline banner ---------- */
.wsgdpr-live-preview { user-select: none; }
.wsgdpr-lp-stage { position: relative; min-height: 80px; }

/* Banner sits inline, no fixed/absolute positioning */
.wsgdpr-lp-stage #wsgdpr-banner {
    position:   relative !important;
    animation:  none !important;
    transition: none !important;
    width:      100% !important;
    max-width:  100% !important;
    bottom:     auto !important;
    right:      auto !important;
    left:       auto !important;
    top:        auto !important;
    transform:  none !important;
    box-sizing: border-box !important;
    /* remove position-based border-radius override for bottom-bar */
    border-radius: var(--wsgdpr-banner-radius, 12px) !important;
}

/* bottom-bar: hide banner, show placeholder message */
.wsgdpr-lp-stage.lp-pos-bottom-bar #wsgdpr-banner {
    visibility: hidden !important;
    pointer-events: none !important;
}

.wsgdpr-lp-stage.lp-pos-bottom-bar::after {
    content:         '↔  Pre zobrazenie bottom-bar banneru prejdite na webstránku';
    display:         flex;
    align-items:     center;
    justify-content: center;
    position:        absolute;
    inset:           0;
    font-size:       12px;
    color:           var(--c-gray-500);
    font-style:      italic;
    text-align:      center;
    padding:         20px;
    background:      var(--c-gray-50);
    border-radius:   var(--radius);
}

/* Overlay not needed inline */
.wsgdpr-lp-stage #wsgdpr-overlay { display: none !important; }

.wsgdpr-lp-hint {
    text-align: center;
    font-size:  11px;
    color:      var(--c-gray-400);
    margin:     10px 0 0;
    font-style: italic;
}

/* ---------- Footer ---------- */
.wsgdpr-footer {
    padding:         20px 0 28px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
}
.wsgdpr-footer__by {
    font-size:   11px;
    color:       var(--c-gray-400);
    font-weight: 400;
    opacity:     .55;
}
.wsgdpr-footer__logo-link { display: inline-flex; align-items: center; opacity: .55; transition: opacity .2s; }
.wsgdpr-footer__logo-link:hover { opacity: 1; }
.wsgdpr-footer__logo { display: block; height: 22px; width: auto; }

/* ---------- Utility ---------- */
.is-hidden { display: none !important; }


/* =========================================================
   Setup Wizard
   ========================================================= */

.wsgdpr-wizard-wrap {
    --wz-accent:  rgb(76, 34, 188);
    --wz-green:   #16a34a;
    --wz-border:  #e5e7eb;
    --wz-bg:      #f9fafb;
    --wz-radius:  12px;
    --wz-shadow:  0 4px 24px rgba(0,0,0,.09);
    /* Hide WP admin notices inside wizard */
    position: relative;
}

/* Hide ALL WP admin notices on wizard page */
.wsgdpr-wizard-wrap ~ .notice,
.wsgdpr-wizard-wrap ~ .update-nag,
.wsgdpr-wizard-wrap ~ div.error,
.wsgdpr-wizard-wrap ~ div.updated { display: none !important; }

/* Full-page layout */
.wsgdpr-wizard-page {
    max-width:  700px;
    margin:     0 auto;
    padding:    32px 16px 80px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size:  14px;
    color:      #1f2937;
}

/* Header — centered logo */
.wsgdpr-wizard-header {
    text-align:    center;
    margin-bottom: 36px;
}
.wsgdpr-wizard-header__logo {
    display:      inline-flex;
    align-items:  center;
    gap:          10px;
    font-size:    17px;
    font-weight:  700;
    color:        #111827;
}

/* Progress */
.wsgdpr-wizard-progress {
    display:         flex;
    align-items:     center;
    margin-bottom:   32px;
}
.wsgdpr-wizard-step {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            7px;
    flex-shrink:    0;
}
.wsgdpr-wizard-step__dot {
    width:           36px;
    height:          36px;
    border-radius:   50%;
    background:      var(--wz-border);
    border:          2px solid var(--wz-border);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       13px;
    font-weight:     700;
    color:           #9ca3af;
    transition:      all .25s;
    position:        relative;
}
.wsgdpr-wizard-step__check {
    display:  none;
    font-size: 20px;
    width:    20px;
    height:   20px;
    color:    #fff;
}
.wsgdpr-wizard-step__num { transition: opacity .2s; }

.wsgdpr-wizard-step.is-active .wsgdpr-wizard-step__dot {
    background:   #111827;
    border-color: #111827;
    color:        #fff;
    box-shadow:   0 0 0 4px rgba(17,24,39,.12);
}
.wsgdpr-wizard-step.is-done .wsgdpr-wizard-step__dot {
    background:   var(--wz-green);
    border-color: var(--wz-green);
}
.wsgdpr-wizard-step.is-done .wsgdpr-wizard-step__num  { display: none; }
.wsgdpr-wizard-step.is-done .wsgdpr-wizard-step__check { display: flex; }

.wsgdpr-wizard-step__label {
    font-size:   11px;
    font-weight: 600;
    color:       #9ca3af;
    white-space: nowrap;
}
.wsgdpr-wizard-step.is-active .wsgdpr-wizard-step__label { color: #111827; }
.wsgdpr-wizard-step.is-done  .wsgdpr-wizard-step__label { color: var(--wz-green); }

.wsgdpr-wizard-step__line {
    flex:          1;
    height:        2px;
    background:    var(--wz-border);
    margin:        0 6px;
    margin-bottom: 20px;
    transition:    background .3s;
}

/* Card */
.wsgdpr-wizard-card {
    background:    #fff;
    border:        1px solid var(--wz-border);
    border-radius: var(--wz-radius);
    box-shadow:    var(--wz-shadow);
    overflow:      hidden;
}
.wsgdpr-wizard-card__head {
    padding:       22px 28px 18px;
    border-bottom: 1px solid var(--wz-border);
    background:    var(--wz-bg);
}
.wsgdpr-wizard-card__head h2 {
    font-size:   19px;
    font-weight: 700;
    color:       #111827;
    margin:      0 0 5px;
}
.wsgdpr-wizard-card__head p {
    font-size: 13px;
    color:     #6b7280;
    margin:    0;
}
.wsgdpr-wizard-card__body { padding: 24px 28px; }
.wsgdpr-wizard-card__foot {
    display:          flex;
    justify-content:  space-between;
    align-items:      center;
    padding:          16px 28px;
    border-top:       1px solid var(--wz-border);
    background:       var(--wz-bg);
    gap:              10px;
}

/* Buttons */
.wsgdpr-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       10px 20px;
    border-radius: 8px;
    font-family:   inherit;
    font-size:     14px;
    font-weight:   600;
    cursor:        pointer;
    border:        none;
    transition:    all .2s;
    text-decoration: none;
    line-height:   1;
}
.wsgdpr-btn .dashicons {
    font-size: 16px;
    width:     16px;
    height:    16px;
    margin:    0;
}
.wsgdpr-btn--primary {
    background: rgb(76, 34, 188);
    color:      #fff;
}
.wsgdpr-btn--primary:hover { background: #5b21b6; color: #fff; }
.wsgdpr-btn--primary:disabled {
    background: var(--wz-border);
    color:      #9ca3af;
    cursor:     not-allowed;
}
.wsgdpr-btn--secondary {
    background: #f3f4f6;
    color:      #374151;
    border:     1.5px solid var(--wz-border);
}
.wsgdpr-btn--secondary:hover { background: #e5e7eb; color: #111827; }
.wsgdpr-btn--back {
    background: transparent;
    color:      #6b7280;
    border:     1.5px solid var(--wz-border);
}
.wsgdpr-btn--back:hover { border-color: #9ca3af; color: #374151; background: #f9fafb; }
.wsgdpr-btn--ghost {
    background:  transparent;
    color:       #9ca3af;
    border:      none;
    padding:     10px 12px;
    font-weight: 400;
    font-size:   13px;
}
.wsgdpr-btn--ghost:hover { color: #6b7280; }

/* Radio options */
.wsgdpr-radio-group { display: flex; flex-direction: column; gap: 10px; }
.wsgdpr-radio-option {
    display:     flex;
    align-items: center;
    gap:         16px;
    padding:     14px 18px;
    border:        1.5px solid var(--wz-border);
    border-radius: 10px;
    cursor:        pointer;
    transition:    all .2s;
}
.wsgdpr-radio-option:hover { border-color: #9ca3af; background: var(--wz-bg); }
.wsgdpr-radio-option.is-selected {
    border-color: var(--wz-accent);
    background:   rgba(76,34,188,.04);
}
.wsgdpr-radio-option input[type="radio"] { display: none; }

.wsgdpr-radio-mark {
    width:           20px;
    height:          20px;
    flex-shrink:     0;
    border-radius:   50%;
    border:          2px solid var(--wz-border);
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      all .2s;
    position:        relative;
}
.wsgdpr-radio-option.is-selected .wsgdpr-radio-mark {
    border-color: var(--wz-accent);
    background:   var(--wz-accent);
}
.wsgdpr-radio-option.is-selected .wsgdpr-radio-mark::after {
    content:       '';
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    #fff;
    display:       block;
}

/* Option icon (colored square) + text layout — used in both radio and check options */
.wsgdpr-option-icon {
    width:           48px;
    height:          48px;
    border-radius:   10px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    background:      #ede9fe;
    color:           var(--wz-accent);
    transition:      background .2s;
}
.wsgdpr-option-icon .dashicons {
    font-size: 22px;
    width:     22px;
    height:    22px;
}

/* Colour variants per type */
.wsgdpr-option-icon--cart       { background: #dbeafe; color: #1d4ed8; }
.wsgdpr-option-icon--firm       { background: #fef3c7; color: #b45309; }
.wsgdpr-option-icon--blog       { background: #dcfce7; color: #15803d; }
.wsgdpr-option-icon--saas       { background: #ede9fe; color: #7c3aed; }
.wsgdpr-option-icon--contact    { background: #e0f2fe; color: #0369a1; }
.wsgdpr-option-icon--newsletter { background: #fce7f3; color: #be185d; }
.wsgdpr-option-icon--accounts   { background: #f3e8ff; color: #7c3aed; }
.wsgdpr-option-icon--chat       { background: #ecfdf5; color: #059669; }
.wsgdpr-option-icon--comments   { background: #fff7ed; color: #c2410c; }
.wsgdpr-option-icon--payments   { background: #dcfce7; color: #15803d; }
.wsgdpr-option-icon--delivery   { background: #fef9c3; color: #a16207; }
.wsgdpr-option-icon--ga         { background: #fff7ed; color: #ea580c; }
.wsgdpr-option-icon--meta       { background: #dbeafe; color: #1d4ed8; }
.wsgdpr-option-icon--googleads  { background: #fef3c7; color: #b45309; }
.wsgdpr-option-icon--hotjar     { background: #fee2e2; color: #dc2626; }

.wsgdpr-option-text {
    display:        flex;
    flex-direction: column;
    gap:            3px;
    flex:           1;
}
.wsgdpr-option-text strong {
    font-size:   14px;
    font-weight: 600;
    color:       #111827;
    line-height: 1.3;
}
.wsgdpr-option-text em {
    font-style: normal;
    font-size:  12px;
    color:      #6b7280;
    line-height: 1.4;
}

/* Checkboxes */
.wsgdpr-check-section-label {
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color:          #9ca3af;
    margin:         20px 0 9px;
    padding-bottom: 6px;
    border-bottom:  1px solid var(--wz-border);
}
.wsgdpr-check-section-label:first-child { margin-top: 0; }
.wsgdpr-check-group { display: flex; flex-direction: column; gap: 8px; }

.wsgdpr-check-option {
    display:     flex;
    align-items: center;
    gap:         16px;
    padding:     12px 16px;
    border:        1.5px solid var(--wz-border);
    border-radius: 9px;
    cursor:        pointer;
    transition:    all .2s;
}
.wsgdpr-check-option:hover { border-color: #9ca3af; background: var(--wz-bg); }
.wsgdpr-check-option.is-selected {
    border-color: var(--wz-accent);
    background:   rgba(76,34,188,.04);
}
.wsgdpr-check-option input[type="checkbox"] { display: none; }

.wsgdpr-check-mark {
    width:           22px;
    height:          22px;
    flex-shrink:     0;
    border-radius:   6px;
    border:          2px solid var(--wz-border);
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      all .2s;
    background:      #fff;
}
.wsgdpr-check-mark .wsgdpr-check-svg {
    display: none;
    width:   11px;
    height:  11px;
    color:   #fff;
}
.wsgdpr-check-option.is-selected .wsgdpr-check-mark {
    border-color: var(--wz-accent);
    background:   var(--wz-accent);
}
.wsgdpr-check-option.is-selected .wsgdpr-check-mark .wsgdpr-check-svg { display: block; }

/* Foot-right: groups skip + next/finish on the right */
.wsgdpr-wizard-card__foot-right {
    display:     flex;
    align-items: center;
    gap:         8px;
}

/* SVG check size in progress dots */
.wsgdpr-wizard-step__check .wsgdpr-check-svg {
    width:  16px;
    height: 16px;
    color:  #fff;
}

/* Success step icon — large SVG check */
.wsgdpr-wizard-success__icon .wsgdpr-check-svg {
    width:         64px;
    height:        64px;
    color:         var(--wz-green);
    margin-bottom: 20px;
    display:       block;
    margin-left:   auto;
    margin-right:  auto;
}

/* Form */
.wsgdpr-wizard-form {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   14px;
}
.wsgdpr-form-row { display: flex; flex-direction: column; gap: 5px; }
.wsgdpr-form-row--full { grid-column: 1 / -1; }
.wsgdpr-form-row label {
    font-size:      12px;
    font-weight:    600;
    color:          #374151;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.wsgdpr-form-row label .required { color: #dc2626; }
.wsgdpr-form-row label .optional {
    font-weight:    400;
    text-transform: none;
    letter-spacing: 0;
    color:          #9ca3af;
}
.wsgdpr-form-row input {
    padding:       9px 12px;
    border:        1.5px solid var(--wz-border);
    border-radius: 8px;
    font-size:     14px;
    font-family:   inherit;
    color:         #111827;
    background:    #fff;
    outline:       none;
    transition:    border-color .2s;
    width:         100%;
    box-sizing:    border-box;
}
.wsgdpr-form-row input:focus { border-color: var(--wz-accent); box-shadow: 0 0 0 3px rgba(76,34,188,.1); }

/* Success step */
.wsgdpr-wizard-success {
    text-align: center;
    padding:    52px 28px;
}
.wsgdpr-wizard-success__icon .dashicons {
    font-size:     60px;
    width:         60px;
    height:        60px;
    color:         var(--wz-green);
    margin-bottom: 20px;
}
.wsgdpr-wizard-success h2 {
    font-size:   20px;
    font-weight: 700;
    color:       #111827;
    margin:      0 0 10px;
}
.wsgdpr-wizard-success > p { color: #6b7280; margin-bottom: 28px; }
.wsgdpr-wizard-success__actions {
    display:         flex;
    gap:             10px;
    justify-content: center;
    flex-wrap:       wrap;
    margin-bottom:   20px;
}
.wsgdpr-wizard-success__note { font-size: 12px; color: #9ca3af; }

/* Spin animation */
@keyframes wsgdpr-spin { to { transform: rotate(360deg); } }
.wsgdpr-spin { animation: wsgdpr-spin .7s linear infinite; display: inline-block; }

/* Policy table (frontend output) */
.wsgdpr-policy__table {
    width:           100%;
    border-collapse: collapse;
    margin:          12px 0;
    font-size:       13px;
}
.wsgdpr-policy__table th {
    background:  #f9fafb;
    text-align:  left;
    padding:     8px 12px;
    font-weight: 600;
    border:      1px solid #e5e7eb;
}
.wsgdpr-policy__table td {
    padding:        8px 12px;
    border:         1px solid #e5e7eb;
    vertical-align: top;
}
.wsgdpr-policy__meta {
    font-size:     12px;
    color:         #6b7280;
    margin-bottom: 24px;
    line-height:   1.6;
}
.wsgdpr-policy__generated {
    margin-top: 24px;
    font-size:  12px;
    color:      #9ca3af;
}

@media (max-width: 600px) {
    .wsgdpr-wizard-card__head,
    .wsgdpr-wizard-card__body,
    .wsgdpr-wizard-card__foot { padding-left: 16px; padding-right: 16px; }
    .wsgdpr-wizard-form { grid-template-columns: 1fr; }
    .wsgdpr-form-row--full { grid-column: 1; }
    .wsgdpr-radio-option,
    .wsgdpr-check-option { padding: 12px 14px; }
}