/* =====================================================
   AlMatbakh Hero Widget  —  almatbakh-hero.css
   Branding: orange #E8621A  |  green #5B8A3C  |  dark bg
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&family=Cairo:wght@300;400;600;700;900&display=swap');

/* ── CSS Custom Properties ── */
.amh-hero {
  --amh-orange   : #E8621A;
  --amh-green    : #5B8A3C;
  --amh-text     : #FFFFFF;
  --amh-card-bg  : rgba(255,255,255,0.08);
  --amh-glass    : rgba(255,255,255,0.12);
  --amh-shadow   : rgba(232,98,26,0.35);
  --amh-radius   : 20px;
  --amh-transition: 0.65s cubic-bezier(0.4,0,0.2,1);
  overflow       : hidden;

  position       : relative;
  width          : 100%;
  height         : 100vh;
  
}
.amh-hero .container {
  max-width: 1200px;
  margin: auto;
  overflow       : hidden;
  display        : flex;
  align-items    : center;
  background     : #1a0a00;
  direction      : rtl;
  user-select    : none;
}
@media (max-width:768px) {
    .amh-hero .container {
        flex-wrap: wrap;
    }
}
/* ── Background layers ── */
.amh-bg-img-wrap {
  position : absolute;
  inset    : 0;
  z-index  : 0;
}
.amh-bg-slide {
  position           : absolute;
  inset              : 0;
  background-size    : cover;
  background-position: center;
  filter             : blur(18px) saturate(0.6);
  opacity            : 0;
  transform          : scale(1.08);
  transition         : opacity var(--amh-transition), transform var(--amh-transition);
}
.amh-bg-slide.is-active {
  opacity   : 1;
  transform : scale(1);
}

.amh-overlay {
  position  : absolute;
  inset     : 0;
  z-index   : 1;
  background: linear-gradient(
    135deg,
    rgba(26,10,0,0.88) 0%,
    rgba(26,10,0,0.60) 40%,
    rgba(26,10,0,0.40) 70%,
    rgba(26,10,0,0.75) 100%
  );
}

