/* Wrapper */
.pi-wrap{
    width:100%;
}

/* Search bar */
.pi-search{
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:6px;
  padding:18px;
  display:flex;
  gap:16px;
  align-items:center;
}

.pi-search-wrap{
  position:relative;
  flex:1;
  display:block;
}

.pi-search .pi-search-input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  font-size:18px;
  line-height:1.2;
  padding:10px 42px 10px 12px; /* right space for X */
  color:#333;
}

.pi-search button[type="submit"]{
  background:#8B0000;
  color:#fff;
  border:0;
  border-radius:4px;
  padding:10px 18px;
  font-weight:700;
  letter-spacing:.5px;
  cursor:pointer;
  min-width:150px;
  box-shadow:0 2px 0 rgba(0,0,0,.08);
}

.pi-search button[type="submit"]:hover{filter:brightness(0.95);}

/* Clear button */
/* Clear button - always present, just hidden when empty (bulletproof) */
.pi-search-clear{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  border-radius:6px;
  border:0;
  background:transparent;
  cursor:pointer;
  color:#999;

  display:flex;                 /* <-- ΠΑΝΤΑ παρόν */
  align-items:center;
  justify-content:center;

  opacity:0;                    /* <-- κρυφό όταν άδειο */
  pointer-events:none;          /* <-- μη κλικάρισιμο όταν άδειο */
  transition:opacity .12s ease, color .12s ease;
}

.pi-search-wrap.has-value .pi-search-clear{
  opacity:1;
  pointer-events:auto;
}

.pi-search-clear:hover{color:#333;}

.pi-search-wrap.has-value .pi-search-clear{display:block;}

/* Tabs */
.pi-tabs{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;}
.pi-tab{
  display:inline-flex;align-items:center;
  padding:8px 14px;border:1px solid #e6e6e6;border-radius:6px;
  background:#fff;color:#333;text-decoration:none;font-weight:700;font-size:13px;
}
.pi-tab:hover{border-color:#d9d9d9;box-shadow:0 6px 18px rgba(0,0,0,.04);}
.pi-tab.is-active{border-color:#8B0000;color:#8B0000;}

/* List */
.pi-list{margin-top:22px;display:flex;flex-direction:column;gap:18px;}

/* Card */
.pi-card{
  position:relative;
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:6px;
  transition:box-shadow .15s ease,border-color .15s ease;
}
.pi-card:hover{border-color:#d9d9d9;box-shadow:0 6px 18px rgba(0,0,0,.06);}

.pi-card__body{
  display:block;
  padding:18px 64px 18px 18px;
  text-decoration:none;
}
.pi-card__title{color:#222;font-size:16px;line-height:1.35;font-weight:600;}
.pi-card__meta{margin-top:10px;display:flex;align-items:center;gap:10px;}
.pi-card__when{color:#777;font-size:13px;display:inline-flex;align-items:center;gap:8px;}
.pi-card__when svg{width:14px;height:14px;opacity:.75}

/* Favorite */
.pi-fav{
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;
  border:1px solid #d9d9d9;background:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .08s ease, box-shadow .15s ease, border-color .15s ease;
}
.pi-fav:hover{box-shadow:0 4px 12px rgba(0,0,0,.08);}
.pi-fav:active{transform:translateY(-50%) scale(0.95);}

.pi-heart{font-size:18px;line-height:1;color:#777;}
.pi-fav.is-active{border-color:#8B0000;}
.pi-fav.is-active .pi-heart{color:#8B0000;}

/* Empty */
.pi-empty{
  background:#fff;border:1px solid #e6e6e6;border-radius:6px;padding:18px;color:#666;
}

/* Toast */
.pi-toast{
  position:fixed;
  right:24px;
  bottom:24px;
  background:#333;
  color:#fff;
  padding:12px 16px;
  border-radius:6px;
  font-size:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  opacity:0;
  transform:translateY(10px);
  transition:opacity .2s ease, transform .2s ease;
  z-index:999999;
  max-width:min(420px, calc(100vw - 48px));
  pointer-events:none;
}
.pi-toast.is-visible{opacity:1;transform:translateY(0);}
.pi-toast.is-success{background:#2e7d32;}
.pi-toast.is-remove{background:#8B0000;}
.pi-toast.is-error{background:#333;}