.pic-wrap,
.pic-wrap * {
    box-sizing: border-box;
}

.pic-wrap {
    --pic-blue: #1877f2;
    --pic-blue-soft: #b8d8fb;
    --pic-text: #2f3a4a;
    --pic-muted: #8b96a8;
    --pic-border: #e4eaf2;
    --pic-bg: #ffffff;
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    background: var(--pic-bg);
    border-radius: 0 0 14px 14px;
    overflow: hidden;
    color: var(--pic-text);
    font-family: inherit;
}

.pic-head {
    min-height: 82px;
    padding: 24px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1169e8;
    color: #ffffff;
}

.pic-title {
    font-size: 23px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.pic-subtitle {
    margin-top: 7px;
    font-size: 14px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.72);
}

.pic-head-mark {
    width: 58px;
    height: 58px;
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 3px;
    position: relative;
}

.pic-head-mark::before,
.pic-head-mark::after {
    content: '';
    position: absolute;
    inset: -8px 8px 8px -8px;
    border: 2px solid rgba(255, 255, 255, 0.13);
}

.pic-head-mark::after {
    inset: 8px -8px -8px 8px;
}

.pic-form {
    padding: 30px 58px 46px;
}

.pic-section {
    margin-bottom: 25px;
}

.pic-section-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.pic-section-label,
.pic-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--pic-text);
    font-size: 15px;
    font-weight: 700;
}

.pic-section-label > span,
.pic-label > span {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border-radius: 7px;
    background: var(--pic-blue-soft);
    display: inline-flex;
}

.pic-skip-btn {
    appearance: none;
    border: 1px solid var(--pic-border);
    background: #f8fafc;
    color: #a2aaba;
    height: 28px;
    padding: 0 18px;
    border-radius: 999px;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.pic-category-grid,
.pic-card-grid {
    display: grid;
    gap: 12px 16px;
}

.pic-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pic-card-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pic-card-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pic-card {
    appearance: none;
    position: relative;
    min-height: 105px;
    border: 2px solid var(--pic-border);
    background: #fbfcfe;
    border-radius: 11px;
    padding: 18px 14px 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    color: var(--pic-text);
    font: inherit;
    text-align: center;
    transition: border-color .18s ease, color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.pic-card:hover,
.pic-card.is-active {
    border-color: var(--pic-blue);
    color: var(--pic-blue);
    background: #ffffff;
}

.pic-card.is-active {
    box-shadow: 0 8px 22px rgba(24, 119, 242, 0.08);
}

.pic-card-check {
    position: absolute;
    right: 11px;
    top: 11px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--pic-blue);
    opacity: 0;
    transform: scale(.8);
    transition: opacity .18s ease, transform .18s ease;
}

.pic-card-check::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 5px;
    width: 6px;
    height: 11px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}

.pic-card.is-active .pic-card-check {
    opacity: 1;
    transform: scale(1);
}

.pic-card-icon {
    height: 48px;
    width: auto;
    max-width: 74px;
    object-fit: contain;
    opacity: .8;
}

.pic-card-label {
    font-size: 14px;
    line-height: 1.25;
}

.pic-field {
    display: block;
    margin-bottom: 18px;
}

.pic-field input,
.pic-field select,
.pic-field textarea {
    width: 100%;
    border: 1px solid #cfd8e5;
    background: #ffffff;
    border-radius: 999px;
    min-height: 43px;
    padding: 0 19px;
    color: var(--pic-text);
    font: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.pic-field textarea {
    border-radius: 11px;
    min-height: 100px;
    padding: 16px 19px;
    resize: vertical;
}

.pic-field input:focus,
.pic-field select:focus,
.pic-field textarea:focus {
    border-color: var(--pic-blue);
    box-shadow: 0 0 0 3px rgba(24, 119, 242, .12);
}

.pic-custom-value {
    margin-top: 10px;
}

.pic-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.pic-row-compact {
    margin-top: 12px;
}

.pic-radio-row {
    display: flex;
    align-items: center;
    gap: 18px;
}

.pic-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
}

.pic-radio input {
    width: 16px;
    height: 16px;
    accent-color: var(--pic-blue);
}

.pic-file-block {
    margin-top: 10px;
}

.pic-file-label {
    display: block;
}

.pic-file-label > span {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
}

.pic-file-label input[type="file"] {
    display: block;
    width: 100%;
    border: 1px dashed #cfd8e5;
    background: #fbfcfe;
    border-radius: 8px;
    padding: 14px;
    min-height: auto;
}

.pic-file-label em {
    display: block;
    margin-top: 7px;
    font-style: normal;
    color: var(--pic-muted);
    font-size: 12px;
}

