/* استایل‌های عمومی افزونه باغبانی */

:root {
    --gm-primary: #10b981;
    --gm-primary-dark: #059669;
    --gm-gray: #6b7280;
    --gm-light: #f3f4f6; /* رنگ پس‌زمینه داشبورد جدید */
    --gm-border: #e5e7eb;
}

/* تایمر OTP */
#gm-otp-timer,
#gm-login-otp-timer,
#gm-customer-otp-timer {
    background: #d1fae5;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #6ee7b7;
}

#gm-timer-seconds,
#gm-login-timer-seconds,
#gm-customer-timer-seconds {
    font-size: 18px;
    color: #065f46;
}

/* Persian DatePicker Styling */
.gm-datepicker {
    cursor: pointer;
    background: white;
}


/* استایل‌های عمومی فرم‌ها */
.gm-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    font-family: var(--gm-font-family);
    direction: rtl;
}
.gm-form {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.gm-form-title { font-size: 24px; font-weight: bold; margin-bottom: 24px; color: #1f2937; text-align: center; }
.gm-form-group { margin-bottom: 20px; }
.gm-form-label { display: block; margin-bottom: 8px; font-weight: 500; color: #374151; font-size: 14px; }
.gm-form-input, .gm-form-select, .gm-form-textarea { width: 100%; padding: 12px 16px; border: 1px solid var(--gm-border); border-radius: 8px; font-size: 14px; transition: all 0.3s; box-sizing: border-box; }
.gm-form-input:focus, .gm-form-select:focus, .gm-form-textarea:focus { outline: none; border-color: var(--gm-primary); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); }
.gm-form-textarea { min-height: 100px; resize: vertical; }
.gm-btn { padding: 12px 24px; border: none; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s; text-align: center; }
.gm-btn-primary { background: var(--gm-primary); color: white; }
.gm-btn-primary:hover { background: var(--gm-primary-dark); transform: translateY(-1px); }
.gm-btn-secondary { background: var(--gm-light); color: var(--gm-gray); }
.gm-btn-secondary:hover { background: #e5e7eb; }
.gm-btn-block { width: 100%; display: block; }
.gm-btn-group { display: flex; gap: 10px; margin-bottom: 20px; }
.gm-btn-group .gm-btn { flex: 1; }
.gm-checkbox-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 8px; }
.gm-checkbox-label { display: flex; align-items: center; padding: 10px; border: 1px solid var(--gm-border); border-radius: 6px; cursor: pointer; transition: all 0.3s; }
.gm-checkbox-label:hover { border-color: var(--gm-primary); background: rgba(16, 185, 129, 0.05); }
.gm-checkbox-label input { margin-left: 8px; }
.gm-file-upload { position: relative; overflow: hidden; display: inline-block; }
.gm-file-upload input[type=file] { position: absolute; left: 0; top: 0; opacity: 0; cursor: pointer; }
.gm-file-upload-btn { display: inline-block; padding: 10px 20px; background: var(--gm-light); border: 2px dashed var(--gm-border); border-radius: 8px; cursor: pointer; text-align: center; }
.gm-file-upload-btn:hover { border-color: var(--gm-primary); }
.gm-alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; }
.gm-alert-success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.gm-alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.gm-alert-info { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.gm-steps { display: flex; justify-content: space-between; margin-bottom: 30px; position: relative; }
.gm-steps::before { content: ''; position: absolute; top: 20px; right: 0; left: 0; height: 2px; background: var(--gm-border); z-index: 0; }
.gm-step { flex: 1; text-align: center; position: relative; z-index: 1; }
.gm-step-number { width: 40px; height: 40px; border-radius: 50%; background: var(--gm-light); color: var(--gm-gray); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; font-weight: bold; border: 2px solid var(--gm-border); }
.gm-step.active .gm-step-number { background: var(--gm-primary); color: white; border-color: var(--gm-primary); }
.gm-step.completed .gm-step-number { background: var(--gm-primary-dark); color: white; border-color: var(--gm-primary-dark); }
.gm-step-label { font-size: 12px; color: var(--gm-gray); }
.gm-step.active .gm-step-label { color: var(--gm-primary); font-weight: 500; }
.gm-summary { background: var(--gm-light); padding: 20px; border-radius: 8px; margin-bottom: 20px; }
.gm-summary-item { display: flex; justify-content: space-between; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--gm-border); }
.gm-summary-item:last-child { border-bottom: none; margin-bottom: 0; }
.gm-summary-label { font-weight: 500; color: var(--gm-gray); }
.gm-summary-value { color: #1f2937; }
.gm-price { font-size: 24px; font-weight: bold; color: var(--gm-primary); text-align: center; margin: 20px 0; }


/* استایل‌های جدید داشبورد */
.gm-dashboard {
    width: 100%;
    max-width: none; 
    margin: 0 auto;
    padding: 24px;
    background: var(--gm-light, #f3f4f6);
    box-sizing: border-box;
    font-family: var(--gm-font-family);
    direction: rtl;
}

.gm-dashboard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.gm-card { background: #ffffff; border-radius: 16px; padding: 24px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; }
.gm-card:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); transform: translateY(-2px); }
.gm-grid-span-1 { grid-column: span 1; }
.gm-grid-span-2 { grid-column: span 2; }
.gm-grid-span-3 { grid-column: span 3; }
.gm-grid-span-4 { grid-column: 1 / -1; }
.gm-dashboard-header-card .gm-dashboard-title { margin: 0 0 5px 0; }
.gm-card-title { font-size: 20px; font-weight: 600; margin: 0 0 20px 0; padding-bottom: 15px; border-bottom: 1px solid var(--gm-border, #e5e7eb); }
.gm-stat-card-content { display: flex; align-items: center; gap: 16px; }
.gm-stat-card-icon { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gm-stat-card-info { display: flex; flex-direction: column; }
.gm-stat-card-label { font-size: 14px; color: var(--gm-gray, #6b7280); }
.gm-stat-card-value { font-size: 28px; font-weight: bold; color: #1f2937; line-height: 1.2; }
.gm-stat-card-footer { font-size: 13px; color: var(--gm-gray, #6b7280); margin-top: 15px; padding-top: 10px; border-top: 1px solid var(--gm-border, #e5e7eb); }
.gm-request-card { border: 1px solid var(--gm-border); border-radius: 8px; padding: 16px; margin-bottom: 16px; transition: all 0.3s; }
.gm-request-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); transform: translateY(-2px); }
.gm-request-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.gm-request-title { font-weight: bold; font-size: 16px; }
.gm-badge { padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 500; }
.gm-badge-pending { background: #fef3c7; color: #92400e; }
.gm-badge-accepted { background: #dbeafe; color: #1e40af; }
.gm-badge-completed { background: #d1fae5; color: #065f46; }
.gm-request-details { color: var(--gm-gray); font-size: 14px; margin-bottom: 8px; }
.gm-request-actions { display: flex; gap: 10px; margin-top: 12px; }
.gm-empty-state { text-align: center; color: var(--gm-gray, #6b7280); padding: 40px; background: #f9fafb; border-radius: 8px; border: 1px dashed var(--gm-border, #e5e7eb); }

/* ریسپانسیو */
@media (max-width: 768px) {
    .gm-container { padding: 10px; }
    .gm-form { padding: 20px; }
    .gm-checkbox-group { grid-template-columns: 1fr; }
    .gm-btn-group { flex-direction: column; }
    .gm-request-actions { flex-direction: column; }
    .gm-steps { font-size: 12px; }
    .gm-step-number { width: 30px; height: 30px; font-size: 14px; }
    .gm-dashboard-grid { grid-template-columns: 1fr; }
    .gm-grid-span-1, .gm-grid-span-2, .gm-grid-span-3, .gm-grid-span-4 { grid-column: 1 / -1; }
}

/* تاریک‌سازی */
.gm-hidden { display: none !important; }
.gm-show { display: block !important; }

/* مودال نمایش ضمیمه */
.gm-modal { display: none; position: fixed; z-index: 99999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); overflow-y: auto; text-align: center; }
.gm-modal-close { color: #fff; font-size: 40px; position: absolute; top: 20px; right: 35px; cursor: pointer; font-weight: bold; line-height: 1; }
.gm-modal-close:hover { color: #ddd; }
#gm-modal-image { margin: auto; display: block; max-width: 90%; max-height: 80vh; padding-top: 5vh; }
.gm-view-attachment { font-weight: bold; color: var(--gm-primary-dark, #059669); cursor: pointer; text-decoration: none; display: inline-block; margin-top: 5px; }
.gm-view-attachment:hover { text-decoration: underline; }

/* <-- ****** شروع استایل‌های منوی موبایل ****** --> */

/* این فاصله را اضافه می‌کنیم تا محتوای پایین صفحه زیر منوی موبایل نرود */
body {
    padding-bottom: 80px;
}

.gm-mobile-nav {
    display: none; /* در دسکتاپ مخفی است */
    position: fixed;
    bottom: 15px; /* کمی فاصله از پایین */
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 500px; /* یک عرض حداکثر برای تبلت‌های کوچک */
    height: 65px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    justify-content: space-around;
    align-items: center;
    padding: 0 10px;
    border: 1px solid #f0f0f0;
}

.gm-mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--gm-gray, #6b7280);
    font-size: 11px;
    font-weight: 500;
    transition: color 0.2s;
}

.gm-mobile-nav-item svg {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
}

.gm-mobile-nav-item:hover,
.gm-mobile-nav-item.active {
    color: var(--gm-primary, #10b981);
}

/* نمایش فقط در موبایل */
@media (max-width: 768px) {
    .gm-mobile-nav {
        display: flex;
    }
}
/* <-- ****** پایان استایل‌های منوی موبایل ****** --> */



#gm-location-map {
    height: 300px;
    width: 100%;
    display: block !important; /* اطمینان از نمایش */
    position: relative;
    z-index: 10;
}