/* ============================================================
   Carcedes — Mobile App Kit
   بيحول الموقع على الموبيل لشكل أقرب لتطبيق (App) بدل ما يبان "صفحة ويب"
   الملف ده بيشتغل بس على الشاشات الصغيرة (max-width:768px) ومبيأثرش على الديسكتوب
   ============================================================ */

/* شريط تنقّل سفلي ثابت زي أي تطبيق (يتضاف تلقائي بمعرفة mobile-nav.js) */
.app-bottom-nav{display:none}

@media (max-width:768px){

  /* -------- مساحة آمنة تحت عشان الشريط السفلي ميغطيش المحتوى -------- */
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px));}

  /* -------- الشريط السفلي (Bottom Tab Bar) -------- */
  .app-bottom-nav{
    display:flex;
    position:fixed;
    right:0;left:0;bottom:0;
    height:calc(58px + env(safe-area-inset-bottom,0px));
    padding-bottom:env(safe-area-inset-bottom,0px);
    background:rgba(10,10,10,.98);
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
    border-top:1px solid var(--border,#333);
    z-index:500;
    justify-content:space-around;
    align-items:stretch;
    box-shadow:0 -4px 18px rgba(0,0,0,.45);
  }
  .app-tab{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.18rem;
    color:#888;
    text-decoration:none;
    font-size:.62rem;
    font-weight:600;
    position:relative;
    padding:.35rem 0 .25rem;
    -webkit-tap-highlight-color:transparent;
    transition:color .2s;
  }
  .app-tab-icon{font-size:1.2rem;line-height:1;transition:transform .2s}
  .app-tab.active{color:var(--gold,#c9a84c)}
  .app-tab.active .app-tab-icon{transform:translateY(-2px)}
  .app-tab.active::before{
    content:'';
    position:absolute;top:0;
    width:26px;height:3px;
    border-radius:0 0 6px 6px;
    background:var(--gold,#c9a84c);
  }
  .app-tab:active{opacity:.55}

  /* -------- إبعاد الأزرار العائمة والشات عن الشريط السفلي الجديد -------- */
  .float-btns{bottom:calc(74px + env(safe-area-inset-bottom,0px)) !important;}
  .chat-box{bottom:calc(9.3rem + env(safe-area-inset-bottom,0px)) !important;}
  .chat-hint{bottom:calc(7.7rem + env(safe-area-inset-bottom,0px)) !important;}

  /* -------- مساحة آمنة فوق (نوتش/كاميرا الموبايلات الحديثة) -------- */
  nav{padding-top:env(safe-area-inset-top,0px);}

  /* -------- ملمس تطبيق: كروت أنعم وأعمق شوية + زوايا أدور -------- */
  .car-card,.brand-card,.compare-slot,.policy-card,.adv-card,.contact-item,
  .abp-brand-item,.map-box,.form-tabs,.listing-form{
    border-radius:1rem !important;
    box-shadow:0 3px 14px rgba(0,0,0,.35);
  }
  .car-img{border-radius:1rem 1rem 0 0 !important;}

  /* -------- تكبير مناطق اللمس عشان يبقى سهل زي تطبيق حقيقي -------- */
  .btn,.filter-btn,.fs-toggle,.lang-btn,.float-btn,.form-tab,.quick-btn{
    min-height:42px;
  }
  a,button{-webkit-tap-highlight-color:transparent;}

  /* -------- سكرول أنعم وعدم اختفاء عنوان القسم تحت الشريط العلوي -------- */
  html{scroll-behavior:smooth;}
  section{scroll-margin-top:64px;}

  /* -------- تحسين الهيدر يبقى مضغوط أكتر زي شريط تطبيق -------- */
  .nav-inner{height:54px;}

  /* -------- منع أي تكبير غير مرغوب فيه عند اللمس المزدوج -------- */
  * { touch-action: manipulation; }
}

/* على الشاشات الصغيرة جداً نخلي أيقونات الشريط السفلي أصغر شوية */
@media (max-width:360px){
  .app-tab{font-size:.56rem;}
  .app-tab-icon{font-size:1.05rem;}
}


/* ============================================================
   المشاركة (cc-extras.js) — شغالة على كل الشاشات
   ============================================================ */
.cc-icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;flex:0 0 auto;width:42px;height:42px;border-radius:.6rem;border:1px solid var(--border,#333);background:transparent;color:#ccc;font-size:1.05rem;cursor:pointer;font-family:inherit;transition:.2s}
.cc-icon-btn:hover{border-color:var(--gold,#c9a84c);color:var(--gold,#c9a84c)}
.cc-icon-btn.cc-labeled{width:auto;flex:1;min-width:120px;font-size:.95rem;font-weight:700}
.cc-share-btn.cc-labeled{background:var(--gold,#c9a84c);color:#000;border-color:var(--gold,#c9a84c)}

.cc-sheet-overlay{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.65);display:flex;align-items:flex-end;justify-content:center;animation:ccFade .2s ease}
.cc-sheet{width:100%;max-width:440px;background:#161616;border:1px solid var(--border,#333);border-radius:1.1rem 1.1rem 0 0;padding:1rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom,0px));animation:ccUp .25s ease}
.cc-sheet-head{display:flex;align-items:center;justify-content:space-between;font-weight:700;color:var(--gold,#c9a84c);font-size:1.02rem}
.cc-sheet-x{background:none;border:none;color:#aaa;font-size:1.1rem;cursor:pointer;padding:.3rem}
.cc-sheet-title{color:#999;font-size:.8rem;margin:.35rem 0 1rem;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-sheet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem .4rem}
.cc-sh-item{display:flex;flex-direction:column;align-items:center;gap:.4rem;color:#ddd;text-decoration:none;font-size:.74rem;background:none;border:none;cursor:pointer;font-family:inherit;padding:0}
.cc-sh-ico{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.25rem;font-weight:700}
.cc-sh-item:hover .cc-sh-ico{transform:scale(1.08)}
.cc-sh-ico{transition:transform .15s}
@media (min-width:769px){.cc-sheet-overlay{align-items:center}.cc-sheet{border-radius:1.1rem}}
.cc-toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:#222;color:#fff;border:1px solid var(--gold,#c9a84c);padding:.6rem 1.1rem;border-radius:2rem;font-size:.85rem;z-index:1100;transition:opacity .4s}
.cc-toast.out{opacity:0}
@keyframes ccFade{from{opacity:0}to{opacity:1}}
@keyframes ccUp{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}