@font-face {
	font-family: IRANSansX;
	font-style: normal;
	font-weight: normal;
	src: url('fonts/IRANSansXFaNum-Regular.woff') format('woff'),   
	url('fonts/IRANSansXFaNum-Regular.woff2') format('woff2');	
}
* { box-sizing: border-box; font-family: IRANSansX; font-size: 100%;}
body { background-color: #f5f5f5; padding: 20px; display: flex; justify-content: center; }

.lorem-container {
    display: flex; gap: 20px; width: 100%; max-width: 900px;
    background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Panel Right*/
.controls-panel { flex: 1; display: flex; flex-direction: column; gap: 15px; }

.btn-group { display: flex; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; }
.btn-group .btn {
    flex: 1; padding: 10px; border: none; background: #fff; cursor: pointer;
    border-right: 1px solid #ddd; transition: 0.2s;
}

.btn-group .btn.active { background: #333; color: #fff; }
.btn-group .btn:hover:not(.active) { background: #f0f0f0; }

.number-control { display: flex; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; }
.number-control input { flex: 1; text-align: center; border: none;  outline: none; }
.number-control .btn-icon { padding: 10px 20px; border: none; background: #fff; cursor: pointer;  border-left: 1px solid #ddd; border-right: 1px solid #ddd;}
.number-control .btn-icon:hover { background: #f0f0f0; }

.options-panel { background: #f9f9f9; padding: 10px; border: 1px solid #eee; border-radius: 4px; }
.options-panel.hidden { display: none; }
.options-panel select, .options-panel textarea { width: 100%; padding: 8px; margin-top: 5px; border: 1px solid #ccc; border-radius: 4px; }

/* Panel Left */
.output-panel { flex: 1; display: flex; flex-direction: column; }
.copy-btn { background: #e8ba5d; color: #000; border: none; padding: 12px; font-weight: bold; cursor: pointer; border-radius: 4px 4px 0 0; transition: background 0.3s;}
.copy-btn:hover { background: #ffab00; }
.output-box { border: 1px solid #ddd; padding: 15px; border-top: none; min-height: 250px; max-height: 416px; border-radius: 0 0 4px 4px; line-height: 1.8; color: #444; direction: rtl; text-align: justify; overflow-y: auto;scrollbar-width: inherit;scrollbar-color: #e8ba5d #eeeeee;}
.output-box.en { direction: ltr; text-align: left; }

@media (max-width: 768px) {
    .lorem-container {flex-direction: column;}
    .btn-group{flex-direction: column;}
    .btn-group .btn{border-bottom: 1px solid #ddd;border-right: none;}
}