/* =========================
   Arta Education Front CSS
   FINAL / Clean / No Duplicates
   ========================= */

.artaedu-container{
  max-width:1200px;
  margin:0 auto;
  padding:15px;
  direction:rtl;
  text-align:right;
  box-sizing:border-box;
}

/* -------------------------------------------------
   Header + mode buttons + search
-------------------------------------------------- */
.artaedu-header-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  direction:rtl;
  text-align:right;

  /* کم کردن ارتفاع و فاصله */
  margin:0 0 3px 0 !important;
  padding:3px 6px !important;
  min-height:44px !important; /* هم‌قد input */
  line-height:1.2 !important;

  /* خط دور هدر */
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
}

.artaedu-header-title{
  font-size:20px;
  font-weight:700;

  margin:0 !important;
  padding:0 !important;
  line-height:1.2 !important;
  display:inline-block;
}

.artaedu-mode-switch{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  direction:rtl;

  /* آیتم‌ها از راست */
  flex-direction:row-reverse;
  justify-content:flex-start;

  overflow:visible;
  white-space:normal;
}

.artaedu-mode-btn{
  display:inline-flex;
  align-items:center;

  border-radius:999px;
  border:1px solid #d1d5db;
  background:#f3f4f6;

  height:44px;
  padding:0 12px;

  font-size:13px;
  cursor:pointer;
  outline:none;
  white-space:nowrap;
  text-decoration:none;
  color:inherit;

  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}

.artaedu-mode-btn--active{
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
}

.artaedu-mode-btn--disabled{
  opacity:.6;
  cursor:default;
  pointer-events:none;
}

/* Search form */
.artaedu-search-form{
  display:flex;
  align-items:center;
  gap:6px;
  direction:rtl;
  position:relative; /* برای dropdown */
}

.artaedu-search-wrap{
  position:relative;
  display:inline-block;
}

.artaedu-search-input{
  height:44px;
  font-size:14px;
  padding:8px 14px;
  line-height:22px;
  text-align:right;

  border-radius:999px;
  border:1px solid #d1d5db;
  background:#fff;

  width:520px;
  max-width:100%;
  box-sizing:border-box;
}

.artaedu-search-button{
  border-radius:999px;
  border:1px solid #d1d5db;
  background:#e5e7eb;

  height:44px;
  padding:0 12px;

  font-size:13px;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease;
}

.artaedu-search-button:hover{
  background:#d1d5db;
}

/* Suggestions dropdown (select) */
#artaedu_front_video_search_suggestions{
  position:absolute;
  top:calc(100% + 6px);
  right:0;

  min-width:260px;
  max-width:600px;
  width:100%;

  font-size:13px;
  line-height:22px;

  z-index:9999;
  background:#fff;
  border:1px solid #ccc;
  border-radius:6px;
  box-shadow:0 3px 8px rgba(0,0,0,0.15);

  max-height:646px;
  overflow-y:auto;

  display:none;
}

#artaedu_front_video_search_suggestions option{
  padding:6px 10px;
}

#artaedu_front_video_search_suggestions.artaedu-front-suggest-selected{
  border:2px solid #007bff;
  box-shadow:0 0 0 3px rgba(0,123,255,0.25);
}

/* ----- Category chips (optional) ----- */
.artaedu-categories{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:15px;
}

.artaedu-category{
  display:inline-block;
  border-radius:16px;
  padding:6px 12px;
  font-size:13px;
  background:#f3f4f6;
  color:#333;
  text-decoration:none;
  border:1px solid #e5e7eb;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}

.artaedu-category:hover{
  background:#e5f1ff;
  border-color:#c0ddff;
}

.artaedu-category--active{
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
}

/* ----- Two-column layout ----- */
.artaedu-layout{
  display:flex;
  align-items:flex-start;
  gap:16px;
}

.artaedu-sidebar{
  width:280px;
  max-height:620px;
  overflow-y:auto;
  background:#fafafa;
  border-radius:8px;
  border:1px solid #e5e7eb;
  padding:8px;
  box-sizing:border-box;
}

.artaedu-main{
  flex:1;
  min-width:0;
}

.artaedu-sidebar-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}

.artaedu-sidebar-title{
  font-size:14px;
  font-weight:600;
}

.artaedu-sidebar-count{
  font-size:12px;
  color:#6b7280;
}

/* Video item */
.artaedu-video-item{
  margin-bottom:6px;
  border-radius:8px;
  padding:4px;
  cursor:pointer;
  transition:background-color .15s ease;
  display:flex;
  gap:8px;
  text-decoration:none;
  color:inherit;
  align-items:flex-start;
}

