/* ============ محوّل هجري/ميلادي ============ */
.tool-title{ text-align: center; }
.tool-title-ar{ display: block; }
.tool-title-en{
  display: block;
  font-family: var(--font-en-body);
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: 4px;
  direction: ltr;
}

.converter-card{
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px 32px;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* الميلادي في الأعلى والهجري في الأسفل — التبديل يعكس الترتيب */
#gregPanel{ order: 1; }
.swap-btn{ order: 2; }
#hijriPanel{ order: 3; }
.converter-card.swapped #gregPanel{ order: 3; }
.converter-card.swapped #hijriPanel{ order: 1; }

.date-panel{
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 22px;
  text-align: center;
}
.panel-label{
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 12px;
}

.date-input{
  border: 1px solid var(--line);
  background: var(--card-bg);
  color: var(--ink);
  border-radius: 14px;
  font-family: inherit;
  font-size: 1.7rem;
  font-weight: 700;
  padding: 14px 16px;
  text-align: center;
  outline: none;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.date-input:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.greg-input{ direction: ltr; }

.hijri-fields{ display: flex; gap: 10px; }
.h-num{ flex: 1; min-width: 0; }
.h-year{ flex: 1.3; }
.h-select{ flex: 1.8; min-width: 0; font-size: 1.15rem; cursor: pointer; }
.h-num::-webkit-outer-spin-button,
.h-num::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.h-num{ -moz-appearance: textfield; appearance: textfield; }

.date-readable{
  margin: 12px 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink-soft);
  min-height: 1.6em;
}

.swap-btn{
  align-self: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(21,36,49,.18);
  transition: transform .3s cubic-bezier(.2,.8,.3,1.4), background .15s ease;
}
.swap-btn:hover{ transform: rotate(180deg) scale(1.08); }
.swap-btn svg{ width: 26px; height: 26px; }

@media (max-width: 640px){
  .converter-card{ padding: 24px 16px; }
  .date-input{ font-size: 1.3rem; padding: 12px; }
  .h-select{ font-size: 1rem; }
}