* { box-sizing: border-box; font-family: system-ui, Arial, sans-serif; }
body { margin: 0; background: #f7f7f7; }
.container { max-width: 700px; margin: 24px auto; padding: 0 12px; }
h1 { margin-bottom: 16px; }
.card { background: #fff; padding: 16px; margin-bottom: 12px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.05); }

.card1 {
  margin: 20px auto;
  padding: 10px 22px;
  max-width: 600px;
  border-radius: 14px;
  border: 1px solid #c9eecb;             /* soft green border */
  background: #f5fff6;                   /* very light green background */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  line-height: 1.55;
  font-size: 15px;
  text-align: center;                    /* center align text */
  color: #1d4122;                        /* readable dark green text */
  font-weight: 500;
  transition: all 0.25s ease;
}
.hidden { display: none; }
label { display: block; margin: 8px 0; }
input, select, button { padding: 10px; border: 1px solid #ddd; border-radius: 8px; width: 100%; }
button { cursor: pointer; background: #111; color: #fff; margin-top: 8px; }
button:disabled { opacity: 0.6; cursor: not-allowed; }
.row { display: flex; gap: 8px; }
.msg { margin-top: 8px; font-size: 14px; }
.msg.error { color: #c00; }
.msg.ok { color: #0a0; }
.hint { font-size: 12px; color: #666; margin-top: 8px; }
#preview img { max-height: 80px; margin: 4px; border-radius: 8px; border: 1px solid #eee; }
.button { display:inline-block; padding:10px 14px; border-radius:8px; background:#111; color:#fff; text-decoration:none; }
.notice-error { background:#fff3f3; border:1px solid #f0caca; color:#b30000; }
.notice-ok { background:#f3fff3; border:1px solid #caf0ca; color:#0b6b0b; }
/* ---- Product picker layout ---- */
#productList { margin-top: 8px; }
#productList .item {
  display: grid;
  grid-template-columns: 28px 72px 1fr 140px;  /* checkbox | image | text | qty */
  gap: 12px;
  align-items: center;
  padding: 14px 4px;
  border-bottom: 1px solid #eee;
}

#productList .check {
  display: flex;
  justify-content: center;
}
#productList .check input {
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin: 0;                 /* no extra space */
}

#productList .thumb {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #e6e6e6;
}

#productList .meta {
  min-width: 0;              /* allow ellipsis */
}
#productList .name {
  font-weight: 700;
  font-size: 15px;
  color: #111;
  line-height: 1.25;
  word-break: break-word;
}
#productList .sub {
  margin-top: 4px;
  font-size: 12px;
  color: #666;
}

#productList .qty select {
  width: 120px;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}

/* Mobile: tighten qty column */
@media (max-width: 560px) {
  #productList .item {
    grid-template-columns: 24px 64px 1fr 110px;
    gap: 10px;
  }
  #productList .thumb { width: 64px; height: 64px; }
  #productList .qty select { width: 100px; }
}


#productList label {
  font-size: 14px;
  color: #222;
}

/* ----- Action tiles ----- */
.tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 12px;
}

.tile {
  display: grid;
  align-content: center;
  gap: 6px;
  min-height: 110px;
  width: 100%;
  padding: 16px;
  border: 2px solid #e5e7eb;          /* neutral border */
  background: #fff;                    /* neutral bg */
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  transition: border-color .15s ease, box-shadow .15s ease, transform .03s ease;
  text-align: left;
}

.tile:focus { outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.25); }
.tile:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.06); }

.tile-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: #111;
}
.tile-sub {
  font-size: 13px;
  color: #666;
}

/* selected state: only colored when chosen */
.tile.selected {
  border-color: #2563eb;               /* blue border */
  box-shadow: 0 6px 20px rgba(37,99,235,.15);
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 60%);
}

