/*
 * Style for Mobile Profile Manager Plugin
 * Author: AI Assistant
 * Description: Modern, clean, and RTL-friendly styles for login form and user profile panel.
 */

/* ====================================
   Global Reset and Body Styles (Optional but recommended)
   ==================================== */
body {
    background-color: #f7f9fc;
    /* Very light blue/gray background */
}

/* ====================================
   General Form and Container Styling
   ==================================== */
.mpm-form-container,
.mpm-profile-panel {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    /* Soft, modern shadow */
    padding: 30px 40px;
    max-width: 500px;
    margin: 40px auto;
    direction: rtl;
    /* Ensure RTL layout */
    text-align: right;
}

.mpm-form-container h2,
.mpm-profile-panel h3 {
    color: #333333;
    font-size: 1.8em;
    margin-bottom: 25px;
    border-bottom: 2px solid #007bff;
    /* Accent color for underline */
    display: inline-block;
    padding-bottom: 5px;
}

/* ====================================
   Form Fields and Inputs
   ==================================== */
.form-field {
    margin-bottom: 20px;
}

.form-field label {
    display: block;
    font-size: 0.95em;
    color: #555555;
    margin-bottom: 8px;
    font-weight: 600;
}

.form-field input[type="text"],
.form-field input[type="tel"],
.form-field input[type="password"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #cccccc;
    border-radius: 8px;
    font-size: 1.1em;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
    font-family: inherit;
}

.form-field input:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
    outline: none;
}

.form-field small {
    display: block;
    margin-top: 5px;
    color: #999999;
    font-size: 0.8em;
}

/* Required Star Styling */
.required {
    color: #dc3545;
    /* Red color for mandatory fields */
    font-weight: 700;
    margin-right: 3px;
}

/* ====================================
   Buttons and Call to Action
   ==================================== */
.mpm-form-container button[type="submit"],
#mpm-profile-form button[name="mpm_update_profile"] {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: #007bff;
    /* Primary Blue */
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 1.2em;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
    margin-top: 20px;
}

.mpm-form-container button[type="submit"]:hover,
#mpm-profile-form button[name="mpm_update_profile"]:hover {
    background-color: #0056b3;
}

/* ====================================
   Messages and Notifications
   ==================================== */
.mpm-success,
.mpm-error,
.mpm-warning {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    font-weight: 600;
    line-height: 1.6;
    border-right: 5px solid;
}

.mpm-success {
    background-color: #d4edda;
    color: #155724;
    border-color: #28a745;
}

.mpm-error {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #dc3545;
}

.mpm-warning {
    background-color: #fff3cd;
    color: #856404;
    border-color: #ffc107;
}

/* ====================================
   Profile Panel Tabs (Tabbed Navigation)
   ==================================== */
.mpm-profile-panel .mpm-tabs {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    display: flex;
    border-bottom: 2px solid #e0e0e0;
}

.mpm-profile-panel .mpm-tabs li {
    margin: 0 10px 0 0;
    padding: 0;
}

.mpm-profile-panel .mpm-tabs li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #555555;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    transition: color 0.3s, border-color 0.3s;
}

.mpm-profile-panel .mpm-tabs li.active a,
.mpm-profile-panel .mpm-tabs li a:hover {
    color: #007bff;
    border-bottom: 3px solid #007bff;
}

/* Style for Logout link to stand out */
.mpm-profile-panel .mpm-tabs li:last-child a {
    color: #dc3545;
}

.mpm-profile-panel .mpm-tabs li:last-child a:hover {
    border-color: #dc3545;
}

/* ====================================
   Warranty Table (History Tab)
   ==================================== */
.mpm-warranty-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 0.95em;
    table-layout: auto;
    /* Allow column widths to adjust */
}

.mpm-warranty-table th,
.mpm-warranty-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #eeeeee;
    text-align: right;
}

.mpm-warranty-table th {
    background-color: #f3f3f3;
    color: #333333;
    font-weight: 700;
}

.mpm-warranty-table tr:hover {
    background-color: #fcfcfc;
}

/* Status Colors in Table */
.mpm-warranty-table td span[style*="green"] {
    color: #28a745 !important;
    font-weight: 600;
}

.mpm-warranty-table td span[style*="orange"] {
    color: #ffc107 !important;
    font-weight: 600;
}

