/* GuildShop (Tienda de Clanes) - UI premium, scoped */

.gb-guildshop {
  max-width: 1240px;
  margin: 0 auto;
  padding: 10px 0 18px;
}

.gb-guildshop-shell{
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(15, 40, 70, .10);
  box-shadow: 0 18px 50px rgba(0,0,0,.10);
  overflow: hidden;
}

.gb-guildshop-head{
  position: relative;
  padding: 18px 18px 16px;
  color: #eaf6ff;
  background:
    radial-gradient(110px 110px at 90px 40px, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 65%),
    radial-gradient(260px 260px at 92% 18%, rgba(0,255,255,.18) 0%, rgba(0,255,255,0) 62%),
    linear-gradient(180deg, #0f3c7a 0%, #0b7bff 100%);
}
.gb-guildshop-head::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:3px;
  background: linear-gradient(90deg, rgba(0,255,255,.9), rgba(255,255,255,.1));
}

.gb-guildshop-head-inner{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}
.gb-guildshop-title{
  display:flex;
  gap:10px;
  align-items:center;
}
.gb-guildshop-title h3{
  margin:0;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: .2px;
}
.gb-guildshop-title p{
  margin:6px 0 0;
  font-size: 12px;
  opacity: .92;
}
.gb-guildshop-title .icon{
  width: 38px;
  height: 38px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.18);
}
.gb-guildshop-title svg{ width: 20px; height: 20px; fill: #eaf6ff; }

.gb-guildshop-search{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: min(520px, 100%);
}
.gb-guildshop-search .field{
  flex: 1;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
}
.gb-guildshop-search .field svg{ width: 18px; height: 18px; fill: rgba(255,255,255,.9); }
.gb-guildshop-search input{
  flex:1;
  border:0;
  outline:0;
  background: transparent;
  color: #fff;
  font-weight: 700;
}
.gb-guildshop-search input::placeholder{ color: rgba(255,255,255,.75); font-weight: 600; }
.gb-guildshop-search button{
  border:0;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 900;
  cursor: pointer;
  color: #083a6b;
  background: linear-gradient(180deg, #f9ff3b 0%, #ffd000 100%);
  box-shadow: 0 10px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.35);
}
.gb-guildshop-search button:hover{ filter: brightness(1.03); }

.gb-guildshop-body{
  padding: 16px 18px 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
}

.gb-guildshop-alert{
  border-radius: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(15,40,70,.10);
  margin-bottom: 12px;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.gb-guildshop-alert strong{ display:block; margin-bottom: 2px; }
.gb-guildshop-alert .ic{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  flex: 0 0 auto;
}
.gb-guildshop-alert svg{ width: 18px; height: 18px; }
.gb-guildshop-alert.success{ background:#e8fff5; border-color:#9fe9cc; color:#0f5132; }
.gb-guildshop-alert.success .ic{ background: rgba(15,81,50,.10); }
.gb-guildshop-alert.success svg{ fill:#0f5132; }
.gb-guildshop-alert.error{ background:#fff0f0; border-color:#ffb7b7; color:#7a1b1b; }
.gb-guildshop-alert.error .ic{ background: rgba(122,27,27,.10); }
.gb-guildshop-alert.error svg{ fill:#7a1b1b; }
.gb-guildshop-alert.warn{ background:#fff9e6; border-color:#ffe08a; color:#7a5a00; }
.gb-guildshop-alert.warn .ic{ background: rgba(122,90,0,.10); }
.gb-guildshop-alert.warn svg{ fill:#7a5a00; }
.gb-guildshop-alert.info{ background:#eef6ff; border-color:#b7d7ff; color:#083a6b; }
.gb-guildshop-alert.info .ic{ background: rgba(8,58,107,.10); }
.gb-guildshop-alert.info svg{ fill:#083a6b; }

.gb-guildshop-filters{
  margin: 12px 0 14px;
  display:flex;
  flex-wrap: wrap;
  gap:10px;
  align-items:center;
  justify-content: space-between;
}
.gb-guildshop-filterbar{
  display:flex;
  flex-wrap: wrap;
  gap:10px;
}
.gb-guildshop-pillbtn{
  border: 1px solid rgba(15,40,70,.12);
  background: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
  cursor: pointer;
  color: #0b2b55;
  display:inline-flex;
  align-items:center;
  gap:8px;
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
}
.gb-guildshop-pillbtn svg{ width:16px; height:16px; fill:#0b2b55; opacity:.9; }
.gb-guildshop-pillbtn:hover{ transform: translateY(-1px); }
.gb-guildshop-pillbtn.active{
  color: #eaf6ff;
  border-color: rgba(255,255,255,.18);
  background: linear-gradient(180deg, #0f3c7a 0%, #0b7bff 100%);
}
.gb-guildshop-pillbtn.active svg{ fill:#eaf6ff; }

.gb-guildshop-count{
  font-weight: 800;
  color: #0b2b55;
  opacity: .8;
}

.gb-guildshop-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1040px){
  .gb-guildshop-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gb-guildshop-search{ min-width: 0; width: 100%; }
  .gb-guildshop-head-inner{ flex-direction: column; align-items: stretch; }
}
@media (max-width: 640px){
  .gb-guildshop-grid{ grid-template-columns: 1fr; }
}

.gb-gs-card{
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(15,40,70,.10);
  overflow:hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease;
  display:flex;
  flex-direction: column;
  min-height: 360px;
}
.gb-gs-card:hover{ transform: translateY(-4px); box-shadow: 0 20px 48px rgba(0,0,0,.12); }

.gb-gs-top{
  padding: 12px 12px 0;
}
.gb-gs-badges{
  display:flex;
  gap:8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.gb-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(15,40,70,.10);
  background: rgba(246,251,255,.9);
  color:#0b2b55;
}
.gb-badge svg{ width: 14px; height: 14px; fill: currentColor; opacity:.9; }
.gb-badge.ok{ background: rgba(232,255,245,.95); border-color:#9fe9cc; color:#0f5132; }
.gb-badge.lock{ background: rgba(255,249,230,.95); border-color:#ffe08a; color:#7a5a00; }
.gb-badge.owned{ background: rgba(238,246,255,.95); border-color:#b7d7ff; color:#083a6b; }

.gb-gs-preview{
  height: 168px;
  border-radius: 14px;
  border: 1px solid rgba(15,40,70,.10);
  background:
    radial-gradient(140px 140px at 40% 40%, rgba(0,255,255,.12) 0%, rgba(0,255,255,0) 65%),
    linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  overflow:hidden;
}
.gb-gs-preview iframe{
  width: 100%;
  height: 100%;
  border: 0;
  image-rendering: pixelated;
}

.gb-gs-meta{
  padding: 12px 14px 0;
  flex: 1;
}
.gb-gs-name{
  font-weight: 950;
  color: #0b2b55;
  font-size: 16px;
  margin: 0 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gb-gs-guild{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(11,123,255,.10);
  border: 1px solid rgba(11,123,255,.18);
  color: #0b2b55;
  font-weight: 900;
  font-size: 12px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gb-gs-guild svg{ width: 14px; height: 14px; fill: #0b7bff; }

.gb-gs-actions{
  padding: 12px 14px 14px;
}
.gb-gs-btn{
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 12px 12px;
  font-weight: 950;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition: filter .15s ease, transform .15s ease;
}
.gb-gs-btn svg{ width: 18px; height: 18px; fill: currentColor; }
.gb-gs-btn.claim{
  color: #062a3a;
  background: linear-gradient(180deg, #34f3ff 0%, #20b3ff 100%);
  box-shadow: 0 14px 24px rgba(11,123,255,.18), inset 0 1px 0 rgba(255,255,255,.35);
}
.gb-gs-btn.claim:hover{ filter: brightness(1.04); transform: translateY(-1px); }
.gb-gs-btn.disabled{
  cursor: not-allowed;
  color: rgba(11,43,85,.55);
  background: linear-gradient(180deg, #f2f2f2 0%, #d9d9d9 100%);
}