.pic-contact-title {
    margin-bottom: 16px;
    font-size: 15px;
    font-weight: 800;
}

.pic-product-preview {
    margin-bottom: 24px;
    padding: 13px;
    border: 1px solid var(--pic-border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #ffffff;
}

.pic-product-preview[hidden] {
    display: none !important;
}

.pic-product-preview__img {
    width: 74px;
    height: 74px;
    border-radius: 8px;
    object-fit: contain;
    background: #f7f9fc;
}

.pic-product-preview__title {
    font-weight: 800;
    line-height: 1.25;
}

.pic-product-preview__meta {
    margin-top: 5px;
    color: var(--pic-muted);
    font-size: 13px;
}

.pic-message {
    margin: 4px 0 20px;
    padding: 13px 16px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.4;
}

.pic-message-success {
    border: 1px solid #9fd8b6;
    background: #f1fbf5;
    color: #22733f;
}

.pic-message-error {
    border: 1px solid #f2b2b2;
    background: #fff4f4;
    color: #a83232;
}

.pic-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 22px;
}

.pic-btn {
    appearance: none;
    height: 48px;
    border-radius: 999px;
    padding: 0 24px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
}

.pic-btn-primary {
    background: var(--pic-blue);
    color: #ffffff;
}

.pic-btn-secondary {
    background: #ffffff;
    color: var(--pic-text);
    border-color: #cfd8e5;
}

