/**
 * Main CSS for frontend
 */



/* Topics */

.mhnwp-topics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.mhnwp-topic {
    border: 1px solid
 color-mix(in oklab, #939DB8 10%, transparent);
    display: flex;
    flex-direction: row;
    padding: 6px 10px;
    align-items: center;
    background-color: #1b1c24;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
}

.mhnwp-topic i {
    color: #212529;
    font-size: 1.8rem;
    padding-bottom: 12px;
}

.mhnwp-topic:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.mhnwp-topic-image img {
    height: 40px;
    border-radius: 6px;
    width: 40px;
}

.mhnwp-topic-title {
    padding-right: 10px;
    font-weight: 400;
    font-size: 13px;
    color: #f1f1f1;
    font-family: 'Yekan Bakh FaNum';
    margin: 0;
}


/* Decision Tree */
.mhnwp-node-image {
    text-align: center;
    margin-bottom: 20px;
}

.mhnwp-node-image img {
    max-width: 100%;
    height: auto;
    max-height: 200px;
    border-radius: 6px;
}

.mhnwp-question-name {
    font-family: 'Yekan Bakh FaNum';
    font-size: 14px;
    font-weight: 400;
    color: #f3f3f3;
    margin-bottom: 20px;
}

.mhnwp-options{
    display: flex;
    flex-direction: column;
}

.mhnwp-options .options {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.mhnwp-option {
    background-color: #1b1c24;
    border: 1px solid color-mix(in oklab, #939DB8 10%, transparent);
    border-radius: 8px;
    padding: 8px 15px;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    align-items: center;
    flex-direction: column;
    min-width: 120px;
    max-width: 48%;
}

.mhnwp-option-image img {
    border-radius: 6px;
    margin-bottom: 8px;
    height: 95px;
}

.mhnwp-option-text {
    font-weight: 400;
    font-size: 13px;
    color: #f1f1f1;
    font-family: 'Yekan Bakh FaNum';
    }

.mhnwp-option:hover {
    transform: translateY(-5px);
}

.mhnwp-result-title{
    font-size: 17px;
    font-family: 'iranyekanwebbold_FaNum';
    color: #333;
    line-height: 1.5;
}

.mhnwp-result {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px;
    line-height: 2;
    font-size: 16px;
    color: #444;
	margin-top: 20px;
}

/* Feedback */
.mhnwp-feedback {
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f5f5f5;
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: end;
}

.mhnwp-feedback-question {
    margin-bottom: 10px;
    font-weight: bold;
}

.mhnwp-feedback-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}

.mhnwp-rating {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 10px 0;
}

.mhnwp-like-button, .mhnwp-dislike-button {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f9f9f9;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.mhnwp-like-button i, .mhnwp-dislike-button i {
    margin-left: 5px;
    font-size: 16px;
}

.mhnwp-like-button:hover {
    background: #e6f7e6;
    border-color: #c3e6c3;
}

.mhnwp-dislike-button:hover {
    background: #f7e6e6;
    border-color: #e6c3c3;
}

.mhnwp-like-button.active {
    background: #e6f7e6;
    border-color: #c3e6c3;
    color: #2e7d32;
}

.mhnwp-dislike-button.active {
    background: #f7e6e6;
    border-color: #e6c3c3;
    color: #c62828;
}

.mhnwp-like-count, .mhnwp-dislike-count {
    display: inline-block;
    margin-right: 5px;
    font-weight: bold;
}

.mhnwp-feedback-success {
    color: #4CAF50;
    font-weight: bold;
    margin-top: 10px;
}

.mhnwp-feedback-error {
    color: #f44336;
    font-weight: bold;
}

/* Extra Buttons */
.mhnwp-extra-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: flex-end;
}

.mhnwp-extra-buttons button {
    padding: 8px 15px;
    background-color: #2993e7;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-family: 'iranyekanwebbold_FaNum';
    width: 120px;
}

/* Navigation */
.mhnwp-navigation {
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
}

.mhnwp-back-button, .mhnwp-restart-button {
    font-size: 12px;
    padding: 12px 12px;
    background-color: #851111cf;
    color: #fff;
    border: none;
    border-radius: 6px;
    transition: background-color 0.3s;
    font-family: 'Yekan Bakh FaNum';
    font-weight: 500;
    border: 1px solid #ffffff4d;
    min-height: auto;
}

/* Loading */
.mhnwp-loading {
    text-align: center;
    padding: 30px;
    font-size: 18px;
    color: #666;
}

.mhnwp-loading i {
    margin-left: 10px;
}

/* Error */
.mhnwp-error {
    background-color: #ffebee;
    color: #c62828;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .mhnwp-navigation {
        flex-direction: column;
        gap: 10px;
    }

	.mhnwp-option {
    min-width: 48%;
	}

	.mhnwp-feedback {
    justify-content: center;
	}

	.mhnwp-extra-buttons {
    justify-content: center;
	}
    
    .mhnwp-back-button,
    .mhnwp-restart-button {
        width: 100%;
    }
}

/* Print Styles */
@media print {
    .mhnwp-legal-advisor {
        box-shadow: none;
        padding: 0;
    }
    
    .mhnwp-header,
    .mhnwp-search,
    .mhnwp-feedback-buttons,
    .mhnwp-extra-buttons,
    .mhnwp-navigation {
        display: none;
    }
    
    .mhnwp-result {
        border: none;
        padding: 0;
    }
}


/* Oil and Car Info */

.oil-info {
    border: 1px solid
 color-mix(in oklab, #939DB8 10%, transparent);
    background-color: #1b1c24;
    padding: 20px;
    border-radius: 12px;
    width: 100%;
}

.oil-info div {
    font-family: 'Yekan Bakh FaNum';
    display: flex;
    background: #0c0d10;
    padding: 7px 10px;
    margin: 5px 0 0;
    border-radius: 6px;
}

.oil-info span.p {
    font-weight: 400;
    color: #d1d1d1;
    width: 50%;
}

.oil-info span.i {
    font-weight: 500;
    color: #ededed;
    width: 50%;
}

.mhnwp-oil-image {
    display: flex;
    flex-direction: column;
    align-items: center;
}

img.oil {
    z-index: 1;
    width: 200px;
    margin-bottom: -30px;
    animation: bounceUpDown 2s ease-in-out infinite;
}

@keyframes bounceUpDown{
0%, 100% {
    transform: translateY(0);
}

50% {
    transform: translateY(-20px);
}
}


/* Styles for new question and result fields */

.mhnwp-question-text {
    font-size: 1.1rem;
    color: #34495e;
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 5px;
    line-height: 1.6;
}

.mhnwp-result-name {
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    color: #ececec;
    margin-bottom: 15px;
    padding: 15px;
    background-color:
        color-mix(in oklab, #727DA1 10%, transparent);
}

.mhnwp-result-content {
    font-size: 13px;
    font-weight: 400;
    color: #e8e8e8;
    margin-bottom: 20px;
    border-radius: 5px;
    line-height: 2;
}

.mhnwp-result-content p {
    margin-bottom: 15px;
}

.mhnwp-result-content ul,
.mhnwp-result-content ol {
    margin-bottom: 15px;
    padding-left: 30px;
}

.mhnwp-result-content li {
    margin-bottom: 5px;
}

.mhnwp-result-content img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin: 10px 0;
}

.mhnwp-result-content blockquote {
    border-left: 4px solid #3498db;
    padding-left: 15px;
    margin: 20px 0;
    font-style: italic;
    color: #7f8c8d;
}

.mhnwp-result-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.mhnwp-result-content table th,
.mhnwp-result-content table td {
    border: 1px solid #e9ecef;
    padding: 10px;
    text-align: right;
}

.mhnwp-result-content table th {
    background-color: #f8f9fa;
    font-weight: bold;
}

/* Responsive design for new fields */
@media (max-width: 768px) {
    .mhnwp-question-name {
        font-size: 1.3rem;
        padding: 8px;
    }
    
    .mhnwp-question-text {
        font-size: 1rem;
        padding: 12px;
    }
    
    .mhnwp-result-name {
        font-size: 1.5rem;
        padding: 12px;
    }
    
    .mhnwp-result-content {
        padding: 15px;
    }
}



/* Dropdown Styles */
.mhnwp-options-dropdown {
    margin-bottom: 30px;
}

.mpoil .oil-info div.mbtn{
    background-color: #090a0c;
    justify-content: space-between;
}

.mpoil .oil-info div.mbtn a {
    font-weight: 500;
    color: #fff;
    font-size: 13px;
}

.mpoil .content {
    display: none;
}

.mpoil .mbtn{
    display: flex !important;
}

.mpoil .oil-info {
    display: grid;
    width: 100%;
    margin: 0;
    gap: 10px;
    grid-template-columns: repeat(3, 2fr);
    padding: 10px;
    background-color: #1b1c24ab;
}

.mpoil .oil-info div {
    background-color: #000000ab;
    margin: 0;
}

.mpoil img.oil {
    right: -360px;
    position: absolute;
    top: -170px;
}

.mpoil span.p {
    font-size: 13px;
}

.mhnwp-dropdown-select option {
    background-color: #1b1c24;
    color: #f1f1f1;
    padding: 10px;
}

@media (max-width: 768px) {
    .mhnwp-dropdown-select {
        font-size: 14px;
        padding: 10px 12px;
        padding-left: 35px;
        background-size: 14px;
        background-position: left 10px center;
    }
}

.mhnwp-legal-advisor[data-display-mode="dropdown"] .mhnwp-options {
    display: none;
}

.mhnwp-legal-advisor[data-display-mode="button"] .mhnwp-options-dropdown {
    display: none;
}

.mhnwp-topics-dropdown {
    margin-bottom: 30px;
}

.mhnwp-topics-dropdown .mhnwp-topics-dropdown-select,
.mhnwp-options-dropdown .mhnwp-dropdown-select {
    font-weight: 500;
    font-size: 13px;
    font-family: 'Yekan Bakh FaNum';
    color: #f1f1f1;
    background-color: oklch(0.29 0 0 / 0.50);
    border: 1px solid
 color-mix(in oklab, #ffffff 10%, transparent);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s;
    appearance: none;
    background-image: url(data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f1f1f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e);
    background-repeat: no-repeat;
    background-position: left 12px center;
    background-size: 16px;
    width: 70%;
}

.mhnwp-topics-dropdown-select option,
.mhnwp-dropdown-select option {
    background-color: #212427 !important;
    color: #f1f1f1;
    padding: 10px;
    font-weight: 300;
}

.mhnwp-legal-advisor[data-display-mode="button"] .mhnwp-topics-dropdown {
    display: none;
}

.mhnwp-legal-advisor[data-display-mode="dropdown"] .mhnwp-topics {
    display: none;
}

@media (max-width: 768px) {
    .mhnwp-topics-dropdown-select {
        font-size: 14px;
        padding: 10px 12px;
        padding-left: 35px;
        background-size: 14px;
        background-position: left 10px center;
    }
}