.amh-bg-gradient {
  position  : absolute;
  inset     : 0;
  z-index   : 2;
  background: radial-gradient(ellipse 55% 80% at 50% 50%, rgba(232,98,26,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.amh-bg-pattern {
  position       : absolute;
  inset          : 0;
  z-index        : 2;
  opacity        : 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='%23fff'/%3E%3C/svg%3E");
  background-size: 30px 30px;
  pointer-events : none;
}

/* ── Layout columns ── */
.amh-left,
.amh-center,
.amh-right {
  position : relative;
  z-index  : 10;
  height   : 100%;
  display  : flex;
  flex-direction: column;
}

.amh-left {
  flex      : 0 0 260px;
  padding   : 40px 0 40px 40px;
  justify-content: center;
  gap       : 16px;
}

.amh-center {
  flex           : 1;
  align-items    : center;
  justify-content: center;
  position       : relative;
}

.amh-right {
  flex        : 0 0 130px;
  align-items : center;
  justify-content: center;
  gap         : 10px;
  padding     : 20px 20px 20px 10px;
}

/* ── Left: Text ── */
.amh-headline {
  font-size   : 2.4rem;
  line-height : 1.2;
  color       : var(--amh-text);
  letter-spacing: -0.5px;
}
.amh-headline span.line-highlight { color: var(--amh-orange); }

.amh-sub {
  font-size   : 0.88rem;
  color       : rgba(255,255,255,0.65);
  line-height : 1.6;
  max-width   : 200px;
}

.amh-btn {
  display         : inline-flex;
  align-items     : center;
  gap             : 10px;
  background      : var(--amh-orange);
  color           : #fff;
  font-size       : 0.9rem;
  padding         : 10px 22px;
  border-radius   : 50px;
  text-decoration : none;
  transition      : background 0.3s, transform 0.3s, box-shadow 0.3s;
  box-shadow      : 0 6px 24px var(--amh-shadow);
  width           : fit-content;
  margin-top      : 4px;
}
.amh-btn:hover {
  background : #c9510e;
  transform  : translateY(-2px);
  box-shadow : 0 10px 32px var(--amh-shadow);
  color      : #fff;
}
.amh-btn-arrow {
  font-size   : 1.1rem;
  transition  : transform 0.3s;
}
.amh-btn:hover .amh-btn-arrow { transform: translateX(-4px); }

/* ── Meta bar (price / prep) bottom-left ── */
.amh-meta-bar {
  display     : flex;
  align-items : center;
  gap         : 20px;
  position    : absolute;
  bottom      : 36px;
  right       : 0;
  left        : 40px;
}
.amh-meta-item { display: flex; flex-direction: column; gap: 2px; }
.amh-meta-label {
  font-size   : 0.65rem;
  letter-spacing: 0.12em;
  color       : var(--amh-orange);
  text-transform: uppercase;
}
.amh-meta-value {
  font-size   : 1.4rem;
  color       : var(--amh-text);
  line-height : 1;
}
.amh-meta-sep {
  width      : 1px;
  height     : 36px;
  background : rgba(255,255,255,0.2);
}

/* ── Center: Rings & dish ── */
.amh-ring {
  position      : absolute;
  border-radius : 50%;
  border        : 2px solid rgba(232,98,26,0.18);
  pointer-events: none;
  animation     : amh-pulse 3s ease-in-out infinite;
}
.amh-ring-1 { width: 340px; height: 340px; animation-delay: 0s; }
.amh-ring-2 { width: 420px; height: 420px; animation-delay: 0.6s; border-color: rgba(91,138,60,0.12); }
.amh-ring-3 { width: 500px; height: 500px; animation-delay: 1.2s; border-color: rgba(232,98,26,0.07); }

@keyframes amh-pulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%       { transform: scale(1.03); opacity: 0.6; }
}

/* Glow behind dish */
.amh-dish-wrap::before {
  content    : '';
  position   : absolute;
  width      : 280px;
  height     : 280px;
  border-radius: 50%;
  background : radial-gradient(circle, rgba(232,98,26,0.28) 0%, transparent 70%);
  top        : 50%;
  left       : 50%;
  transform  : translate(-50%, -50%);
  pointer-events: none;
  z-index    : 0;
}

.amh-dish-wrap {
  position : relative;
  width    : 300px;
  height   : 300px;
  flex-shrink: 0;
}

.amh-dish {
  position      : absolute;
  inset         : 0;
  border-radius : 50%;
  overflow      : hidden;
  display       : flex;
  align-items   : center;
  justify-content: center;
  opacity       : 0;
  transform     : scale(0.88) rotate(-6deg);
  transition    : opacity var(--amh-transition), transform var(--amh-transition);
  z-index       : 2;
  box-shadow    : 0 20px 60px rgba(0,0,0,0.5), 0 0 0 6px rgba(255,255,255,0.08), 0 0 0 12px rgba(232,98,26,0.12);
  text-decoration: none;
}
.amh-dish.is-active {
  opacity   : 1;
  transform : scale(1) rotate(0deg);
}
.amh-dish img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  border-radius: 50%;
  transition: transform 0.6s ease;
}
.amh-dish:hover img { transform: scale(1.06); }

/* ── Center info (title + desc) ── */
.amh-center-info {
  position   : absolute;
  bottom     : 60px;
  left       : 50%;
  transform  : translateX(-50%);
  text-align : center;
  white-space: nowrap;
}
.amh-dish-title {
  font-size   : 1.25rem;
  color       : var(--amh-text);
  margin-bottom: 4px;
  transition  : opacity 0.3s, transform 0.3s;
}
.amh-dish-desc {
  font-size : 0.78rem;
  color     : rgba(255,255,255,0.55);
  transition: opacity 0.3s, transform 0.3s;
  max-width : 240px;
  white-space: normal;
  text-align : center;
}

/* ── Scroll hint ── */
.amh-scroll-hint {
  position   : absolute;
  bottom     : 20px;
  left       : 50%;
  transform  : translateX(-50%);
  display    : flex;
  flex-direction: column;
  align-items: center;
  gap        : 4px;
  opacity    : 0.55;
}
.amh-scroll-text {
  font-size  : 0.6rem;
  letter-spacing: 0.12em;
  color      : var(--amh-text);
  transform  : rotate(90deg) translateY(-4px);
  white-space: nowrap;
}
.amh-scroll-icon {
  width    : 22px;
  height   : 38px;
  border   : 2px solid rgba(255,255,255,0.4);
  border-radius: 12px;
  display  : flex;
  align-items: flex-start;
  justify-content: center;
  padding  : 5px 0;
}
.amh-scroll-dot {
  width     : 5px;
  height    : 5px;
  background: var(--amh-orange);
  border-radius: 50%;
  animation : amh-scroll-bounce 1.6s ease-in-out infinite;
}
@keyframes amh-scroll-bounce {
  0%, 100% { transform: translateY(0);  opacity: 1; }
  50%       { transform: translateY(14px); opacity: 0.3; }
}

/* ── Right: Vertical carousel ── */
.amh-scroll-indicator {
  writing-mode  : vertical-rl;
  transform     : rotate(180deg);
  font-size     : 0.58rem;
  letter-spacing: 0.16em;
  color         : var(--amh-orange);
  text-transform: uppercase;
  margin-bottom : 12px;
  opacity       : 0.8;
}

.amh-thumb-list {
  display        : flex;
  flex-direction : column;
  gap            : 10px;
  background     : rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  border         : 1px solid rgba(255,255,255,0.1);
  border-radius  : 60px;
  padding        : 14px 10px;
  box-shadow     : 0 8px 32px rgba(0,0,0,0.3);
  max-height     : 360px;
  overflow       : hidden;
}

.amh-thumb {
  width          : 62px;
  height         : 62px;
  border-radius  : 50%;
  overflow       : hidden;
  border         : 3px solid transparent;
  background     : transparent;
  cursor         : pointer;
  padding        : 0;
  transition     : border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  flex-shrink    : 0;
  position       : relative;
}
.amh-thumb::after {
  content    : '';
  position   : absolute;
  inset      : 0;
  border-radius: 50%;
  background : rgba(0,0,0,0.3);
  transition : opacity 0.3s;
}
.amh-thumb.is-active {
  border-color: var(--amh-orange);
  transform   : scale(1.1);
  box-shadow  : 0 0 0 3px rgba(232,98,26,0.3);
}
.amh-thumb.is-active::after { opacity: 0; }
.amh-thumb:hover { transform: scale(1.08); border-color: rgba(232,98,26,0.5); }
.amh-thumb:hover::after { opacity: 0; }

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

/* ── Dots ── */
.amh-dots {
  display        : flex;
  flex-direction : column;
  gap            : 6px;
  align-items    : center;
  margin-top     : 8px;
}
.amh-dot {
  width        : 6px;
  height       : 6px;
  border-radius: 50%;
  background   : rgba(255,255,255,0.25);
  border       : none;
  cursor       : pointer;
  padding      : 0;
  transition   : background 0.3s, transform 0.3s, height 0.3s;
}
.amh-dot.is-active {
  background : var(--amh-orange);
  height     : 16px;
  border-radius: 3px;
  transform  : scaleX(1.2);
}
@media (max-width: 768px) {
    .amh-dot.is-active {
        width: 16px !important;
        height: 6px !important;
    }
    .amh-sub {
        max-width: 100% !important;
    }
}
/* ── No items fallback ── */
.amh-no-items {
  padding    : 40px;
  text-align : center;
  color      : #999;
  direction  : rtl;
}

/* ── Transition class for data fields ── */
.amh-dish-title.amh-fade,
.amh-dish-desc.amh-fade,
.amh-meta-value.amh-fade {
  opacity   : 0;
  transform : translateY(8px);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .amh-hero        { height: auto !important; flex-direction: column; padding: 24px 0; }
  .amh-left        { flex: unset; width: 100%; padding: 20px 24px 0; position: relative; }
  .amh-center      { flex: unset; width: 100%; padding: 20px 0; }
  .amh-right       { flex: unset; width: 100%; flex-direction: row; padding: 0 24px 24px; }
  .amh-meta-bar    { position: static; margin-top: 12px; }
  .amh-thumb-list  { flex-direction: row; max-height: unset; border-radius: 40px; padding: 10px 14px; }
  .amh-dots        { flex-direction: row; }
  .amh-scroll-indicator { display: none; }
  .amh-ring        { display: none; }
  .amh-dish-wrap   { width: 260px; height: 260px; }
}

@media (max-width: 580px) {
  .amh-headline { font-size: 1.8rem; }
  .amh-dish-wrap { width: 200px; height: 200px; }
  .amh-thumb    { width: 50px; height: 50px; }
  .amh-right    { justify-content: center; }
}