@media (max-width: 767px) {
    .pic-wrap {
        border-radius: 0 0 12px 12px;
    }

    .pic-head {
        padding: 22px 20px;
    }

    .pic-title {
        font-size: 20px;
    }

    .pic-head-mark {
        display: none;
    }

    .pic-form {
        padding: 24px 20px 32px;
    }

    .pic-category-grid,
    .pic-card-grid-2,
    .pic-card-grid-3,
    .pic-row,
    .pic-actions {
        grid-template-columns: 1fr;
    }

    .pic-section-line {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}

/* v0.1.1 — spacing and blue field icons */
.pic-wrap {
    --pic-blue: #1877f2;
    --pic-blue-soft: #d9ecff;
    --pic-border: #d9e2ee;
}

.pic-wrap .pic-form {
    padding-top: 28px;
    padding-bottom: 42px;
}

.pic-wrap .pic-section {
    margin-bottom: 28px;
}

.pic-wrap .pic-section-line {
    margin-bottom: 14px;
}

.pic-wrap .pic-contact-section {
    margin-top: 4px;
}

.pic-wrap .pic-contact-title {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.35;
}

.pic-wrap .pic-field {
    margin-bottom: 20px;
}

.pic-wrap .pic-label {
    margin-bottom: 9px;
}

.pic-wrap .pic-row {
    gap: 22px;
}

.pic-wrap .pic-actions {
    margin-top: 28px;
    gap: 22px;
}

.pic-wrap .pic-field input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.pic-wrap .pic-field select,
.pic-wrap .pic-field textarea {
    border-color: #cfd9e8;
    box-shadow: none;
}

.pic-wrap .pic-field input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.pic-wrap .pic-field select {
    min-height: 46px;
    border-radius: 999px !important;
}

.pic-wrap .pic-field textarea {
    min-height: 112px;
    border-radius: 14px !important;
}

.pic-wrap .pic-field input::placeholder,
.pic-wrap .pic-field textarea::placeholder {
    color: #9aa6b8;
    opacity: 1;
}

.pic-wrap .pic-section-label > .pic-label-icon,
.pic-wrap .pic-label > .pic-label-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 50%;
    background: var(--pic-blue-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.pic-wrap .pic-section-label > .pic-label-icon::before,
.pic-wrap .pic-label > .pic-label-icon::before {
    content: '';
    width: 13px;
    height: 13px;
    display: block;
    background: var(--pic-blue);
    -webkit-mask: var(--pic-icon-mask) center / contain no-repeat;
    mask: var(--pic-icon-mask) center / contain no-repeat;
}

.pic-wrap .pic-icon-type,
.pic-wrap .pic-icon-field {
    --pic-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z'/%3E%3C/svg%3E");
}

.pic-wrap .pic-icon-user {
    --pic-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-7 9a7 7 0 0 1 14 0v1H5v-1Z'/%3E%3C/svg%3E");
}

.pic-wrap .pic-icon-phone {
    --pic-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 2.8 9.3 5.5c.6.6.7 1.5.2 2.2l-1.1 1.6c1.1 2.3 3 4.2 5.3 5.3l1.6-1.1c.7-.5 1.6-.4 2.2.2l2.7 2.7c.7.7.7 1.8 0 2.5l-1.3 1.3c-.8.8-2.1 1.1-3.2.7C9.7 18.9 5.1 14.3 3.1 8.3c-.4-1.1-.1-2.4.7-3.2l1.3-1.3c.7-.7 1.8-.7 2.5 0Z'/%3E%3C/svg%3E");
}

.pic-wrap .pic-icon-email {
    --pic-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2Zm0 3.1V17h16V8.1l-8 5.2-8-5.2Zm1.6-1.1 6.4 4.1L18.4 7H5.6Z'/%3E%3C/svg%3E");
}

.pic-wrap .pic-icon-comment {
    --pic-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v9c0 1.1-.9 2-2 2H9l-5 4v-4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2Zm3 5h10V7H7v2Zm0 4h7v-2H7v2Z'/%3E%3C/svg%3E");
}

.pic-wrap .pic-icon-palette {
    --pic-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 0 0 0 18h1.2c1.2 0 1.8-1.4 1-2.2-.6-.6-.2-1.8.8-1.8h1a5 5 0 0 0 5-5c0-5-4-9-9-9ZM7.5 12A1.5 1.5 0 1 1 7.5 9a1.5 1.5 0 0 1 0 3Zm3-4A1.5 1.5 0 1 1 10.5 5a1.5 1.5 0 0 1 0 3Zm4 0A1.5 1.5 0 1 1 14.5 5a1.5 1.5 0 0 1 0 3Zm3 4A1.5 1.5 0 1 1 17.5 9a1.5 1.5 0 0 1 0 3Z'/%3E%3C/svg%3E");
}

.pic-wrap .pic-icon-print {
    --pic-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h10v5H7V3Zm-2 7h14c1.7 0 3 1.3 3 3v5h-4v3H6v-3H2v-5c0-1.7 1.3-3 3-3Zm3 7v2h8v-4H8v2Zm11-3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z'/%3E%3C/svg%3E");
}

.pic-wrap .pic-label > .pic-label-icon + *,
.pic-wrap .pic-section-label > .pic-label-icon + * {
    margin-left: 0;
}

@media (max-width: 767px) {
    .pic-wrap .pic-form {
        padding: 24px 18px 32px;
    }

    .pic-wrap .pic-row,
    .pic-wrap .pic-actions {
        gap: 14px;
    }

    .pic-wrap .pic-field {
        margin-bottom: 18px;
    }
}


.pic-message-info {
    border: 1px solid #b8d8fb;
    background: #f3f8ff;
    color: #1256a3;
}

.pic-btn:disabled {
    opacity: 0.7;
    cursor: wait;
}

.pic-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* v0.2.1 — Elementor-safe card states + dynamic fields spacing */
.pic-wrap .pic-dynamic-fields {
    margin-top: 2px;
}

.pic-wrap button.pic-card,
.pic-wrap button.pic-card:focus,
.pic-wrap button.pic-card:visited {
    background: #fbfcfe !important;
    color: var(--pic-text) !important;
    border-color: var(--pic-border) !important;
    box-shadow: none !important;
}

.pic-wrap button.pic-card:hover,
.pic-wrap button.pic-card.is-active,
.pic-wrap button.pic-card.is-active:hover,
.pic-wrap button.pic-card:active {
    background: #ffffff !important;
    color: var(--pic-blue) !important;
    border-color: var(--pic-blue) !important;
    box-shadow: 0 10px 24px rgba(24, 119, 242, .08) !important;
}

.pic-wrap button.pic-card.is-active .pic-card-check {
    opacity: 1;
    transform: scale(1);
}

.pic-wrap button.pic-card .pic-card-icon {
    pointer-events: none;
}

/* v0.2.2 — stronger Elementor Popup click/active state safety */
.pic-wrap button.pic-card.is-active,
.pic-wrap .pic-card.is-active {
    background-color: #ffffff !important;
    color: var(--pic-blue) !important;
    border-color: var(--pic-blue) !important;
    box-shadow: 0 10px 24px rgba(24, 119, 242, .08) !important;
}

.pic-wrap button.pic-card.is-active .pic-card-label,
.pic-wrap .pic-card.is-active .pic-card-label {
    color: var(--pic-blue) !important;
}

/* v0.2.3 — normalized SVG icon rendering */
.pic-wrap .pic-card-icon {
    display: block !important;
    width: 54px !important;
    height: 54px !important;
    max-width: 54px !important;
    object-fit: contain !important;
}

.pic-wrap .pic-category-grid .pic-card-icon {
    width: 50px !important;
    height: 50px !important;
    max-width: 50px !important;
}

/* v0.2.4 — optional field notes instead of skip buttons */
.pic-wrap .pic-field-note {
    margin: 4px 0 0 32px;
    color: #8b96a8;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 500;
}

.pic-wrap .pic-skip-btn {
    display: none !important;
}