/*
================================================================
Mockalay Premium Styles - Responsive (Tablet & Mobile)
================================================================
*/

/* --- Mobile View Adjustments for Login/Register --- */
@media (max-width: 480px) {
    .mockalay-login-wrapper {
        padding: 15px;
    }
    #mockalay-container .mockalay-form-container, #mockalay-login-form {
        padding: 35px 20px;
    }
    #mockalay-container .login-title {
        font-size: 1.4em !important;
    }
}

/* --- Mobile View Adjustments for Dashboard & Profile --- */
@media (max-width: 768px) {
    /* Dashboard Header */
    #mockalay-container .dashboard-header-flex {
        flex-direction: column;
        text-align: center;
    }
     #mockalay-container .dashboard-header {
         padding: 25px 20px;
     }

    /* Dashboard Tables */
    #mockalay-container .dashboard-table thead {
        display: none;
    }
    #mockalay-container .dashboard-table,
    #mockalay-container .dashboard-table tbody,
    #mockalay-container .dashboard-table tr,
    #mockalay-container .dashboard-table td {
        display: block;
        width: 100%;
    }
    #mockalay-container .dashboard-table tr {
        margin-bottom: 15px;
        border: 1px solid var(--border-color-light);
        border-radius: 8px;
        padding: 10px;
        background: #fff;
    }
    #mockalay-container .dashboard-table td {
        text-align: right;
        padding-left: 50%;
        position: relative;
        border-bottom: 1px solid #eee;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    #mockalay-container .dashboard-table td:before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        width: calc(50% - 20px);
        text-align: left;
        font-weight: 600;
        color: var(--headline-color);
        font-size: 0.9em;
    }
    #mockalay-container .dashboard-table tr td:first-child {
        padding-top: 10px;
    }
    #mockalay-container .dashboard-table td:last-child {
        border-bottom: 0;
        padding-bottom: 10px;
    }
    #mockalay-container .dashboard-table-container {
        overflow-x: auto;
    }


    /* Profile Page */
    .profile-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    .profile-header .edit-profile-btn {
        margin-left: 0;
    }
    .profile-details-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Mobile View Adjustments for Recent Tests Widget --- */
@media (max-width: 768px) {
    .mockalay-recent-tests-widget .widget-title {
        font-size: 1.8em;
    }
    .mockalay-recent-tests-widget .test-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* --- Mobile View Adjustments for Result Page --- */
@media (max-width: 600px) {

    /* Override Astra Theme Padding on Result Page */
    body.page-template-default #primary,
    body.page #primary {
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-top: 0 !important; /* Ensure no extra top padding from theme */
        margin-top: 0 !important; /* Ensure no extra top margin from theme */
    }

    /* --- নতুন কোড শুরু: Remove padding/margin from container --- */
    #mockalay-container {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    /* --- নতুন কোড শেষ --- */


    #mockalay-container .result-summary-card {
        width: 100% !important;
        max-width: 100% !important;
        /* --- কোড পরিবর্তন শুরু: Explicitly set margin-top --- */
        margin-top: 20px !important; /* Set top margin explicitly */
        margin-bottom: 30px !important; /* Keep bottom margin */
        margin-left: auto !important; /* Keep centered */
        margin-right: auto !important; /* Keep centered */
        /* --- কোড পরিবর্তন শেষ --- */
        padding: 20px !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
        box-sizing: border-box;
    }

    .result-summary-card .result-header h2 {
        font-size: 1.6em !important;
    }
    .result-summary-card .result-header p {
        font-size: 0.9em;
        margin-bottom: 20px;
    }


    .result-summary-card .score-value {
        font-size: 2.8em !important;
    }
    .result-summary-card .score-label {
        font-size: 0.9em;
    }


    .result-summary-card .result-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 10px 0 !important;
        margin-bottom: 20px;
    }
     .result-summary-card .stat-box {
         padding: 5px 0;
     }
     .result-summary-card .stat-box .stat-value {
         font-size: 1.3em;
     }


    .result-summary-card .overall-comparison-box.result-page-comparison {
        padding: 15px !important;
        margin-bottom: 20px !important;
    }
    .result-page-comparison h4 {
        font-size: 1.1em !important;
    }

    .result-page-comparison .comparison-stats {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .result-page-comparison .comparison-stats .stat-item .value {
        font-size: 1.2em !important;
    }

     .result-page-comparison .stat-item {
        border-bottom: 1px dashed var(--border-color-light) !important;
        padding-bottom: 10px !important;
     }
     .result-page-comparison .stat-item:last-child {
         border-bottom: none !important;
         padding-bottom: 0 !important;
     }
     .result-page-comparison .comparison-note {
         font-size: 0.75em;
         margin-top: 8px;
     }

    .result-summary-card .result-footer .btn {
        font-size: 0.95em !important;
        padding: 10px 18px !important;
    }
}