/* ----- Smaller nav buttons (Back/Next) ----- */
.nav { display: flex; gap: 8px; margin-top: 12px; }
.nav button {
  padding: 8px 12px;                   /* smaller than default buttons */
  font-size: 14px;                     /* smaller text */
  border-radius: 10px;
}
.nav .back { background: #6b7280; }    /* grey */
.nav .next { background: #111; }       /* dark */

/* Size picker under a product row */
/* --- Size picker: single row (max 2 rows), square chips --- */
.size-picker {
  grid-column: 2 / -1;                 /* keep under image→qty columns */
  margin: 8px 0 2px 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;       /* each chip as wide as needed */
  grid-template-rows: repeat(2, auto);  /* at most 2 rows */
  gap: 8px 10px;
  overflow-x: auto;                     /* if too many, scroll sideways */
  padding-bottom: 2px;
  scroll-snap-type: x proximity;
}

.size-chip {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;                         /* square */
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #111;
  text-transform: uppercase;
  letter-spacing: .3px;
  cursor: pointer;
  user-select: none;
  scroll-snap-align: start;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.size-chip:hover { border-color: #bdbdbd; }
.size-chip.active {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 4px 12px rgba(37,99,235,.12);
}
.size-chip.oos {
  opacity: .45;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* tighter on small screens */
@media (max-width: 560px) {
  .size-chip { width: 40px; height: 40px; font-size: 12px; }
  .img-grid { grid-template-columns: 1fr; }
}

/* ---- Images grid ---- */
.img-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 8px;
}

.img-cell label {
  display: block;
  font-weight: 500;
  margin-bottom: 8px;
}

.img-drop {
  display: grid;
  place-items: center;
  gap: 8px;
  border: 1px dashed #d6d6d6;
  border-radius: 12px;
  background: #fafafa;
}

.img-drop input[type="file"] {
  width: 100%;
}

.img-drop img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #eee;
}
/* --- Action Notice box --- */
.notice {
  margin: 14px 0 6px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  line-height: 1.4;
  font-size: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

/* Return (wallet credit) – red theme */
.notice.return {
  background: #e74c3c1a;          /* light red */
  border-color: #e74c3c;
  color: #8f2a21;
}

/* Exchange – info theme */
.notice.exchange {
  background: #2563eb1a;          /* light blue */
  border-color: #2563eb;
  color: #1f3b8a;
}

/* Title line inside notice */
.notice .title {
  display: block;
  font-weight: 800;
  margin-bottom: 6px;
  letter-spacing: .2px;
}

/* Small helper text */
.notice .note {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
}
/* Reason radio list (like tiles) */
.reason-list {
  display: grid;
  gap: 1px;
  margin: 10px 0 6px;
}

.reason-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px;
  background: #f7f7f7;
  border: 1px solid #eee;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.reason-option:hover {
  background: #f3f3f3;
  border-color: #e3e3e3;
}

.reason-option input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #2563eb;  /* modern browsers */
}

.reason-option span {
  font-weight: 700;
  color: #222;
}

.hidden { display: none !important; }  /* ensure hint stays hidden */

/* Reason-specific notice (under reason list) */
#reasonNotice {
  margin-top: 16px;
  padding: 14px 18px;
  background: #fff6f6;
  border: 1px solid #ffcccc;
  border-radius: 12px;
  color: #8f2a21;
  font-size: 14px;
  line-height: 1.5;
}

#reasonNotice {
  opacity: 0;
  transition: opacity 0.3s ease;
}
#reasonNotice:not(.hidden) {
  opacity: 1;
}
/* Issue textarea */
#step-issue textarea {
  width: 100%;
  min-height: 160px;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  background: #fff;
}
#step-issue .req { color: #dc2626; }

.success-box {
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 12px;
  background: #eef9f0;
  border: 1px solid #b6e3c0;
  color: #166534;
}
.hidden { display: none !important; }
/* Busy / spinner */
.busy {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px; color: #111;
}
.busy .spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid #ccc; border-top-color: #111;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.hidden { display: none !important; }

.page-title {
  text-align: center;          /* This centers the text */
  background-color: #f4f4f4;   /* This adds a light grey highlight */
  padding: 15px;               /* Adds space around the text */
  border-radius: 5px;          /* Optional: adds nice rounded corners */
}
.busy { display:flex; align-items:center; gap:10px; font-weight:600; }
.hidden { display:none !important; }

.spinner {
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(0,0,0,.15);
  border-top-color: rgba(0,0,0,.55);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.bofrike-footer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 20px;
  max-width: 600px;
  margin: 40px auto 20px;
  padding: 20px 10px;
  border-top: 1px solid #e6e6e6;
  background: #fafafa;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.bofrike-footer a {
  display: block;
  padding: 6px 0;
  color: #1d4122; /* your theme’s dark green tone */
  font-weight: 500;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.25s ease, color 0.25s ease;
}

.bofrike-footer a:hover {
  background: #e9f9ea;
  color: #0d3215;
}

@media (max-width: 480px) {
  .bofrike-footer {
    grid-template-columns: 1fr;
  }
}
input,
select,
textarea {
  font-size: 16px !important;
}