/* --------------------------------------------------------------
   PIP Form Styles – Scoped & Isolated
   -------------------------------------------------------------- */
.pip-form-container {
    all: initial; /* Reset any inherited styles */
    display: block;
    font-family: 'IRANSans', sans-serif;
    direction: rtl;
    isolation: isolate; /* Prevents parent styles from leaking in */
}

/* Root variables – only affect .pip-form-container and its children */
.pip-form-container {
    --bg-container: #eaeff4;
    --bg-inner: #f9fbfd;
    --bg-tab: #ff9021;           /* حالت عادی تب */
    --bg-tab-active: #fc8200;    /* فعال و هاور تب */
    --bg-button: #fc8200;        /* همه دکمه‌های دیگر */
    --bg-button-hover: #fc8200;  /* هاور دکمه‌ها */
    --bg-add: #fc8200;
    --bg-add-hover: #fc8200;
    --bg-table-header: #212e67;
    --bg-table-odd: white;
    --bg-table-even: #fffbee;
    --bg-table-hover: #fdbb73;
    --border-table: rgb(217, 217, 217);
    --bg-submit: #fc8200;
    --bg-submit-hover: #fc8200;
    --bg-success: #4CAF50;
    --bg-error: #ffcccc;
    --border-input: #d1d5db;
    --text-white: white;
    --text-dark: #333;
    --text-darker: rgb(20, 20, 20);
    --text-required: #d32f2f;
    --shadow-container: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-inner: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-table: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-dropdown: 0 2px 4px rgba(0, 0, 0, 0.1);
    --dropdown-hover: rgb(255, 200, 142);
    --focus-border: rgb(254, 132, 0);
    --radius-input: 4px;
    --radius-tab: 5px;
    --radius-container: 10px;
    --radius-table: 6px;
}

/* -----------------------------------------------------------------
   Layout & Structure
   ----------------------------------------------------------------- */
.pip-form-container {
    width: 94%;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--bg-container);
    border-radius: var(--radius-container);
    box-shadow: var(--shadow-container);
}

.pip-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.pip-tab-button {
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-tab) !important;
    cursor: pointer;
    font-size: 16px;
    color: var(--text-white);
    background-color: var(--bg-tab) !important;
    transition: background-color 0.3s;
}

.pip-tab-button:hover,
.pip-tab-button.active {
    background-color: var(--bg-tab-active) !important;
}

.pip-tab-content { display: none; }
.pip-tab-content.active { display: block; }

.pip-inner-container {
    padding: 10px 10px 30px 10px;
    margin-bottom: 20px;
    background-color: var(--bg-inner);
    border-radius: var(--radius-tab) !important;
    box-shadow: var(--shadow-inner);
}

.pip-product-selection { margin-bottom: 20px; }

.pip-selection-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.pip-field { flex: 1; min-width: 200px; }
.pip-field.pip-quantity-field { flex: 0 0 calc(33.33% - 20px / 3); }
.pip-search-field { flex: 1; max-width: 410px; }

.pip-field label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--text-dark);
}
.pip-field label span.pip-required { color: var(--text-required); font-weight: bold; }

.pip-field input,
.pip-field textarea,
#pip-product-search {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-input);
    font-size: 14px;
    background-color: var(--bg-table-odd);
    transition: border-color 0.3s;
}
.pip-field input:focus,
.pip-field textarea:focus,
#pip-product-search:focus {
    border-color: var(--focus-border);
    outline: none;
}

/* Dropdown */
.pip-search-container { position: relative; }
.pip-dropdown {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-table-odd);
    border: 1px solid var(--border-input);
    border-radius: var(--radius-input);
    z-index: 1000;
    box-shadow: var(--shadow-dropdown);
}
.pip-dropdown.active { display: block; }
.pip-dropdown-item {
    padding: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.pip-dropdown-item:hover { background-color: var(--dropdown-hover); }

/* Quantity */
.pip-quantity-control {
    display: flex;
    align-items: center;
    gap: 5px;
}
.pip-quantity-control input {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-input);
    text-align: center;
    -moz-appearance: textfield;
}
.pip-quantity-control input::-webkit-outer-spin-button,
.pip-quantity-control input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pip-quantity-control button {
    padding: 8px 12px;
    border: none;
    border-radius: var(--radius-input);
    background-color: var(--bg-button);
    color: var(--text-white);
    cursor: pointer;
    transition: background-color 0.3s;
}
.pip-quantity-control button:hover { background-color: var(--bg-button-hover); }

/* Buttons */
.pip-add-product,
.pip-submit-proforma,
.pip-submit-inquiry,
.pip-remove-row,
.pip-remove-file {
    background-color: var(--bg-button) !important;
    transition: background-color 0.3s;
}
.pip-remove-row:hover,
.pip-remove-file:hover,
.pip-add-product:hover,
.pip-submit-proforma:hover,
.pip-submit-inquiry:hover {
    background-color: var(--bg-button-hover) !important;
}

