/* =========================================
   MonBast Modern - Mobile Optimization
   Desktop remains unchanged
========================================= */

/* General */
* {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    font-size: 15px;
}

/* Images and containers */
img {
    max-width: 100%;
    height: auto;
}

.container,
.container-fluid {
    max-width: 100%;
}

/* Header */
.header-wrapper {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.header-title {
    line-height: 1.25;
}

.header-text {
    line-height: 1.6;
}

/* Email generator */
.mail-wrapper {
    width: 100%;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}

.mail-selection {
    width: 100%;
}

.mail-input input {
    min-width: 0;
    font-size: 16px;
}

.mail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Inbox */
.mailbox-container {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.mail-content {
    width: 100%;
}

.mailbox {
    width: 100%;
    overflow: hidden;
    border-radius: 22px;
}

.mailbox-header {
    width: 100%;
}

.mailbox-body {
    width: 100%;
}

/* Statistics */
.header-counters {
    width: 100%;
    max-width: 100%;
}

.header-counter {
    width: 100%;
}

/* Ads responsive */
.ad {
    max-width: 100%;
    overflow: hidden;
}

.ad ins,
.ad iframe {
    max-width: 100%;
}

/* =========================================
   Mobile
========================================= */

@media (max-width: 767px) {

    body {
        font-size: 14px;
    }

    .container,
    .container-fluid {
        padding-left: 14px;
        padding-right: 14px;
    }

    /* Header */
    .header-wrapper {
        padding-top: 24px;
        padding-bottom: 25px;
    }

    .header-title {
        font-size: 27px !important;
        line-height: 1.3 !important;
        margin-bottom: 15px;
    }

    .header-text,
    .header-text.lead {
        font-size: 15px !important;
        line-height: 1.65 !important;
        margin-bottom: 18px;
    }

    /* Email box */
    .mail-wrapper {
        max-width: 100%;
        margin-top: 15px;
    }

    .mail-selection {
        padding: 14px !important;
        border-radius: 15px;
    }

    .mail-input input {
        font-size: 15px !important;
        height: 48px !important;
    }

    .mail-input-copy {
        min-width: 48px;
        height: 48px;
    }

    .mail-actions {
        justify-content: center;
        gap: 7px;
    }

    .mail-action {
        min-width: 48px;
        min-height: 43px;
        padding: 8px 10px !important;
        font-size: 13px !important;
    }

    .mail-action-text {
        font-size: 12px;
    }

    /* Inbox */
    .mailbox-container {
        padding-left: 0;
        padding-right: 0;
        margin-top: 22px;
    }

    .mailbox {
        border-radius: 18px;
        min-height: 390px;
    }

    .mailbox-header {
        min-height: 58px;
        padding: 15px !important;
        font-size: 14px !important;
    }

    .mailbox-body {
        min-height: 330px;
        padding: 15px !important;
    }

    .mailbox .empty {
        padding: 35px 10px !important;
    }

    .mailbox .empty h2,
    .mailbox .empty h3 {
        font-size: 22px !important;
        line-height: 1.4;
    }

    .mailbox .empty p {
        font-size: 14px !important;
    }

    /* Statistics */
    .header-counters {
        margin-top: 18px !important;
    }

    .header-counter {
        padding: 18px !important;
        min-height: 105px;
        border-radius: 15px;
    }

    .header-counter-number {
        font-size: 25px !important;
        line-height: 1.2;
        margin-bottom: 7px;
    }

    .header-counter-title {
        font-size: 14px !important;
        line-height: 1.4;
    }

    .header-counter-icon {
        font-size: 36px !important;
    }

    /* Content below inbox */
    .section,
    .section-inner {
        padding-top: 25px;
        padding-bottom: 25px;
    }

    /* Ads */
    .ad-250x250 {
        max-width: 100%;
        margin: 15px auto;
        text-align: center;
    }

    .ad-h {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
    }

    /* Footer */
    footer {
        font-size: 13px;
    }
}

/* Smaller phones */
@media (max-width: 380px) {

    .header-title {
        font-size: 24px !important;
    }

    .header-text,
    .header-text.lead {
        font-size: 14px !important;
    }

    .mail-action {
        min-width: 42px;
        padding: 7px !important;
    }

    .mail-action-text {
        font-size: 11px;
    }

    .header-counter-number {
        font-size: 22px !important;
    }

    .mailbox .empty h2,
    .mailbox .empty h3 {
        font-size: 20px !important;
    }
}

/* =========================================
   MonBast - Mobile Compact Design
   تحسين حجم الموقع على الهاتف
========================================= */

@media (max-width: 767px) {

    /* منع التمرير الأفقي */
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* تقليل المساحات العامة */
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* تصغير مساحة القسم الرئيسي */
    .header-wrapper {
        min-height: auto !important;
        height: auto !important;
        padding-top: 20px !important;
        padding-bottom: 35px !important;
        margin-bottom: 0 !important;
    }

    /* عنوان الموقع */
    .header-wrapper h1 {
        font-size: 30px !important;
        line-height: 1.25 !important;
        margin: 20px 0 12px !important;
    }

    /* وصف الموقع */
    .header-wrapper p {
        font-size: 16px !important;
        line-height: 1.65 !important;
        margin-bottom: 18px !important;
    }

    /* صندوق إنشاء البريد */
    .email-generator,
    .email-generator-container,
    .mail-generator {
        padding: 16px !important;
        margin: 15px auto !important;
        max-width: 100% !important;
    }

    /* حقل البريد الإلكتروني */
    #mainEmail {
        font-size: 17px !important;
        height: 52px !important;
        padding: 10px 12px !important;
    }

    /* أزرار البريد */
    .email-generator button,
    .email-generator-container button,
    .mail-generator button {
        min-height: 46px !important;
    }

    /* صندوق الرسائل */
    .mailbox-container {
        margin-top: 20px !important;
        margin-bottom: 25px !important;
    }

    .mail-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .mailbox {
        min-height: 0 !important;
        height: auto !important;
        border-radius: 20px !important;
        margin-bottom: 18px !important;
    }

    /* رأس صندوق الرسائل */
    .mailbox-header {
        min-height: 58px !important;
        padding: 14px 16px !important;
        font-size: 15px !important;
    }

    /* مساحة الرسائل */
    .mailbox-body {
        min-height: 280px !important;
        height: 280px !important;
        padding: 20px 12px !important;
    }

    /* رسالة الصندوق الفارغ */
    .mailbox-body .empty {
        padding: 25px 10px !important;
        margin: 0 !important;
    }

    .mailbox-body .empty h3,
    .mailbox-body .empty h4 {
        font-size: 23px !important;
        line-height: 1.35 !important;
    }

    .mailbox-body .empty p {
        font-size: 16px !important;
    }

    /* إحصائيات الموقع */
    .header-counters {
        margin-top: 18px !important;
        margin-bottom: 20px !important;
    }

    .header-counter {
        min-height: 105px !important;
        padding: 18px !important;
        border-radius: 15px !important;
    }

    .header-counter-number {
        font-size: 25px !important;
        margin-bottom: 6px !important;
    }

    .header-counter-title {
        font-size: 14px !important;
    }

    .header-counter-icon i {
        font-size: 38px !important;
    }

    /* تقليل الفراغات في أقسام الصفحة */
    section {
        padding-top: 25px !important;
        padding-bottom: 25px !important;
    }

    /* عناوين المحتوى */
    section h2 {
        font-size: 25px !important;
        line-height: 1.35 !important;
    }

    /* نصوص المحتوى */
    section p {
        font-size: 16px !important;
        line-height: 1.7 !important;
    }

    /* إخفاء الفراغات الزائدة */
    .header-wrapper .spacer,
    .header-wrapper .empty-space {
        height: 0 !important;
        display: none !important;
    }
}

/* هواتف صغيرة */
@media (max-width: 380px) {

    .header-wrapper h1 {
        font-size: 26px !important;
    }

    .header-wrapper p {
        font-size: 15px !important;
    }

    .mailbox-body {
        height: 250px !important;
        min-height: 250px !important;
    }

    .header-counter-number {
        font-size: 22px !important;
    }
}
/* Hide the floating Back to Top button */
.scroll-to-top,
.scroll-top,
.scrollup,
.back-to-top,
#back-to-top,
#scroll-top,
a[href="#top"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Remove loading animation / preloader */
.preloader,
#preloader,
.page-loader,
.loading-screen,
.loader-wrapper {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* =========================================
   MONBAST - MOBILE RESPONSIVE FIX
   ========================================= */

@media (max-width: 767px) {

    /* Hide the rotating preloader */
    body .preloader {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Reduce general spacing */
    .header-wrapper {
        padding-top: 25px !important;
        padding-bottom: 25px !important;
        min-height: auto !important;
    }

    /* Reduce large empty spaces */
    .header-wrapper .container,
    .header-wrapper .section-inner {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Smaller title */
    .header-wrapper h1 {
        font-size: 27px !important;
        line-height: 1.35 !important;
        margin: 15px auto 18px !important;
        padding: 0 10px !important;
    }

    /* Description */
    .header-wrapper p {
        font-size: 16px !important;
        line-height: 1.7 !important;
        margin-bottom: 20px !important;
    }

    /* Email generator */
    .header-wrapper .email-generator,
    .header-wrapper .email-box,
    .header-wrapper .mail-generator {
        padding: 14px !important;
        margin: 15px auto !important;
        border-radius: 15px !important;
    }

    /* Email address */
    #mainEmail,
    #email_token {
        font-size: 16px !important;
        min-width: 0 !important;
    }

    /* Generator action buttons */
    #refresh,
    #delete,
    #show_qr_code,
    #show_history,
    #change_email_btn {
        display: inline-flex !important;
        width: calc(20% - 7px) !important;
        min-width: 0 !important;
        height: 48px !important;
        margin: 4px 2px !important;
        padding: 5px !important;
        justify-content: center !important;
        align-items: center !important;
        font-size: 16px !important;
        border-radius: 10px !important;
    }

    /* Inbox container */
    .mailbox-container {
        margin: 15px auto !important;
        padding: 0 12px !important;
    }

    .mail-content {
        margin-top: 15px !important;
        margin-bottom: 20px !important;
    }

    /* Inbox header */
    .mailbox-header {
        padding: 15px !important;
        min-height: 65px !important;
        font-size: 14px !important;
    }

    /* Inbox body */
    .mailbox-body {
        min-height: 260px !important;
        height: auto !important;
        padding: 25px 12px !important;
    }

    .mailbox-body .empty {
        padding: 25px 10px !important;
    }

    .mailbox-body .empty h2,
    .mailbox-body .empty h3 {
        font-size: 22px !important;
        line-height: 1.4 !important;
    }

    .mailbox-body .empty p {
        font-size: 16px !important;
    }

    /* Statistics cards */
    .header-counters {
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }

    .header-counter {
        padding: 18px !important;
        min-height: 100px !important;
        border-radius: 15px !important;
    }

    .header-counter-number {
        font-size: 25px !important;
        margin-bottom: 5px !important;
    }

    .header-counter-title {
        font-size: 14px !important;
    }

    .header-counter-icon {
        font-size: 35px !important;
    }

    /* Reduce large gaps between sections */
    section {
        scroll-margin-top: 70px;
    }

    /* Smaller content headings */
    .section-title,
    .content-section h2 {
        font-size: 25px !important;
        line-height: 1.4 !important;
    }

    /* Prevent horizontal overflow */
    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* Smaller phones */
@media (max-width: 380px) {
    .header-wrapper h1 {
        font-size: 23px !important;
    }

    #refresh,
    #delete,
    #show_qr_code,
    #show_history,
    #change_email_btn {
        height: 43px !important;
        font-size: 14px !important;
    }

    .mailbox-body {
        min-height: 230px !important;
    }
}

/* =====================================
   MONBAST - MOBILE OPTIMIZATION
   ===================================== */

@media (max-width: 767px) {

    /* إخفاء شاشة التحميل الدوارة */
    .preloader,
    .preloader .spinner {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* منع التمرير الأفقي */
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    /* تقليل المسافات العامة */
    .header-wrapper,
    .section,
    .section-inner {
        margin-top: 0 !important;
        margin-bottom: 25px !important;
    }

    /* تصغير العنوان */
    .header-wrapper h1 {
        font-size: 29px !important;
        line-height: 1.35 !important;
        margin: 20px 12px !important;
    }

    /* تصغير النصوص */
    .header-wrapper p {
        font-size: 16px !important;
        line-height: 1.7 !important;
    }

    /* صندوق إنشاء البريد */
    .email-generator,
    .email-box,
    .mail-generator {
        padding: 14px !important;
        margin: 15px auto !important;
        border-radius: 16px !important;
    }

    /* أزرار البريد */
    .email-generator button,
    .email-box button,
    .mail-generator button {
        min-height: 48px !important;
    }

    /* صندوق الرسائل */
    .mailbox-container {
        width: calc(100% - 24px) !important;
        margin: 20px auto !important;
    }

    .mail-content {
        margin: 0 !important;
        padding: 0 !important;
    }

    .mailbox {
        min-height: 380px !important;
        height: auto !important;
        border-radius: 20px !important;
    }

    .mailbox-header {
        min-height: 65px !important;
        padding: 15px !important;
        font-size: 15px !important;
    }

    .mailbox-body {
        min-height: 300px !important;
        height: auto !important;
        padding: 25px 12px !important;
    }

    .mailbox-body .empty {
        padding: 35px 10px !important;
    }

    .mailbox-body .empty h2 {
        font-size: 23px !important;
    }

    .mailbox-body .empty p {
        font-size: 16px !important;
    }

    /* تقليل المسافة قبل محتوى الصفحة */
    .mail-content {
        margin-bottom: 25px !important;
    }

    /* الإحصائيات */
    .header-counters {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        padding: 0 12px !important;
    }

    .header-counter {
        min-height: 110px !important;
        padding: 18px !important;
        border-radius: 15px !important;
    }

    .header-counter-number {
        font-size: 25px !important;
    }

    .header-counter-title {
        font-size: 14px !important;
    }

    .header-counter-icon {
        font-size: 35px !important;
    }

    /* تصغير المسافات في أقسام المحتوى */
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* زر العودة للأعلى */
    .back-to-top,
    .scroll-top {
        width: 45px !important;
        height: 45px !important;
    }
}

/* شاشات الهواتف الصغيرة */
@media (max-width: 380px) {
    .header-wrapper h1 {
        font-size: 25px !important;
    }

    .mailbox-header {
        font-size: 13px !important;
    }

    .mailbox-body .empty h2 {
        font-size: 20px !important;
    }
}


/* MONBAST MOBILE - FINAL SPACING FIX */
@media (max-width: 767px) {

    /* تقليل ارتفاع صندوق الرسائل */
    .mailbox {
        min-height: 0 !important;
        height: auto !important;
    }

    .mailbox-body {
        min-height: 280px !important;
        height: 280px !important;
        padding: 20px 10px !important;
    }

    .mailbox-body .empty {
        padding: 20px 5px !important;
        margin: 0 !important;
    }

    .mailbox-body .empty svg {
        width: 100px !important;
        height: 100px !important;
    }

    .mailbox-body .empty h2 {
        font-size: 22px !important;
        margin: 15px 0 !important;
    }

    .mailbox-body .empty p {
        font-size: 16px !important;
    }

    /* تقليل المسافة أسفل صندوق الرسائل */
    .mailbox-container {
        margin-bottom: 20px !important;
    }

    /* تقليل الفراغ قبل وصف الموقع */
    .mail-content {
        margin-bottom: 15px !important;
    }

    /* ترتيب أزرار إنشاء البريد */
    .email-generator .row,
    .email-box .row,
    .mail-generator .row {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    /* منع الأزرار من أخذ عرض الشاشة كاملاً */
    .email-generator button,
    .email-box button,
    .mail-generator button {
        min-width: 65px !important;
        max-width: 100px !important;
        min-height: 48px !important;
    }

    /* تصغير الإحصائيات */
    .header-counter {
        min-height: 95px !important;
        padding: 15px !important;
    }

    /* تصغير المسافات بين الأقسام */
    .header-wrapper {
        padding-bottom: 25px !important;
    }
}

/* MONBAST - MOBILE LAYOUT SPACING */
@media (max-width: 767px) {

    /* تقليل الفراغ بين الهيدر وصندوق البريد */
    .mailbox-container {
        margin-top: 10px !important;
        margin-bottom: 15px !important;
    }

    /* تقليل الفراغ أعلى صندوق البريد */
    .mail-content {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* تصغير صندوق الرسائل */
    .mailbox {
        min-height: 0 !important;
        height: auto !important;
    }

    .mailbox-body {
        height: 260px !important;
        min-height: 260px !important;
        padding: 15px 10px !important;
    }

    /* ضبط محتوى الرسائل الفارغة */
    .mailbox-body .empty {
        padding: 15px 5px !important;
    }

    .mailbox-body .empty h2 {
        font-size: 21px !important;
        margin: 12px 0 !important;
    }

    .mailbox-body .empty p {
        font-size: 15px !important;
    }

    /* تقليل المسافة قبل وصف الموقع */
    .mail-content + .content-section,
    .mail-content + section {
        margin-top: 20px !important;
    }

    /* منع ظهور مساحات أفقية زائدة */
    body {
        overflow-x: hidden !important;
    }
}

/* =====================================
   MonBast - Blue Modern Theme
   Replace Purple with Blue and Cyan
===================================== */

:root {
    --monbast-dark: #101D35;
    --monbast-blue: #1769AA;
    --monbast-cyan: #19B8D8;
    --monbast-white: #FFFFFF;
    --monbast-light: #F3F7FC;
    --monbast-text: #14243C;
}

/* Main page */
body {
    background-color: var(--monbast-light);
    color: var(--monbast-text);
}

/* Header */
.header {
    background: linear-gradient(
        135deg,
        #101D35 0%,
        #1769AA 65%,
        #19B8D8 100%
    ) !important;
}

/* Header titles */
.header h1,
.header h2,
.header p {
    color: #FFFFFF;
}

/* Main buttons */
.btn-primary,
button.btn-primary,
.btn-main {
    background: #1769AA !important;
    border-color: #1769AA !important;
    color: #FFFFFF !important;
}

.btn-primary:hover,
button.btn-primary:hover {
    background: #19B8D8 !important;
    border-color: #19B8D8 !important;
}

/* Email address area */
.mail-address,
.email-address {
    background: #FFFFFF;
    border-color: #DCE8F4;
    color: #14243C;
}

/* Mailbox */
.mailbox {
    background: #FFFFFF;
    border-color: #DCE8F4;
}

/* Mailbox header */
.mailbox-header {
    background: #F3F7FC;
}

/* Statistics cards */
.header-counter {
    background: #FFFFFF;
    border: 1px solid #DCE8F4;
    border-radius: 14px;
}

.header-counter-icon {
    color: #19B8D8 !important;
}

.header-counter-number {
    color: #1769AA !important;
}

/* Links and icons */
a {
    color: #1769AA;
}

a:hover {
    color: #19B8D8;
}

/* Footer */
.footer {
    background: #101D35 !important;
    color: #FFFFFF;
}

/* Remove purple decorative backgrounds */
.particle1 {
    background-color: #19B8D8 !important;
}

/* Mobile */
@media (max-width: 767px) {
    .header {
        background: linear-gradient(
            160deg,
            #101D35,
            #1769AA,
            #19B8D8
        ) !important;
    }

    .header-counter {
        border-radius: 12px;
    }
}

/* =====================================
   MonBast - Remove Remaining Purple
===================================== */

/* Mailbox header */
.mailbox .mailbox-header,
.mailbox-header {
    background: linear-gradient(
        135deg,
        #101D35 0%,
        #1769AA 65%,
        #19B8D8 100%
    ) !important;
    color: #FFFFFF !important;
}

/* Mailbox header text */
.mailbox-header p,
.mailbox-header-item p {
    color: #FFFFFF !important;
}

/* Mailbox body */
.mailbox,
.mailbox-body {
    background-color: #FFFFFF !important;
}

/* Empty inbox text */
.mailbox .empty h2 {
    color: #14243C !important;
}

.mailbox .empty p {
    color: #65758B !important;
}

/* Main action buttons */
.mail-content button,
.mail-content .btn {
    border-radius: 12px;
}

/* Copy email button */
.mail-content .copy,
.mail-content .copy-btn {
    background-color: #19B8D8 !important;
    border-color: #19B8D8 !important;
}

/* Links and active elements */
.mailbox a,
.mailbox .active {
    color: #1769AA;
}

/* Mobile */
@media (max-width: 767px) {
    .mailbox .mailbox-header {
        background: #1769AA !important;
    }

    .mailbox {
        border-radius: 20px;
        overflow: hidden;
    }
}

/* ==========================================
   MonBast - Compact Email Generator
   Modern Blue Theme
========================================== */

/* Main email wrapper */
.header-wrapper .mail-wrapper {
    width: 100% !important;
    max-width: 620px !important;
    margin: 20px auto !important;
}

/* Email selection box */
.header-wrapper .mail-selection {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px !important;
    margin: 0 auto 12px !important;
    border-radius: 15px !important;
}

/* Email input */
.header-wrapper .mail-input {
    display: flex !important;
    align-items: center !important;
    min-height: 52px !important;
    height: 52px !important;
    border-radius: 11px !important;
    overflow: hidden !important;
}

/* Email address */
.header-wrapper #mainEmail {
    flex: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 8px 12px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    box-sizing: border-box !important;
}

/* Copy button */
.header-wrapper .mail-input-copy {
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 !important;
    border-radius: 0 10px 10px 0 !important;
    background: #19B8D8 !important;
    border-color: #19B8D8 !important;
    color: #FFFFFF !important;
}

/* Action buttons */
.header-wrapper .mail-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 12px !important;
}

/* Individual buttons */
.header-wrapper .mail-actions .mail-action {
    min-width: 48px !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    background: #FFFFFF !important;
    border: 1px solid #DCE8F4 !important;
    color: #1769AA !important;
}

/* Button icons */
.header-wrapper .mail-actions .mail-action i {
    font-size: 15px !important;
    color: #1769AA !important;
}

/* Hover */
.header-wrapper .mail-actions .mail-action:not(:disabled):hover {
    background: #1769AA !important;
    color: #FFFFFF !important;
}

.header-wrapper .mail-actions .mail-action:not(:disabled):hover i {
    color: #FFFFFF !important;
}

/* ==========================================
   Mobile
========================================== */
@media (max-width: 767px) {

    .header-wrapper .mail-wrapper {
        max-width: 100% !important;
        padding: 0 8px !important;
        margin: 14px auto !important;
        box-sizing: border-box !important;
    }

    .header-wrapper .mail-selection {
        padding: 10px !important;
        margin-bottom: 10px !important;
        border-radius: 13px !important;
    }

    .header-wrapper .mail-input,
    .header-wrapper #mainEmail,
    .header-wrapper .mail-input-copy {
        height: 48px !important;
        min-height: 48px !important;
    }

    .header-wrapper #mainEmail {
        font-size: 14px !important;
        padding: 7px 9px !important;
    }

    .header-wrapper .mail-input-copy {
        width: 48px !important;
        min-width: 48px !important;
    }

    .header-wrapper .mail-actions {
        gap: 7px !important;
        margin-top: 10px !important;
    }

    .header-wrapper .mail-actions .mail-action {
        min-width: 43px !important;
        min-height: 42px !important;
        padding: 8px !important;
        border-radius: 9px !important;
    }

    /* Icons only on mobile */
    .header-wrapper .mail-actions .mail-action-text {
        display: none !important;
    }

    .header-wrapper .mail-actions .mail-action i {
        font-size: 15px !important;
        margin: 0 !important;
    }
}

/* Very small screens */
@media (max-width: 380px) {

    .header-wrapper .mail-wrapper {
        padding: 0 4px !important;
    }

    .header-wrapper .mail-selection {
        padding: 8px !important;
    }

    .header-wrapper .mail-actions {
        gap: 5px !important;
    }

    .header-wrapper .mail-actions .mail-action {
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 6px !important;
    }
}

/* ==========================================
   MonBast - Final Mobile UI Improvements
   Compact Email + Inbox + Navigation
========================================== */

/* 1. Compact email generator */
.header-wrapper .mail-wrapper {
    width: calc(100% - 24px) !important;
    max-width: 560px !important;
    margin: 18px auto !important;
}

.header-wrapper .mail-selection {
    padding: 12px !important;
    border-radius: 16px !important;
}

.header-wrapper .mail-input {
    display: flex !important;
    height: 48px !important;
    overflow: hidden !important;
    border-radius: 13px !important;
}

.header-wrapper #mainEmail {
    min-width: 0 !important;
    height: 48px !important;
    font-size: 14px !important;
    padding: 0 12px !important;
}

.header-wrapper .mail-input-copy {
    width: 54px !important;
    min-width: 54px !important;
    height: 48px !important;
}

/* 2. Keep all five action buttons in one row */
.header-wrapper .mail-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 7px !important;
    margin-top: 12px !important;
}

.header-wrapper .mail-actions .mail-action {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 65px !important;
    height: 45px !important;
    min-height: 45px !important;
    padding: 5px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.header-wrapper .mail-actions .mail-action i {
    margin: 0 !important;
    font-size: 17px !important;
}

.header-wrapper .mail-actions .mail-action .mail-action-text {
    display: none !important;
}

/* 3. Reduce unnecessary inbox spacing */
.mailbox {
    padding-top: 25px !important;
    padding-bottom: 30px !important;
}

.mailbox .mailbox-header {
    min-height: 105px !important;
    padding: 25px 20px !important;
}

.mailbox .mailbox-body {
    padding: 25px 18px !important;
}

/* Empty inbox illustration and text */
.mailbox .empty-inbox,
.mailbox .empty-state {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
}

.mailbox .empty-inbox img,
.mailbox .empty-state img {
    max-width: 125px !important;
    height: auto !important;
}

.mailbox .empty-inbox h3,
.mailbox .empty-state h3 {
    font-size: 23px !important;
    margin-top: 15px !important;
}

.mailbox .empty-inbox p,
.mailbox .empty-state p {
    font-size: 16px !important;
}

/* 4. Mobile layout */
@media (max-width: 767px) {

    .header-wrapper .mail-wrapper {
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        margin: 16px auto !important;
    }

    .header-wrapper .mail-selection {
        padding: 9px !important;
    }

    .header-wrapper .mail-input,
    .header-wrapper #mainEmail,
    .header-wrapper .mail-input-copy {
        height: 46px !important;
    }

    .header-wrapper .mail-input-copy {
        width: 48px !important;
        min-width: 48px !important;
    }

    .header-wrapper .mail-actions {
        gap: 6px !important;
    }

    .header-wrapper .mail-actions .mail-action {
        height: 43px !important;
        min-height: 43px !important;
        max-width: 58px !important;
    }

    .mailbox {
        padding: 15px 12px 25px !important;
    }

    .mailbox .mailbox-header {
        min-height: 85px !important;
        padding: 20px 14px !important;
    }

    .mailbox .mailbox-body {
        padding: 18px 12px !important;
    }
}

/* 5. Very small phones */
@media (max-width: 380px) {

    .header-wrapper .mail-actions {
        gap: 4px !important;
    }

    .header-wrapper .mail-actions .mail-action {
        height: 39px !important;
        min-height: 39px !important;
    }

    .header-wrapper .mail-actions .mail-action i {
        font-size: 15px !important;
    }

    .header-wrapper #mainEmail {
        font-size: 12px !important;
    }
}

/* ==========================================
   MonBast - Compact Inbox Design
   Mobile + Desktop
========================================== */

/* Main inbox card */
.mailbox.empty {
    height: auto !important;
    min-height: 0 !important;
    padding: 12px !important;
    margin: 0 auto !important;
    border-radius: 26px !important;
    overflow: hidden !important;
}

/* Blue header */
.mailbox.empty .mailbox-header {
    min-height: 125px !important;
    height: auto !important;
    padding: 25px 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 25px !important;
    border-radius: 0 !important;
}

/* Header columns */
.mailbox.empty .mailbox-header-item {
    margin: 0 !important;
    padding: 0 !important;
}

.mailbox.empty .mailbox-header-item p {
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 1.4 !important;
}

/* Hide time heading on small screens */
@media (max-width: 767px) {
    .mailbox.empty .mailbox-header-item.text-center {
        display: none !important;
    }
}

/* Inbox body */
.mailbox.empty .mailbox-body {
    min-height: 0 !important;
    height: auto !important;
    padding: 35px 15px 45px !important;
    display: block !important;
}

/* Empty inbox content */
.mailbox.empty .mailbox-body > .empty {
    min-height: 0 !important;
    height: auto !important;
    padding: 15px 10px 25px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Empty inbox icon */
.mailbox.empty .empty-icon {
    margin: 0 auto 15px !important;
}

.mailbox.empty .empty-icon svg {
    width: 92px !important;
    height: 94px !important;
    max-width: 100% !important;
}

/* Empty inbox title */
.mailbox.empty .mailbox-body .empty h2 {
    font-size: 23px !important;
    line-height: 1.4 !important;
    margin: 10px 0 !important;
}

/* Empty inbox description */
.mailbox.empty .mailbox-body .empty p {
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* Keep dynamic messages container */
.mailbox.empty #mailbox {
    width: 100% !important;
}

/* Mobile improvements */
@media (max-width: 767px) {

    .mailbox.empty {
        width: 100% !important;
        padding: 8px !important;
        border-radius: 23px !important;
    }

    .mailbox.empty .mailbox-header {
        min-height: 95px !important;
        padding: 20px 18px !important;
        gap: 18px !important;
    }

    .mailbox.empty .mailbox-header-item p {
        font-size: 15px !important;
    }

    .mailbox.empty .mailbox-body {
        padding: 25px 10px 30px !important;
    }

    .mailbox.empty .mailbox-body > .empty {
        padding: 10px 5px 15px !important;
    }

    .mailbox.empty .empty-icon svg {
        width: 82px !important;
        height: 84px !important;
    }

    .mailbox.empty .mailbox-body .empty h2 {
        font-size: 21px !important;
    }

    .mailbox.empty .mailbox-body .empty p {
        font-size: 15px !important;
    }
}

/* Very small phones */
@media (max-width: 380px) {

    .mailbox.empty .mailbox-header {
        min-height: 80px !important;
        padding: 16px 12px !important;
    }

    .mailbox.empty .mailbox-body {
        padding: 20px 8px 25px !important;
    }

    .mailbox.empty .mailbox-body .empty h2 {
        font-size: 19px !important;
    }
}

/* ==========================================
   MonBast - Inbox Final Height Fix
========================================== */

/* Reduce the complete inbox card */
.mailbox.empty {
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
    padding: 8px !important;
    margin-bottom: 0 !important;
}

/* Reduce blue header height */
.mailbox.empty > .mailbox-header {
    height: 90px !important;
    min-height: 90px !important;
    max-height: 90px !important;
    padding: 15px 18px !important;
    display: flex !important;
    align-items: center !important;
}

/* Reduce white inbox area */
.mailbox.empty > .mailbox-body {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 12px 10px 18px !important;
    margin: 0 !important;
}

/* Remove excess spacing around empty state */
.mailbox.empty .mailbox-body > .empty {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 5px !important;
    margin: 0 !important;
}

/* Smaller inbox illustration */
.mailbox.empty .empty-icon {
    margin: 0 auto 8px !important;
    padding: 0 !important;
}

.mailbox.empty .empty-icon svg {
    width: 76px !important;
    height: 76px !important;
}

/* Text spacing */
.mailbox.empty .mailbox-body .empty h2 {
    font-size: 21px !important;
    margin: 5px 0 8px !important;
    line-height: 1.35 !important;
}

.mailbox.empty .mailbox-body .empty p {
    font-size: 15px !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Preserve dynamic mailbox */
.mailbox.empty #mailbox {
    height: auto !important;
    min-height: 0 !important;
}

/* Mobile */
@media (max-width: 767px) {
    .mailbox.empty {
        padding: 7px !important;
        border-radius: 22px !important;
    }

    .mailbox.empty > .mailbox-header {
        height: 78px !important;
        min-height: 78px !important;
        max-height: 78px !important;
        padding: 12px 14px !important;
    }

    .mailbox.empty > .mailbox-body {
        padding: 12px 8px 16px !important;
    }

    .mailbox.empty .empty-icon svg {
        width: 68px !important;
        height: 68px !important;
    }

    .mailbox.empty .mailbox-body .empty h2 {
        font-size: 19px !important;
    }

    .mailbox.empty .mailbox-body .empty p {
        font-size: 14px !important;
    }
}

/* ==========================================
   MonBast - Reduce Space Before Inbox
========================================== */

/* Reduce top spacing of mailbox section */
section.section:has(.mailbox-container) {
    padding-top: 20px !important;
    margin-top: 0 !important;
}

/* Reduce inner section spacing */
.mailbox-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.mailbox-container .mail-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Mobile spacing */
@media (max-width: 767px) {
    section.section:has(.mailbox-container) {
        padding-top: 12px !important;
    }

    .mailbox-container {
        margin-top: 0 !important;
    }
}

/* MonBast - Final spacing adjustment */

@media (max-width: 767px) {
    section.section:has(.mailbox-container) {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    section.section:has(.mailbox-container) > .container {
        padding-top: 0 !important;
    }

    section.section:has(.mailbox-container) .section-inner {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .mailbox-container {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}