/* ── [wcp_fabric_image] shortcode styles ──────────────────────────── */
.wcp-fabric-image-wrap {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #f3f4f6;
    aspect-ratio: 4 / 3;
    max-height: 480px;
}

#wcp-fabric-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s ease;
}

/* Colour name badge — bottom-left overlay */
.wcp-fabric-colour-name {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.wcp-fabric-colour-name:not(:empty) {
    opacity: 1;
}

/* ── [wcp_size_notice] error notice ───────────────────────────────── */
.wcp-error-notice {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 14px;
    margin-top: 10px;
    line-height: 1.5;
}

/* ── Headbox upgrade warning banner ──────────────────────────────── */
.wcp-headbox-warning {
    background: #fffbeb;
    border: 1px solid #f59e0b;
    border-left: 4px solid #f59e0b;
    border-radius: 0 8px 8px 0;
    color: #92400e;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 14px;
    margin-bottom: 12px;
    line-height: 1.5;
}
.wcp-headbox-warning a {
    color: #92400e;
    text-decoration: underline;
}

/* ── Disabled operation option (Manual on large headbox) ─────────── */
.wcp-option-disabled {
    opacity: 0.38 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}
.wcp-option-disabled input {
    pointer-events: none !important;
}

/* ── [wcp_headbox_notice] — Option B spec card ───────────────────────── */
.wcp-headbox-notice {
    background: rgba(234,158,39,0.12);
    border: 1px solid rgba(234,158,39,0.45);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 10px 0;
    color: #e8a82a;
}
.whn-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.whn-head svg { flex-shrink: 0; color: #e8a82a; }
.whn-title {
    font-size: 13px;
    font-weight: 600;
    color: #f0c060;
    flex: 1;
}
.whn-badge {
    font-size: 11px;
    font-weight: 600;
    background: #e8601c;
    color: #fff;
    border-radius: 20px;
    padding: 2px 9px;
    white-space: nowrap;
}
.whn-body {
    font-size: 12px;
    color: #c8a060;
    line-height: 1.55;
    margin-bottom: 10px;
}
.whn-specs {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.whn-spec {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border-radius: 6px;
    padding: 7px 8px;
    text-align: center;
}
.whn-sv {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #f0c060;
}
.whn-sl {
    display: block;
    font-size: 11px;
    color: #a08040;
    margin-top: 2px;
}
.whn-link {
    font-size: 12px;
    color: #e8a82a;
    text-decoration: underline;
}

/* ── [wcp_headbox_operation_notice] — Option C op change callout ─────── */
.wcp-headbox-operation {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: rgba(232,96,28,0.1);
    border: 1px solid rgba(232,96,28,0.4);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 10px 0;
}
.who-icon {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: #e8601c;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.who-icon svg { color: #fff; }
.who-text { flex: 1; }
.who-title {
    font-size: 13px;
    font-weight: 600;
    color: #f0c060;
    margin-bottom: 4px;
}
.who-body {
    font-size: 12px;
    color: #c8a060;
    line-height: 1.5;
}
.who-ops {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.who-pill {
    font-size: 12px;
    font-weight: 500;
    padding: 3px 11px;
    border-radius: 20px;
}
.who-pill--off {
    background: rgba(255,255,255,0.08);
    color: #888;
    text-decoration: line-through;
}
.who-pill--on {
    background: #e8601c;
    color: #fff;
}
.who-pill--arrow {
    color: #e8601c;
    font-size: 14px;
    padding: 0 2px;
    background: none;
}

/* ── [wcp_notice] unified notice system ─────────────────────────────────── */

.wcp-notice {
    border-radius: 10px;
    padding: 14px 16px;
    margin: 10px 0;
    border-width: 1px;
    border-style: solid;
}

/* Style variants — custom_color from admin sets --wcpn-color and overrides everything */
.wcp-notice--amber  { background:rgba(186,117,23,.13); border-color:rgba(186,117,23,.50); --wcpn-color:#fde090; }
.wcp-notice--orange { background:rgba(232,96,28,.12);  border-color:rgba(232,96,28,.45);  --wcpn-color:#fec090; }
.wcp-notice--blue   { background:rgba(24,95,165,.12);  border-color:rgba(24,95,165,.45);  --wcpn-color:#b8d8fc; }
.wcp-notice--green  { background:rgba(59,109,17,.12);  border-color:rgba(59,109,17,.45);  --wcpn-color:#a8e4a8; }
.wcp-notice--grey   { background:rgba(136,135,128,.12);border-color:rgba(136,135,128,.40);--wcpn-color:#d8d8d8; }
.wcp-notice--danger { background:rgba(163,45,45,.12);  border-color:rgba(163,45,45,.45);  --wcpn-color:#fca8a8; }

/* All text inherits --wcpn-color so the admin colour picker controls everything */
.wcp-notice,
.wcp-notice .wcpn-body,
.wcp-notice .wcpn-link,
.wcp-notice .wcpn-sv,
.wcp-notice .wcpn-sl   { color: var(--wcpn-color); }

.wcp-notice .wcpn-title {
    font-size: 13px;
    font-weight: 600;
    flex: 1;
    color: var(--wcpn-color);
    filter: brightness(1.2);
}

/* Layout */
.wcpn-head   { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.wcpn-body   { font-size:12px; line-height:1.6; margin-bottom:10px; }
.wcpn-link   { font-size:12px; text-decoration:underline; }
.wcpn-link:hover { filter: brightness(1.2); }

/* Badge — always brand orange, not affected by colour picker */
.wcpn-badge  { font-size:11px; font-weight:600; border-radius:20px; padding:2px 9px; white-space:nowrap; background:#e8601c; color:#fff; }

/* Spec grid */
.wcpn-specs  { display:flex; gap:8px; margin-bottom:10px; }
.wcpn-spec   { flex:1; background:rgba(255,255,255,.06); border-radius:6px; padding:7px 8px; text-align:center; }
.wcpn-sv     { display:block; font-size:14px; font-weight:600; filter:brightness(1.15); }
.wcpn-sl     { display:block; font-size:11px; margin-top:2px; opacity:.75; }

/* Operation pills */
.wcpn-ops        { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:8px; }
.wcpn-op         { font-size:12px; font-weight:500; padding:3px 11px; border-radius:20px; }
.wcpn-op--off    { background:rgba(255,255,255,.08); color:#888; text-decoration:line-through; }
.wcpn-op--on     { background:#e8601c; color:#fff; }
.wcpn-op--arrow  { color:#e8601c; font-size:14px; background:none; padding:0 2px; }

/* =====================================================================
   A3 fix — mobile horizontal overflow on the configurator
   The WowAddons field tooltip (.prad-tooltip-box) is a fixed ~400px box
   positioned absolutely off a small trigger. On a phone it extends past
   the viewport, stretching the whole page (e.g. a 375px screen laid out
   at 558px), which broke the off-canvas menu on the product page.
   Clip horizontal overflow on the configurator wrapper (it sits within
   the viewport and only clips what actually overflows) and cap the
   tooltip to the screen. Scoped to the mobile menu breakpoint (<=1000px).
   Popups (.prad-block-popup-overlay) are position:fixed so they escape
   this clip and are unaffected.
   ===================================================================== */
@media (max-width: 1000px) {
    .prad-addons-wrapper { overflow-x: clip; }
    .prad-tooltip-box    { max-width: calc(100vw - 32px) !important; }
}