.prosites-soc,
.prosites-soc *,
.prosites-soc *::before,
.prosites-soc *::after { box-sizing: border-box; }


.prosites-soc__row-template,
.prosites-soc__row-template[hidden] {
    display: none !important;
}

.prosites-soc {
    --prosites-primary: #643B70;
    --prosites-primary-dark: #4d2858;
    --prosites-accent: #643B70;
    --prosites-accent-dark: #52305d;
    --prosites-accent-soft: #f5eff7;
    --prosites-accent-border: #d8c5de;
    --prosites-bg: #f6f8f9;
    --prosites-border: #d6e0e5;
    --prosites-text: #203545;
    --prosites-muted: #617684;
    --prosites-white: #fff;
    width: 100%;
    max-width: 960px;
    margin: 30px auto;
    overflow: hidden;
    border: 1px solid var(--prosites-border);
    border-radius: 20px;
    background: var(--prosites-white);
    color: var(--prosites-text);
    box-shadow: 0 18px 46px rgba(20,52,77,.09);
    font-family: inherit;
    font-size: 18px;
    line-height: 1.65;
    direction: rtl;
    text-align: right;
    unicode-bidi: isolate;
}

.prosites-soc__header {
    padding: 36px 40px 32px;
    background: linear-gradient(135deg, var(--prosites-primary-dark), var(--prosites-primary));
    color: var(--prosites-white);
}

.prosites-soc__eyebrow {
    display: block;
    margin-bottom: 10px;
    color: #e4d8e8;
    font-size: 18px;
    font-weight: 800;
}

.prosites-soc__title {
    margin: 0 !important;
    color: var(--prosites-white) !important;
    font-size: clamp(34px, 4.5vw, 48px);
    font-weight: 800;
    line-height: 1.18;
}

.prosites-soc__intro {
    max-width: 800px;
    margin: 14px 0 0;
    color: #eef5f7;
    font-size: 22px;
    line-height: 1.65;
}

.prosites-soc__body { padding: 36px 40px 34px; }
.prosites-soc__form { width: 100%; margin: 0; }
.prosites-soc__rows { display: grid; gap: 16px; }

.prosites-soc__row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(230px, .85fr) 86px;
    gap: 18px;
    align-items: start;
    padding: 22px;
    border: 1px solid var(--prosites-border);
    border-radius: 16px;
    background: var(--prosites-bg);
}

.prosites-soc__field { min-width: 0; }

.prosites-soc__label,
.prosites-soc__hint,
.prosites-soc__toolbar-note,
.prosites-soc__mixed-notice strong,
.prosites-soc__mixed-notice p,
.prosites-soc__error,
.prosites-soc__result-label,
.prosites-soc__result-text,
.prosites-soc__section-title,
.prosites-soc__notice,
.prosites-soc__classification-grid,
.prosites-soc__action,
.prosites-soc__breakdown-item { font-size: 18px; }

.prosites-soc__label {
    display: block;
    min-height: 30px;
    margin: 0 0 9px;
    color: var(--prosites-primary-dark);
    font-weight: 800;
}

