/* Jフェス 33.1.0 前方エリア入場券詳細
   出典:
     - res/layout/fragment_ticket_front_area_detail.xml (メイン)
     - res/layout/ticket_front_area_unuse.xml (ViewPager 位置 0)
     - res/layout/ticket_front_area_used.xml (ViewPager 位置 1)
     - res/values/colors.xml, dimens.xml, styles.xml
     - res/drawable-xhdpi/ic_ticket_front_area_divider_circle_up.png (24x4)
     - res/drawable-xhdpi/ic_ticket_front_area_divider_circle_down.png (24x4)
     - jp/co/rockinon/fesapp/ui/ticket/TicketFrontAreaDetailFragment (kt)
     - jp/co/rockinon/fesapp/extension/ViewExtKt (BindingAdapter backgroundHexStr)
     - jp/co/rockinon/fesapp/ui/ticket/viewmodel/TicketFrontAreaItem (colorCode/faceImage/…)
*/

.fae-screen {
  /* SwipeRefreshLayout に BindingAdapter で colorCode(16進) を setBackground。
     HILLSIDE STAGE 用の実 colorCode は API 由来のためスクショから目測: #a5daed */
  background: #a5daed;
  min-height: 100svh;
  color: #3a3536; /* fix_main_text */
  font-family: -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 21px; /* ScrollView 内 ConstraintLayout paddingBottom=21dp */
}

/* 赤い注意バナー: ticketFrontAreadetailTopNoticeLayout bg=eticketWarningBackground(#e5273e)
   内側 TextView: textStyle=bold, color=white, margin(v/h)=6/16dp,
     style=textTicketFrontDescription (textSize=12dp normal) */
.fae-notice {
  background: #e5273e;
  color: #fff;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

/* ViewPager (MultipointViewPager, height=135dp)
   位置 0 で ticket_front_area_unuse.xml がインフレートされる。
   その中身:
     - ticketFrontAreaUnuseCircle1: 70dp x 70dp @drawable/ticket_front_area_notuse_circle
       (oval solid #80ffffff = 半透明 50% 白)
     - ticketFrontAreaUnuseCircle2: 同上
     - 2 円は chainStyle="packed" で中央にまとまり、marginEnd=35dp/marginStart=35dp で
       中心間ギャップ=70dp
     - 下端に ticketFrontAreaDetailDottedDividerLayout (up-style, ミシン目)
*/
.fae-viewpager {
  position: relative;
  height: 135px;
  overflow: visible; /* wave-layer が 270dp まで下方向に延びるため */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
/* ViewPager (2 ページ、横並び) - MultipointViewPager の相当。
   左スワイプで page1(used) が現れ、放すと確定して setScrollable(false) 相当で戻れなくなる。 */
.fae-viewpager__pages {
  position: absolute;
  inset: 0;
  display: flex;
  width: 200%;
  will-change: transform;
  /* Android ViewPager 相当: SmoothScroll のサイン波を近似する Material Standard Decelerate */
  transition: transform 300ms cubic-bezier(0.35, 0, 0.15, 1);
}
.fae-viewpager__pages.is-dragging {
  transition: none;
}
.fae-viewpager__pages.is-used {
  transform: translateX(-50%);
}
.fae-viewpager__page {
  position: relative;
  width: 50%; /* .fae-viewpager__pages が 200% なので 50% = 実表示幅 */
  height: 100%;
  overflow: hidden;
}
/* 未使用ページ = ticket_front_area_unuse.xml */
.fae-viewpager__unuse {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 70px; /* 35+35dp */
}
.fae-viewpager__unuse-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5); /* ticket_front_area_notuse_circle: #80ffffff */
}
/* 使用済みページ = ticket_front_area_used.xml
   bg=@color/fix_bg_2(#f3f4f5),
   TextView: 22dp bold color=fix_main_text text=@string/ticket_front_area_detail_used ("ご入場ください") 中央 */