.artaedu-video-item:last-child{ margin-bottom:0; }
.artaedu-video-item:hover{ background:#f0f4ff; }
.artaedu-video-item--active{ background:#e1ecff; }

.artaedu-video-thumb{
  position:relative;
  width:96px;
  height:60px;
  background:#d1d5db;
  border-radius:4px;
  overflow:hidden;
  flex-shrink:0;
}

.artaedu-video-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.artaedu-video-thumb-placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
}

.artaedu-video-info{
  flex:1;
  min-width:0;
}

.artaedu-video-title{
  font-size:13px;
  font-weight:600;
  margin-bottom:2px;
}

.artaedu-video-desc{
  font-size:11px;
  color:#6b7280;
}

/* -------------------------------------------------
   Player
   - همیشه 16:9 کامل (ابزارها قطع نشود)
   - فاصله از هدر کم (3px)
   - اگر کلاس --compact داشته باشد عرض نرمال می‌شود
-------------------------------------------------- */
.artaedu-player-wrapper{
  position:relative;
  width:100%;
  padding-top:56.25%; /* 16:9 */

  background:#000;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,0.25);

  margin:3px 0 12px 0; /* بالا 3px */
}

.artaedu-player-wrapper iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* نرمال کردن اندازه روی دسکتاپ */
.artaedu-player-wrapper--compact{
  max-width:860px;
  margin-left:auto;
  margin-right:auto;
}

.artaedu-main-title{
  font-size:18px;
  margin-bottom:4px;
}

.artaedu-main-meta{
  font-size:13px;
  color:#6b7280;
  margin-bottom:8px;
}

.artaedu-empty{
  font-size:14px;
  color:#6b7280;
}

/* ----- Grid cards ----- */
.artaedu-cat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:16px;
  margin-bottom:24px;
}

.artaedu-category-card{
  display:block;
  text-decoration:none;
  color:inherit;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  border:1px solid #e5e7eb;
  box-shadow:0 4px 10px rgba(15,23,42,0.06);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.artaedu-category-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(15,23,42,0.10);
  border-color:#60a5fa;
}

.artaedu-category-thumb{
  position:relative;
  width:100%;
  height:0;
  padding-top:56.25%;
  background:#111827;
}

.artaedu-category-thumb-img{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
}

.artaedu-category-thumb-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  background:#e5e7eb;
}

.artaedu-category-thumb-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  padding:8px;
  background:linear-gradient(to top, rgba(0,0,0,0.75), transparent 55%);
  box-sizing:border-box;
}

.artaedu-category-count{
  display:inline-block;
  padding:2px 8px;
  font-size:12px;
  border-radius:999px;
  background:rgba(15,23,42,0.85);
  color:#f9fafb;
}

.artaedu-category-title{
  font-size:14px;
  font-weight:600;
  padding:8px 10px 6px;
  color:#111827;
  text-align:right;
}

.artaedu-category-desc{
  font-size:12px;
  color:#4b5563;
  padding:0 10px 10px;
  line-height:1.5;
}

/* ----- Responsive ----- */
@media (max-width: 768px){
  .artaedu-header-line{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  .artaedu-mode-switch{
    width:100%;
  }

  .artaedu-search-input{
    width:100%;
  }

  #artaedu_front_video_search_suggestions{
    width:100%;
    max-width:none;
  }

  .artaedu-cat-grid{
    grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
    gap:12px;
  }

  /* موبایل: compact هم تمام عرض */
  .artaedu-player-wrapper--compact{
    max-width:none;
    margin-left:0;
    margin-right:0;
  }
}

@media (max-width: 767px){
  .artaedu-layout{
    flex-direction:column;
  }

  .artaedu-sidebar{
    width:100%;
    max-height:none;
    order:2;
  }

  .artaedu-main{
    order:1;
  }
}

/* -------------------------------------------------
   PrestaShop Theme Override (Header spacing)
-------------------------------------------------- */
body#module-artaeducation-list .page-header,
body#module-artaeducation-list .page-title,
body.page-module-artaeducation-list .page-header,
body.page-module-artaeducation-list .page-title,
#module-artaeducation-list .page-header,
#module-artaeducation-list .page-title{
  padding:0 !important;
  margin:0 !important;
  min-height:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

body#module-artaeducation-list .page-header > *,
body.page-module-artaeducation-list .page-header > *{
  margin:0 !important;
  padding:0 !important;
}
/* فقط جابجایی جای دکمه و تکست‌باکس — بدون تغییر سایز/شکل */
/* فقط جابجایی جای دکمه و تکست‌باکس — بدون تغییر سایز/شکل */
.artaedu-search-form{ display:flex; }
.artaedu-search-button{ order:0; }   /* دکمه میاد سمت راست (RTL) */
.artaedu-search-wrap{ order:-1; }
@media (max-width: 768px){
  .artaedu-search-input{
    font-size:16px !important;
  }

  /* تنظیمات عمومی */
  #artaedu_front_video_search_suggestions{
    direction: rtl !important;
    text-align: right !important;
  }

  /* iOS Safari: کمترین دستکاری روی select/option */
  @supports (-webkit-touch-callout: none) {
    #artaedu_front_video_search_suggestions{
      /* فقط ظاهر کمبوباکس طبیعی */
      -webkit-appearance: menulist-button;
      appearance: menulist-button;

      font-size:16px !important;
      line-height:normal !important;
      unicode-bidi: normal !important;

      height:44px !important;
      border-radius:12px !important;

      /* ✅ خیلی مهم: به top/left/right/bottom دست نزن
         چون JS با fixed تنظیمش می‌کند */
    }

    #artaedu_front_video_search_suggestions option{
      padding:0 !important;
      font-size:16px !important;
    }
  }
}