.prosites-soc__select,
.prosites-soc__input {
    width: 100%;
    height: 62px;
    min-height: 62px;
    padding: 12px 15px;
    border: 1px solid #b8c8d1;
    border-radius: 12px;
    background: var(--prosites-white);
    color: var(--prosites-primary-dark);
    font: inherit;
    font-size: 18px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.prosites-soc__select { direction: rtl; text-align: right; }
.prosites-soc__select option:disabled { color: #9aa6ad; }
.prosites-soc__input { direction: ltr; text-align: right; font-weight: 700; }
.prosites-soc__input::placeholder { direction: rtl; color: #7a8993; }
.prosites-soc__input::-webkit-outer-spin-button,
.prosites-soc__input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.prosites-soc__input[type="number"] { -moz-appearance: textfield; }

.prosites-soc__select:focus,
.prosites-soc__input:focus {
    border-color: var(--prosites-accent);
    box-shadow: 0 0 0 4px rgba(100,59,112,.15);
}

.prosites-soc__hint {
    min-height: 58px;
    margin: 9px 0 0;
    color: var(--prosites-muted);
    line-height: 1.55;
}

.prosites-soc__remove-row,
.prosites-soc__add-row,
.prosites-soc__calculate,
.prosites-soc__modal-close,
.prosites-soc__modal-x {
    font: inherit;
    cursor: pointer;
}

.prosites-soc__remove-row {
    align-self: start;
    min-height: 62px;
    margin-top: 39px;
    padding: 10px 12px;
    border: 1px solid var(--prosites-accent-border);
    border-radius: 12px;
    background: var(--prosites-white);
    color: var(--prosites-accent-dark);
    font-weight: 800;
}

.prosites-soc__rows > .prosites-soc__row:only-child .prosites-soc__remove-row { visibility: hidden; }

.prosites-soc__toolbar {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 16px;
    align-items: center;
    margin-top: 18px;
}

.prosites-soc__add-row,
.prosites-soc__calculate,
.prosites-soc__modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 12px;
    background: var(--prosites-accent);
    color: var(--prosites-white) !important;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
}

.prosites-soc__add-row { min-height: 56px; padding: 13px 22px; white-space: nowrap; }
.prosites-soc__toolbar-note { margin: 0; color: var(--prosites-muted); line-height: 1.65; }
.prosites-soc__add-row:disabled { cursor: not-allowed; opacity: .48; }

.prosites-soc__error { margin: 15px 0 0; color: #a02d2d; font-weight: 800; }

.prosites-soc__calculate {
    width: 100%;
    min-height: 66px;
    margin-top: 20px;
    padding: 15px 24px;
    font-size: 21px;
}

.prosites-soc__add-row:not(:disabled):hover,
.prosites-soc__add-row:not(:disabled):focus-visible,
.prosites-soc__calculate:hover,
.prosites-soc__calculate:focus-visible,
.prosites-soc__modal-close:hover,
.prosites-soc__modal-close:focus-visible {
    background: var(--prosites-accent-dark);
    box-shadow: 0 8px 18px rgba(100,59,112,.22);
    transform: translateY(-1px);
}

.prosites-soc__remove-row:hover,
.prosites-soc__remove-row:focus-visible { background: var(--prosites-accent-soft); }

.prosites-soc__mixed-notice {
    margin-top: 18px;
    padding: 18px 20px;
    border: 1px solid var(--prosites-accent-border);
    border-right: 5px solid var(--prosites-accent);
    border-radius: 14px;
    background: var(--prosites-accent-soft);
}

.prosites-soc__mixed-notice strong { display: block; color: var(--prosites-accent-dark); font-weight: 800; }
.prosites-soc__mixed-notice p { margin: 7px 0 0; line-height: 1.75; }
.prosites-soc__mixed-notice[hidden], .prosites-soc__modal[hidden], .prosites-soc__result[hidden] { display: none !important; }

.prosites-soc__result {
    margin-top: 28px;
    padding: 24px;
    border: 1px solid var(--prosites-accent-border);
    border-radius: 18px;
    background: var(--prosites-accent-soft);
}

.prosites-soc__result-label { display: block; margin-bottom: 8px; color: var(--prosites-accent-dark); font-weight: 800; }
.prosites-soc__result-title { display: block; color: var(--prosites-primary-dark); font-size: clamp(28px,3.3vw,38px); line-height: 1.3; }
.prosites-soc__result-text { margin: 10px 0 0; line-height: 1.75; }
.prosites-soc__breakdown-wrap { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--prosites-accent-border); }
.prosites-soc__section-title { margin: 0 0 14px; color: var(--prosites-primary-dark); font-weight: 800; }
.prosites-soc__result-breakdown { display: grid; gap: 12px; }
.prosites-soc__breakdown-item { padding: 16px; border: 1px solid var(--prosites-accent-border); border-radius: 14px; background: var(--prosites-white); }
.prosites-soc__breakdown-item strong { display: block; margin-bottom: 6px; color: var(--prosites-primary-dark); }
.prosites-soc__breakdown-item p { margin: 0; }
.prosites-soc__breakdown-percent { margin-top: 7px !important; color: var(--prosites-accent-dark); font-weight: 800; }
.prosites-soc__breakdown-note { margin-top: 8px !important; color: var(--prosites-muted); }

.prosites-soc__notice,
.prosites-soc__classification {
    margin-top: 26px;
    padding: 22px;
    border: 1px solid var(--prosites-border);
    border-radius: 16px;
    background: var(--prosites-bg);
}

.prosites-soc__notice { border-right: 5px solid var(--prosites-accent); }
.prosites-soc__notice strong { color: var(--prosites-primary-dark); }
.prosites-soc__notice p { margin: 8px 0 0; line-height: 1.75; }
.prosites-soc__classification-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.prosites-soc__classification-grid > div { padding: 14px; border: 1px solid var(--prosites-border); border-radius: 12px; background: var(--prosites-white); }
.prosites-soc__classification-grid strong { display: block; margin-bottom: 6px; color: var(--prosites-primary-dark); }
.prosites-soc__classification-grid span { line-height: 1.6; }

.prosites-soc__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.prosites-soc__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 12px 22px;
    border: 1px solid var(--prosites-primary);
    border-radius: 12px;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
    text-decoration: none !important;
}
.prosites-soc__action--primary,
.prosites-soc__action--secondary {
    border-color: #6D1C84;
    background: #6D1C84;
    color: var(--prosites-white) !important;
}

.prosites-soc__action--primary:hover,
.prosites-soc__action--primary:focus-visible,
.prosites-soc__action--secondary:hover,
.prosites-soc__action--secondary:focus-visible {
    border-color: #59166c;
    background: #59166c;
    color: var(--prosites-white) !important;
}

.prosites-soc__modal {
    position: fixed;
    z-index: 999999;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    direction: rtl;
}
.prosites-soc__modal-backdrop { position: absolute; inset: 0; background: rgba(12,31,46,.72); }
.prosites-soc__modal-dialog {
    position: relative;
    z-index: 1;
    width: min(620px,100%);
    max-height: calc(100vh - 40px);
    overflow: auto;
    padding: 32px;
    border: 1px solid var(--prosites-accent-border);
    border-radius: 18px;
    background: var(--prosites-white);
    box-shadow: 0 24px 70px rgba(10,27,40,.28);
}
.prosites-soc__modal-x {
    position: absolute;
    top: 14px;
    left: 16px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--prosites-bg);
    color: var(--prosites-primary-dark);
    font-size: 30px;
    line-height: 1;
}
.prosites-soc__modal-eyebrow { display: block; margin-bottom: 6px; color: var(--prosites-accent-dark); font-size: 18px; font-weight: 800; }
.prosites-soc__modal-title { margin: 0 0 14px; color: var(--prosites-primary-dark); font-size: 30px; line-height: 1.3; }
.prosites-soc__modal-dialog p { margin: 10px 0 0; font-size: 18px; line-height: 1.75; }
.prosites-soc__modal-close { min-width: 150px; min-height: 54px; margin-top: 22px; padding: 12px 22px; font-size: 18px; }