/* Specific button overrides (preserve original !important) */
.pip-add-product {
    padding: 8px 30px;
    border: none;
    border-radius: var(--radius-tab) !important;
    font-size: 14px;
    color: var(--text-white);
    align-self: flex-end;
}
.pip-submit-proforma {
    flex: 1;
    min-width: 200px;
    padding: 16px;
    border: none;
    border-radius: var(--radius-tab) !important;
    font-size: 14px;
    color: var(--text-white);
    height: fit-content;
    align-self: flex-end;
}
.pip-submit-inquiry {
    width: 45%;
    margin: 0 auto;
    display: block;
    padding: 16px;
    border: none;
    border-radius: var(--radius-tab);
    font-size: 14px;
    color: var(--text-white);
}
.pip-remove-row,
.pip-remove-file {
    padding: 8px 12px;
    border: none;
    border-radius: var(--radius-input) !important;
    font-size: 14px;
    color: var(--text-white) !important;
}

/* Table */
.pip-products-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    border-radius: var(--radius-table) !important;
    overflow: hidden;
    box-shadow: var(--shadow-table);
}
.pip-products-table th {
    padding: 10px;
    text-align: center;
    vertical-align: middle;
    background-color: var(--bg-table-header);
    color: var(--text-white);
}
.pip-products-table td {
    padding: 10px;
    text-align: center;
    vertical-align: middle;
    color: var(--text-darker);
}
.pip-products-table th:nth-child(2),
.pip-products-table td:nth-child(2) { width: 15%; }
.pip-products-table tbody tr:nth-child(odd) { background-color: var(--bg-table-odd); }
.pip-products-table tbody tr:nth-child(even) { background-color: var(--bg-table-even); }
.pip-products-table tbody tr:hover { background-color: var(--bg-table-hover); }
.pip-products-table tbody tr { border-bottom: 1px solid var(--border-table); }
.pip-products-table .pip-quantity-control { justify-content: center; }

.pip-total-box {
    padding: 10px;
    text-align: right;
    font-weight: bold;
    width: fit-content;
    margin-left: auto;
    color: white;
    background-color: rgb(28, 57, 187);
    border-radius: 5px;
}

/* Footer & Form Row */
.pip-form-footer {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 30px;
}
.pip-form-footer .pip-field {
    flex: 1;
    min-width: 200px;
    margin-bottom: 0;
}
.pip-form-footer .pip-field input {
    padding: 16px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-input);
    font-size: 14px;
}
.pip-form-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    width: 75%;
}
.pip-form-row .pip-field { flex: 1; min-width: 0; }
.pip-description-field { width: 75%; }

/* Messages */
.pip-success-message {
    display: none;
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--bg-success);
    color: var(--text-white);
    padding: 10px 20px;
    border-radius: var(--radius-tab) !important;
    z-index: 1001;
}
.pip-error {
    display: none;
    color: var(--text-required);
    background-color: var(--bg-error);
    padding: 5px;
    border-radius: var(--radius-input) !important;
    margin-top: 5px;
    font-size: 12px;
}
.pip-file-name {
    display: inline-block;
    margin-right: 10px;
    font-size: 14px;
    color: var(--text-dark);
}

/* -----------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------- */
@media (max-width: 768px) {
    .pip-form-container { width: 100%; padding: 10px; }
    .pip-selection-row,
    .pip-form-footer,
    .pip-form-row { flex-direction: column; align-items: stretch; }
    .pip-field,
    .pip-field.pip-quantity-field,
    .pip-search-field,
    .pip-form-footer .pip-field,
    .pip-submit-proforma { min-width: 100%; }
    .pip-form-footer .pip-field input,
    .pip-submit-proforma { padding: 16px; font-size: 16px; }
    .pip-form-row { width: 100%; }
    .pip-products-table { display: block; overflow-x: auto; margin: 0; }
    .pip-products-table th,
    .pip-products-table td { min-width: 60px; padding: 2px; font-size: 13px; }
    .pip-products-table th:nth-child(1),
    .pip-products-table td:nth-child(1) { width: 55%; }
    .pip-products-table th:nth-child(6),
    .pip-products-table td:nth-child(6) { width: 30px; }
    .pip-products-table .pip-quantity-control button { padding: 6px; }
    .pip-products-table .pip-remove-row { padding: 8px; font-size: 12px; max-width: 30px !important; }
    .pip-desktop-only { display: none; }
    .pip-description-field { width: 100%; }
    .pip-submit-inquiry { width: 100%; margin: 0; }
    .pip-form-footer { align-items: stretch; }
    .pip-submit-proforma { align-self: stretch; }
}
@media (min-width: 769px) {
    .pip-form-row {
        display: flex;
        gap: 10px;
        align-items: flex-end;
        width: 75%;
    }
    .pip-form-row .pip-field { flex: 1; min-width: 0; }
}