.rgft-on{
    --on-accent: #2f5fe0;
    --on-ink: #15171b;
    --on-line: #e3e3e6;
    --on-muted: #78787b;
    --on-faint: #969699;
    --on-bg: #faf9f7;
    font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
    color: #15171b;
    background: #f7f7f5;
    -webkit-font-smoothing: antialiased;
}
.rgft-on *{ box-sizing: border-box; }
.rgft-on a{ color: var(--on-accent); text-decoration: none; }
.rgft-on a:hover{ color: #1e42a8; }

.rgft-on > .rgft-page-head-v2{ max-width: 1180px; margin: 0 auto; padding: 0 26px; }
@media (max-width: 900px){ .rgft-on > .rgft-page-head-v2{ padding-left: 14px; padding-right: 14px; } }

.rgft-on .rgft-order-form__back{
    display: block;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 26px;
    font-size: 12.5px;
    color: var(--on-muted);
}
@media (max-width: 900px){ .rgft-on .rgft-order-form__back{ padding: 0 14px; } }
.rgft-on .rgft-order-form__back:hover{ color: var(--on-accent); }

.rgft-on .rgft-order-form{
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 26px 120px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
@media (max-width: 900px){ .rgft-on .rgft-order-form{ padding-left: 14px; padding-right: 14px; } }

/* ── Cards ──────────────────────────────────────────────────────────── */
.rgft-on .rgft-card.rgft-order-form__section{
    background: #fff;
    border: 1px solid var(--on-line);
    border-radius:16px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 28px -10px rgba(15,23,42,.10);transition:box-shadow .18s ease,transform .18s ease;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.rgft-on .rgft-card.rgft-order-form__section:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(15,23,42,.05),0 16px 36px -12px rgba(15,23,42,.14)}
.rgft-on .rgft-order-form__section-title{
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
}
.rgft-on .rgft-order-form__section-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── Field grids ────────────────────────────────────────────────────── */
.rgft-on .rgft-order-form__grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
}
@media (max-width: 560px){ .rgft-on .rgft-order-form__grid{ grid-template-columns: 1fr; } }

.rgft-on .rgft-order-form__field{
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.rgft-on .rgft-order-form__field > span{ font-size: 11.5px; color: var(--on-faint); }
.rgft-on .rgft-order-form__field--wide{ grid-column: 1 / -1; }
.rgft-on .rgft-order-form__field input,
.rgft-on .rgft-order-form__field select,
.rgft-on .rgft-order-form__field textarea{
    font-family: inherit;
    font-size: 13.5px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--on-line);
    background: var(--on-bg);
    border-radius: 10px;
    width: 100%;
}
.rgft-on .rgft-order-form__field textarea{
    height: auto;
    padding: 12px;
    line-height: 1.7;
    resize: vertical;
}
.rgft-on .rgft-order-form__field input:focus,
.rgft-on .rgft-order-form__field select:focus,
.rgft-on .rgft-order-form__field textarea:focus{
    outline: none;
    border-color: var(--on-accent);
    background: #fff;
}
.rgft-on .rgft-order-form__hint{
    font-size: 11.5px;
    color: var(--on-faint);
    line-height: 1.7;
    margin: 0;
}

/* ── New product / cost rows (JS-generated) ────────────────────────── */
.rgft-on .rgft-order-form__rows{ display: flex; flex-direction: column; gap: 12px; }
.rgft-on #rgft-product-rows .rgft-order-form__row,
.rgft-on #rgft-cost-rows .rgft-order-form__row{
    border: 1px solid #e8e8eb;
    border-radius: 12px;
    padding: 14px;
    background: #fcfcfa;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.rgft-on .rgft-order-form__row-main{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.rgft-on .rgft-order-form__row-main select,
.rgft-on .rgft-order-form__row-main input[type="number"],
.rgft-on .rgft-order-form__row-main input[type="file"]{
    font-family: inherit;
    font-size: 13.5px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--on-line);
    background: #fff;
    border-radius: 10px;
    flex: 1 1 160px;
    min-width: 110px;
}
.rgft-on .rgft-order-form__row-main input[type="file"]{ padding: 10px 12px; flex-basis: 140px; }
.rgft-on .rgft-order-form__row-price{
    border-color: #e2d4ae !important;
    background: #f6f6fa !important;
}
/* The per-product price gets its own clearly-labeled, visually distinct
   zone below the main row, matching order-edit.php's treatment — not one
   more small unlabeled input crammed among 4 other elements. */
.rgft-on .rgft-order-form__row-price-box{
    background: #f6f6fa;
    border: 1px solid #d7d7e4;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rgft-on .rgft-order-form__row-price-box .rgft-order-form__field{ max-width: 320px; }
@media (max-width: 640px){
    /* Same defensive full-stack as order-edit.php's .rgft-oe — one item
       per line always fits, regardless of how many fields a row has. */
    .rgft-on .rgft-order-form__row-main{ flex-direction: column; align-items: stretch; }
    .rgft-on .rgft-order-form__row-main select,
    .rgft-on .rgft-order-form__row-main input[type="number"],
    .rgft-on .rgft-order-form__row-main input[type="file"]{ max-width: none; width: 100%; }
}
.rgft-on .rgft-order-form__row-remove{
    align-self: flex-start;
    font-family: inherit;
    font-size: 12.5px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid #f2d4cf;
    border-radius: 10px;
    background: #fff;
    color: #b4372c;
    cursor: pointer;
}
.rgft-on .rgft-order-form__row-remove:hover{ background: #f2f2f5; }
.rgft-on .rgft-order-form__add-btn{
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--on-line);
    border-radius: 10px;
    background: #fff;
    color: var(--on-ink);
    cursor: pointer;
    white-space: nowrap;
}
.rgft-on .rgft-order-form__add-btn:hover{ border-color: var(--on-accent); color: var(--on-accent); }

.rgft-on .rgft-order-form__stations-label{ font-size: 11.5px; color: var(--on-faint); }
.rgft-on .rgft-order-form__stations-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 8px;
}
@media (max-width: 900px){ .rgft-on .rgft-order-form__stations-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .rgft-on .rgft-order-form__stations-grid{ grid-template-columns: 1fr; } }
.rgft-on .rgft-order-form__stations-grid select{
    font-family: inherit;
    font-size: 12.5px;
    height: 44px;
    padding: 0 10px;
    border: 1px solid var(--on-line);
    background: #fff;
    border-radius: 10px;
    width: 100%;
}

/* ── Submit ─────────────────────────────────────────────────────────── */
.rgft-on .rgft-order-form__submit{ display: flex; justify-content: flex-end; }
.rgft-on .rgft-orders__new-btn{
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    height: 46px;
    padding: 0 26px;
    border: 0;
    border-radius: 11px;
    background: var(--on-ink);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
}
.rgft-on .rgft-orders__new-btn:hover{ opacity: .92; }

/* ── Notice banner ──────────────────────────────────────────────────── */
.rgft-on .rgft-orders__notice{
    max-width: 1180px;
    margin: 0 auto 16px;
    padding: 12px 26px;
    background: #e9f5ee;
    color: #0f7a4a;
    border-radius: 10px;
    font-size: 13px;
}
.rgft-on .rgft-orders__notice--error{ background: #fbeeec; color: #b4372c; }
@media (max-width: 900px){ .rgft-on .rgft-orders__notice{ padding: 12px 14px; } }