/* ==========================================================================
   Sticker Picker — Tickchak Design System
   Mode selector (icon+color / image), 20 3D icons, 10 pastel colors
   Required: tokens.css, button.css (for .btn in actions)
   Usage: <div class="sp-mode-selector">...</div>
   ========================================================================== */

/* === Mode Selector (Component 802) === */
.sp-mode-selector{
  width:100%;height:64px;
  border-radius:var(--r-xl);
  background:var(--ta-color-bg-surface);
  padding:var(--space-md);
  display:flex;align-items:center;
  gap:0;
}
.sp-mode-tab{
  flex:1;height:44px;
  border-radius:var(--r-xl);
  display:flex;align-items:center;justify-content:center;
  gap:var(--space-sm);
  cursor:pointer;border:none;background:transparent;
  font-family:'Google Sans','Assistant',sans-serif;
  font-size:var(--f-btn-cat);
  font-weight:600;
  line-height:120%;
  color:var(--ta-color-text-default);
  transition:background .2s,height .2s;
  padding:var(--space-md) var(--space-sm);
}
.sp-mode-tab.active{
  height:48px;
  background:var(--ta-color-bg-base);
  border-radius:var(--r-lg);
  padding:var(--space-sm);
}
.sp-mode-tab svg{width:20px;height:20px;flex-shrink:0;}

/* === Content === */
.sp-content{
  display:flex;flex-direction:column;
  gap:var(--space-lg);
  align-items:center;
}
.sp-panel{display:none;flex-direction:column;gap:var(--space-lg);width:100%;align-items:center;}
.sp-panel.active{display:flex;}

/* === Subtitle === */
.sp-subtitle{
  font-family:'Google Sans','Assistant',sans-serif;
  font-size:var(--f-caption);
  font-weight:400;
  line-height:110%;
  color:var(--ta-color-text-default);
  text-align:right;
  width:100%;
  align-self:stretch;
}

/* === Grids container === */
.sp-grids{
  display:flex;
  gap:var(--space-2xl);
  width:100%;
  align-self:stretch;
}

/* === Grid section === */
.sp-grid-section{
  flex:1;min-width:0;
  display:flex;flex-direction:column;
  gap:10px;
}

/* Grid header */
.sp-grid-header{
  display:flex;align-items:center;
  gap:var(--space-sm);
  height:28px;
  width:100%;
}
.sp-grid-label{
  font-family:'Google Sans','Assistant',sans-serif;
  font-size:var(--f-caption);
  font-weight:400;
  line-height:110%;
  color:var(--ta-color-text-default);
}

/* Chip button for set navigation */
.sp-set-btn{
  height:28px;padding:0 var(--space-lg) 0 var(--space-sm);
  border-radius:100px;border:none;
  background:var(--ta-color-bg-surface);
  font-family:'Google Sans','Assistant',sans-serif;
  font-size:var(--f-chip);
  font-weight:700;
  color:var(--ta-color-text-default);
  cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-sm);
  transition:background .2s;
  flex:1;
}
.sp-set-btn:hover{background:var(--ta-color-bg-surface-hover);}
.sp-set-btn svg{width:16px;height:16px;flex-shrink:0;}

/* === Color grid === */
.sp-color-grid{
  display:flex;flex-wrap:wrap;
  gap:var(--space-sm);
}
.sp-color{
  width:50px;height:50px;
  border-radius:3px;
  cursor:pointer;
  border:3px solid transparent;
  transition:transform .15s,border-color .2s;
}
.sp-color:hover{transform:scale(1.08);}
.sp-color.selected{border-color:var(--ta-color-brand-main);}

/* === Icon grid === */
.sp-icon-grid{
  display:flex;flex-wrap:wrap;
  gap:var(--space-sm);
}
.sp-icon{
  width:50px;height:50px;
  border-radius:var(--r-md);
  cursor:pointer;
  border:1px solid var(--ta-color-border-subtle);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s,border-color .2s,box-shadow .2s;
}
.sp-icon:hover{transform:scale(1.08);}
.sp-icon.selected{border-color:var(--ta-color-brand-main);box-shadow:0 0 0 2px var(--ta-color-brand-main);}
.sp-icon img{width:44px;height:44px;object-fit:contain;pointer-events:none;}

/* === Sub-button (small round 32×32 brand) === */
.btn-sub{width:32px;height:32px;background:var(--ta-color-brand-main);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:100px;transition:background .15s;}
.btn-sub:hover{background:var(--ta-color-brand-hover);}
.btn-sub svg{width:20px;height:20px;}

/* === Image tab === */
.sp-drop-zone{
  width:222px;height:222px;
  border:3px solid var(--ta-color-brand-main);
  border-radius:10px;
  background:var(--ta-color-brand-subtle);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-sm);
  cursor:pointer;
  transition:background .2s;
}
.sp-drop-zone:hover{background:var(--ta-color-brand-hover);}
.sp-drop-text{
  font-family:'Google Sans','Assistant',sans-serif;
  font-size:var(--f-body-sm);
  font-weight:400;
  line-height:120%;
  color:#707070;
  text-align:center;
}

/* Image actions */
.sp-img-actions{
  display:flex;align-items:center;
  gap:15px;
  justify-content:flex-end;
  width:100%;
}
.sp-img-actions-group{display:flex;align-items:center;gap:15px;}

/* === Preview result === */
.sp-result{
  display:none;align-items:center;justify-content:center;
  gap:var(--space-xl);padding:var(--space-xl) 0;
}
.sp-sticker-preview{
  width:80px;height:80px;border-radius:var(--r-xl);
  display:flex;align-items:center;justify-content:center;
  transition:background .3s;
}
.sp-sticker-preview img{width:60px;height:60px;object-fit:contain;}