.fae-viewpager__used {
  position: absolute;
  inset: 0;
  background: #f3f4f5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fae-viewpager__used-text {
  font-size: 22px;
  font-weight: 700;
  color: #3a3536;
  letter-spacing: 0.02em;
}
/* ViewPager 底のミシン目 (up-style)
   XML: ticketFrontAreaDetailDottedDividerLayout, height=2dp,
     Start/End にトップ角丸の 5dp x 5dp shape (border_start_up/end_up),
     中央は @drawable/ticket_front_area_dotted_up_border (bitmap tile) */
.fae-viewpager__perf {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
}
.fae-viewpager__perf-line {
  position: absolute;
  left: 5px; right: 5px; top: 0;
  height: 2px;
  background-image: url("../assets/ticket/perforation_up.png");
  background-size: 12px 2px;
  background-repeat: repeat-x;
}
.fae-viewpager__perf-notch {
  position: absolute;
  bottom: 0;
  width: 5px; height: 5px;
  background: #a5daed; /* ステージテーマ色と一致させる (up 系 notch は上向き) */
}
.fae-viewpager__perf-notch--l { left: 0; border-top-right-radius: 5px; }
.fae-viewpager__perf-notch--r { right: 0; border-top-left-radius: 5px; }

/* 波紋レイヤー (絶対配置、ViewPager top からスタート、高さ 270dp)
   Left/Right 波紋 ImageView は 270dp x 270dp (1:1)、中心 (pivot 50%,50%)。
   left は parent 左端、right は parent 右端に中心を持つように配置。
   Fragment.onViewCreated で ScaleAnimation 0→1 + AlphaAnimation 0.4→0 を
   LinearInterpolator 1200ms 無限。Left が最初、Right は 600ms 遅延で開始。 */
.fae-wave-layer {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 270px;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}
/* 常時見えるベース円 (drawable oval solid #808080, base alpha 0.35)。
   element 中心が親の左右端 (top 中央) に来るよう配置。 */
.fae-wave-base,
.fae-wave {
  position: absolute;
  width: 270px;
  height: 270px;
  top: calc(50% - 135px);
  border-radius: 50%;
  background: #808080;
  will-change: transform, opacity;
}
.fae-wave-base { opacity: 0.35; }
.fae-wave-base--left,
.fae-wave--left { left: -135px; }
.fae-wave-base--right,
.fae-wave--right { left: calc(100% - 135px); }

/* 上に重ねるリップルアニメ (Fragment 側の ScaleAnimation 0→1 + AlphaAnimation 0.4→0 を再現)
   ※ prefers-reduced-motion 対応はあえて外す。本物 (Fragment) では OS 設定に関係なく
      onViewCreated で 1200ms 無限ループさせるため、Web でも常にアニメする。 */
.fae-wave {
  transform: scale(0);
  transform-origin: center center;
  animation: fae-wave-ripple 1200ms linear infinite;
  opacity: 0;
}
.fae-wave--right { animation-delay: 600ms; }
@keyframes fae-wave-ripple {
  0%   { transform: scale(0); opacity: 0.4; }
  100% { transform: scale(1); opacity: 0;   }
}

/* Fragment 側のミシン目 (down-style, height=2dp, ViewPager の下、Card の上)
   XML: same のスタイルだが notch は下向き (bottom radius)、tile は down.png */
.fae-perforation {
  position: relative;
  height: 2px;
  margin: 0;
  z-index: 3;
}
.fae-perforation__line {
  position: absolute;
  left: 5px; right: 5px; top: 0;
  height: 2px;
  background-image: url("../assets/ticket/perforation_down.png");
  background-size: 12px 2px;
  background-repeat: repeat-x;
}
.fae-perforation__notch {
  position: absolute;
  top: 0;
  width: 5px; height: 5px;
  background: #a5daed; /* ステージテーマ色 */
}
.fae-perforation__notch--l { left: 0; border-bottom-right-radius: 5px; }
.fae-perforation__notch--r { right: 0; border-bottom-left-radius: 5px; }

