/*
Theme Name: Child
Description: Order form custom styles - Kaneka UI Complete (stable mobile rows)
*/

/* ========== 共通 ========== */
.gk-order-header{ display:flex; align-items:center; gap:12px; margin:8px 0 16px; }
.gk-csv-button{ margin-left:auto; background:#16a34a; color:#fff; text-decoration:none; padding:10px 14px; border-radius:8px; font-weight:800; }
.gk-csv-button:hover{ filter:brightness(1.03); }

/* 外枠 */
.gk-order-table-outer{ width:100%; max-width:980px; margin:0 auto; overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* テーブル */
.gk-order-table{
  width:100%; max-width:980px; margin:0 auto;
  border-collapse:separate; border-spacing:0; background:#fff; font-size:15px;
  min-width:720px;
  table-layout:fixed; /* 列幅安定 */
}
.gk-order-table thead th{
  background:#0e3a66 !important; color:#fff !important; text-align:left;
  padding:10px 12px; border:1px solid #e5e7eb; font-weight:700; white-space:nowrap;
}
.gk-order-table tbody td{ border:1px solid #e5e7eb; padding:8px 10px; vertical-align:middle; }

/* 列幅（PC基準） */
.th-name{ width:auto; }
.th-spec{ width:18%; }
.th-shipping{ width:8%; text-align:center; white-space:nowrap; }
.th-qty{ width:220px; } /* PC: 42px角×4 + gap8px×3 ≒ 220 */

/* ========== 商品名 ========== */
.gk-name-wrap{ display:block; position:relative; line-height:1.1; }
.gk-name-top{ display:flex; gap:6px; color:#6b7280; font-size:11px; line-height:1.1; margin-bottom:1px; align-items:baseline; }
.gk-sku{ font-weight:700; color:#0f172a; }
.gk-maker{ font-weight:500; color:#475569; }
.gk-name-mid{ margin:0 0 2px; color:#475569; font-size:11px; line-height:1.1; }
.gk-title{ margin:0 0 1px; font-weight:800; color:#0f172a; line-height:1.2; font-size:14px; }

/* ========== 規格 ========== */
.gk-spec-cell{ color:#475569; line-height:1.2; }
.gk-spec-main{ font-size:13px; font-weight:600; line-height:1.2; margin-bottom:1px; }
.gk-spec-temp{ margin:0; font-size:11px; color:#6b7280; line-height:1.1; }

/* ========== 送料 ========== */
.gk-shipping-cell{ text-align:center; }
.gk-shipping-badge{ display:inline-block; padding:4px 10px; border-radius:4px; font-size:13px; font-weight:700; }
.gk-shipping-free{ color:#16a34a; background:#dcfce7; }
.gk-shipping-paid{ color:#ea580c; background:#fed7aa; }

/* ========== 数量/単位（PC） ========== */
:root{
  --gk-btn-pc: 42px;   /* ボタン角サイズ(PC) */
  --gk-gap-pc: 8px;    /* ボタン間隔(PC) */
  --gk-btn-sp: 40px;   /* ボタン角サイズ(SP) */
  --gk-gap-sp: 6px;    /* ボタン間隔(SP) */
}

.gk-qty-unit-cell{
  width:220px !important; min-width:220px !important; max-width:220px !important;
  padding:0 !important; vertical-align:middle !important;
}
.gk-qty-line{
  display:grid; grid-template-columns:repeat(4,var(--gk-btn-pc)); grid-auto-rows:var(--gk-btn-pc);
  column-gap:var(--gk-gap-pc); align-items:center; justify-content:start;
  width:calc(var(--gk-btn-pc)*4 + var(--gk-gap-pc)*3);
  margin:8px auto 4px;
}
.gk-minus,.gk-plus,.gk-trash,.gk-input{
  width:var(--gk-btn-pc) !important; height:var(--gk-btn-pc) !important;
  min-width:var(--gk-btn-pc) !important; min-height:var(--gk-btn-pc) !important;
  max-width:var(--gk-btn-pc) !important; max-height:var(--gk-btn-pc) !important;
  box-sizing:border-box !important;
}
.gk-input{
  appearance:textfield; -moz-appearance:textfield;
  text-align:center; font-size:16px; font-weight:700; line-height:var(--gk-btn-pc) !important;
  border:1px solid #cbd5e1; border-radius:6px; background:#eef2f7; color:#111827; padding:0 !important; margin:0 !important;
}
.gk-input::-webkit-outer-spin-button,.gk-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.gk-minus,.gk-plus,.gk-trash{
  border:none; border-radius:6px; cursor:pointer; color:#fff; font-weight:900; font-size:20px;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25); transition:.15s ease; padding:0 !important; margin:0 !important; line-height:1 !important;
}
.gk-minus{ background:#F97316; }  /* − */
.gk-plus { background:#22C55E; }  /* ＋ */
.gk-trash{ background:#4B5563; font-size:18px; } /* 🗑 */
.gk-minus:hover,.gk-plus:hover,.gk-trash:hover{ filter:brightness(1.06); }

.gk-unit-line{ margin:0 10px 8px !important; padding:0 !important; }
.gk-unit-badge{ display:inline-block; padding:4px 10px; border:1px solid #cbd5e1; border-radius:999px; background:#eef2ff; color:#111827; font-weight:700; font-size:12px; line-height:1; }

/* ========== スマホ用トグル ========== */
.gk-toggle-btn{ display:none; margin-top:4px; background:#0a3f86; color:#fff; border:none; width:100px; height:26px; border-radius:4px; font-weight:700; align-items:center; justify-content:center; font-size:13px; line-height:1; }
.gk-toggle-icon{ font-size:14px; line-height:1; }

/* ========== スマホ最適化 ========== */
@media (max-width:768px){
  .gk-order-table tbody td{ padding:6px 8px !important; }
  .gk-name-cell{ padding:6px 8px !important; }

  /* ＜（初期）：規格＆送料 非表示 → 2列 */
  .gk-order-table.gk-kaneka:not(.all-expanded) .gk-spec-cell,
  .gk-order-table.gk-kaneka:not(.all-expanded) .gk-shipping-cell{ display:none !important; }
  .gk-order-table.gk-kaneka:not(.all-expanded) .th-spec,
  .gk-order-table.gk-kaneka:not(.all-expanded) .th-shipping{ display:none !important; }

  /* テーブルは画面幅いっぱい */
  .gk-order-table.gk-kaneka:not(.all-expanded){ width:100% !important; min-width:auto !important; }

  /* 数量/単位：SPは 198px固定（40px角×4 + gap6px×3を中央寄せ） */
  .gk-order-table.gk-kaneka:not(.all-expanded) .th-qty{ width:198px !important; }
  .gk-order-table.gk-kaneka:not(.all-expanded) .gk-qty-unit-cell{
    width:198px !important; min-width:198px !important; max-width:198px !important; padding:0 !important;
  }
  .gk-order-table.gk-kaneka:not(.all-expanded) .gk-qty-line{
    grid-template-columns:repeat(4,var(--gk-btn-sp)); grid-auto-rows:var(--gk-btn-sp);
    column-gap:var(--gk-gap-sp);
    width:calc(var(--gk-btn-sp)*4 + var(--gk-gap-sp)*3);
    margin:6px auto 4px;
  }
  .gk-order-table.gk-kaneka:not(.all-expanded) .gk-minus,
  .gk-order-table.gk-kaneka:not(.all-expanded) .gk-plus,
  .gk-order-table.gk-kaneka:not(.all-expanded) .gk-trash,
  .gk-order-table.gk-kaneka:not(.all-expanded) .gk-input{
    width:var(--gk-btn-sp) !important; height:var(--gk-btn-sp) !important;
    min-width:var(--gk-btn-sp) !important; min-height:var(--gk-btn-sp) !important;
    max-width:var(--gk-btn-sp) !important; max-height:var(--gk-btn-sp) !important;
  }
  .gk-order-table.gk-kaneka:not(.all-expanded) .gk-input{ line-height:var(--gk-btn-sp) !important; font-size:16px !important; }

  /* 商品名は“残り幅ぜんぶ”を自動で使用（WIDTH指定しない） */
  .gk-name-wrap{ white-space:nowrap; overflow:hidden; }
  .gk-title,.gk-name-top{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  .gk-toggle-btn{ display:inline-flex; }

  /* ＞（展開）時：横スクロール可／送料見出しは縮小＆改行禁止 */
  .gk-order-table.gk-kaneka.all-expanded{ min-width:680px; }
  .gk-order-table.gk-kaneka.all-expanded .th-shipping{
    white-space:nowrap; font-size:clamp(11px, 2.6vw, 13px); min-width:58px;
  }
}

/* ======= SP：行高暴れ防止（テーブルセルのまま・基準高さ72px） ======= */
@media (max-width:768px){
  .gk-order-table.gk-kaneka tbody td{
    display:table-cell !important;     /* ← flexを使わない */
    vertical-align:middle !important;
    min-height:72px;                    /* 改行なし時の基準高さ */
    padding-top:6px; padding-bottom:6px;
    overflow:visible;
  }

  /* 数量セルは独自余白に合わせて上下パディング0 */
  .gk-order-table.gk-kaneka .gk-qty-unit-cell{
    padding-top:0 !important; padding-bottom:0 !important;
  }
  .gk-order-table.gk-kaneka .gk-qty-line{ margin-top:6px; margin-bottom:4px; }

  /* 送料バッジの上下パディングで伸びにくくする */
  .gk-order-table.gk-kaneka .gk-shipping-badge{ padding:3px 10px; line-height:1.1; }
}

/* ======= SP「＞」時：規格は2行（上：規格／下：温度帯） ======= */
@media (max-width:768px){
  .gk-order-table.gk-kaneka.all-expanded .gk-spec-cell{
    white-space:normal !important;     /* 省略をやめる */
    overflow:visible !important;
    text-overflow:clip !important;
  }
  .gk-order-table.gk-kaneka.all-expanded .gk-spec-main{
    display:block; margin:0 0 2px; font-size:13px; font-weight:600; line-height:1.2;
  }
  .gk-order-table.gk-kaneka.all-expanded .gk-spec-temp{
    display:block; margin:0; font-size:11px; color:#6b7280; line-height:1.1;
  }
}

/* ========== 固定カートボタン ========== */
#gk-fcb{
  position:fixed; right:16px; bottom:20px; z-index:99999;
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:999px; text-decoration:none; font-weight:800; color:#fff;
  background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%); box-shadow:0 14px 30px rgba(0,0,0,.28);
}
#gk-fcb .fcb-icon{ font-size:18px; line-height:1; }
#gk-fcb .fcb-label{ font-size:15px; }
#gk-fcb .fcb-count{
  position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; color:#fff; background:#ef4444; box-shadow:0 0 0 2px rgba(255,255,255,.9);
}
@media (max-width:768px){
  #gk-fcb{ left:12px; right:auto; width:56px; height:56px; padding:0; border-radius:50%; justify-content:center;
    background:rgba(34,197,94,.70); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 8px 18px rgba(0,0,0,.25);
  }
  #gk-fcb .fcb-label{ display:none !important; }
  #gk-fcb .fcb-icon{ font-size:24px; }
  body{ padding-bottom:90px; }
}

/* ========== ログイン/ログアウト ========== */
.gk-loginbox,.gk-logoutbox{ max-width:420px; margin:40px auto; padding:28px; background:#fff; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,.08); }
.gk-loginbox h3,.gk-logoutbox h3{ margin:0 0 10px; font-size:20px; color:#0f172a; text-align:center; }
.gk-loginbox__help{ text-align:center; margin-top:12px; font-size:14px; }
.gk-logoutbox__icon{ text-align:center; font-size:26px; margin-bottom:10px; }
.gk-logoutbox__buttons{ display:flex; gap:12px; justify-content:center; }
.gk-btn{ display:inline-block; padding:10px 18px; border-radius:8px; background:#64748b; color:#fff; font-weight:800; text-decoration:none; border:none; cursor:pointer; }
.gk-btn--danger{ background:#ef4444; }