.mpm-warranty-table td span[style*="red"] {
    color: #dc3545 !important;
    font-weight: 600;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {

    .mpm-form-container,
    .mpm-profile-panel {
        padding: 20px;
        margin: 20px auto;
        border-radius: 8px;
    }

    .mpm-form-container h2,
    .mpm-profile-panel h3 {
        font-size: 1.5em;
        margin-bottom: 20px;
    }

    .mpm-profile-panel .mpm-tabs {
        display: block;
        /* Stack tabs vertically */
    }

    .mpm-profile-panel .mpm-tabs li {
        width: 100%;
        margin-bottom: 5px;
    }

    /* Hide less important columns on very small screens */
    .mpm-warranty-table thead {
        display: none;
    }

    .mpm-warranty-table,
    .mpm-warranty-table tbody,
    .mpm-warranty-table tr,
    .mpm-warranty-table td {
        display: block;
        width: 100%;
    }

    .mpm-warranty-table tr {
        margin-bottom: 15px;
        border: 1px solid #eee;
        border-radius: 8px;
    }

    .mpm-warranty-table td {
        text-align: right !important;
        border-bottom: 1px solid #f0f0f0;
        position: relative;
        padding-right: 50%;
        /* Space for the label */
    }

    .mpm-warranty-table td:before {
        content: attr(data-label);
        position: absolute;
        right: 10px;
        width: 45%;
        padding-left: 10px;
        font-weight: 700;
        color: #777;
    }

    /* Assign data labels for responsive table */
    .mpm-warranty-table tr td:nth-child(1):before {
        content: "شماره سریال:";
    }

    .mpm-warranty-table tr td:nth-child(2):before {
        content: "تاریخ ثبت:";
    }

    .mpm-warranty-table tr td:nth-child(3):before {
        content: "تاریخ خرید:";
    }

    .mpm-warranty-table tr td:nth-child(4):before {
        content: "محل خرید:";
    }

    .mpm-warranty-table tr td:nth-child(5):before {
        content: "وضعیت:";
    }
}.mpm-warranty-table tr td:nth-child(1):before {
    content: "شماره سریال:";
}

.mpm-warranty-table tr td:nth-child(2):before {
    content: "تاریخ ثبت:";
}

.mpm-warranty-table tr td:nth-child(3):before {
    content: "تاریخ خرید:";
}

.mpm-warranty-table tr td:nth-child(4):before {
    content: "تاریخ اتمام گارانتی:";
}

/* <--- لیبل جدید */
.mpm-warranty-table tr td:nth-child(5):before {
    content: "محل خرید:";
}

.mpm-warranty-table tr td:nth-child(6):before {
    content: "وضعیت:";
}
}/* ====================================================
   Login Options Buttons Styles
   ==================================================== */

.login-options-wrapper {
    display: flex;
    /* دکمه‌ها کنار هم قرار می‌گیرند */
    flex-wrap: wrap;
    /* در صورت نیاز به خط بعدی می‌روند */
    gap: 15px;
    /* فاصله بین دکمه‌ها */
    justify-content: center;
    /* دکمه‌ها را در مرکز قرار می‌دهد */
    margin: 30px auto;
    max-width: 600px;
    padding: 0 15px;
    direction: rtl;
}

.login-option-button {
    display: flex;
    flex-direction: column;
    /* آیکون و متن زیر هم قرار می‌گیرند */
    align-items: center;
    /* محتوا در مرکز افقی */
    justify-content: center;
    padding: 25px 20px;
    background-color: #f7f7f7;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    text-decoration: none;
    color: #333;
    font-size: 1.05em;
    font-weight: 600;
    transition: all 0.3s ease;
    flex: 1;
    /* اجازه می‌دهد دکمه‌ها فضای موجود را تقسیم کنند */
    min-width: 250px;
    max-width: 48%;
    /* برای دو دکمه در کنار هم */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.login-option-button:hover {
    background-color: #e0f2ff;
    /* رنگ پس زمینه هنگام هاور */
    border-color: #007bff;
    /* رنگ حاشیه هنگام هاور */
    color: #0056b3;
    /* رنگ متن هنگام هاور */
    transform: translateY(-3px);
    /* حرکت کمی به بالا */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.login-option-button i {
    font-size: 3.5em;
    /* اندازه بزرگتر برای آیکون */
    margin-bottom: 15px;
    /* فاصله بین آیکون و متن */
    color: #007bff;
    /* رنگ اصلی آیکون */
    transition: color 0.3s;
}

.login-option-button:hover i {
    color: #0056b3;
    /* رنگ آیکون هنگام هاور */
}

.login-option-button span {
    text-align: center;
    line-height: 1.4;
}

/* ====================================================
   Responsive Adjustments for Login Options
   ==================================================== */
@media (max-width: 600px) {
    .login-options-wrapper {
        flex-direction: column;
        /* دکمه‌ها زیر هم قرار می‌گیرند */
        gap: 10px;
    }

    .login-option-button {
        max-width: 100%;
        /* در موبایل تمام عرض را اشغال کنند */
        min-width: unset;
        padding: 20px 15px;
    }

    .login-option-button i {
        font-size: 3em;
        margin-bottom: 10px;
    }
}