/* 白いカード
   MaterialCardView, marginTop=26dp, marginBottom=21dp, marginStart/End=16dp,
   elevation=0, cardBackgroundColor=@color/white(#fff),
   cardCornerRadius=8dp, strokeColor=ticketFrontAreaDetailCardBorder(#a0a0a0), strokeWidth=1dp */
.fae-card {
  position: relative;
  margin: 26px 16px 21px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #a0a0a0;
  padding-bottom: 22px;
  color: #3a3536; /* fix_main_text */
  z-index: 4;
}
.fae-card__fes-name {
  margin: 16px 14px 0;
  font-size: 16px;
  font-weight: 700;
  color: #3a3536;
  line-height: 1.35;
}
.fae-card__stage-name {
  margin: 8px 14px 0;
  font-size: 12px;
  font-weight: 700;
  color: #474749; /* Grey800 */
  line-height: 1.4;
}
.fae-card__divider {
  margin: 16px 0 0;
  height: 1px;
  background: #ececec; /* ticketFrontAreaDetailDivider */
  border: none;
}
.fae-card__datetime {
  margin: 16px 14px 0;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: #3a3536;
}
.fae-card__artist {
  margin: 8px 14px 0;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: #3a3536;
}
.fae-card__seat {
  margin: 8px 14px 0;
  min-height: 50px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  color: #3a3536;
}
/* 申込者情報 + 顔写真 (Guideline 50%): 縦の 2 カラム */
.fae-card__body {
  position: relative;
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 8px;
}
.fae-card__info {
  padding-left: 14px;
  min-width: 0;
}
.fae-card__label {
  font-size: 12px;
  font-weight: 400;
  color: #3a3536;
}
.fae-card__label + .fae-card__value { margin-top: 4px; }
.fae-card__label:not(:first-child) { margin-top: 8px; }
.fae-card__value {
  font-size: 16px;
  font-weight: 700;
  color: #3a3536;
  line-height: 1.2;
  word-break: break-all;
}
.fae-card__face {
  position: relative;
  margin-right: 14px;
  aspect-ratio: 1;
  background: #f3f4f5; /* imagePlaceholder */
  overflow: hidden;
  cursor: pointer;
}
.fae-card__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fae-card__face-placeholder { width: 100%; height: 100%; }
.fae-card__face-placeholder svg { width: 100%; height: 100%; display: block; }

/* 顔写真拡大ボタン */
.fae-card__face-btn {
  margin: 16px 14px 0;
  padding: 12px 14px;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  background: #fff;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: #3a3536;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  width: calc(100% - 28px);
}
.fae-card__face-btn svg { width: 18px; height: 18px; color: #a0a0a0; }

/* ticket-name (説明1、赤): color=fix_accent(#e5273e), marginTop=32dp, marginStart/End=14dp,
   style=textTicketFrontDescription (textSize=12dp normal) */
.fae-card__ticket-name {
  margin: 32px 14px 0;
  font-size: 12px;
  font-weight: 400;
  color: #e5273e;
  line-height: 1.7;
}
.fae-card__ticket-name p { margin: 0 0 4px; padding-left: 1em; text-indent: -1em; }
.fae-card__ticket-name p:last-child { margin-bottom: 0; }

/* description (説明2、通常): color=fix_main_text, marginTop=32dp, marginStart/End=14dp */
.fae-card__desc {
  margin: 32px 14px 0;
  font-size: 12px;
  font-weight: 400;
  color: #3a3536;
  line-height: 1.7;
}
.fae-card__desc p { margin: 0 0 4px; padding-left: 1em; text-indent: -1em; }

/* 顔写真拡大モーダル */
.fae-face-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: none;
  flex-direction: column;
}
.fae-face-modal.is-open { display: flex; }
.fae-face-modal__close {
  position: absolute;
  top: 20px;
  left: 12px;
  width: 24px; height: 24px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: #fff;
  z-index: 2;
}
.fae-face-modal__close svg { width: 24px; height: 24px; fill: currentColor; }
.fae-face-modal__img {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 12px 12px 24px 12px;
}
.fae-face-modal__img > * { max-width: 100%; max-height: 100%; object-fit: contain; }