@media (max-width: 860px) {
    .prosites-soc__row { grid-template-columns: 1fr; padding: 20px; }
    .prosites-soc__remove-row { width: 100%; min-height: 56px; margin-top: 0; }
    .prosites-soc__rows > .prosites-soc__row:only-child .prosites-soc__remove-row { display: none; }
    .prosites-soc__hint { min-height: 0; }
    .prosites-soc__toolbar { grid-template-columns: 1fr; }
    .prosites-soc__add-row { width: 100%; white-space: normal; }
}

@media (max-width: 700px) {
    .prosites-soc { margin: 18px auto; border-radius: 18px; }
    .prosites-soc__header, .prosites-soc__body { padding-right: 22px; padding-left: 22px; }
    .prosites-soc__classification-grid { grid-template-columns: 1fr; }
    .prosites-soc__actions { flex-direction: column; }
    .prosites-soc__action { width: 100%; }
}

@media (max-width: 460px) {
    .prosites-soc__title { font-size: 30px; }
    .prosites-soc__intro { font-size: 20px; }
    .prosites-soc__header, .prosites-soc__body { padding-right: 18px; padding-left: 18px; }
    .prosites-soc__modal-dialog { padding: 28px 20px 22px; }
    .prosites-soc__modal-title { font-size: 26px; }
    .prosites-soc__modal-close { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .prosites-soc *, .prosites-soc *::before, .prosites-soc *::after { scroll-behavior: auto !important; transition: none !important; }
}